tips

消息提示:包括顶部提示,居中提示,底部提示。可切换提示框背景颜色

组件结构

  1. <template>
  2. <blockv-if="position=='top'">
  3. <viewclass='tui-tips-class tui-toptips' :class="['tui-'+type,show?'tui-top-show':'']">{{msg}}</view>
  4. </block>
  5. <blockv-else>
  6. <viewclass='tui-tips-class tui-toast' :class="[position=='center'?'tui-centertips':'tui-bottomtips',show?'tui-toast-show':'']">
  7. <viewclass="tui-tips-content" :class="['tui-'+type]">
  8. {{msg}}
  9. </view>
  10. </view>
  11. </block>
  12. </template>

组件脚本

  1. <script>
  2. exportdefault{
  3. name:"tuiTips",
  4. props:{
  5. //top bottom center
  6. position:{
  7. type:String,
  8. default:"top"
  9. }
  10. },
  11. data(){
  12. return{
  13. timer:null,
  14. show:false,
  15. msg:"无法连接到服务器~",
  16. //translucent,primary,green,warning,danger
  17. type:"translucent"
  18. };
  19. },
  20. methods:{
  21. showTips:function(options){
  22. const{
  23. type ='translucent',
  24. duration =2000
  25. }= options;
  26. clearTimeout(this.timer);
  27. this.show =true;
  28. this.duration = duration <2000?2000: duration;
  29. this.type = type;
  30. this.msg = options.msg;
  31. this.timer = setTimeout(()=>{
  32. this.show =false;
  33. clearTimeout(this.timer);
  34. this.timer =null;
  35. }, duration);
  36. }
  37. }
  38. }
  39. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "position":提示消息位置(top bottom center),类型:"String",默认值:"top"

 methods:
   "showTips":显示提示消息。 参数类型:"Object",参数信息:
               {
                   type: "translucent",//translucent,primary,green,warning,danger ,消息样式类型
                   msg: "4S后关闭提示框", //提示信息
                   duration: 4000 //显示多久关闭
               }

示例

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