thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

465
components/firstui/fui-copy-text/fui-copy-text.vue Normal file
View File

@ -0,0 +1,465 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6 1407 25 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-copy__text-wrap">
<!-- #ifndef MP-ALIPAY || APP-NVUE -->
<text ref="fui_ct__el" :selectable="false" class="fui-copy__text" @longpress.stop="handleCopy"
@mousedown="handleCopyByPC"
:style="{ color: color, fontSize: size + 'rpx', fontWeight: fontWeight, background: showTooltip ? background : 'transparent' }">{{ text }}</text>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<text ref="fui_ct__el" class="fui-copy__text" @longpress.stop="handleCopy" @mousedown="handleCopyByPC"
:style="{ color: color, fontSize: size + 'rpx', fontWeight: fontWeight, background: showTooltip ? background : 'transparent' }">{{ text }}</text>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<view ref="fui_ct__el" class="fui-copy__text" @longpress.stop="handleCopy"
:style="{ color: color, fontSize: size + 'rpx', fontWeight: fontWeight, background: showTooltip ? background : 'transparent' }">
{{ text }}
</view>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view v-if="showTooltip" class="fui-copy__tooltip-list"
:class="['fui-copy__tooltip-' + direction, (direction == 'left' || direction == 'right') && buttons.length > 0 ? 'fui-copy__list-column' : '']"
:style="{ zIndex: zIndex }">
<text :selectable="false" v-if="!removeCopy || buttons.length === 0" class="fui-copy__tooltip-cell"
:class="{'fui-copy__tooltip-column':(direction == 'left' || direction == 'right') && buttons.length > 0}"
@tap.stop="copyVal">复制</text>
<text :selectable="false" class="fui-copy__tooltip-cell"
:class="{'fui-copy__btn-extend':true,'fui-copy__tooltip-column':direction == 'left' || direction == 'right'}"
v-for="(item, index) in buttons" :key="index" @tap.stop="buttonTap(index)">{{ item }}</text>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view v-if="showTooltip" class="fui-copy__tl_fixed"
:class="['fui-copy__tooltip-' + direction,isShow?'fui-ct__tool-show':'fui-ct__tool-hidden',direction==='top' || direction==='bottom'?'fui-ct__dir-col':'fui-ct__dir-row']"
:style="styles" ref="fui_ct_tool">
<view class="fui-copy__text-triangle" :class="['fui-ct__triangle-'+direction]"
v-if="direction==='bottom' || direction==='right'"></view>
<view class="fui-copy__tooltip-list"
:class="[(direction == 'left' || direction == 'right') && buttons.length > 0?'fui-copy__list-column':'' ]">
<text v-if="!removeCopy || buttons.length === 0" class="fui-copy__tooltip-cell"
:class="{'fui-copy__tooltip-column':(direction == 'left' || direction == 'right') && buttons.length > 0}"
@tap.stop="copyVal">复制</text>
<text class="fui-copy__tooltip-cell fui-copy__btn-extend"
:class="{'fui-copy__tooltip-column':direction == 'left' || direction == 'right'}"
v-for="(item, index) in buttons" :key="index" @tap.stop="buttonTap(index)">{{ item }}</text>
</view>
<view class="fui-copy__text-triangle" :class="['fui-ct__triangle-'+direction]"
v-if="direction==='top' || direction==='left'"></view>
</view>
<!-- #endif -->
</view>
</template>
<script>
import $fui from './lib/index.js'
// #ifdef APP-NVUE
const dom = weex.requireModule('dom')
const animation = uni.requireNativePlugin('animation');
// #endif
export default {
name: 'fui-copy-text',
emits: ['click', 'copy'],
props: {
text: {
type: String,
default: ''
},
value: {
type: String,
default: ''
},
size: {
type: [Number, String],
default: 28
},
fontWeight: {
type: [Number, String],
default: 400
},
color: {
type: String,
default: '#181818'
},
background: {
type: String,
default: 'transparent'
},
showBtn: {
type: Boolean,
default: true
},
direction: {
type: String,
default: 'top'
},
zIndex: {
type: [Number, String],
default: 1001
},
removeCopy: {
type: Boolean,
default: false
},
//扩展按钮
buttons: {
type: Array,
default () {
return [];
}
}
},
data() {
return {
// #ifdef APP-NVUE
width: 60,
height: 12,
top: 0,
left: 0,
transform: '',
isShow: false,
// #endif
showTooltip: false
};
},
// #ifdef APP-NVUE
computed: {
styles() {
let styles = '';
switch (this.direction) {
case 'top':
styles += `left:${this.width / 2 + this.left}px;top:${this.top+2}px;`
break;
case 'left':
styles += `left:${this.left+2}px;top:${this.height / 2 + this.top}px;`
break;
case 'right':
styles += `left:${this.left+this.width-2}px;top:${this.height / 2 + this.top}px;`
break;
case 'bottom':
styles += `left:${this.width / 2 + this.left}px;top:${this.top +this.height-2}px;`
break;
default:
break;
}
return styles
}
},
created() {
this.transform = {
top: 'translate(-50%, -100%)',
left: 'translate(-100%, -50%)',
right: 'translate(0, -50%)',
bottom: 'translate(-50%, 0)'
} [this.direction || 'top']
},
mounted() {
this.$nextTick(() => {
setTimeout(() => {
this.init()
}, 100)
})
},
// #endif
methods: {
// #ifdef APP-NVUE
init() {
dom.getComponentRect(this.$refs['fui_ct__el'], option => {
if (option && option.result && option.size) {
this.width = option.size.width
this.height = option.size.height
this.top = option.size.top
this.left = option.size.left
}
})
},
_animation(type) {
if (!this.$refs['fui_ct_tool']) return;
animation.transition(
this.$refs['fui_ct_tool'].ref, {
styles: {
transform: this.transform
},
duration: 0,
needLayout: false,
delay: 0 //ms
}, () => {
this.isShow = true;
});
},
// #endif
isPC() {
if (typeof navigator !== 'object') return false;
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
},
handleCopyByPC(e) {
// #ifdef H5
if (this.isPC()) {
this.handleCopy(e);
}
// #endif
},
handleCopy(e) {
if (this.showBtn || this.buttons.length > 0) {
this.showTooltip = true;
// #ifdef APP-NVUE
this.$nextTick(() => {
setTimeout(() => {
this._animation()
}, 50)
})
// #endif
} else {
this.copyVal(e);
}
},
copyVal(e) {
$fui.getClipboardData(
this.value || this.text,
res => {
if (res) {
// #ifndef APP-NVUE || MP-QQ
uni.showToast({
title: '复制成功',
icon: 'none'
});
// #endif
this.$emit('copy', {
text: this.text,
value: this.value
});
}
},
e
);
this.hiddenTooltip();
},
hiddenTooltip() {
this.showTooltip = false;
// #ifdef APP-NVUE
this.isShow = false;
// #endif
},
buttonTap(index) {
this.$emit('click', {
index: index,
text: this.buttons[index]
});
this.hiddenTooltip();
}
}
};
</script>
<style scoped>
.fui-copy__text-wrap {
/* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
position: relative;
/* #ifdef APP-NVUE */
flex-direction: row;
align-items: flex-start;
/* #endif */
}
.fui-copy__text {
position: relative;
z-index: 2;
/* #ifdef MP-ALIPAY */
display: inline;
/* #endif */
}
.fui-copy__tooltip-list {
/* #ifndef APP-NVUE */
display: flex;
position: absolute;
/* #endif */
border-radius: 6px;
background-color: #181818;
padding: 5px 0;
align-items: center;
flex-direction: row;
}
.fui-copy__list-column {
flex-direction: column !important;
padding: 0 5px;
}
.fui-copy__tooltip-cell {
/* #ifndef APP-NVUE */
white-space: nowrap;
box-sizing: border-box;
/* #endif */
color: #ffffff;
text-align: center;
padding: 3px 15px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
font-size: 14px;
}
.fui-copy__btn-extend {
/* #ifndef APP-NVUE */
border-left: 1rpx solid rgba(255, 255, 255, 0.15);
/* #endif */
/* #ifdef APP-NVUE */
border-left-width: 0.5px;
border-left-style: solid;
border-left-color: rgba(255, 255, 255, 0.15);
/* #endif */
}
.fui-copy__tooltip-column {
padding: 8px 10px;
border-left-width: 0;
/* #ifndef APP-NVUE */
border-bottom: 1rpx solid rgba(255, 255, 255, 0.15);
/* #endif */
/* #ifdef APP-NVUE */
border-bottom-width: 0.5px;
border-bottom-style: solid;
border-bottom-color: rgba(255, 255, 255, 0.15);
/* #endif */
}
/* #ifndef APP-NVUE */
.fui-copy__tooltip-top {
left: 50%;
top: 0;
margin-top: -10px;
transform: translate(-50%, -100%);
}
.fui-copy__tooltip-bottom {
left: 50%;
top: 100%;
margin-top: 10px;
transform: translate(-50%, 0);
}
.fui-copy__tooltip-left {
left: 0;
top: 50%;
margin-left: -10px;
transform: translate(-100%, -50%);
}
.fui-copy__tooltip-right {
left: 100%;
top: 50%;
margin-left: 10px;
transform: translate(0, -50%);
}
.fui-copy__tooltip-column:last-child {
border-bottom: 0
}
.fui-copy__tooltip-top::after {
content: ' ';
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 0);
border-width: 5px;
border-style: solid;
border-color: #181818 transparent transparent transparent;
}
.fui-copy__tooltip-bottom::after {
content: ' ';
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
border-width: 5px;
border-style: solid;
border-color: transparent transparent #181818 transparent;
}
.fui-copy__tooltip-left::after {
content: ' ';
position: absolute;
top: 50%;
left: 100%;
transform: translate(0, -50%);
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #181818;
}
.fui-copy__tooltip-right::after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
transform: translate(-100%, -50%);
border-width: 5px;
border-style: solid;
border-color: transparent #181818 transparent transparent;
}
/* #endif */
/* #ifdef APP-NVUE */
.fui-copy__tl_fixed {
position: fixed;
align-items: center;
justify-content: center;
}
.fui-ct__dir-row {
flex-direction: row;
}
.fui-ct__dir-col {
flex-direction: column;
}
.fui-copy__text-triangle {
width: 12px;
height: 12px;
background: #181818;
}
.fui-ct__triangle-top {
transform: rotate(45deg) translateY(-8px);
}
.fui-ct__triangle-bottom {
transform: rotate(45deg) translateY(8px);
}
.fui-ct__triangle-right {
transform: rotate(45deg) translateX(8px);
}
.fui-ct__triangle-left {
transform: rotate(45deg) translateX(-8px);
}
.fui-ct__tool-show {
opacity: 1;
}
.fui-ct__tool-hidden {
opacity: 0;
}
/* #endif */
</style>

8
components/firstui/fui-copy-text/lib/clipboard.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

52
components/firstui/fui-copy-text/lib/index.js Normal file
View File

@ -0,0 +1,52 @@
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1861 4 0 7 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
/*!
* 剪贴板
*
* 官网地址：https://firstui.cn/
* 文档地址：https://doc.firstui.cn/
*/
// #ifdef H5
import ClipboardJS from "./clipboard.min.js"
// #endif
/**
* data 需要复制的数据
* callback 回调
* e 当用户点击后需要先请求接口再进行复制时，需要传入此参数（H5端）
* **/
const getClipboardData = function(data, callback, e) {
// #ifdef APP-PLUS || MP
uni.setClipboardData({
data: data,
success(res) {
("function" == typeof callback) && callback(true)
},
fail(res) {
("function" == typeof callback) && callback(false)
}
})
// #endif
// #ifdef H5
let event = window.event || e || {}
let clipboard = new ClipboardJS("", {
text: () => data
})
clipboard.on('success', (e) => {
("function" == typeof callback) && callback(true)
clipboard.off('success')
clipboard.off('error')
clipboard.destroy()
});
clipboard.on('error', (e) => {
("function" == typeof callback) && callback(false)
clipboard.off('success')
clipboard.off('error')
clipboard.destroy()
});
clipboard.onClick(event)
// #endif
}
export default {
getClipboardData: getClipboardData
};