tips

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

组件结构

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

组件脚本

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