フォーム入力バインディングを理解する その8

何年か前に jQuery で作った type tester という簡易的なフォント（関連のスタイリング）のテスターツールを Vue.js で作ってみる。 その8

GitHub Pages： https://yuheijotaki.github.io/type-tester/
GitHub リポジトリ：https://github.com/yuheijotaki/type-tester

---

ツール、CSS のトグル表示

<template v-if=""> を ツールで使った場合、$emit してきた値がリセットされてしまうので CSS で表示/非表示にしました。
CSSの出力エリアはふつうに v-if を使いました。

App.vue（抜粋）

<template>
  <div class="tools">
    ...
  </div>
  <div class="container">
    <template v-if="displayCss">
      <pre>CSS: {{styleObject}}</pre>
    </template>
  </div>
  <ul class="toggle">
    <li class="toggle__button">
      <a class="toggle__anchor" href="javascript:void(0);" v-on:click="toggleTools">Tools toggle button</a>
    </li>
    <li class="toggle__button">
      <a class="toggle__anchor" href="javascript:void(0);" v-on:click="toggleCss">CSS toggle button</a>
    </li>
  </ul>
</template>

...
  data() {
    return {
      ...
      displayCss: false
      ...
    }
  },
  methods: {
    // CSSエリアのトグル表示
    toggleCss: function () {
      // `.css` クラスのトグル
      this.displayCss = !this.displayCss;
    },
    // ツールのトグル表示
    toggleTools: function () {
      // `.tools` クラスのトグル
      const tools = document.querySelector('.tools');
      tools.classList.toggle('js-tools-active');
      // `.container` クラスのトグル
      const container = document.querySelector('.container');
      container.classList.toggle('js-tools-active');
    },
...

styleObject を出力用に整形

Vue で格納した styleObject を実際のCSS指定のテキスト形式に変換する。
computed 処理内に下記の感じで実装 font-familly だけ "" が必要なので分岐する

App.vue（抜粋）

...
computed: {
  // styleObject を出力用に整形
  styleObjectFormatted: function () {
    const styleObject = this.styleObject; // styleObject を取得
    const styleObjectArray = []; // テキスト用の配列を用意
    // styleObject をループして新しい配列に key と value を格納
    Object.keys(styleObject).forEach(function (key) {
      if ( key === 'font-family' ) {
        // key が 'font-family' の場合は値に '""' をつける
        styleObjectArray.push(`${key}: "${styleObject[key]}";`);
      } else {
        styleObjectArray.push(`${key}: ${styleObject[key]};`);
      }
    });
    const styleObjectText = styleObjectArray.join('\n'); // 1行ずつ改行処理
    return styleObjectText;
  }
}
...

これで <pre>{{styleObjectFormatted}}</pre> とすれば

font-family: "Helvetica , Hiragino Kaku Gothic ProN";
color: #000000;
background: #ffffff;
font-size: 16px;
line-height: 1.7;
letter-spacing: 0em;
font-weight: normal;
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
font-feature-settings: normal;
-webkit-font-smoothing: subpixel-antialiased;

がreturnされる

次やること

• meta / OGP 設定
• localStorage 使ってリロード対策
• ラベルなど文字ゆれある所を直す
• ファイル/コンポーネント名を直す
• リファクタリング（アロー関数使える所使う）
• 全体スタイリング