vue 将文本截断为特定的行数– vue-snip

vue 将文本截断为特定的行数– vue-snip
插件名称 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'
})