toast

toast 提示

组件结构

  1.  <template>
  2.      <view class="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.          <view class="tui-toast-text" :class="[icon?'':'tui-unicon']">{{title}}</view>
  5.          <view class="tui-toast-text tui-content-ptop" v-if="content && icon">{{content}}</view>
  6.      </view>
  7.  </template>

组件脚本

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