Vueコンポーネントを入れ子にするテスト

コピペライブラリを作りたくてVueのコンポーネントでいろいろ試してみました。

１．いろいろ詰まったところを整理

以前、紹介したv-tooltip「[Vue.js]v-tooltipの使い方を試す」を利用する単一ファイルコンポーネントを作ろうと思ったんだけど、ライブラリの読み込みは大元のページでやらないと上手くうごかなかった?

Vue.use(VTooltip);

この記述でv-tooltipディレクティブをロードさせるとこが、やっぱりページ自体のビルドでやっとかないとダメみたいだった。
 
で、v-tooltipにはスタイルが付いてないから本家サイトのサンプルをベースにカスタマイズしなきゃいけないんだけども、単一ファイルコンポーネントのテンプレだとstyleタグにscopedって属性がついてて、逆に大元のページで読み込ませたv-tooltipにスタイルを適用できなかった。

なので、Vueコンポーネント側にscoped属性をstyleタグをもいっこ追加してスタイルを定義してみた。

DetailToolTips.vue

<template>
  <li v-tooltip.bottom-start="outline" class="dis_inline" >{{ title }}</li>
</template>

<script>
module.exports = {
  props: {
    id: String,
    title: String,
    source: String,
    discript: String,
    link: String
  },
  computed: {
    outline: function() {
      let rslt = [];
      rslt.push("<div><pre><code>");
      if(this.discript) {
        let esc_dis = this.discript.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
        let dis = esc_dis.split("\r\n");
        if(dis.length >= 4){
            for(let i=0; i < 4; i++){ if(dis[i]){ rslt.push(dis[i] + "\r\n") } }
            rslt.push("　...(略)...");
        }else{
            rslt.push(dis.join("\r\n"));
        }
        rslt.push("</code></pre></div><div class='body'><pre><code>");
      }

      if(this.source) {
        let esc_src = this.source.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
        let src = esc_src.split("\r\n");
        if(src.length >= 5){
            for(let i=0; i < 5; i++){ if(src[i]){ rslt.push(src[i] + "\r\n") } }
            rslt.push("　...(略)...");
        }else{
            rslt.push(src.join("\r\n"));
        }
      }
      rslt.push("</code></pre></div>");
      return rslt.join('');
    }
  }
}
</script>

<style scoped>
  .dis_inline {
    display: table;
    font-size: 0.8em;
  }
</style>

<style>
  .tooltip {
    display: block !important;
    z-index: 10000;
  }
  # ・・・省略・・・ 
 
  </style>

２．で、いろいろ試行錯誤してメニュー作ってみたんだけど

これで、とりえあず読み込んだコンテンツの冒頭何行かをTooltip表示する部品になった訳だけども、実際にやってみたら案外読みにくかった?

・・・ボツかな?

いろんな構文セットをかき集めてスンスン取得できるページにしたかったんだけど、v-tooltipは実装してみたらなんかほしい感じとイメージが違うということが今日はわかった?

• タブメニューでカテゴリ毎にコンテンツを分けて整理
• コンテンツタイトルにオンマウスで記事のアウトライン表示