u-tooltip.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  1. <template>
  2. <view
  3. class="u-tooltip"
  4. :style="[$u.addStyle(customStyle)]"
  5. >
  6. <u-overlay
  7. :show="showTooltip && tooltipTop !== -10000 && overlay"
  8. customStyle="backgroundColor: rgba(0, 0, 0, 0)"
  9. @click="overlayClickHandler"
  10. ></u-overlay>
  11. <view class="u-tooltip__wrapper">
  12. <text
  13. class="u-tooltip__wrapper__text"
  14. :id="textId"
  15. :ref="textId"
  16. :userSelect="false"
  17. :selectable="false"
  18. @longpress.stop="longpressHandler"
  19. :style="{
  20. color: color,
  21. backgroundColor: bgColor && showTooltip && tooltipTop !== -10000 ? bgColor : 'transparent'
  22. }"
  23. >{{ text }}</text>
  24. <u-transition
  25. mode="fade"
  26. :show="showTooltip"
  27. duration="300"
  28. :customStyle="{
  29. position: 'absolute',
  30. top: $u.addUnit(tooltipTop),
  31. zIndex: zIndex,
  32. ...tooltipStyle
  33. }"
  34. >
  35. <view
  36. class="u-tooltip__wrapper__popup"
  37. :id="tooltipId"
  38. :ref="tooltipId"
  39. >
  40. <view
  41. class="u-tooltip__wrapper__popup__indicator"
  42. hover-class="u-tooltip__wrapper__popup__indicator--hover"
  43. v-if="showCopy || buttons.length"
  44. :style="[indicatorStyle, {
  45. width: $u.addUnit(indicatorWidth),
  46. height: $u.addUnit(indicatorWidth),
  47. }]"
  48. >
  49. <!-- 由于nvue不支持三角形绘制,这里就做一个四方形,再旋转45deg,得到露出的一个三角 -->
  50. </view>
  51. <view class="u-tooltip__wrapper__popup__list">
  52. <view
  53. v-if="showCopy"
  54. class="u-tooltip__wrapper__popup__list__btn"
  55. hover-class="u-tooltip__wrapper__popup__list__btn--hover"
  56. @tap="setClipboardData"
  57. >
  58. <text
  59. class="u-tooltip__wrapper__popup__list__btn__text"
  60. >复制</text>
  61. </view>
  62. <u-line
  63. direction="column"
  64. color="#8d8e90"
  65. v-if="showCopy && buttons.length > 0"
  66. length="18"
  67. ></u-line>
  68. <block v-for="(item , index) in buttons" :key="index">
  69. <view
  70. class="u-tooltip__wrapper__popup__list__btn"
  71. hover-class="u-tooltip__wrapper__popup__list__btn--hover"
  72. >
  73. <text
  74. class="u-tooltip__wrapper__popup__list__btn__text"
  75. @tap="btnClickHandler(index)"
  76. >{{ item }}</text>
  77. </view>
  78. <u-line
  79. direction="column"
  80. color="#8d8e90"
  81. v-if="index < buttons.length - 1"
  82. length="18"
  83. ></u-line>
  84. </block>
  85. </view>
  86. </view>
  87. </u-transition>
  88. </view>
  89. </view>
  90. </template>
  91. <script>
  92. import props from './props.js';
  93. // #ifdef APP-NVUE
  94. const dom = uni.requireNativePlugin('dom')
  95. // #endif
  96. // #ifdef H5
  97. import ClipboardJS from "./clipboard.min.js"
  98. // #endif
  99. /**
  100. * Tooltip
  101. * @description
  102. * @tutorial https://www.uviewui.com/components/tooltip.html
  103. * @property {String | Number} text 需要显示的提示文字
  104. * @property {String | Number} copyText 点击复制按钮时,复制的文本,为空则使用text值
  105. * @property {String | Number} size 文本大小(默认 14 )
  106. * @property {String} color 字体颜色(默认 '#606266' )
  107. * @property {String} bgColor 弹出提示框时,文本的背景色(默认 'transparent' )
  108. * @property {String} direction 弹出提示的方向,top-上方,bottom-下方(默认 'top' )
  109. * @property {String | Number} zIndex 弹出提示的z-index,nvue无效(默认 10071 )
  110. * @property {Boolean} showCopy 是否显示复制按钮(默认 true )
  111. * @property {Array} buttons 扩展的按钮组
  112. * @property {Boolean} overlay 是否显示透明遮罩以防止触摸穿透(默认 true )
  113. * @property {Object} customStyle 定义需要用到的外部样式
  114. *
  115. * @event {Function}
  116. * @example
  117. */
  118. export default {
  119. name: 'u-tooltip',
  120. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  121. data() {
  122. return {
  123. // 是否展示气泡
  124. showTooltip: true,
  125. // 生成唯一id,防止一个页面多个组件,造成干扰
  126. textId: uni.$u.guid(),
  127. tooltipId: uni.$u.guid(),
  128. // 初始时甚至为很大的值,让其移到屏幕外面,为了计算元素的尺寸
  129. tooltipTop: -10000,
  130. // 气泡的位置信息
  131. tooltipInfo: {
  132. width: 0,
  133. left: 0
  134. },
  135. // 文本的位置信息
  136. textInfo: {
  137. width: 0,
  138. left: 0
  139. },
  140. // 三角形指示器的样式
  141. indicatorStyle: {},
  142. // 气泡在可能超出屏幕边沿范围时,重新定位后,距离屏幕边沿的距离
  143. screenGap: 12,
  144. // 三角形指示器的宽高,由于对元素进行了角度旋转,精确计算指示器位置时,需要用到其尺寸信息
  145. indicatorWidth: 14,
  146. }
  147. },
  148. watch: {
  149. propsChange() {
  150. this.getElRect()
  151. }
  152. },
  153. computed: {
  154. // 特别处理H5的复制,因为H5浏览器是自带系统复制功能的,在H5环境
  155. // 当一些依赖参数变化时,需要重新计算气泡和指示器的位置信息
  156. propsChange() {
  157. return [this.text, this.buttons]
  158. },
  159. // 计算气泡和指示器的位置信息
  160. tooltipStyle() {
  161. const style = {
  162. transform: `translateY(${this.direction === 'top' ? '-100%' : '100%'})`,
  163. },
  164. sys = uni.$u.sys(),
  165. getPx = uni.$u.getPx,
  166. addUnit = uni.$u.addUnit
  167. if (this.tooltipInfo.width / 2 > this.textInfo.left + this.textInfo.width / 2 - this.screenGap) {
  168. this.indicatorStyle = {}
  169. style.left = `-${addUnit(this.textInfo.left - this.screenGap)}`
  170. this.indicatorStyle.left = addUnit(this.textInfo.width / 2 - getPx(style.left) - this.indicatorWidth /
  171. 2)
  172. } else if (this.tooltipInfo.width / 2 > sys.windowWidth - this.textInfo.right + this.textInfo.width / 2 -
  173. this.screenGap) {
  174. this.indicatorStyle = {}
  175. style.right = `-${addUnit(sys.windowWidth - this.textInfo.right - this.screenGap)}`
  176. this.indicatorStyle.right = addUnit(this.textInfo.width / 2 - getPx(style.right) - this
  177. .indicatorWidth / 2)
  178. } else {
  179. const left = Math.abs(this.textInfo.width / 2 - this.tooltipInfo.width / 2)
  180. style.left = this.textInfo.width > this.tooltipInfo.width ? addUnit(left) : -addUnit(left)
  181. this.indicatorStyle = {}
  182. }
  183. if (this.direction === 'top') {
  184. style.marginTop = '-10px'
  185. this.indicatorStyle.bottom = '-4px'
  186. } else {
  187. style.marginBottom = '-10px'
  188. this.indicatorStyle.top = '-4px'
  189. }
  190. return style
  191. }
  192. },
  193. mounted() {
  194. this.init()
  195. },
  196. methods: {
  197. init() {
  198. this.getElRect()
  199. },
  200. // 长按触发事件
  201. async longpressHandler() {
  202. this.tooltipTop = 0
  203. this.showTooltip = true
  204. },
  205. // 点击透明遮罩
  206. overlayClickHandler() {
  207. this.showTooltip = false
  208. },
  209. // 点击弹出按钮
  210. btnClickHandler(index) {
  211. this.showTooltip = false
  212. // 如果需要展示复制按钮,此处index需要加1,因为复制按钮在第一个位置
  213. this.$emit('click', this.showCopy ? index + 1 : index)
  214. },
  215. // 查询内容高度
  216. queryRect(ref) {
  217. // #ifndef APP-NVUE
  218. // $uGetRect为uView自带的节点查询简化方法,详见文档介绍:https://www.uviewui.com/js/getRect.html
  219. // 组件内部一般用this.$uGetRect,对外的为uni.$u.getRect,二者功能一致,名称不同
  220. return new Promise(resolve => {
  221. this.$uGetRect(`#${ref}`).then(size => {
  222. resolve(size)
  223. })
  224. })
  225. // #endif
  226. // #ifdef APP-NVUE
  227. // nvue下,使用dom模块查询元素高度
  228. // 返回一个promise,让调用此方法的主体能使用then回调
  229. return new Promise(resolve => {
  230. dom.getComponentRect(this.$refs[ref], res => {
  231. resolve(res.size)
  232. })
  233. })
  234. // #endif
  235. },
  236. // 元素尺寸
  237. getElRect() {
  238. // 调用之前,先将指示器调整到屏幕外,方便获取尺寸
  239. this.showTooltip = true
  240. this.tooltipTop = -10000
  241. uni.$u.sleep(500).then(() => {
  242. this.queryRect(this.tooltipId).then(size => {
  243. this.tooltipInfo = size
  244. // 获取气泡尺寸之后,将其隐藏,为了让下次切换气泡显示与隐藏时,有淡入淡出的效果
  245. this.showTooltip = false
  246. })
  247. this.queryRect(this.textId).then(size => {
  248. this.textInfo = size
  249. })
  250. })
  251. },
  252. // 复制文本到粘贴板
  253. setClipboardData() {
  254. // 关闭组件
  255. this.showTooltip = false
  256. this.$emit('click', 0)
  257. // #ifndef H5
  258. uni.setClipboardData({
  259. // 优先使用copyText字段,如果没有,则默认使用text字段当做复制的内容
  260. data: this.copyText || this.text,
  261. success: () => {
  262. this.showToast && uni.$u.toast('复制成功')
  263. },
  264. fail: () => {
  265. this.showToast && uni.$u.toast('复制失败')
  266. },
  267. complete: () => {
  268. this.showTooltip = false
  269. }
  270. })
  271. // #endif
  272. // #ifdef H5
  273. let event = window.event || e || {}
  274. let clipboard = new ClipboardJS('', {
  275. text: () => this.copyText || this.text
  276. })
  277. clipboard.on('success', (e) => {
  278. this.showToast && uni.$u.toast('复制成功')
  279. clipboard.off('success')
  280. clipboard.off('error')
  281. // 在单页应用中,需要销毁DOM的监听
  282. clipboard.destroy()
  283. })
  284. clipboard.on('error', (e) => {
  285. this.showToast && uni.$u.toast('复制失败')
  286. clipboard.off('success')
  287. clipboard.off('error')
  288. // 在单页应用中,需要销毁DOM的监听
  289. clipboard.destroy()
  290. })
  291. clipboard.onClick(event)
  292. // #endif
  293. }
  294. }
  295. }
  296. </script>
  297. <style lang="scss" scoped>
  298. @import "../../libs/css/components.scss";
  299. .u-tooltip {
  300. position: relative;
  301. @include flex;
  302. &__wrapper {
  303. @include flex;
  304. justify-content: center;
  305. /* #ifndef APP-NVUE */
  306. white-space: nowrap;
  307. /* #endif */
  308. &__text {
  309. font-size: 14px;
  310. }
  311. &__popup {
  312. @include flex;
  313. justify-content: center;
  314. &__list {
  315. background-color: #060607;
  316. position: relative;
  317. flex: 1;
  318. border-radius: 5px;
  319. padding: 0px 0;
  320. @include flex(row);
  321. align-items: center;
  322. overflow: hidden;
  323. &__btn {
  324. padding: 11px 13px;
  325. &--hover {
  326. background-color: #58595B;
  327. }
  328. &__text {
  329. line-height: 12px;
  330. font-size: 13px;
  331. color: #FFFFFF;
  332. }
  333. }
  334. }
  335. &__indicator {
  336. position: absolute;
  337. background-color: #060607;
  338. width: 14px;
  339. height: 14px;
  340. bottom: -4px;
  341. transform: rotate(45deg);
  342. border-radius: 2px;
  343. z-index: -1;
  344. &--hover {
  345. background-color: #58595B;
  346. }
  347. }
  348. }
  349. }
  350. }
  351. </style>