123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365 |
- <template>
- <view
- class="u-tooltip"
- :style="[$u.addStyle(customStyle)]"
- >
- <u-overlay
- :show="showTooltip && tooltipTop !== -10000 && overlay"
- customStyle="backgroundColor: rgba(0, 0, 0, 0)"
- @click="overlayClickHandler"
- ></u-overlay>
- <view class="u-tooltip__wrapper">
- <text
- class="u-tooltip__wrapper__text"
- :id="textId"
- :ref="textId"
- :userSelect="false"
- :selectable="false"
- @longpress.stop="longpressHandler"
- :style="{
- color: color,
- backgroundColor: bgColor && showTooltip && tooltipTop !== -10000 ? bgColor : 'transparent'
- }"
- >{{ text }}</text>
- <u-transition
- mode="fade"
- :show="showTooltip"
- duration="300"
- :customStyle="{
- position: 'absolute',
- top: $u.addUnit(tooltipTop),
- zIndex: zIndex,
- ...tooltipStyle
- }"
- >
- <view
- class="u-tooltip__wrapper__popup"
- :id="tooltipId"
- :ref="tooltipId"
- >
- <view
- class="u-tooltip__wrapper__popup__indicator"
- hover-class="u-tooltip__wrapper__popup__indicator--hover"
- v-if="showCopy || buttons.length"
- :style="[indicatorStyle, {
- width: $u.addUnit(indicatorWidth),
- height: $u.addUnit(indicatorWidth),
- }]"
- >
-
- </view>
- <view class="u-tooltip__wrapper__popup__list">
- <view
- v-if="showCopy"
- class="u-tooltip__wrapper__popup__list__btn"
- hover-class="u-tooltip__wrapper__popup__list__btn--hover"
- @tap="setClipboardData"
- >
- <text
- class="u-tooltip__wrapper__popup__list__btn__text"
- >复制</text>
- </view>
- <u-line
- direction="column"
- color="#8d8e90"
- v-if="showCopy && buttons.length > 0"
- length="18"
- ></u-line>
- <block v-for="(item , index) in buttons" :key="index">
- <view
- class="u-tooltip__wrapper__popup__list__btn"
- hover-class="u-tooltip__wrapper__popup__list__btn--hover"
- >
- <text
- class="u-tooltip__wrapper__popup__list__btn__text"
- @tap="btnClickHandler(index)"
- >{{ item }}</text>
- </view>
- <u-line
- direction="column"
- color="#8d8e90"
- v-if="index < buttons.length - 1"
- length="18"
- ></u-line>
- </block>
- </view>
- </view>
- </u-transition>
- </view>
- </view>
- </template>
- <script>
- import props from './props.js';
-
- const dom = uni.requireNativePlugin('dom')
-
-
- import ClipboardJS from "./clipboard.min.js"
-
-
- export default {
- name: 'u-tooltip',
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
- data() {
- return {
-
- showTooltip: true,
-
- textId: uni.$u.guid(),
- tooltipId: uni.$u.guid(),
-
- tooltipTop: -10000,
-
- tooltipInfo: {
- width: 0,
- left: 0
- },
-
- textInfo: {
- width: 0,
- left: 0
- },
-
- indicatorStyle: {},
-
- screenGap: 12,
-
- indicatorWidth: 14,
- }
- },
- watch: {
- propsChange() {
- this.getElRect()
- }
- },
- computed: {
-
-
- propsChange() {
- return [this.text, this.buttons]
- },
-
- tooltipStyle() {
- const style = {
- transform: `translateY(${this.direction === 'top' ? '-100%' : '100%'})`,
- },
- sys = uni.$u.sys(),
- getPx = uni.$u.getPx,
- addUnit = uni.$u.addUnit
- if (this.tooltipInfo.width / 2 > this.textInfo.left + this.textInfo.width / 2 - this.screenGap) {
- this.indicatorStyle = {}
- style.left = `-${addUnit(this.textInfo.left - this.screenGap)}`
- this.indicatorStyle.left = addUnit(this.textInfo.width / 2 - getPx(style.left) - this.indicatorWidth /
- 2)
- } else if (this.tooltipInfo.width / 2 > sys.windowWidth - this.textInfo.right + this.textInfo.width / 2 -
- this.screenGap) {
- this.indicatorStyle = {}
- style.right = `-${addUnit(sys.windowWidth - this.textInfo.right - this.screenGap)}`
- this.indicatorStyle.right = addUnit(this.textInfo.width / 2 - getPx(style.right) - this
- .indicatorWidth / 2)
- } else {
- const left = Math.abs(this.textInfo.width / 2 - this.tooltipInfo.width / 2)
- style.left = this.textInfo.width > this.tooltipInfo.width ? addUnit(left) : -addUnit(left)
- this.indicatorStyle = {}
- }
- if (this.direction === 'top') {
- style.marginTop = '-10px'
- this.indicatorStyle.bottom = '-4px'
- } else {
- style.marginBottom = '-10px'
- this.indicatorStyle.top = '-4px'
- }
- return style
- }
- },
- mounted() {
- this.init()
- },
- methods: {
- init() {
- this.getElRect()
- },
-
- async longpressHandler() {
- this.tooltipTop = 0
- this.showTooltip = true
- },
-
- overlayClickHandler() {
- this.showTooltip = false
- },
-
- btnClickHandler(index) {
- this.showTooltip = false
-
- this.$emit('click', this.showCopy ? index + 1 : index)
- },
-
- queryRect(ref) {
-
-
-
- return new Promise(resolve => {
- this.$uGetRect(`#${ref}`).then(size => {
- resolve(size)
- })
- })
-
-
-
-
- return new Promise(resolve => {
- dom.getComponentRect(this.$refs[ref], res => {
- resolve(res.size)
- })
- })
-
- },
-
- getElRect() {
-
- this.showTooltip = true
- this.tooltipTop = -10000
- uni.$u.sleep(500).then(() => {
- this.queryRect(this.tooltipId).then(size => {
- this.tooltipInfo = size
-
- this.showTooltip = false
- })
- this.queryRect(this.textId).then(size => {
- this.textInfo = size
- })
- })
- },
-
- setClipboardData() {
-
- this.showTooltip = false
- this.$emit('click', 0)
-
- uni.setClipboardData({
-
- data: this.copyText || this.text,
- success: () => {
- this.showToast && uni.$u.toast('复制成功')
- },
- fail: () => {
- this.showToast && uni.$u.toast('复制失败')
- },
- complete: () => {
- this.showTooltip = false
- }
- })
-
-
- let event = window.event || e || {}
- let clipboard = new ClipboardJS('', {
- text: () => this.copyText || this.text
- })
- clipboard.on('success', (e) => {
- this.showToast && uni.$u.toast('复制成功')
- clipboard.off('success')
- clipboard.off('error')
-
- clipboard.destroy()
- })
- clipboard.on('error', (e) => {
- this.showToast && uni.$u.toast('复制失败')
- clipboard.off('success')
- clipboard.off('error')
-
- clipboard.destroy()
- })
- clipboard.onClick(event)
-
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- .u-tooltip {
- position: relative;
- @include flex;
- &__wrapper {
- @include flex;
- justify-content: center;
- /* #ifndef APP-NVUE */
- white-space: nowrap;
- /* #endif */
- &__text {
- font-size: 14px;
- }
- &__popup {
- @include flex;
- justify-content: center;
- &__list {
- background-color: #060607;
- position: relative;
- flex: 1;
- border-radius: 5px;
- padding: 0px 0;
- @include flex(row);
- align-items: center;
- overflow: hidden;
- &__btn {
- padding: 11px 13px;
- &--hover {
- background-color: #58595B;
- }
- &__text {
- line-height: 12px;
- font-size: 13px;
- color: #FFFFFF;
- }
- }
- }
- &__indicator {
- position: absolute;
- background-color: #060607;
- width: 14px;
- height: 14px;
- bottom: -4px;
- transform: rotate(45deg);
- border-radius: 2px;
- z-index: -1;
- &--hover {
- background-color: #58595B;
- }
- }
- }
- }
- }
- </style>
|