组件功能表
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>