From 98c4fcc776a7fb719f8e210507a45aa9ab28ee00 Mon Sep 17 00:00:00 2001
From: "SCIPLUS\\yyding" <yahya_dyy@163.com>
Date: Thu, 8 Jul 2021 16:51:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=87=E6=B3=A8=EF=BC=9A=201.=E6=96=B0?=
=?UTF-8?q?=E5=BB=BAtooltip-item=E7=BB=84=E4=BB=B6,=E7=94=A8=E4=BA=8E?=
=?UTF-8?q?=E8=AF=A6=E6=83=85=E5=B1=95=E7=A4=BA=EF=BC=8C=E5=86=85=E5=AE=B9?=
=?UTF-8?q?=E9=83=A8=E5=88=86=E8=B6=85=E5=87=BA...=E9=BC=A0=E6=A0=87?=
=?UTF-8?q?=E6=94=BE=E4=B8=8A=E8=87=AA=E5=8A=A8=E6=89=93=E5=BC=80tooltip?=
=?UTF-8?q?=E6=8F=92=E4=BB=B6=E6=98=BE=E7=A4=BA=E5=AE=8C=E6=88=90=E5=86=85?=
=?UTF-8?q?=E5=AE=B9=EF=BC=8C=E6=97=A0...=E9=BC=A0=E6=A0=87=E6=94=BE?=
=?UTF-8?q?=E4=B8=8A=E6=97=A0=E6=95=88=E6=9E=9C=202.=E6=B7=BB=E5=8A=A0?=
=?UTF-8?q?=E6=BC=94=E7=A4=BA=E6=96=B0=E7=BB=84=E4=BB=B6=E9=A1=B5=E9=9D=A2?=
=?UTF-8?q?tooltip-items?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/TooltipItem/index.vue | 84 +++++++++++++++++++++
src/router/modules/components.js | 6 ++
src/views/components-demo/tooltip-items.vue | 34 +++++++++
3 files changed, 124 insertions(+)
create mode 100644 src/components/TooltipItem/index.vue
create mode 100644 src/views/components-demo/tooltip-items.vue
diff --git a/src/components/TooltipItem/index.vue b/src/components/TooltipItem/index.vue
new file mode 100644
index 00000000..63c608be
--- /dev/null
+++ b/src/components/TooltipItem/index.vue
@@ -0,0 +1,84 @@
+<template>
+ <div class="box">
+ <div ref="row_content" class="item_box">
+ <p :style="`flex-basis: ${labelWidth}px`">{{ label }}</p>
+ <el-tooltip :disabled="tooltipShow" effect="dark" :content="content" placement="top">
+ <p ref="content_item">{{ content }}</p>
+ </el-tooltip>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'TooltipItem',
+ props: {
+ labelWidth: {
+ type: Number,
+ default: 80
+ },
+ label: {
+ type: String,
+ default: ''
+ },
+ content: {
+ type: String,
+ default: ''
+ }
+ },
+ data() {
+ return {
+ tooltipShow: true
+ }
+ },
+ mounted() {
+ this.$nextTick(() => {
+ setTimeout(() => {
+ this.tooltipShowFun()
+ })
+ })
+ },
+ methods: {
+ tooltipShowFun() {
+ const rowWidth = this.$refs['row_content'].offsetWidth
+ const contentWidth = this.$refs['content_item'].offsetWidth
+ if ((rowWidth - this.labelWidth) <= contentWidth) {
+ this.tooltipShow = false
+ } else {
+ this.tooltipShow = true
+ }
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.box{
+ width: 100%;
+ .item_box{
+ width: 100%;
+ display: flex;
+ align-items: center;
+ flex-wrap: nowrap;
+ p{
+ &:nth-child(1) {
+ display: block;
+ flex-basis: 80px;
+ flex-grow: 0;
+ flex-shrink: 0;
+ font-weight: 500;
+ font-size: 16px;
+ color: #384250
+ }
+ &:nth-child(2) {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ font-weight: 500;
+ font-size: 14px;
+ color: #8f8f8f
+ }
+ }
+ }
+}
+</style>
diff --git a/src/router/modules/components.js b/src/router/modules/components.js
index 0da96f97..666a4c47 100644
--- a/src/router/modules/components.js
+++ b/src/router/modules/components.js
@@ -95,6 +95,12 @@ const componentsRouter = {
component: () => import('@/views/components-demo/drag-kanban'),
name: 'DragKanbanDemo',
meta: { title: 'Drag Kanban' }
+ },
+ {
+ path: 'tooltip-items',
+ component: () => import('@/views/components-demo/tooltip-items'),
+ name: 'TooltipItemsDome',
+ meta: { title: 'Tooltip Items' }
}
]
}
diff --git a/src/views/components-demo/tooltip-items.vue b/src/views/components-demo/tooltip-items.vue
new file mode 100644
index 00000000..df085fb2
--- /dev/null
+++ b/src/views/components-demo/tooltip-items.vue
@@ -0,0 +1,34 @@
+<template>
+ <div class="components-container">
+ <el-card class="box-card">
+ <el-row :gutter="10">
+ <el-col :span="6">
+ <tooltip-item label="申请人：" content="张三，李四，王二，张伟，大鹏，小雕" />
+ </el-col>
+ <el-col :span="6">
+ <tooltip-item label="发明人：" content="张三，李四，王二" />
+ </el-col>
+ <el-col :span="6">
+ <tooltip-item label="申请日期：" content="2020-07-08" />
+ </el-col>
+ <el-col :span="6">
+ <tooltip-item label="IPC分类号：" :label-width="92" content="DC12312312412312312412314124" />
+ </el-col>
+ </el-row>
+ <el-row :gutter="10">
+ <el-col :span="8">
+ <tooltip-item label="地址：" content="上海市徐汇区上海市徐汇区上海市徐汇区上海市徐汇区上海市徐汇区" />
+ </el-col>
+ </el-row>
+ </el-card>
+ </div>
+</template>
+<script>
+import TooltipItem from '@/components/TooltipItem'
+export default {
+ name: 'TooltipItems',
+ components: { TooltipItem }
+}
+</script>
+
+<style scoped />