Alert

Alert弹框

组件结构

  1. <template>
  2. <view>
  3. <viewclass="tui-alert-class tui-alert-box" :class="[show?'tui-alert-show':'']">
  4. <viewclass="tui-alert-content" :style="{fontSize:size+'rpx',color:color}">
  5. <slot></slot>
  6. </view>
  7. <viewclass="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. <viewclass="tui-alert-mask" :class="[show?'tui-alert-mask-show':'']" @tap.stop="handleClickCancel"></view>
  11. </view>
  12. </template>

组件脚本

  1. <script>
  2. exportdefault{
  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行,下载源码查看