vue自己封装组件(通过具名插槽、组件传参 封装的一个属于自己的弹窗组件)
1.首先,将自己想要封装的组件创建好。(使用插槽、组件传参来控制这个弹窗的显示和隐藏,以及弹窗的内容)<template><div id="qf-modal" v-if="visible"><!-- 封装一个弹窗的组件 --><!-- 通过插槽来控制弹框展示的内容 --><div class="mask"><div class="w
·
1. 首先,将自己想要封装的组件创建好。(使用插槽、组件传参来控制这个弹窗的显示和隐藏,以及弹窗的内容)
<template>
<div id="qf-modal" v-if="visible">
<!-- 封装一个弹窗的组件 -->
<!-- 通过插槽来控制弹框展示的内容 -->
<div class="mask">
<div class="wrap">
<!-- 具名插槽 -->
<slot name="title">
<!--在这个具名插槽中的内容为 具名插槽的默认值 当在父组件中没有该内容时,则使用这个默认的值-->
<div class="title">
警告
</div>
</slot>
<slot name="body">
<div class="body">
你确定要购买吗
</div>
</slot>
<div class="wrap__button">
<button class="model__button--confirm" @click="confirm">确定</button>
<button class="model__button--cancel" @click="cancel">取消</button>
</div>
</div>
</div>
</div>
</template>
<script>
//1.需要一个属性,控制组件的显示和隐藏,接受一个visible属性来控制显示和隐藏
//2.需要动态的接受title body button,如果没有传入的时候,采用默认的结构
//3.点击确定或者是取消按钮的时候需要把模态框关掉,预留方法
//方法名confirm点击确定的处理函数
//方法名cancel点击取消的处理函数
export default {
data() {
return {}
},
props: { //通过props来接受这个visible属性
visible: { //表示对visible进行校验
type: Boolean, //表示这个visible的类型要为布尔值
default () { //表示默认值
return false //默认为false
}
}
},
methods: {
// 将封装的组件中我们定义的两个方法,进行预留,通过$emit传递出去
confirm() { //点击确定的操作
this.$emit('confirm')
}, //表示将on-confirm发送出去 类似于发布事件
cancel() { //点击取消的操作
this.$emit('cancel')
}
}
}
</script>
<style scoped>
.mask {
position: fixed;
background-color: rgba(0, 0, 0, 0.3);
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.wrap {
width: 350px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 10px;
}
.wrap div {
margin: 15px 0;
}
.model__button--confirm {
margin: 0 5px;
outline: none;
border: 0;
width: 150px;
height: 30px;
background: linear-gradient(90deg, #1596fb, pink);
border-radius: 0.2847rem;
display: block;
color: #fff;
cursor: pointer;
}
.model__button--cancel {
outline: none;
border: 0;
width: 150px;
height: 30px;
background: linear-gradient(90deg, blue, green);
border-radius: 0.2857rem;
display: block;
color: #fff;
cursor: pointer;
}
.wrap__button {
display: flex;
justify-content: center;
align-items: center;
}
</style>
2. 在组件中,引入封装的组件,在页面上展示这个组件
<template>
<div id="app">
<!-- 通过按钮来控制封装的组件的展示和关闭 -->
<button type="button" @click="open">打开</button>
<!-- 展示封装的组件 -->
<!-- 我们通过组件之间的传值,以及对插槽的运用,就可以实现我们对封装的组件的最大的使用 -->
<modal :visible='isShow' @confirm='confirm' @cancel='cancel'>
<template v-slot="title"> //此处的v-slot的名字要和我们在封装的组件中的插槽的名字一致
<h1>自己定义的标题</h1> //如果此处不写内容,那么就是使用我们组件默认的内容
</template>
<template v-slot="body"> //此处的v-slot的名字要和我们在封装的组件中的插槽的名字一致
自己定义的弹窗的内容 //如果此处不写内容,那么就是使用我们组件默认的内容
</template>
</modal>
</div>
</template>
<script>
import modal from './modal.vue' //引入封装的组件
export default {
name:'app',
components:{ //将封装的组件注册成为自己的子组件
modal
},
data(){
return {
isShow:false
}
},
methods:{
open(){
this.isShow = true
}
confirm(){
console.log('打开弹框')
this.isShow = true
},
cancel(){
console.log('关闭弹窗')
this.isShow = false
}
}
}
</script>
<style>
</style>
更多推荐
已为社区贡献7条内容
所有评论(0)