1.现在page文件里面定义一个dh的文件，然后在component定义一个可复用的组件为dislog

然后在dh的json文件中引入这个组件

{
  "usingComponents": {
    "dialog":"../../component/dialog/index"
            }
    }

2.dh中.js文件

// pages/dh/index.js
Page({

  data: {
    status:false
  },
  handleTap(){
    this.setData({
      status:true
    })
  },
  handlecancel(){
    this.setData({
      status:false
    })
  },
  handleConfirm(){
    this.setData({
      status:false
    })
  }
})

.wxml文件中

<dialog title="警告" status="{{status}}" bind:cancel='handlecancel' bind:confirm="handleConfirm" content='啦啦啦我也不知道这什么哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈'>
  <image src='//gw.alicdn.com/imgextra/i1/O1CN016q4k5T1IPNCZM2RTx_!!6000000000885-0-tps-640-260.jpg_Q75.jpg'></image>

</dialog>
<view bindtap='handleTap' class='show'>显示</view>

.wxss文件

/* pages/dh/index.wxss */
.show{
  /* width:100%;
  height:100vh; */
  width:200rpx;
  height:140rpx;
  background:#ccc;
  border-radius:20rpx;
  color:#fff;
  text-align:center;
  line-height:140rpx;
  font-size:40rpx;
  margin:0 auto;
  margin-top:470rpx;
}

在组件中dialog文件中
index.js文件

// component/dialog/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      value:"标题"
    },
    content:String,
    status:{
      type:Boolean,
      value:false,

    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleCancel(){
      this.triggerEvent("cancel")
    },
    handleConfirm(){
      // this.triggerEvent('confirm')
        this.triggerEvent('confirm')
    }
  }
})

wxml文件

<view class="mask" wx:if="{{status}}">
  <view class="dialog">
    <view class="dialog-header">
        {{title}}
    </view>
    <view class="dialog-body">
      <view wx:if="{{content}}" class='content'>{{content}}</view>
      <slot></slot>
    </view>
    <view class="dialog-footer">
      <view class="dialog-btn" bindtap='handleCancel'>取消</view>
      <view class="dialog-btn" bindtap='handleConfirm'>确认</view>
    </view>
  </view>
</view>

wxss文件

.mask{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgb(0,0,0,0.3);
  display:flex;
  align-items: center;
  justify-content:center;
}
.dialog{
  width:600rpx;
  height:auto;
  background:#fff;
  border-radius:30rpx;
}
.dialog-header{
  padding:30rpx 0;
  text-align:center;
  font-size:36rpx;

}
.dialog-footer{
  display:flex;
}
.dialog-btn{
  flex:1;
  text-align:center;
  padding:40rpx 0;
  border-top:1rpx solid #eee;
}
.dialog-btn:first-child{
  border-right:1rpx solid #eee;
}
.dialog-body{
  padding:30rpx;

}
.content {
  text-indent: 72rpx;
  color:#333;
}
.dialog-body image{
  width:100%;

}

这样就可以实现一个简单的点击出现弹窗的效果。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 使用JS获取url参数有几种方法，如何实现

  目录一、字符串 split 方法二、使用 URLSearchParams 方法1、解析搜索字符串2、生成搜索字符串3、Node.js 代码三、使用正则匹配方法四、使用第三方库 qs一、字符串 split 方法url地址是字符串形式的，所以利用split方法将参数提取出来，该方法比较常用，而且容易理解（无关正则）let

• JS模态窗口如何增加和删除，代码是什么

  这篇文章主要为大家详细介绍了js实现模态窗口增加与删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• node.js项目中往数据库添加数据操作是怎样的

  在nodejs中我们如何向mysql数据库插入单条或多条数据呢？或者说nodejs如何向mysql批量插入数据呢？ 我们都知道插入数据使用的是mysql的“ INSERT INTO ”语句，下面先来看看如何使用nodejs向mysql插入单条数据呢？请看nodejs mysql的使用示例，向customer表

• JS中条件式访问属性是什么，用法是怎样

  这篇文章主要介绍了javascript条件式访问属性和箭头函数，下面文章围绕条件式访问属性和箭头函数的相关资料展开文章内容,需要的朋友可以参考一下

• 用jQuery实现生成二维码怎么样做

  今天学习怎么生成二维码，我习惯所有请求都用ajax完成，但是今天发现jquery的ajax不支持二进制，只能搞纯文本，下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家，下面我们一起来了解看看吧。