标签：flex 对话框 color text 程序开发 height portal background 100rpx

前言

　　实现弹窗对话框

效果图

代码

.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

标签：flex,对话框,color,text,程序开发,height,portal,background,100rpx
来源： https://www.cnblogs.com/guanxinjing/p/16563378.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。