小程序开发 root-portal对话框

前言

　　实现弹窗对话框

效果图

 

代码

.js

const app = getApp()

Page({
  data: {
    show: false,
  },
  toggle() {
    this.setData({
      show: !this.data.show,
    })
  },

  onClickCancel:function() {
    this.setData({
      show: false
    })
  },

  onClickPositive:function() {
    this.setData({
      show: false
    })
  },
})

.wxml

<view>

  <root-portal wx:if="{{ show }}">
    <view class="dialogRootPortal">
      <text class="dialogTitleText">标题</text>
      <text class="dialogTitleContent">内容</text>
      <view class="dialogLine1" />
      <view class="dialogButtonParent">
        <view bindtap="onClickCancel" class="dialogButton1" hover-class="dialogHoverButton1">取消</view>
        <view class="dialogLine2"/>
        <view bindtap="onClickPositive" class="dialogButton2" hover-class="dialogHoverButton2">确定</view>
      </view>

    </view>
  </root-portal>

  <button bindtap="toggle" style="position: absolute; top: 20%; left: 25%; background-color: hotpink; z-index: -1;">显示 root-portal</button>

</view>

.wxss

.dialogRootPortal{
  position: absolute;
  background-color: #212121;
  width: 80%;
  left: 10%;
  top: 20%;
  border-radius: 50rpx;
  display: flex;
  flex-direction: column;
}

.dialogTitleText{
  margin-top: 40rpx;
  text-align: center;
  font-size: 20px;
  color: white;
  top: 7%;
}

.dialogTitleContent{
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  text-align: center;
  font-size: 16px;
  width: 100%;
  color: white;
}

.dialogLine1{
  width: 100%;
  height: 1px;
  background-color: #FFFFFF;
}

.dialogButtonParent{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100rpx;
}

.dialogLine2{
  width: 2px;
  height: 100%;
  background-color: #FFFFFF;
}

.dialogButton1{
  text-align: center;
  color: white;
  background-color: #212121;
  line-height: 100rpx;
  border-bottom-left-radius: 50rpx;
  flex-grow: 1;
}

.dialogButton2{
  height: 100rpx;
  text-align: center;
  background-color: #212121;
  color: tomato;
  line-height: 100rpx;
  border-bottom-right-radius: 50rpx;
  flex-grow: 1;
}

.dialogHoverButton1{
    text-align: center;
    color: white;
    background-color: #3b3b3b;
    line-height: 100rpx;
    border-bottom-left-radius: 50rpx;
    flex-grow: 1;
  }
  
  .dialogHoverButton2{
    height: 100rpx;
    text-align: center;
    background-color: #3b3b3b;
    color: tomato;
    line-height: 100rpx;
    border-bottom-right-radius: 50rpx;
    flex-grow: 1;
  }

 

 

End