vite-plugin-vue-dialog v0.0.1

vite 自动导入弹窗组件插件

yarn add vite-plugin-vue-dialog


import dialog from "vite-plugin-vue-dialog"

Plugins:[dialog({dirs:"src/dialog"})] // dirs 自动导入组件文件夹

自定义文件夹下创建 index.ts

import { defineComponent, h, createApp,ref } from 'vue'
import type {App,Ref} from 'vue'
import antd from 'ant-design-vue'
import HelloWorld from './HelloWorld.vue';
// const modules = import.meta.glob('./**/*.vue');

type Fn = (params?:any)=>void

class Serve{
  public instance!:App;
  private el!:Ref<HTMLDivElement> | undefined;
  private element!:Element;
  public visable = ref(false);
  public data = ref({})

  constructor(el?:Ref<HTMLDivElement>){
    this.el = el;
    this.element = document.createElement("div");
    document.body.appendChild(this.element);
  }

  public created(cname:any,fn:Fn) {
    const vm = defineComponent(()=>()=>
      h(cname,{
        visable:this.visable.value,
        modelValue:this.data.value,
        finished:fn.bind(this)
      })
    )
    if(this.element){
      this.instance = createApp(vm);
      this.instance.use(antd).mount(this.element);
    }
  }

  public open():void{
    this.visable.value = true

  }

  public close():void{
    this.visable.value = false
  }
}

const serve = new Serve()

const helloworld = (fn:Fn)=>{
  if(!serve.instance){
    serve.created(HelloWorld,fn)
  }

  return [serve.visable,serve.data.value]
}
...more

export default {helloworld}

插件将自动生成com.d.ts 类型文件

src/dialog/HelloWorld.vue

  <template>
  <a-modal
      :width="1000"
      ref="shareModalRef"
      v-model:visible="visablec"
      :wrap-style="{ overflow: 'hidden' }"
      :destroyOnClose="true"
      :maskClosable="false"
      @cancel="cancel"
    >
    <a-input v-model:value="data.name"></a-input>
    <a-button type="primary" @click="submit">Submit</a-button>
  </a-modal>
</template>

<script setup lang="ts">
import {computed,reactive} from 'vue'
interface PropsType {
  visable:boolean;
  modelValue: any;
  finished:(prams?:any)=>void
}
const props = withDefaults(defineProps<PropsType>(), {
  visable:false,
  modelValue: {}
});
// const emit = defineEmits(['update:modelValue'])

const data = reactive(props.modelValue)
const visablec = computed(()=>props.visable)

const submit = ()=>{
  props.finished('submit')
}

const cancel = ()=>{
  props.finished('close')
}


</script>

<style scoped>
</style>

页面调用

const [visable,value] = $dialog.helloworld((params)=>{
      // finished 方法
      visable.value = false
    })

const open = ()=>{
  visable.value = true
}

watch(()=>value,()=>{
  console.log('value变化',value);
},{
  immediate:true,
  deep:true
})