!24 Vue3 重构：基础设施 -> 配置管理功能

Merge pull request !24 from 芋道源码/dev

src/components/Dialog/src/Dialog.vue

@@ -8,8 +8,9 @@ const props = defineProps({
   modelValue: propTypes.bool.def(false),
   title: propTypes.string.def('Dialog'),
   fullscreen: propTypes.bool.def(true),
-  maxHeight: propTypes.oneOfType([String, Number]).def('300px'),
-  width: propTypes.oneOfType([String, Number]).def('40%')
+  width: propTypes.oneOfType([String, Number]).def('40%'),
+  scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度
+  maxHeight: propTypes.oneOfType([String, Number]).def('300px')
 })
 
 const getBindValue = computed(() => {
@@ -35,6 +36,7 @@ const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : pr
 watch(
   () => isFullscreen.value,
   async (val: boolean) => {
+    // 计算最大高度
     await nextTick()
     if (val) {
       const windowHeight = document.documentElement.offsetHeight
@@ -80,9 +82,12 @@ const dialogStyle = computed(() => {
       </div>
     </template>
 
-    <ElScrollbar :style="dialogStyle">
+    <!-- 情况一：如果 scroll 为 true，说明开启滚动条 -->
+    <ElScrollbar :style="dialogStyle" v-if="scroll">
       <slot></slot>
     </ElScrollbar>
+    <!-- 情况二：如果 scroll 为 false，说明关闭滚动条滚动条 -->
+    <slot v-else></slot>
 
     <template v-if="slots.footer" #footer>
       <slot name="footer"></slot>

src/components/DictTag/src/DictTag.vue

@@ -34,7 +34,7 @@ export default defineComponent({
         return null
       }
       // 解决自定义字典标签值为零时标签不渲染的问题
-      if (!props.value && props.value !== 0) {
+      if (props.value === undefined) {
         return null
       }
       getDictObj(props.type, props.value.toString())

src/components/Pagination/index.vue

@@ -0,0 +1,75 @@
+<!-- 基于 ruoyi-vue3 的 Pagination 重构，核心是简化无用的属性，并使用 ts 重写 -->
+<template>
+  <el-pagination
+    v-show="total > 0"
+    class="float-right mt-15px mb-15px"
+    :background="true"
+    layout="total, sizes, prev, pager, next, jumper"
+    :page-sizes="[10, 20, 30, 50]"
+    v-model:current-page="currentPage"
+    v-model:page-size="pageSize"
+    :pager-count="pagerCount"
+    :total="total"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  />
+</template>
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  // 总条目数
+  total: {
+    required: true,
+    type: Number
+  },
+  // 当前页数：pageNo
+  page: {
+    type: Number,
+    default: 1
+  },
+  // 每页显示条目个数：pageSize
+  limit: {
+    type: Number,
+    default: 20
+  },
+  // 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
+  // 移动端页码按钮的数量端默认值 5
+  pagerCount: {
+    type: Number,
+    default: document.body.clientWidth < 992 ? 5 : 7
+  }
+})
+
+const emit = defineEmits(['update:page', 'update:limit', 'pagination', 'pagination'])
+const currentPage = computed({
+  get() {
+    return props.page
+  },
+  set(val) {
+    // 触发 update:page 事件，更新 limit 属性，从而更新 pageNo
+    emit('update:page', val)
+  }
+})
+const pageSize = computed({
+  get() {
+    return props.limit
+  },
+  set(val) {
+    // 触发 update:limit 事件，更新 limit 属性，从而更新 pageSize
+    emit('update:limit', val)
+  }
+})
+const handleSizeChange = (val) => {
+  // 如果修改后超过最大页面，强制跳转到第 1 页
+  if (currentPage.value * val > props.total) {
+    currentPage.value = 1
+  }
+  // 触发 pagination 事件，重新加载列表
+  emit('pagination', { page: currentPage.value, limit: val })
+}
+const handleCurrentChange = (val) => {
+  // 触发 pagination 事件，重新加载列表
+  emit('pagination', { page: val, limit: pageSize.value })
+}
+</script>