tooltip.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基础使用</text>
  5. <view class="u-demo-block__content">
  6. <u-tooltip
  7. :text="text1"
  8. overlay
  9. ></u-tooltip>
  10. </view>
  11. </view>
  12. <view class="u-demo-block">
  13. <text class="u-demo-block__title">下方显示</text>
  14. <view class="u-demo-block__content" style="padding-bottom: 30px;">
  15. <u-tooltip
  16. :text="text2"
  17. direction="bottom"
  18. ></u-tooltip>
  19. </view>
  20. </view>
  21. <view class="u-demo-block">
  22. <text class="u-demo-block__title">扩展按钮</text>
  23. <view class="u-demo-block__content">
  24. <u-tooltip
  25. :text="text3"
  26. :buttons="buttons1"
  27. @click="click"
  28. ></u-tooltip>
  29. </view>
  30. </view>
  31. <view class="u-demo-block">
  32. <text class="u-demo-block__title">自动调整位置</text>
  33. <view class="u-demo-block__content">
  34. <u-tooltip
  35. :text="text4"
  36. :buttons="buttons2"
  37. ></u-tooltip>
  38. </view>
  39. </view>
  40. <view class="u-demo-block">
  41. <text class="u-demo-block__title">高亮选中文本背景色</text>
  42. <view class="u-demo-block__content">
  43. <u-tooltip
  44. :text="text5"
  45. :buttons="buttons3"
  46. bgColor="#e3e4e6"
  47. ></u-tooltip>
  48. </view>
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. export default {
  54. data() {
  55. return {
  56. text1: '长按文本,上方提示',
  57. text2: '长按文本,下方提示',
  58. text3: '显示多个扩展按钮',
  59. text4: '自动调整气泡位置',
  60. text5: '长按文本,显示背景色',
  61. buttons1: ['扩展'],
  62. buttons2: ['扩展', '搜索', '翻译'],
  63. buttons3: ['扩展', '搜索', '翻译']
  64. }
  65. },
  66. onLoad() {
  67. },
  68. methods: {
  69. click(index) {
  70. console.log('index', index);
  71. }
  72. }
  73. }
  74. </script>
  75. <style lang="scss">
  76. .u-page {
  77. }
  78. .u-demo-block__content {
  79. padding-top: 10px;
  80. }
  81. </style>