上一章我们已经说了如何自定义列表，今天这章我们继续来说一下如何自定义弹框，如下图
123.gif
直接上代码，一点一点分析解释
<template>
<view v-if="showSelf" class="popV">
<view class="popV-mask" @touchmove.stop.prevent="moveHandle"></view>
<view class="popV-content" v-bind:style="{top:contentTop+'px'}">
<slot></slot>
<view class="footer">
<view class="listV" v-for="(item, index) in footers" :key="index" :class='[footers.length>1&&index!=footers.length-1?"listV-rightBorder":""]'
@click="didClickItem(index)" :hover-class="footers.length==1?'hover-left-right' :footers.length>1&&index==0?'hover-left' :index==footers.length-1?'hover-right':'hover-center'">
<text class="listV-text" :class="index==footers.length-1 ? 'text-highlighted':''">{{item}}</text>
</view>
</view>
</view>
</view>
</template>
- 1、
<view v-if="showSelf" class="popV">这里是本文件属性showSelf是否显示这个popView
- 2、
<view class="popV-mask" @touchmove.stop.prevent="moveHandle"></view>这个view是遮罩，然后@touchmove.stop.prevent="moveHandle"是禁止底部视图滚动
- 3、
<view class="popV-content" v-bind:style="{top:contentTop+'px'}">这里是显示内容的view，然后v-bind:style="{top:contentTop+'px'}"是动态修改显示内容距离顶部的间距
- 4、
<slot></slot>这里理解为占个坑，让外面自己设计需要显示什么
- 5、剩下的就是底部按钮view了，这里我们采取遍历
footers创建底部按钮，方便扩展；点击@click="didClickItem(index)传下标index，:hover-class=是设置按钮高亮的样式，采用三目运算显示不同的样式
<script>
export default {
props: {
//弹窗组件是否显示 默认不显示 必传属性
show: {
type: Boolean,
default: false,
required: true,
},
footerLists: {
typs: Array,
default: [],
required: false,
},
pContentTop: {
type: Number,
default: 185, // 单位px
required: false
}
},
data() {
return {
showSelf: false,
footers: ['取消', '确定'],
contentTop: 185 // 单位px
}
},
watch: {
show(val) {
var that = this
if (!val) {
that.closeMyself()
} else {
that.showSelf = val
}
},
footerLists(array) {
this.footers = array;
}
},
created() {
this.showSelf = this.show;
this.contentTop = this.pContentTop;
this.footers = this.footerLists;
},
mounted() {
// this.showSelf = this.show;
// this.contentTop = this.pContentTop;
// this.footers = this.footerLists;
},
methods: {
moveHandle: function(){
},
/** 底部按钮操作 */
didClickItem(index) {
this.$emit('itemClick', index);
},
/** 点击遮罩关闭弹窗 */
closeMyself(event) {
this.showSelf = false;
}
}
}
</script>
- 1、
props这个可以理解为提供开放属性，让外面的自己设置
- 2、比如
props里的show属性，首先是类型type可以设置为Boolean、Array、Number等等，其次是默认值default可以设置为false、[]、185，最后是required是否必传，也就是外面用到这个popView的时候，开放属性show的required: true，如果不传就会报错
- 3、
data()这个可以理解为提供私有属性，只能本文件设置，并且设置默认值
- 4、
watch:监听开放属性的变化
- 5、生命周期
created()和mounted()。created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素
而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点。参考https://blog.csdn.net/xdnloveme/article/details/78035065
- 6、
methods:这里是写所以方法的地方，moveHandle是禁止底部滚动方法，didClickItem(index)是底部按钮点击，这里this.$emit('itemClick', index);是子组件来触发父组件的方法，这里的this是父组件，括号里是方法名和参数
<style>
.popV {
display: flex;
justify-content: center;
align-items: center;
}
.popV-mask {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: block;
position: fixed;
z-index: 1000;
}
.popV-content {
/* top: 370upx; */
width: 606upx;
/* height: 528upx; */
position: fixed;
left: 72upx;
z-index: 1001;
display: flex;
flex-direction: column;
align-items: center;
background-color: #FFFFFF;
border-radius: 10upx;
}
.footer {
display: flex;
flex-direction: row;
justify-content: space-between;
bottom: 0;
left: 0;
height: 86upx;
width: 100%;
border-top-style: solid;
border-top-color: #E1E1E1;
border-top-width: 1upx;
}
.listV {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.active {
background-color: #DDDDDD;
}
.listV-rightBorder {
border-right-style: solid;
border-right-color: #E1E1E1;
border-right-width: 1upx;
}
.listV-text {
font-family: PingFangSC-Regular;
color: #787878;
font-size: 30upx;
}
.text-highlighted {
color: #3ABBFF;
}
.hover-left-right {
background: #DDD;
border-bottom-left-radius: 10upx;
border-bottom-right-radius: 10upx;
}
.hover-left {
background: #DDD;
border-bottom-left-radius: 10upx;
}
.hover-right {
background: #DDD;
border-bottom-right-radius: 10upx;
}
.hover-center {
background: #DDD;
}
</style>
如何使用
第一步导入
import popView from "@/components/popView.vue"
components: {
popView
}
第二步创建
7F16CCB7-9A7A-4E90-BE8A-9F4AD3166E84.png
/* 通用弹框 */
.singlePopV-header {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
}
.singlePopV-header-content {
font-family: PingFangSC-Regular;
color: #333333;
font-size: 28upx;
line-height: 40upx;
margin: 40upx;
text-align: center;
}
第三步初始化默认值
F70B6845-8DD9-47C5-9B7C-0A6B14CFEFE8.png
第四步控制显示隐藏
A0BD19F1-1C03-41F6-9A65-062D354F668D.png
第五步监听按钮点击
2E206B21-D7E2-4047-B35F-435F9900F634.png
网友评论