前言:
平时我们定义组件都是通过import方法导入,然后局部注册,然后使用。或者是通过全局注册的方式。
但是这两种对于复用性很高的组件,比如confirm, toast这种调用频率很高的。
看了element和iview的confirm的调用都是可以通过this.$Modal.confirm这种纯js的方式来调用,遂研究一下
实现:
我们实现一个类似iview的confirm组件。
1.组件开发
2.通过Vue.extend创建构造器
3.通过Vue.$mount挂载到目标元素(body)上
弹框长这个样子
组件开发
template: 这里我们提供了title,content和两个按钮的自定义文字
script:
可以看到我们提供了两个按钮的自定义事件,而且我们还做默认的操作
extend和mount:
extend:可以理解extend是用于创建一个组件的实例
$mount:我们通过extend实例化的时候并未提供el选项,所以可以通过手动挂载到我们想要的元素上
实现代码:
然后再main.js里加上这句:
在页面中调用:
自此 我们的自定义组件调用就完成了