Merge 98c4fcc776a7fb719f8e210507a45aa9ab28ee00 into 6858a9ad67483025f6a9432a926beb9327037be3

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>

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' }
     }
   ]
 }

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 />