u-tooltip.vue 10 KB

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