tips

tips提示，默认居中显示

组件结构

  1. <template>
  2.     <view class="tui-tips-box" :class="[fixed?'tui-tips-fixed':'']">
  3.         <image :src="imgUrl" class="tui-tips-icon" :style="{width:imgWidth+'rpx',height:imgHeight+'rpx'}"></image>
  4.         <view class="tui-tips-content">
  5.             <slot></slot>
  6.         </view>
  7.         <button class="tui-tips-btn" hover-class="tui-tips-btn-hover" :style="{width:btnWidth+'rpx'}" v-if="btnText"  @tap="handleClick">{{btnText}}</button>
  8.     </view>
  9. </template>

组件脚本

  1. <script>
  2.     export default {
  3.         name: "tuiTips",
  4.         props: {
  5.             //是否垂直居中
  6.             fixed: {
  7.                 type: Boolean,
  8.                 default: true
  9.             },
  10.             //图片地址，没有则不显示
  11.             imgUrl: {
  12.                 type: String,
  13.                 default: ""
  14.             },
  15.             //图片宽度
  16.             imgWidth: {
  17.                 type: Number,
  18.                 default: 200
  19.             },
  20.             //图片高度
  21.             imgHeight:{
  22.                 type: Number,
  23.                 default: 200
  24.             },
  25.             //按钮宽度
  26.             btnWidth:{
  27.                 type: Number,
  28.                 default: 200
  29.             },
  30.             //按钮文字，没有则不显示
  31.             btnText:{
  32.                 type:String,
  33.                 default: ""
  34.             }
  35.         },
  36.         methods: {
  37.             handleClick(e) {
  38.                 this.$emit('click', {});
  39.             }
  40.         }
  41.     }
  42. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "fixed" : 是否垂直居中，默认 true
     "imgUrl":图片地址，没有则不显示
     "imgWidth":图片宽度，默认 200rpx
     "imgHeight":图片高度，默认 200rpx
     "btnWidth" :按钮宽度
     "btnText" :按钮文字，没有则不显示

 methods:
   "handleClick":按钮点击事件

示例

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