自定义vue组件

(1) 自定义组件dialog.vue

<template>
    <view v-show="showDialog" class="dialog-mask" ref="data">
        <view class="dialog-layer">
            <!-- <view class="layer-title">
                <view class="title-text">{{title}}</view>
                <view @tap.stop="hideModal">
                    <text class="cuIcon-close text-red"></text>
                </view>
            </view>
            <view class="layer-content">
                <view class="sub-title">{{subTitle}}</view>
                <view class="content-text">{{content}}</view>
            </view> -->
            <view class="layer-title">
                <view class="title-text">{{data.title}}</view>
                <view @click="close()">
                    <text class="cuIcon-close text-red"></text>
                </view>
            </view>
            <view class="layer-content">
                <view class="sub-title">{{data.subTitle}}</view>
                <view class="content-text">{{data.content}}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name:"Dialog",
    props:{
        showDialog: {
            type: Boolean,
            default: false
        },
        // title: {
        //  type: String,
        //  default: '标题'
        // },
        // subTitle: {
        //  type: String,
        //  default: '副标题'
        // },
        // content: {
        //  type: String,
        //  default: '内容介绍'
        // },
        data: {
            type: Object,
            default: null
        }
    },
    data() {
        return {
            
        };
    },
    methods:{
        close() {
            this.$emit('close')
        }
    }
}
</script>

<style scoped>
/* 蒙版 */
.dialog-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1110;
    text-align: center;
    opacity: 1;
    transform: scale(1);
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease-in-out 0s;
}
.dialog-layer {
    position: relative;
    top: 200px;
    /* width: 375px; */
    width: 80%;
    max-width: 100%;
    height: 15rem;
    overflow: hidden;
    background-color: #f8f8f8;
    border-radius: 5px;
    border-top: 3px solid #06a7e2;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle; 
}
.layer-title {
    display: flex;
    position: relative;
    min-height: 55px;
    justify-content: space-between;
    align-items: center;
    margin: 0 10px; 
    background-color: #ffffff;
    color: #666666;
    border-bottom: 1px solid #888;
}
.title-text{
    margin: 15px 10px;
    padding-left: 10px;
    border-left: 3px solid #06a7e2;
    color: #888;
}
.layer-content {
    padding: 10px 20px;
    text-align: left;
}
.sub-title {
    color: #bbb;
    font-size: 0.9rem;
    margin-bottom: 7px;
}
.content-text {
    color: #777;
    text-indent: 2rem;
}
</style>

(2) 页面调用

<template>
    <view class="qiun-columns">
        <view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
            <view class="qiun-title-dot-light title-left">
                <view>趋势一</view>
                <view @click="showExplain('trend1')">?</view>
            </view>
            
        </view>
        
        <view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
            <view class="qiun-title-dot-light title-left">
                <view>趋势二</view>
                <view @click="showExplain('trend2')">?</view>
            </view>
        </view>
        
        <view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
            <view class="qiun-title-dot-light title-left">
                <view>趋势三</view>
                <view @click="showExplain('trend3')">?</view>
            </view>
        </view>
        
        <!-- <Dialog :showDialog="(dialogName=='trend')" title="vue组件" subTitle="自定义组件" content="一起来学习" @close="hideDialog()"></Dialog> -->
        <Dialog :showDialog="(dialogName=='trend1')" :data="explainList[0]" @close="hideDialog()"></Dialog>
        <Dialog :showDialog="(dialogName=='trend2')" :data="explainList[1]" @close="hideDialog()"></Dialog>
        <Dialog :showDialog="(dialogName=='trend3')" :data="explainList[2]" @close="hideDialog()"></Dialog>
        
    </view>
</template>

<script>
import Dialog from '@/components/dialog.vue'
export default {
    components: {
        Dialog
    },
    data() {
        return {
            dialogName:null,
            explainList:[
                {
                    title:"总稼动率趋势介绍",
                    subTitle:"什么是总稼动率趋势？",
                    content:"有月和年的总稼动率变化趋势，管理层可把总稼动率作为评判企业生产效率高低的一个重要参考指标。",
                },
                {
                    title:"总开机率趋势介绍",
                    subTitle:"什么是总开机率趋势？",
                    content:"总开机率趋势：有月和年总开机率的变化趋势，管理层可以通过开机率趋势查看企业的经营状态和开工率。",
                },
                {
                    title:"设备稼动率趋势分析介绍",
                    subTitle:"什么是设备稼动率柱状图对比？",
                    content:"该页面可以对不同设备或者单个分组内不同设备的稼动率进行柱状图的对比，时间纬度可以选择到小时，稼动率低的设备一目了然。",
                }
            ]
        }
    },
    methods: {

    }
}
</script>

<style scoped lang="scss">

</style>

(3) 弹窗效果展示

弹窗.png

拓展：vue自定义组件点击页面其他位置组件隐藏：h5端起效，app端不起效。