feat: modelPro

.eslintrc.js

@@ -15,6 +15,9 @@ module.exports = {
     'vue/multi-word-component-names': 0,
     '@typescript-eslint/no-empty-function': 'off',
     'no-undef': 'off',
-    '@typescript-eslint/no-var-requires': 0
+    '@typescript-eslint/no-var-requires': 0,
+    'arrow-body-style': ['off'],
+    'no-return-assign': 'off',
+    'func-call-spacing': 'off'
   }
 }

src/components/ModalPro/index.vue

@@ -1,11 +1,19 @@
 <template>
   <a-modal
-    :visible="true"
     ref="modalRef"
     :wrap-style="{ overflow: 'hidden' }"
+    @ok="handleOk"
+    @cancel="close"
+    :closable="false"
+    :confirmLoading="state.confirmLoading"
+    v-bind="{
+      cancelText: '取消',
+      okText: '确定',
+      ...propsState
+    }"
   >
     <template #title>
-      <div ref="modalTitleRef" style="width: 100%; cursor: move">{{title}}</div>
+      <div ref="modalTitleRef" style="width: 100%; cursor: move">{{propsState.label || 'model'}}</div>
     </template>
     <template #modalRender="{ originVNode }">
       <div :style="transformStyle">
@@ -17,17 +25,52 @@
 
 <script lang="ts" setup >
 import { useDraggable } from '@vueuse/core'
-import { ref, watch, watchEffect, computed, CSSProperties } from 'vue'
+import { ModalProps } from 'ant-design-vue'
+import { ref, watch, watchEffect, computed, CSSProperties, reactive, onMounted } from 'vue'
 
-export interface ModalProPorps {
-  visible: boolean,
-  title: string
+export interface ModalProPorps extends ModalProps {
+  label: string
 }
 
-const emit = defineEmits(['close'])
+export interface ModalOkProps {
+  confirmed: () => void
+}
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'ok', arg: ModalOkProps): void
+}>()
 
 const props = defineProps<ModalProPorps>()
 
+const propsState = reactive(props)
+
+watch(
+  () => props.title,
+  () => {
+    propsState.label = props.title
+    delete propsState.title
+  },
+  {
+    immediate: true
+  }
+)
+
+interface StateProps {
+  confirmLoading: boolean
+}
+
+const state = reactive<Partial<StateProps>>({})
+
+const close = () => emit('close')
+
+const handleOk = () => {
+  state.confirmLoading = true
+  emit('ok', {
+    confirmed: () => state.confirmLoading = false
+  })
+}
+
 //  拖拽相关的代码
 const modalTitleRef = ref()
 
@@ -41,6 +84,7 @@ const transformY = ref(0)
 const preTransformX = ref(0)
 const preTransformY = ref(0)
 const dragRect = ref({ left: 0, right: 0, top: 0, bottom: 0 })
+
 watch([x, y], () => {
   if (!startedDrag.value) {
     startX.value = x.value
@@ -80,6 +124,7 @@ const transformStyle = computed<CSSProperties>(() => {
   }
 })
 //  拖拽相关的代码
+
 </script>
 
 <style>

src/components/TablePro/index.vue

@@ -1,8 +1,16 @@
 <template>
-  <div></div>
+  <a-table>
+
+  </a-table>
 </template>
 
 <script lang="ts" setup >
+import { TableProps } from 'ant-design-vue/lib/vc-table/Table'
+
+export interface TablePropPorps extends TableProps {
+  column: string
+}
+
 </script>
 
 <style>

src/main.ts

@@ -5,7 +5,13 @@ import '@/router/before'
 import { createPinia } from 'pinia'
 import antd, { ConfigProvider } from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
+import UsePro from './utils/UsePro'
 
 const pinia = createPinia()
 
-createApp(App).use(router).use(pinia).use(antd).mount('#app')
+createApp(App)
+  .use(router)
+  .use(pinia)
+  .use(antd)
+  .use(UsePro)
+  .mount('#app')

src/pages/Iot/index.vue

@@ -1,11 +1,35 @@
 <template>
   <div class="iot" >
-    iot
-    <ModalPro />
+    <a-button type="primary"  @click="openModal" >上传背景</a-button>
+    <modal-pro
+      :visible="state.visible"
+      title="我是标题"
+      @ok="ok"
+      @close="state.visible = false"
+    />
   </div>
 </template>
 
 <script setup lang="ts" >
-import ModalPro from '@/components/ModalPro/index.vue'
-// import {}  from '@vue'
+
+import { reactive } from 'vue'
+
+const state = reactive({
+  visible: true
+})
+
+const openModal = () => {
+  console.log('openModal')
+
+  state.visible = true
+}
+
+const ok = (records) => {
+  console.log('ok')
+  setTimeout(() => {
+    console.log(records)
+    records.confirmed()
+  }, 1000)
+}
+
 </script>

src/utils/UsePro.ts

@@ -0,0 +1,6 @@
+import ModalPro from '@/components/ModalPro/index.vue'
+import { App } from 'vue'
+
+export default function (app: App) {
+  app.component('modal-pro', ModalPro)
+}