vite-plugin-vue-dialog
v0.0.1
Published
``` yarn add vite-plugin-vue-dialog
Downloads
3
Maintainers
Readme
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
})