文档:
安装
npm install heyui
实现的效果
目录
$ tree
.
├── App.vue
├── Text.vue
├── main.js
└── package.json
package.json
{
"dependencies": {
"eslint-plugin-vue": "^7.4.1",
"heyui": "^1.28.0"
}
}
main.js
import Vue from "vue";
import App from "./App.vue";
import { install, TextEllipsis } from "heyui";
// 按需加载
Vue.use(install, { components: { TextEllipsis } });
const app = new Vue({
el: "#app",
render: (h) => h(App),
});
export default app;
Text.vue
<template>
<div class="box">
<TextEllipsis
:text="text"
:height="30"
:isLimitHeight="isLimitHeight"
>
<template slot="more">
<span>...</span>
<span
@click="isLimitHeight=false"
class="link"
>查看更多</span>
</template>
<span
slot="after"
class="link"
v-if="!isLimitHeight"
@click="isLimitHeight=true"
>收起</span>
</TextEllipsis>
</div>
</template>
<script>
export default {
name: '',
props: [],
data() {
return {
text:
'《华盛顿自由灯塔报》几天前报道称,美国国防部官员透露中国近日进行第十次东风-41洲际导弹的试射活动,这次试射中东风-41导弹投射了多个弹头并成功命中中国西部靶场目标。',
isLimitHeight: true,
};
},
computed: {},
methods: {},
created() {},
};
</script>
<style scoped>
.box {
width: 500px;
border: 1px solid #0084ff;
}
.link {
cursor: pointer;
color: #0084ff;
}
</style>
App.vue
<template>
<div>
<TextBox />
<TextBox style="margin-top:20px;"/>
</div>
</template>
<script>
import TextBox from './Text.vue';
export default {
name: '',
props: [],
components: {
TextBox,
},
};
</script>
<style scoped>
</style>
启动测试服务
$ vue serve
源码参考
https://github.com/heyui/heyui/blob/master/src/components/text-ellipsis/textellipsis.vue