vue项目中封装文本组件

为什么会选择封装这个文本组件呢，原因就是因为在项目中的表格里，会出现文字比较多的情况，比如备注、描述等，文字多的话会占很多行，也很不美观，用css也可以实现，只不过你每个地方都要写固定的css代码，没必要也很麻烦，所以封装成全局的就很方便了，哪里使用直接复制就行了。

1. 封装分页组件

在components文件下创建 TableTextareaCell文件夹，在 TableTextareaCell文件夹下创建 TableTextareaCell.vue文件与index.js文件

TableTextareaCell.vue文件

 @Description: 公共的表格显示文本组件，超过2行显示...，鼠标悬浮显示全部
<template>
  <div
    v-if="value"
    v-html="value.replace(/\n/g, '</br>')"
    :title="value"
    class="table_textarea_cell"
    style="-webkit-box-orient: vertical"
  ></div>
</template>
  <script>
export default {
  name: "TableTextareaCell",
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang='scss' scoped>
.table_textarea_cell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
}
</style>

index.js文件

import TableTextareaCell from './TableTextareaCell';

export default {
  install(Vue) {
    Vue.component('TableTextareaCell', TableTextareaCell);
  }
};

main.js文件

在全局js文件中引入封装的文本组件并注册

import Vue from "vue";
import TableTextareaCell from '@/components/TableTextareaCell';
Vue.use(TableTextareaCell);

2. 使用文本组件

<template>
  <TableTextareaCell :value="scope.row.shop_audit_time" />
</template>
<script>
</script>