Vue:HeyUI组件TextEllipsis超出文本省略
原创
©著作权归作者所有:来自51CTO博客作者彭世瑜的原创作品,请联系作者获取转载授权,否则将追究法律责任
实现的效果
目录
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
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 />
<TextBoxstyle="margin-top:20px;"/>
</div>
</template>
<script>import TextBox from './Text.vue';
export default {
name: '',
props: [],
components: {
TextBox,
},
};</script>
<style scoped>
</style>
启动测试服务
参考文档:
TextEllipsis 超出文本省略深入扩展文本溢出解决方案