vue自定义popView

2019-10-28 本文已影响0人 HCL黄

上一章我们已经说了如何自定义列表，今天这章我们继续来说一下如何自定义弹框，如下图

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;
    }