mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-11-04 20:28:44 +08:00
使用 uview 重构实际登陆
This commit is contained in:
YunaiV
58
yudao-vue-ui/uni_modules/uview-ui/components/u-tooltip/clipboard.min.js
vendored
Normal file
58
yudao-vue-ui/uni_modules/uview-ui/components/u-tooltip/clipboard.min.js
vendored
Normal file
@@ -0,0 +1,58 @@
|
||||
/*!
|
||||
* clipboard.js v1.6.1
|
||||
* https://zenorocha.github.io/clipboard.js
|
||||
*
|
||||
* Licensed MIT © Zeno Rocha
|
||||
*/
|
||||
!(function (e) { if (typeof exports === 'object' && typeof module !== 'undefined')module.exports = e(); else if (typeof define === 'function' && define.amd)define([], e); else { let t; t = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : this, t.Clipboard = e() } }(() => {
|
||||
let e; let t; let n; return (function e(t, n, o) { function i(a, c) { if (!n[a]) { if (!t[a]) { const l = typeof require === 'function' && require; if (!c && l) return l(a, !0); if (r) return r(a, !0); const u = new Error(`Cannot find module '${a}'`); throw u.code = 'MODULE_NOT_FOUND', u } const s = n[a] = { exports: {} }; t[a][0].call(s.exports, (e) => { const n = t[a][1][e]; return i(n || e) }, s, s.exports, e, t, n, o) } return n[a].exports } for (var r = typeof require === 'function' && require, a = 0; a < o.length; a++)i(o[a]); return i }({
|
||||
1: [function (e, t, n) { function o(e, t) { for (;e && e.nodeType !== i;) { if (e.matches(t)) return e; e = e.parentNode } } var i = 9; if (typeof Element !== 'undefined' && !Element.prototype.matches) { const r = Element.prototype; r.matches = r.matchesSelector || r.mozMatchesSelector || r.msMatchesSelector || r.oMatchesSelector || r.webkitMatchesSelector }t.exports = o }, {}],
|
||||
2: [function (e, t, n) { function o(e, t, n, o, r) { const a = i.apply(this, arguments); return e.addEventListener(n, a, r), { destroy() { e.removeEventListener(n, a, r) } } } function i(e, t, n, o) { return function (n) { n.delegateTarget = r(n.target, t), n.delegateTarget && o.call(e, n) } } var r = e('./closest'); t.exports = o }, { './closest': 1 }],
|
||||
3: [function (e, t, n) { n.node = function (e) { return void 0 !== e && e instanceof HTMLElement && e.nodeType === 1 }, n.nodeList = function (e) { const t = Object.prototype.toString.call(e); return void 0 !== e && (t === '[object NodeList]' || t === '[object HTMLCollection]') && 'length' in e && (e.length === 0 || n.node(e[0])) }, n.string = function (e) { return typeof e === 'string' || e instanceof String }, n.fn = function (e) { const t = Object.prototype.toString.call(e); return t === '[object Function]' } }, {}],
|
||||
4: [function (e, t, n) { function o(e, t, n) { if (!e && !t && !n) throw new Error('Missing required arguments'); if (!c.string(t)) throw new TypeError('Second argument must be a String'); if (!c.fn(n)) throw new TypeError('Third argument must be a Function'); if (c.node(e)) return i(e, t, n); if (c.nodeList(e)) return r(e, t, n); if (c.string(e)) return a(e, t, n); throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList') } function i(e, t, n) { return e.addEventListener(t, n), { destroy() { e.removeEventListener(t, n) } } } function r(e, t, n) { return Array.prototype.forEach.call(e, (e) => { e.addEventListener(t, n) }), { destroy() { Array.prototype.forEach.call(e, (e) => { e.removeEventListener(t, n) }) } } } function a(e, t, n) { return l(document.body, e, t, n) } var c = e('./is'); var l = e('delegate'); t.exports = o }, { './is': 3, delegate: 2 }],
|
||||
5: [function (e, t, n) { function o(e) { let t; if (e.nodeName === 'SELECT')e.focus(), t = e.value; else if (e.nodeName === 'INPUT' || e.nodeName === 'TEXTAREA') { const n = e.hasAttribute('readonly'); n || e.setAttribute('readonly', ''), e.select(), e.setSelectionRange(0, e.value.length), n || e.removeAttribute('readonly'), t = e.value } else { e.hasAttribute('contenteditable') && e.focus(); const o = window.getSelection(); const i = document.createRange(); i.selectNodeContents(e), o.removeAllRanges(), o.addRange(i), t = o.toString() } return t }t.exports = o }, {}],
|
||||
6: [function (e, t, n) {
|
||||
function o() {}o.prototype = {
|
||||
on(e, t, n) { const o = this.e || (this.e = {}); return (o[e] || (o[e] = [])).push({ fn: t, ctx: n }), this }, once(e, t, n) { function o() { i.off(e, o), t.apply(n, arguments) } var i = this; return o._ = t, this.on(e, o, n) }, emit(e) { const t = [].slice.call(arguments, 1); const n = ((this.e || (this.e = {}))[e] || []).slice(); let o = 0; const i = n.length; for (o; o < i; o++)n[o].fn.apply(n[o].ctx, t); return this }, off(e, t) { const n = this.e || (this.e = {}); const o = n[e]; const i = []; if (o && t) for (let r = 0, a = o.length; r < a; r++)o[r].fn !== t && o[r].fn._ !== t && i.push(o[r]); return i.length ? n[e] = i : delete n[e], this }
|
||||
}, t.exports = o
|
||||
}, {}],
|
||||
7: [function (t, n, o) {
|
||||
!(function (i, r) { if (typeof e === 'function' && e.amd)e(['module', 'select'], r); else if (typeof o !== 'undefined')r(n, t('select')); else { const a = { exports: {} }; r(a, i.select), i.clipboardAction = a.exports } }(this, (e, t) => {
|
||||
'use strict'
|
||||
|
||||
function n(e) { return e && e.__esModule ? e : { default: e } } function o(e, t) { if (!(e instanceof t)) throw new TypeError('Cannot call a class as a function') } const i = n(t); const r = typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol' ? function (e) { return typeof e } : function (e) { return e && typeof Symbol === 'function' && e.constructor === Symbol && e !== Symbol.prototype ? 'symbol' : typeof e }; const a = (function () { function e(e, t) { for (let n = 0; n < t.length; n++) { const o = t[n]; o.enumerable = o.enumerable || !1, o.configurable = !0, 'value' in o && (o.writable = !0), Object.defineProperty(e, o.key, o) } } return function (t, n, o) { return n && e(t.prototype, n), o && e(t, o), t } }()); const c = (function () {
|
||||
function e(t) { o(this, e), this.resolveOptions(t), this.initSelection() } return a(e, [{ key: 'resolveOptions', value: function e() { const t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; this.action = t.action, this.emitter = t.emitter, this.target = t.target, this.text = t.text, this.trigger = t.trigger, this.selectedText = '' } }, { key: 'initSelection', value: function e() { this.text ? this.selectFake() : this.target && this.selectTarget() } }, { key: 'selectFake', value: function e() { const t = this; const n = document.documentElement.getAttribute('dir') == 'rtl'; this.removeFake(), this.fakeHandlerCallback = function () { return t.removeFake() }, this.fakeHandler = document.body.addEventListener('click', this.fakeHandlerCallback) || !0, this.fakeElem = document.createElement('textarea'), this.fakeElem.style.fontSize = '12pt', this.fakeElem.style.border = '0', this.fakeElem.style.padding = '0', this.fakeElem.style.margin = '0', this.fakeElem.style.position = 'absolute', this.fakeElem.style[n ? 'right' : 'left'] = '-9999px'; const o = window.pageYOffset || document.documentElement.scrollTop; this.fakeElem.style.top = `${o}px`, this.fakeElem.setAttribute('readonly', ''), this.fakeElem.value = this.text, document.body.appendChild(this.fakeElem), this.selectedText = (0, i.default)(this.fakeElem), this.copyText() } }, { key: 'removeFake', value: function e() { this.fakeHandler && (document.body.removeEventListener('click', this.fakeHandlerCallback), this.fakeHandler = null, this.fakeHandlerCallback = null), this.fakeElem && (document.body.removeChild(this.fakeElem), this.fakeElem = null) } }, { key: 'selectTarget', value: function e() { this.selectedText = (0, i.default)(this.target), this.copyText() } }, { key: 'copyText', value: function e() { let t = void 0; try { t = document.execCommand(this.action) } catch (e) { t = !1 } this.handleResult(t) } }, {
|
||||
key: 'handleResult',
|
||||
value: function e(t) {
|
||||
this.emitter.emit(t ? 'success' : 'error', {
|
||||
action: this.action, text: this.selectedText, trigger: this.trigger, clearSelection: this.clearSelection.bind(this)
|
||||
})
|
||||
}
|
||||
}, { key: 'clearSelection', value: function e() { this.target && this.target.blur(), window.getSelection().removeAllRanges() } }, { key: 'destroy', value: function e() { this.removeFake() } }, { key: 'action', set: function e() { const t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 'copy'; if (this._action = t, this._action !== 'copy' && this._action !== 'cut') throw new Error('Invalid "action" value, use either "copy" or "cut"') }, get: function e() { return this._action } }, { key: 'target', set: function e(t) { if (void 0 !== t) { if (!t || (typeof t === 'undefined' ? 'undefined' : r(t)) !== 'object' || t.nodeType !== 1) throw new Error('Invalid "target" value, use a valid Element'); if (this.action === 'copy' && t.hasAttribute('disabled')) throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute'); if (this.action === 'cut' && (t.hasAttribute('readonly') || t.hasAttribute('disabled'))) throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes'); this._target = t } }, get: function e() { return this._target } }]), e
|
||||
}()); e.exports = c
|
||||
}))
|
||||
}, { select: 5 }],
|
||||
8: [function (t, n, o) {
|
||||
!(function (i, r) { if (typeof e === 'function' && e.amd)e(['module', './clipboard-action', 'tiny-emitter', 'good-listener'], r); else if (typeof o !== 'undefined')r(n, t('./clipboard-action'), t('tiny-emitter'), t('good-listener')); else { const a = { exports: {} }; r(a, i.clipboardAction, i.tinyEmitter, i.goodListener), i.clipboard = a.exports } }(this, (e, t, n, o) => {
|
||||
'use strict'
|
||||
|
||||
function i(e) { return e && e.__esModule ? e : { default: e } } function r(e, t) { if (!(e instanceof t)) throw new TypeError('Cannot call a class as a function') } function a(e, t) { if (!e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return !t || typeof t !== 'object' && typeof t !== 'function' ? e : t } function c(e, t) {
|
||||
if (typeof t !== 'function' && t !== null) throw new TypeError(`Super expression must either be null or a function, not ${typeof t}`); e.prototype = Object.create(t && t.prototype, {
|
||||
constructor: {
|
||||
value: e, enumerable: !1, writable: !0, configurable: !0
|
||||
}
|
||||
}), t && (Object.setPrototypeOf ? Object.setPrototypeOf(e, t) : e.__proto__ = t)
|
||||
} function l(e, t) { const n = `data-clipboard-${e}`; if (t.hasAttribute(n)) return t.getAttribute(n) } const u = i(t); const s = i(n); const f = i(o); const d = (function () { function e(e, t) { for (let n = 0; n < t.length; n++) { const o = t[n]; o.enumerable = o.enumerable || !1, o.configurable = !0, 'value' in o && (o.writable = !0), Object.defineProperty(e, o.key, o) } } return function (t, n, o) { return n && e(t.prototype, n), o && e(t, o), t } }()); const h = (function (e) {
|
||||
function t(e, n) { r(this, t); const o = a(this, (t.__proto__ || Object.getPrototypeOf(t)).call(this)); return o.resolveOptions(n), o.listenClick(e), o } return c(t, e), d(t, [{ key: 'resolveOptions', value: function e() { const t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; this.action = typeof t.action === 'function' ? t.action : this.defaultAction, this.target = typeof t.target === 'function' ? t.target : this.defaultTarget, this.text = typeof t.text === 'function' ? t.text : this.defaultText } }, { key: 'listenClick', value: function e(t) { const n = this; this.listener = (0, f.default)(t, 'click', (e) => n.onClick(e)) } }, {
|
||||
key: 'onClick',
|
||||
value: function e(t) {
|
||||
const n = t.delegateTarget || t.currentTarget; this.clipboardAction && (this.clipboardAction = null), this.clipboardAction = new u.default({
|
||||
action: this.action(n), target: this.target(n), text: this.text(n), trigger: n, emitter: this
|
||||
})
|
||||
}
|
||||
}, { key: 'defaultAction', value: function e(t) { return l('action', t) } }, { key: 'defaultTarget', value: function e(t) { const n = l('target', t); if (n) return document.querySelector(n) } }, { key: 'defaultText', value: function e(t) { return l('text', t) } }, { key: 'destroy', value: function e() { this.listener.destroy(), this.clipboardAction && (this.clipboardAction.destroy(), this.clipboardAction = null) } }], [{ key: 'isSupported', value: function e() { const t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : ['copy', 'cut']; const n = typeof t === 'string' ? [t] : t; let o = !!document.queryCommandSupported; return n.forEach((e) => { o = o && !!document.queryCommandSupported(e) }), o } }]), t
|
||||
}(s.default)); e.exports = h
|
||||
}))
|
||||
}, { './clipboard-action': 7, 'good-listener': 4, 'tiny-emitter': 6 }]
|
||||
}, {}, [8]))(8)
|
||||
}))
|
||||
@@ -0,0 +1,59 @@
|
||||
export default {
|
||||
props: {
|
||||
// 需要显示的提示文字
|
||||
text: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.tooltip.text
|
||||
},
|
||||
// 点击复制按钮时，复制的文本，为空则使用text值
|
||||
copyText: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.tooltip.copyText
|
||||
},
|
||||
// 文本大小
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.tooltip.size
|
||||
},
|
||||
// 字体颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: uni.$u.props.tooltip.color
|
||||
},
|
||||
// 弹出提示框时，文本的背景色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.tooltip.bgColor
|
||||
},
|
||||
// 弹出提示的方向，top-上方，bottom-下方
|
||||
direction: {
|
||||
type: String,
|
||||
default: uni.$u.props.tooltip.direction
|
||||
},
|
||||
// 弹出提示的z-index，nvue无效
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.tooltip.zIndex
|
||||
},
|
||||
// 是否显示复制按钮
|
||||
showCopy: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.tooltip.showCopy
|
||||
},
|
||||
// 扩展的按钮组
|
||||
buttons: {
|
||||
type: Array,
|
||||
default: uni.$u.props.tooltip.buttons
|
||||
},
|
||||
// 是否显示透明遮罩以防止触摸穿透
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.tooltip.overlay
|
||||
},
|
||||
// 是否显示复制成功或者失败的toast
|
||||
showToast: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.tooltip.showToast
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,367 @@
|
||||
<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="{
|
||||
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),
|
||||
}]"
|
||||
>
|
||||
<!-- 由于nvue不支持三角形绘制，这里就做一个四方形，再旋转45deg，得到露出的一个三角 -->
|
||||
</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>
|
||||
<template v-for="(item , index) in buttons">
|
||||
<view
|
||||
class="u-tooltip__wrapper__popup__list__btn"
|
||||
hover-class="u-tooltip__wrapper__popup__list__btn--hover"
|
||||
:key="index"
|
||||
>
|
||||
<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"
|
||||
:key="index"
|
||||
></u-line>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from './props.js';
|
||||
// #ifdef APP-NVUE
|
||||
const dom = uni.requireNativePlugin('dom')
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
import ClipboardJS from "./clipboard.min.js"
|
||||
// #endif
|
||||
/**
|
||||
* Tooltip
|
||||
* @description
|
||||
* @tutorial https://www.uviewui.com/components/tooltip.html
|
||||
* @property {String | Number} text 需要显示的提示文字
|
||||
* @property {String | Number} copyText 点击复制按钮时，复制的文本，为空则使用text值
|
||||
* @property {String | Number} size 文本大小（默认 14 ）
|
||||
* @property {String} color 字体颜色（默认 '#606266' ）
|
||||
* @property {String} bgColor 弹出提示框时，文本的背景色（默认 'transparent' ）
|
||||
* @property {String} direction 弹出提示的方向，top-上方，bottom-下方（默认 'top' ）
|
||||
* @property {String | Number} zIndex 弹出提示的z-index，nvue无效（默认 10071 ）
|
||||
* @property {Boolean} showCopy 是否显示复制按钮（默认 true ）
|
||||
* @property {Array} buttons 扩展的按钮组
|
||||
* @property {Boolean} overlay 是否显示透明遮罩以防止触摸穿透（默认 true ）
|
||||
* @property {Object} customStyle 定义需要用到的外部样式
|
||||
*
|
||||
* @event {Function}
|
||||
* @example
|
||||
*/
|
||||
export default {
|
||||
name: 'u-tooltip',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
data() {
|
||||
return {
|
||||
// 是否展示气泡
|
||||
showTooltip: true,
|
||||
// 生成唯一id，防止一个页面多个组件，造成干扰
|
||||
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: {
|
||||
// 特别处理H5的复制，因为H5浏览器是自带系统复制功能的，在H5环境
|
||||
// 当一些依赖参数变化时，需要重新计算气泡和指示器的位置信息
|
||||
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
|
||||
// 如果需要展示复制按钮，此处index需要加1，因为复制按钮在第一个位置
|
||||
this.$emit('click', this.showCopy ? index + 1 : index)
|
||||
},
|
||||
// 查询内容高度
|
||||
queryRect(ref) {
|
||||
// #ifndef APP-NVUE
|
||||
// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
|
||||
// 组件内部一般用this.$uGetRect，对外的为this.$u.getRect，二者功能一致，名称不同
|
||||
return new Promise(resolve => {
|
||||
this.$uGetRect(`#${ref}`).then(size => {
|
||||
resolve(size)
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
// nvue下，使用dom模块查询元素高度
|
||||
// 返回一个promise，让调用此方法的主体能使用then回调
|
||||
return new Promise(resolve => {
|
||||
dom.getComponentRect(this.$refs[ref], res => {
|
||||
resolve(res.size)
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
// 元素尺寸
|
||||
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)
|
||||
// #ifndef H5
|
||||
uni.setClipboardData({
|
||||
// 优先使用copyText字段，如果没有，则默认使用text字段当做复制的内容
|
||||
data: this.copyText || this.text,
|
||||
success: () => {
|
||||
this.showToast && uni.$u.toast('复制成功')
|
||||
},
|
||||
fail: () => {
|
||||
this.showToast && uni.$u.toast('复制失败')
|
||||
},
|
||||
complete: () => {
|
||||
this.showTooltip = false
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
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')
|
||||
// 在单页应用中，需要销毁DOM的监听
|
||||
clipboard.destroy()
|
||||
})
|
||||
clipboard.on('error', (e) => {
|
||||
this.showToast && uni.$u.toast('复制失败')
|
||||
clipboard.off('success')
|
||||
clipboard.off('error')
|
||||
// 在单页应用中，需要销毁DOM的监听
|
||||
clipboard.destroy()
|
||||
})
|
||||
clipboard.onClick(event)
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</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 {
|
||||
color: $u-content-color;
|
||||
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>
|
||||
Reference in New Issue
Block a user