【Vue】vue-clamp / テキスト行数指定表示

Vue

■ はじめに

vue-clamp ってゆーいうプラグインについて、学ぶ。

■ デモ

* 以下のデモを触ってどういうものかを掴むといいかも。

https://justineo.github.io/vue-clamp/demo/#demo

■ 環境設定

npm i --save vue-clamp

Error : Could not find a declaration file for module 'vue-clamp'.

* 上記の設定だけだと、以下のエラーになってしまった。

エラー内容 

9:22 Could not find a declaration file for module 'vue-clamp'. 
'C:/xxxx/my-app/node_modules/vue-clamp/dist/vue-clamp.js' implicitly has an 'any' type.
  Try `npm install @types/vue-clamp` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-clamp';`    
     7 | <script lang="ts">
     8 | import { Component, Vue } from "vue-property-decorator";
  >  9 | import VueClamp from 'vue-clamp';
       |                      ^
    10 | 
    11 | @Component({
    12 |   components: {

解決案
https://github.com/Justineo/vue-clamp/issues/43

より抜粋
~~~~~~~~~~~~~~
@nc-csl just add next line to your declare.d.ts

declare module 'vue-clamp';
~~~~~~~~~~~~~~

修正案：shims-vue.d.ts 

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

declare module 'vue-clamp'; // <=★追加★

■ サンプル

* 最大行数2行で設定。
* それ以上は「...」で表示される

Home.vue 

<template>
  <div>
    <v-clamp :max-lines="2" autoresize>{{ description }}</v-clamp>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import VClamp from 'vue-clamp';

@Component({
  components: {
    VClamp
  }
})
export default class Home extends Vue {
  get description() {
    return "あいうえおかきくけこさしすせそたちつてと" +
    "なにぬねのはひふへほまみむめもやゆよをん" +
    "アイウエオカキクケコサシスセソナニヌネノ" +
    "ハヒフヘホマミムメモヤユヨヲン" +
    "１２３４５６７８９０ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱ" +
    "ＲＳＴＵＶＷＸＹＸＺabcdefghijklmnopqrstuvwxyz";
  }
}
</script>

参考文献

https://code.luasoftware.com/tutorials/vuejs/vue-truncate-by-line/

関連記事

Vue ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/04/30/000000