近日在开发中遇到一个需求,需要在messagebox中使用switch开关,代码如下:
全局弹窗定义:
export default {
install(Vue){
Vue.prototype.$deleteConfirm = function() {
const h = this.$createElement;
this.$msgbox({
title: "删除",
message: h("div", [
h('span', "是否确定删除"),
h('el-switch', {
props: {
value: true,
},
on: {
change(checked) {
console.log("checked", checked)
}
}
})
])
})
}
}
}
使用:
<template>
<div class="hello">
<el-button @click='opendialog'>打开弹窗</el-button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods: {
opendialog() {
this.$deleteConfirm()
}
}
}
</script>
结果发现在页面里,switch开关点击时无法切换
1666003229162.png
尝试各种方法都无法解决,后来发现el-switch v-model 绑定的值必须是可响应的,所有只能将el-switch再封装成组件使用。
switch 封装:
<template>
<el-switch v-model="value" @change="change"></el-switch>
</template>
<script>
export default {
name: "DeleteConfirmSwitch",
data() {
return{
value: true
}
},
methods: {
change(checked){
this.$emit("change", checked)
}
}
}
</script>
switch 使用:
import DeleteConfirmSwitch from "@/components/DeleteConfirmSwitch";
export default {
install(Vue){
Vue.component("delete-confirm-switch", DeleteConfirmSwitch)
Vue.prototype.$deleteConfirm = function() {
const h = this.$createElement;
this.$msgbox({
title: "删除",
message: h("div", [
h('span', "是否确定删除"),
h('delete-confirm-switch', {
on: {
change(checked) {
console.log("checked", checked)
}
}
})
])
})
}
}
}
处理过后恢复正常。
网友评论