Alert

Alert弹框

组件结构

  1. <template>
  2.     <view>
  3.         <view class="tui-alert-class tui-alert-box" :class="[show?'tui-alert-show':'']">
  4.             <view class="tui-alert-content" :style="{fontSize:size+'rpx',color:color}">
  5.                 <slot></slot>
  6.             </view>
  7.             <view class="tui-alert-btn" :style="{color:btnColor}" hover-class="tui-alert-btn-hover" :hover-stay-time="150"
  8.              @tap.stop="handleClick">{{btnText}}</view>
  9.         </view>
  10.         <view class="tui-alert-mask" :class="[show?'tui-alert-mask-show':'']" @tap.stop="handleClickCancel"></view>
  11.     </view>
  12. </template>

组件脚本

  1. <script>
  2.     export default {
  3.         name:"tuiAlert",
  4.         props: {
  5.             //控制显示
  6.             show: {
  7.                 type: Boolean,
  8.                 default: false
  9.             },
  10.             //提示信息字体大小
  11.             size: {
  12.                 type: Number,
  13.                 default: 30
  14.             },
  15.             //提示信息字体颜色
  16.             color: {
  17.                 type: String,
  18.                 default: "#333"
  19.             },
  20.             //按钮字体颜色
  21.             btnColor: {
  22.                 type: String,
  23.                 default: "#EB0909"
  24.             },
  25.             btnText:{
  26.                 type: String,
  27.                 default: "确定"
  28.             },
  29.             //点击遮罩 是否可关闭
  30.             maskClosable: {
  31.                 type: Boolean,
  32.                 default: false
  33.             }
  34.         },
  35.         methods: {
  36.             handleClick(e) {
  37.                 if (!this.show) return;
  38.                 this.$emit('click', {});
  39.             },
  40.             handleClickCancel() {
  41.                 if (!this.maskClosable) return;
  42.                 this.$emit('cancel');
  43.             }
  44.         }
  45.     }
  46. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "show" : 控制显示
     "size":提示信息字体大小
     "color":提示信息字体颜色
     "btnColor":按钮字体颜色
     "btnText" :按钮显示文本
     "maskClosable" :点击遮罩 是否可关闭，默认 false

 methods:
   "handleClick":按钮点击事件
   "handleClickCancel":遮罩点击事件

示例

... 此处省略n行,下载源码查看