vueUI组件开发历程，text组件，代替传统p标签（一）_vue写项目时为什么不用p标签-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_32858649/article/details/93892352

本文介绍了一款名为dhtText的自定义文本组件，该组件基于Vue.js开发，旨在提供增强的文本显示功能，如控制换行、字数限制及文本复制等。作者在构建个人博客网站过程中，为了实现前端的高度模块化和抽象，决定从头开始编写UI组件库，而dhtText组件正是这一过程中的产物。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件功能表

dht-text	替代p标签，需要提前指定元素的宽高	text	String
		nowrap	Boolean	TRUE	默认不换行
		num	Boolean	TRUE	默认不控制字数显示，如果控制字数显示则，最后部分用省略号代替
		copy	Boolean	TRUE	默认可以复制文本，false不可复制文本

先说说我干这个得目的，我打算搭建自己的个人博客网站。但是我不打算依靠太多的插件，要就要自己写。后台前端全部自己玩。目前是做了一个首页，进度很慢。然后既然用了vue那么前端的模块化和高度的抽象是必须的。所以就翻elementUI的源码自己写ui组件库。目前只是完成两个。

这个组件没啥特色，就是那样用吧。

功能注意：元素本身宽高由外层div定义。所以你可以完全像普通p标签一样使用，但是不需要inline-block，并且增加部分功能

代码部分：

<template>
  <p class="dhtText" @copy="iscopy" :class="{ dhtTextNowrap: !nowrap }">
    {{ text | textNums(num) }}
  </p>
</template>

<script>
export default {
  name: "dhtText",
  props: {
    text: String,
    //是否换行
    nowrap: {
      type: Boolean,
      default: true
    },
    //是否支持拷贝
    copy: {
      type: Boolean,
      default: true
    },
    num: Number
  },
  data() {
    return {
      nums: this.num
    };
  },
  filters: {
    //字数空值显示
    textNums(val, num) {
      if (num > 0) {
        return num > 0 ? val.substring(0, num) + " ..." : val;
      } else {
        return val;
      }
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  methods: {
    //是否禁止拷贝
    iscopy(e) {
      e.returnValue = this.copy;
    }
  }
};
</script>

<style lang="scss">
.dhtText {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: inline-block;
}
//单行显示处理
.dhtTextNowrap {
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>