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