模仿微信小程序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()
    },
}
相关推荐
说私域6 小时前
兴趣电商内容数据洞察未来市场走向研究——基于开源AI智能名片链动2+1模式S2B2C商城小程序的实践
人工智能·小程序
吴传逞6 小时前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
wmsj05786 小时前
小程序图片批量保存太麻烦?用这款工具一键搞定,附工具教程!
小程序
说私域9 小时前
开源AI智能名片链动2+1模式S2B2C商城小程序服务提升复购率和转介绍率的研究
人工智能·小程序
服务端技术栈14 小时前
历时 1 个多月,我的第一个微信小程序「图片转 Excel」终于上线了!
前端·后端·微信小程序
2501_9159214314 小时前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_9160088916 小时前
uni-app iOS 文件管理与 itools 配合实战,多工具协作的完整流程
android·ios·小程序·https·uni-app·iphone·webview
!win !17 小时前
uni-app项目Tabbar实现切换icon动效
小程序·uni-app
宋辰月17 小时前
微信小程序-day4
微信小程序·小程序
2501_9160074718 小时前
uni-app iOS 文件调试常见问题与解决方案:结合 itools、克魔、iMazing 的实战经验
android·ios·小程序·https·uni-app·iphone·webview