插件名称 | vue-snip |
---|---|
发布时间 | 2021年4月14日 |
插件作者 | ajobi |
vue-snip是一个简单的Vue.js指令,可将您的长文本截断为特定的行数。
# Yarn
$ yarn add vue-snip
# NPM
$ npm i vue-snip
1.导入并注册vue片段。
import Vue from 'vue'
import VueSnip from 'vue-snip'
Vue.use(VueSnip)
2.确定最大行数,如下所示:
// Using CSS method
<p v-snip="3"> ... </p>
// Using JS method
<p v-snip:js="3"> ... </p>
// OR
<p v-snip:[method]="maxLines"> ... </p>
export default {
data () {
return {
method: 'js',
maxLines: 3
}
}
}
3.可用选项:
Vue.use(VueSnip,{
directiveName: 'snip',
snipMethod: 'css', // or js
maxLines: 3,
separators: ['. ', ', ', ' ', ''],
ellipsis: '.\u200A.\u200A.',
debugMode: false,
exposeSnipFunction: false,
snipFunctionName: 'snipText'
})