基于iview(modal)的二次封装
1.目标:用iview的modal组件封装公用的弹窗样式
2.父组件
<template>
<div>
<Button type="primary" icon="ios-search" @click=doDel>弹窗</Button>
<common-modal
ref="commentDelRef"
@on-ok="handleDel"
@on-cancel="handleKey"
></common-modal>
</div>
</template>
<script>
import CommonModal from '@/components/common-modal.vue'
export default {
data () {
return {
}
},
components: {
CommonModal
},
methods: {
//点击按钮,拿到params的值,传递给子组件
doDel (params) {
this.$refs.commentDelRef.open(params)
},
handleDel (params) {
this.$refs.commentDelRef.open()
},
handleKey () {
this.$refs.commentDelRef.open()
}
}
}
</script>
3.子组件
<template>
<div>
<Modal
v-model="delModal"
@on-cancel="cancel"
@on-ok="ok"
class="del-modal">
<div>删除后内容无法恢复,请确认~</div>
</Modal>
</div>
</template>
<script>
export default {
data () {
return {
delModal: false,
params: ''
}
},
methods: {
//子组件接收到父组件传来的值
open (params) {
this.delModal = !this.delModal
this.params = params
},
ok () {
this.$emit('on-ok')
},
cancel () {
this.$emit('on-cancel')
}
}
}
</script>
4.效果图