模仿微信小程序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()
    },
}
相关推荐
鲲鹏猿26 分钟前
微信小程序——早餐小程序
微信小程序·小程序
说私域1 小时前
基于开源AI智能名片链动2+1模式与S2B2C商城小程序的微商品牌规范化运营研究
人工智能·小程序·开源
2501_915909061 小时前
iOS 加固工具实战解析,主流平台审核机制与工具应对策略
android·ios·小程序·https·uni-app·iphone·webview
The_era_achievs_hero1 小时前
UniappDay04
vue.js·微信小程序·uni-app
2501_915106323 小时前
iOS WebView 调试实战,第三方脚本加载失败与内容安全策略冲突问题排查指南
android·ios·小程序·https·uni-app·iphone·webview
paopaokaka_luck8 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
老虎062714 小时前
JavaWeb(苍穹外卖)--学习笔记13(微信小程序开发,缓存菜品,Spring Cache)
笔记·学习·微信小程序
郭邯19 小时前
小程序中自定义组件的样式隔离
微信小程序
每天开心21 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
老华带你飞1 天前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序