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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Vue拦截器interceptors能解决什么问题，用法是怎样

  这篇文章主要介绍了vue-resource 拦截器interceptors使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 怎样用js写一个简单的购物车功能？

  这篇文章给大家分享的是有关js实现购物车功能模块的内容，小编觉得挺实用的，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

• 一文说明开发者如何在React中创建和触发合成事件

  React 中的事件，是对原生事件的封装，叫做合成事件。这篇文章主要通过几个简单的示例为大家详细介绍一下React中的合成事件，感兴趣的可以了解一下

• 用JS怎样做点击复制文本的功能？

  用JS怎样做点击复制文本的功能？点击按钮实现复制文本的功能还是比较实用的，例如下本实现的复制邀请码的功能，此外点击复制文本的应用场景还有很多。感兴趣的朋友可以参考下文实例，接下来我们就一起来了解看看。

• 如何用JavaScript写一个简单的折叠面板，代码是什么

  这篇文章主要为大家详细介绍了JavaScript实现简易折叠面板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下