一个非常简洁的弹窗组件
this
使用
npm i create-dialog
Vue // 如果没有路由和Vuex,就不传
然后就可以愉快的使用了
this
注意: 如果你的项目中没有使用element-ui,或者你的babel配置excludes掉了node_modules,import语句需要改为
这是因为默认的import路径是源码的版本,你可以引用打包之后的版本
API
Dialog基于element-ui的Dialog组件二次封装,因此拥有el-dialog的所有props,这些props都通过参数传递
this.$dialog({ title: '哎哟不错哦', width: '600px', showClose: false, component: () => <Test />, ...})
控制弹窗关闭
Dialog自动监听了组件的cancel和done事件,组件里$emit这两个事件都可以使弹窗关闭
// in Test.vue...methods: async { await this // 弹窗关闭 } // in Index.vue...this
组件名称首字母大写
由于使用了jsx,所以你必须使用首字母大写的形式来使用组件。 React的jsx文档
但是,如果你已经在Vue中注册过了这个组件,那就可以突破jsx的这个限制
... components: text: Text ... this
组件生命周期
当弹窗消失(隐藏)时,传入的组件会被销毁
Enjoy.
A delightful Vue dialog
Usage
npm i create-dialog
Vue // if no store or router, ignore it
then You can use it
this.$dialog({ title: 'amazing', component: () => <Test />, ...})
Note!! If you don't use element-ui in your project, You must change the import target as below:
import Dialog from 'create-dialog/dist/create-dialog.common.js'import 'create-dialog/dist/create-dialog.css'
props
You can check all props here
this.$dialog({ title: 'dialog', width: '600px', showClose: false, component: () => <Test />, ...})
Close dialog
in Text.vue as example above, you can close by emit events
this // dialog will be closethis // dialog will be close too
Capitalize component name
Due to the limit of jsx,you must capitalize your custom name.
But, if you register your component, you can use the registed
... components: // register component text: Text ... this
The lifecycle of component
The component will be destroyed when dialog hidden.