feat: 新增le-text 全局组件 支持 超出隐藏&tip&copy 控制

src/components/Text.vue

@@ -0,0 +1,76 @@
+<template>
+	<section class="le-text-wrap" ref="textTooltipRef">
+		<el-tooltip v-if="value" :visible="isShowTooltip" :placement="placement">
+			<template #content>
+				<span>{{ value }}</span>
+			</template>
+			<div class="le-text" @mouseover="handleElTooltip" @mouseleave="isShowTooltip = false">
+				<slot>
+					<el-text v-bind="textProps" class="text-overflow_ellipsis_line_2" :style="textStyle">{{ value }}</el-text>
+				</slot>
+				<!-- 复制按钮 -->
+				<el-icon class="action-icon" v-if="copy">
+					<DocumentCopy @click.stop="copyText(value)" />
+				</el-icon>
+			</div>
+		</el-tooltip>
+		<span v-else>-</span>
+	</section>
+</template>
+
+<script lang="ts" setup name="LeText">
+import { computed, ref } from 'vue'
+import type { Component, PropType } from 'vue'
+import { copyText } from '@/utils'
+
+defineOptions({ name: 'LeText' })
+const props = defineProps({
+	value: {
+		type: String,
+		default: ''
+	},
+	copy: {
+		type: Boolean,
+		default: false
+	},
+	// tooltip 配置
+	placement: {
+		type: String,
+		default: 'top'
+	},
+	// text 配置
+	lineClamp: {
+		type: [String, Number],
+		default: 1
+	},
+	type: {
+		type: String as PropType<'primary' | 'success' | 'warning' | 'danger' | 'info'>
+	},
+	tag: {
+		type: String,
+		default: 'span'
+	}
+	/*truncated: {
+		type: Boolean,
+	}*/
+})
+const textProps = computed(() => {
+	const { lineClamp, type, tag } = props
+	return {
+		lineClamp,
+		type,
+		tag
+	}
+})
+const textStyle = computed((): string => {
+	const lineClamp = +props.lineClamp || 1
+	return `line-clamp: ${lineClamp}; -webkit-line-clamp: ${lineClamp}`
+})
+const textTooltipRef = ref()
+const visible = ref(false)
+const isShowTooltip = ref(false)
+function handleElTooltip(e: any): void {
+	const base: number = textTooltipRef.value.clientHeight
+	isShowTooltip.value = e.target.scrollHeight > base
+}
+</script>

src/components/registerGlobComp.ts

@@ -14,6 +14,7 @@ import NoData from '@/components/NoData.vue'
 import Icon from '@/components/Icon.vue'
 import Select from '@/components/Select/index.vue'
 import Chart from '@/components/Chart.vue'
+import Text from '@/components/Text.vue'
 
 import ScWorkflow from '@/components/scWorkflow'
 // import draggable from 'vuedraggable/src/vuedraggable'
@@ -33,7 +34,8 @@ const compList = [
 	Icon,
 	Select,
 	Chart,
-	ScWorkflow
+	ScWorkflow,
+	Text
 	// draggable
 ]
 

src/styles/index.scss

@@ -142,6 +142,16 @@ div:focus {
 	@include hover-bg-opacity();
 }
 
+// 链接样式
+.le-link {
+	color: var(--el-color-primary);
+	cursor: pointer;
+	&:hover {
+		//color: var(--el-button-hover-link-text-color);
+		color: var(--el-color-primary-light-5);
+	}
+}
+
 // 普通列表增删改的通用样式表
 .pageWrap {
 	flex: 1;

src/styles/lance-element-vue.scss

@@ -13,6 +13,7 @@
 //@import "lance-element/searchGroup.scss";
 @import "lance-element/searchForm.scss";
 @import "lance-element/select.scss";
+@import "lance-element/text.scss";
 //@import "lance-element/dropdown.scss";
 //@import "lance-element/tabs.scss";
 

src/styles/lance-element/text.scss

@@ -0,0 +1,25 @@
+@import "../variables.scss";
+// Text 样式
+.#{$prefix}text {
+	&-wrap {
+	}
+	/*.is-line-clamp {
+		display: -webkit-inline-box;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}*/
+	//font-size: 14px;
+	font-size: var(--el-font-size-base);
+	display: inline-flex;
+	.action-icon {
+		margin-left: 2px;
+		padding-top: 4px;
+		//color: var(--el-color-primary);
+		color: var(--el-text-color-secondary);
+		cursor: pointer;
+		&:hover {
+			//color: var(--el-color-primary-light-5);
+			color: var(--el-color-primary);
+		}
+	}
+}

src/utils/index.ts

@@ -4,6 +4,7 @@ import { ElMessage } from 'element-plus'
 export { ls } from './vueStorage'
 import { get, set } from 'lodash-unified'
 import i18n from '@/lang/index'
+import { useClipboard } from '@vueuse/core'
 
 // 多语言翻译
 export const t = (key: string, ...args: any[]) => {
@@ -117,7 +118,7 @@ export const objDeepMerge = (...objs: any[]) => {
  * @param sucTxt
  * @returns {boolean}
  */
-export function copyText(val: string, sucTxt = '复制成功~') {
+export function copyText_native(val: string, sucTxt = '复制成功~') {
 	const textarea: any = document.createElement('textarea')
 	// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
 	textarea.readOnly = 'readonly'
@@ -250,6 +251,24 @@ export const millisecondsToMinutesAndSeconds = (milliseconds: number) => {
 	}
 }
 
+/**
+ * 复制文字
+ * @param text
+ */
+export async function copyText(text: string) {
+	const { copy, copied, isSupported } = useClipboard(/*{ source: text }*/)
+	if (!isSupported) {
+		// 复制失败
+		ElMessage.error(t('le.message.CopyFailure'))
+	} else {
+		await copy(text)
+		if (copied.value) {
+			// message.success('复制成功~')
+			ElMessage.success(t('le.message.CopiedSuccessfully'))
+		}
+	}
+}
+
 // 静态图标
 export const ImageArr = [
 	'approval',