怎么自定义组件2

手写一个简单的自定义组件： 弹窗

上一篇已经简单说了一下使用场景。
1、首先写个基本的弹窗样式
2、怎么使用传值
3、怎么调用

可以直接复制使用测试！

A这是样式

<style lang="less" scoped>
    .confirm_page {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,.7);
        z-index: 9999;
        .confirm_content {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 270px;
            // height: 251px;
            min-height: 100px;
            transform: translate(-50%, -50%);
            font-family: PingFangSC-Regular;
            font-size: 16px;
            background: #fff;
            border-radius: 8px;
            .img_box {
                margin: 30px auto 0;
                width: 200px;
                height: 106px;
                .show_img {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }
            .no-img{
                margin: 30px auto 0;
            }
            .stress_text {
                font-family: PingFangSC-Medium;
                font-size: 16px;
                color: #333;
                letter-spacing: -0.41px;
                text-align: center;
            }
            .show_text {
                // margin: 6px 0 20px;
                margin-top: 8%;
                margin-left: 20px;
                margin-right: 20px;
                margin-bottom: 60px;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #999;
                letter-spacing: -0.08px;
                text-align: center;
                line-height: 16px;
            }
            .btn_box {
                display: flex;
                height: 50px;
                line-height: 50px;
                font-family: PingFangSC-Regular;
                font-size: 17px;
                color: #00b9FF;
                letter-spacing: -0.41px;
                text-align: center;
                border-top: 0.5px solid #e9e9e9;
                position: absolute;
                bottom: 0;
                right: 0;
                left: 0;
                .cancel {
                    position: relative;
                    color: #999;
                    flex: 1;
                    .border_left {
                        position: absolute;
                        top: 50%;
                        right: 0;
                        transform: translateY(-50%) scale(0.5);
                        width: 1px;
                        height: 30px;
                        background: #e9e9e9;
                    }
                }
                .confirm {
                    flex: 1;
                    font-family: PingFangSC-Medium;
                }
            }
        }
    }
</style>
<template>
    <div class="confirm_page" v-show="show">
        <div class="confirm_content">
            <!-- <div class="img_box">
                <img class="show_img" :src="picUrl" alt="">
            </div> -->
            <div class="stress_text" :class="{'no-img': !showImg}" v-if="stressTxt">{{stressTxt}}</div>
            <div class="show_text" v-if="showtext">{{showtext}}</div>
            <div class="btn_box">
                <!-- <div class="cancel" v-if="!onlySure" @click="onCancel">{{cancelTxt}}
                    <span class="border_left"></span>
                </div> -->
                <div class="confirm" @click="onConfirm">{{sureText}}</div>
            </div>
        </div>
    </div>
</template>

C 逻辑（js）

<script>
import pic from '../assets/img/no_imgdata.png'
export default {
    data(){
        return{}
    },
    props:{
        show:{
            type: Boolean,
            default:false
        },
        titleTest:{
            type:String,
            default:''
        },
        sureText:{
            type: String,
            default:'确认'
        },
        stressTxt:{
            type:String,
            default:''
        },
        onlySure:{ // 是否只有sureTxt按钮
            type:Boolean,
            default:false
        },
        picUrl:{
            type:String,
            default:pic
        },
        showtext:{
            type:String,
            default:"变革区域无法使用"
        },
        cancelTxt:{
            type:String,
            default:"取消"
        }
    },
    methods:{
     onCancel(){
         this.$emit('on-cancel')
     },
     onConfirm(){
         this.$emit('on-confirm')
     }   
    }
}
</script>

写好了自定义组件了，需要使用：
怎么使用自定义组件

D、来到需要调用的页面
1、引入

import conform from '../../components/confirm';

2、components

components:{
    conform,
},

3、控制弹出层

<!-- 弹层 -->
<conform :show="showDialogTest" @on-cancel = "cancelDialog" @on-confirm= "confirmDialog"></conform>

使用自定义的方法：

cancelDialog(){
      console.log('点击取消'); 
      this.showDialogTest =  false;     
  },
confirmDialog(){
    console.log('点击确认'); 
    this.showDialogTest = false; 
 },

备注：

1、：show           中的 “ : ” 号是，表示自定义的属性（挂钩）
2、 @on-cancel  中的 “@ ” 号是方法，表示自定义组件的方法（挂钩）

简书：光明程辉