文字サイズがヌルヌルのレスポンシブ「vue-responsive-text」で遊んでみた

2019年10月10日

文字サイズがヌルヌルのレスポンシブ「vue-responsive-text」で遊んでみた

vue-responsive-textとは

vue-responsive-textは、エリア幅のサイズに応じてレスポンシブに文字サイズを変更するライブラリです。

 

文字サイズがヌルヌルのレスポンシブ「vue-responsive-text」で遊んでみた

 

インストール

以下のnpmyarnCDNを使ってインストールします。

npm

npm i --save vue-responsive-text

yarn

yarn add vue-responsive-text

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-responsive-text.umd.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/shwilliam/vue-responsive-text

 

導入手順

1. ライブラリの取り込み

(1)webpack等の場合 ※モジュール版は未検証です。

import VueResponsiveText from 'vue-responsive-text'

(2)WEBページの場合

const VueResponsiveText = window.vueResponsiveText.default;

2.メソッドを設定

components に上記で取得した VueResponsiveTex を読み込ませます。

let app = new Vue({
  el: '#app',
  data: {
    msg: 'Hellow World',
    divWidth: 50
  },
  components: {
    VueResponsiveText
  }
});

3. テンプレートを準備

div の幅に合わせて <VueResponsiveText> のテキストのサイズが変更されます。
今回は divWidth で幅を変更できるようにしています。

<div id="app">
  <input type="text" v-model="divWidth ">
  <div
    :style="{
      width: divWidth + '%',
      border: '1px solid #222',
      padding: '50px',
      marginBottom: '40px',
      marginTop: '40px'
    }"
  >
  <vue-responsive-text transition="100">{{msg}}</vue-responsive-text>
  </div>
</div>

サンプル

>>専用ページで確認する

 

さいごに

エリア幅のサイズに応じてレスポンシブに文字サイズを変更するライブラリでした。

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js
-, , , , ,