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

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

 

1.いろいろ詰まったところを整理

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

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

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

DetailToolTips.vue

 

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

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

・・・ボツかな🤔

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

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

 




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です