ruoyi

src/components/SizeSelect/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <el-dropdown trigger="click" @command="handleSetSize">
+      <div class="size-icon--style">
+        <svg-icon class-name="size-icon" icon-class="size" />
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <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>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from 'element-plus'
+
+const store = useStore();
+const size = computed(() => store.getters.size);
+const route = useRoute();
+const router = useRouter();
+const {proxy} = getCurrentInstance();
+const sizeOptions = ref([
+  { label: 'Large', value: 'large' },
+  { label: 'Medium', value: 'medium' },
+  { label: 'Small', value: 'small' },
+  { label: 'Mini', value: 'mini' }
+])
+
+function refreshView() {
+  // In order to make the cached page re-rendered
+  store.dispatch('tagsView/delAllCachedViews', route)
+
+  const { fullPath } = route
+
+  nextTick(() => {
+    router.replace({
+      path: '/redirect' + fullPath
+    })
+  })
+}
+function handleSetSize(size) {
+  proxy.$ELEMENT.size = size;
+  store.dispatch('app/setSize', size)
+  refreshView()
+  ElMessage({
+    message: 'Switch Size Success',
+    type: 'success'
+  })
+};
+</script>
+
+<style lang='scss' scoped>
+.size-icon--style {
+  font-size: 18px;
+  line-height: 50px;
+  padding-right: 7px;
+}
+</style>