vue实现自定义dialog组件

不知道大家有没有遇到这种情况。平时过于依赖组件库,如果产品对某个组件有特殊的要求。我们与其去改,去覆盖组件库的源码。还不如自己写一个组件,毕竟是自己写的,不管你想怎么改,都方便容易的很。这里就实现一个dialog组件和input组件,不基于任何组件库。供大家参考

效果展示

在这里插入图片描述
在这里插入图片描述

MDialog.vue




DialogInput.vue




父组件中使用


      
      

这里script部分是用ts写的,你可以改成vue的语法。template和style部分不用改。
窗体部分使用了animate.css的动画,直接下好css,在script导入就可以了。遮罩层使用了transition做fadein fadeout效果

你可能感兴趣的:(vue实现自定义dialog组件)