- 最近项目中要用到二次确认组件,因为考虑到多出使用多次回调所以普通的公共组件满足不了。
- 我需要的是
this.massage()
;这种,所以就自己封装了一个,全局都可以使用
在 src/components
下创建公共组件 visible.vue
visible.vue
<!-- 二次确认组件 -->
<template>
<section class='visible'>
<el-dialog :visible.sync="visible" top="35vh" :destroy-on-close="true" width="752px">
<div class="title">
<h1>{
{title}}</h1>
<i @click="visible = false" class="iconfont iconguanbiicon-"></i>
</div>
<div class="fieos">
<div class="pont_item">
<img width="25px" height="25px" class="mr20" src="@/assets/image/[email protected]" alt="">
<p>{
{text}}</p>
</div>
<div class="pont_item flex_justify_end">
<el-button @click="visible=false">取消</el-button>
<el-button @click="onSub" type="primary">确定</el-button>
</div>
</div>
</el-dialog>
</section>
</template>
<script>
export default {
data() {
return {
visible:true
};
},
methods: {
onSub(){
this.determine(true)
setTimeout(()=>{
this.visible = false;
},200)
}
},
};
</script>
assets/js
创建 plug.js
import vue from 'vue'
import toastComponent from '@/components/visible.vue'
// 返回扩展实例构造器
const ToastConstructor = vue.extend(toastComponent)
// 三个参数 determine是回调函数,点击确认回调
function showVisible(title = '提示', text = '文本', determine = () => {}) {
const toastDom = new ToastConstructor({
el: document.createElement('div'),
data() {
return {
title,
text,
determine,
}
}
})
document.body.appendChild(toastDom.$el)
}
// 注册为全局组件
function registryToast() {
vue.prototype.$visible = showVisible
}
export default registryToast
main.js 引入plug.js
import visible from './assets/js/plug';
Vue.use(visible)
在组件中使用
this.$visible('删除科室', '是否删除此科室?', res => {
console.log(res);// 点击了确认
})