toast

toast 提示

组件结构

  1. <template>
  2. <viewclass="tui-toast" :class="[visible?'tui-toast-show':'',content?'tui-toast-padding':'',icon?'':'tui-unicon-padding']" :style="{width:getWidth(icon,content)}">
  3. <image :src="imgUrl"class="tui-toast-img"v-if="icon"></image>
  4. <viewclass="tui-toast-text" :class="[icon?'':'tui-unicon']">{{title}}</view>
  5. <viewclass="tui-toast-text tui-content-ptop"v-if="content && icon">{{content}}</view>
  6. </view>
  7. </template>

组件脚本

  1. <script>
  2. exportdefault{
  3. name:"tuiToast",
  4. props:{
  5. },
  6. data(){
  7. return{
  8. timer:null,
  9. //是否显示
  10. visible:false,
  11. //显示标题
  12. title:"操作成功",
  13. //显示内容
  14. content:"",
  15. //是否有icon
  16. icon:false,
  17. imgUrl:""
  18. };
  19. },
  20. methods:{
  21. show:function(options){
  22. let {
  23. duration =2000,
  24. icon=false
  25. }= options;
  26. clearTimeout(this.timer);
  27. this.visible =true;
  28. this.title = options.title ||"";
  29. this.content = options.content ||"";
  30. this.icon=icon;
  31. if(icon && options.imgUrl){
  32. this.imgUrl=options.imgUrl
  33. }
  34. this.timer = setTimeout(()=>{
  35. this.visible =false;
  36. clearTimeout(this.timer);
  37. this.timer =null;
  38. }, duration);
  39. },
  40. getWidth(icon,content){
  41. let width="auto";
  42. if(icon){
  43. width=content?'420rpx':'360rpx'
  44. }
  45. return width
  46. }
  47. }
  48. }
  49. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     无  

 data: 
     "timer":定时器
     "visible":是否显示,不需要传入
     "title":显示标题
     "content":显示内容
     "icon":是否有icon
     "imgUrl":icon图片地址

 methods:
   "show":传入相应参数,调用显示toast
   "getWidth":根据内容获取toast宽度

示例

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