模仿微信小程序wx.showModal自定义弹窗，内容可以修改

实现以下弹框样式功能

1.在components新建一个文件showModel.wpy作为组件，复制下面代码

复制代码

<style  lang="less" scoped>
.bg_model {
  display: flex;
  justify-content: center;
  align-items: center;

  // 弹框背景
  .bg_hui {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
  }
}
.toastDialog {
  width: 580rpx;
  padding-top: 50rpx;
  position: fixed;
  top: 55%;
  left: 0;
  z-index: 9999;
  margin: -370rpx 85rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 12rpx 0 rgba(59, 79, 150, 0.2);
  border-radius: 15rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  .toastTit {
    font-size: 34rpx;
    font-weight: 800;
  }
  .toastContent {
    padding-left: 50rpx;
    padding-right: 50rpx;
    margin-top: 30rpx;
    color: #545454;
    font-size: 30rpx;
    display: flex;
    justify-content: center;
  }
  .btn_wai {
    display: flex;
    height: 90rpx;
    border-top: 1rpx solid #f6f6f6;
    width: 100%;
    margin-top: 60rpx;
    .btn1 {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 34rpx;
      font-weight: 800;
      color: #919191;
    }
    .btn2 {
      border-left: 1rpx solid #f6f6f6;
      width: 50%;
      font-size: 34rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      color: white;
      background: #2a67ea;
      border-bottom-right-radius: 15rpx;
    }
  }
}
</style>

<template>
  <view>
    <view class="bg_model" catchtouchmove="true" wx:if='{{tkShowModel}}'>
      <view class="bg_hui"></view>
      <!--stateType=1成功弹框  -->
      <view class="toastDialog">
        <view class="toastTit">{{title1}}</view>
        <view class="toastContent">{{content1}}</view>
        <view class="btn_wai">
          <view class="btn1" @tap="cancelClick">取消</view>
          <view class="btn2" @tap="submitClick">{{btnName}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import wepy from 'wepy'

export default class showModel extends wepy.component {
  props = {

    tkShowModel: {
      type: Boolean,
      default: false,//是否显示
    },
    title1: {
      type: String,
      default: '',//标题
    },
    content1: {
      type: String,
      default: '',//内容
    },
    btnName: {
      type: String,
      default: '',//按钮文字
    },
  }
  data = {

  }
  watch = {

  }
  methods = {
cancelClick(){
  this.tkShowModel=false
   this.$emit('cancelClick',false)//修改父组件值
},
submitClick(){

  this.tkShowModel=false
   this.$emit('submitClick',false)//修改父组件值
}
  }
  onLoad() { }
}
</script>

2.使用

复制代码

<template>
  <view>
<showModel :title1.sync="title1" :content1.sync="content1" :btnName="btnName" :tkShowModel.sync="tkShowModel"  @cancelClick.user="cancelClick"   @submitClick.user="submitClick"></showModel>
  </view>
</template>

<script>
import showModel from '@/components/showModel'
  components = {
    showModel,
  }
  data = {
   tkShowModel:false,
title1:'是否确认下单？',
content1:'确认后，售后单将被提交到工厂。若售后单被工厂驳回后，请回到电脑端修改后重新提交！',
btnName:'确认下单',
  }


  methods = {
    submitClick(val){
      // 点击确认
      this.tkShowModel=val
      this.$apply()
    },
    cancelClick(val){
      // 取消
      this.tkShowModel=val
      this.$apply()
    },
}