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

extend-tips scroll-top