From a680a84d91fb6501951d0265e9b347695568c546 Mon Sep 17 00:00:00 2001 From: 抓蛙师 <770492966@qq.com> Date: 星期二, 20 九月 2022 16:41:40 +0800 Subject: [PATCH] !236 前端适配多字段排序功能案例OSS页面(重新排序需点击重置按钮,否则按照点击顺序依次排序,重复点击的字段排序位置不发生改变) * 完善前端适配多字段排序功能案例OSS页面(完善排序图标显示效果和重置效果,支持正序,倒序,取消排序) * 前端适配多字段排序功能案例OSS页面(重新排序需点击重置按钮,否则按照点击顺序依次排序,重复点击的字段排序位置不发生改变) --- ruoyi-ui/src/components/SizeSelect/index.vue | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 56 insertions(+), 0 deletions(-) diff --git a/ruoyi-ui/src/components/SizeSelect/index.vue b/ruoyi-ui/src/components/SizeSelect/index.vue new file mode 100644 index 0000000..069b5de --- /dev/null +++ b/ruoyi-ui/src/components/SizeSelect/index.vue @@ -0,0 +1,56 @@ +<template> + <el-dropdown trigger="click" @command="handleSetSize"> + <div> + <svg-icon class-name="size-icon" icon-class="size" /> + </div> + <el-dropdown-menu slot="dropdown"> + <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value"> + {{ item.label }} + </el-dropdown-item> + </el-dropdown-menu> + </el-dropdown> +</template> + +<script> +export default { + data() { + return { + sizeOptions: [ + { label: 'Default', value: 'default' }, + { label: 'Medium', value: 'medium' }, + { label: 'Small', value: 'small' }, + { label: 'Mini', value: 'mini' } + ] + } + }, + computed: { + size() { + return this.$store.getters.size + } + }, + methods: { + handleSetSize(size) { + this.$ELEMENT.size = size + this.$store.dispatch('app/setSize', size) + this.refreshView() + this.$message({ + message: 'Switch Size Success', + type: 'success' + }) + }, + refreshView() { + // In order to make the cached page re-rendered + this.$store.dispatch('tagsView/delAllCachedViews', this.$route) + + const { fullPath } = this.$route + + this.$nextTick(() => { + this.$router.replace({ + path: '/redirect' + fullPath + }) + }) + } + } + +} +</script> -- Gitblit v1.9.3