feat: 🎸 综合实例重构中

src/components/Dialog/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <el-dialog
+    v-bind="getBindValue"
+    destroy-on-close
+    :close-on-click-modal="false"
+    top="10vh"
+  >
+    <template v-if="slots.title" #title>
+      <slot name="title" />
+    </template>
+
+    <!-- 弹窗内容 -->
+    <el-scrollbar class="com-dialog__content">
+      <slot />
+    </el-scrollbar>
+
+    <template v-if="slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+export default defineComponent({
+  name: 'Dialog',
+  setup(props, { slots, attrs }) {
+    const getBindValue = computed((): any => {
+      const bindValue = { ...attrs, ...props }
+      return bindValue
+    })
+
+    return {
+      getBindValue,
+      slots
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.com-dialog__content {
+  height: 600px;
+}
+</style>

src/components/Editor/props.ts

@@ -11,7 +11,7 @@ export const editorProps = {
     default: () => {
       return {
         height: 500,
-        zIndex: 500,
+        zIndex: 0,
         placeholder: '请输入文本',
         focus: false,
         onchangeTimeout: 500,

src/components/Table/index.vue

@@ -5,7 +5,8 @@
       <el-table-column
         v-if="selection"
         type="selection"
-        width="55"
+        :reserve-selection="reserveSelection"
+        width="40"
       />
       <template v-for="item in columns">
         <!-- 自定义索引 -->
@@ -85,17 +86,25 @@ export default defineComponent({
     TableColumn
   },
   props: {
+    // 表头
     columns: {
       type: Array as PropType<any[]>,
       default: () => []
     },
+    // 是否多选
     selection: {
       type: Boolean as PropType<boolean>,
       default: false
     },
+    // 是否展示分页
     pagination: {
       type: [Boolean, Object] as PropType<boolean | object>,
       default: false
+    },
+    // 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
+    reserveSelection: {
+      type: Boolean as PropType<boolean>,
+      default: false
     }
   },
   setup(props, { attrs, slots }) {
@@ -137,7 +146,7 @@ export default defineComponent({
       }
     })
 
-    function headerDragend(newWidth: number, oldWidth: number, column: any, event: any) {
+    function headerDragend(newWidth: number, oldWidth: number, column: any) {
       // 不懂为啥无法自动计算宽度，只能手动去计算了。。失望ing，到时候看看能不能优化吧。
       const htmlArr = document.getElementsByClassName(column.id)
       for (const v of htmlArr) {

src/components/index.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue'
-// import Button from '@/components/Button/index.vue'// Button组件
+import Dialog from './Dialog/index.vue'// Dialog组件
 
 export function setupGlobCom(app: App<Element>): void {
-  // app.component('AButton', Button)
+  app.component('ComDialog', Dialog)
 }