vue中封装el-dialog弹窗(对话框)
vue中封装el-dialog弹窗(对话框)
·
index.vue
<template>
<div>
<PopUp v-if="visible" :visible.sync="visible" :obejct-data="obejctData" @updateVisible="updateVisibleId" />
</div>
</template>
<script>
import PopUp from './PopUp.vue'
export default {
components: {
PopUp
},
data() {
return {
visible: false,
obejctData: {}
}
},
created() {
setTimeout(() => {
//弹出
this.visible = true
this.obejctData = {
type: 'add'
}
}, 1000)
},
methods: {
updateVisibleId(val) {
this.visible = val
}
}
}
</script>
<style></style>
popup.vue
<template>
<div>
<el-dialog :visible.sync="dialogVisible" width="70%">
<div class="center">
<p>my name is popup</p>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false
},
//传递的参数信息
obejctData: {
type: Object,
default: () => {}
}
},
computed: {
dialogVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('updateVisible', val)
}
}
},
created() {
console.log(this.obejctData)
}
}
</script>
更多推荐
已为社区贡献5条内容
所有评论(0)