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行,下载源码查看

countdown extend-button