模仿微信小程序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()
    },
}
相关推荐
说私域1 小时前
“开源AI智能名片链动2+1模式S2B2C商城小程序”在直播公屏引流中的应用与效果
人工智能·小程序·开源
!win !3 小时前
uni-app项目支付宝端Input不受控
小程序·uni-app·支付宝小程序
毕设源码-钟学长4 小时前
【开题答辩全过程】以 “旧书驿站”微信小程序的设计与开发为例,包含答辩的问题和答案
微信小程序·小程序
毕设源码-赖学姐1 天前
【开题答辩全过程】以 “饭否”食材搭配指南小程序的设计与实现为例,包含答辩的问题和答案
小程序
nodcloud1 天前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
老华带你飞1 天前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
老华带你飞2 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
项目題供诗2 天前
微信小程序开发教程(八)
微信小程序·小程序
00后程序员张2 天前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
低代码布道师2 天前
少儿舞蹈小程序(12)作品列表查询搭建
低代码·小程序