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