模仿微信小程序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()
    },
}
相关推荐
拼图2091 小时前
微信小程序——skyline版本问题
微信小程序·小程序
mg6682 小时前
微信小程序入门实例_____打造你的专属单词速记小程序
微信小程序·小程序
【ql君】qlexcel2 小时前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
程序员陆通3 小时前
Vibe Coding开发微信小程序实战案例
微信小程序·小程序·notepad++·ai编程
「、皓子~3 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
nbsaas-boot3 小时前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++
老A技术联盟4 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
you45804 小时前
小程序学习笔记:使用 MobX 实现全局数据共享,实例创建、计算属性与 Actions 方法
笔记·学习·小程序
风铃喵游4 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
说私域4 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的抖音渠道力拓展与多渠道利润增长研究
人工智能·小程序·开源