弹窗
在vue中结合elementui.在父组件中通过点击事件,控制子组件弹窗显示
- 将父组件的值通过props的方式传递给子组件弹窗
- 子组件通过computed的方式来获取值和设置新值,在set中调用$emit(‘update:porp’)方法
- 整个过程通过.sync来完成数据的双向流通
父组件
<template>
<div class="rightsContainer">
<el-button size="small" @click="showDialog = !showDialog">显示弹窗</el-button>
<cardCustomRightsDialog :visible.sync="showDialog"></cardCustomRightsDialog>
</div>
</template>
<script>
export default {
components: {
cardCustomRightsDialog: () => import('./cardCustomRightsDialog')
},
data () {
return {
showDialog: false
}
}
}
</script>
子组件弹窗
<template>
<div>
<el-dialog
:visible.sync="dialogVisiable"
title="自定义权限"
>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false
}
},
computed: {
dialogVisiable: {
get () {
return this.visible
},
set (val) {
console.log(val)
this.$emit('update:visible', val)
}
}
}
}
</script>
<style scoped lang="scss">
</style>
弹窗的确定和取消
elementui 自定义内容的示例展示提供了很便捷的插槽方式,唯一要注意的是,我们把click事件中的处理的参数变成自己的就好了,
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisiable = false">取 消</el-button>
<el-button type="primary" @click="dialogVisiable = false">确 定</el-button>
</div>