コピペライブラリを作りたくてVueのコンポーネントでいろいろ試してみました。
１．いろいろ詰まったところを整理
以前、紹介したv-tooltip「[Vue.js]v-tooltipの使い方を試す」を利用する単一ファイルコンポーネントを作ろうと思ったんだけど、ライブラリの読み込みは大元のページでやらないと上手くうごかなかった?
|
1 |
Vue.use(VTooltip); |
この記述でv-tooltipディレクティブをロードさせるとこが、やっぱりページ自体のビルドでやっとかないとダメみたいだった。
で、v-tooltipにはスタイルが付いてないから本家サイトのサンプルをベースにカスタマイズしなきゃいけないんだけども、単一ファイルコンポーネントのテンプレだとstyleタグにscopedって属性がついてて、逆に大元のページで読み込ませたv-tooltipにスタイルを適用できなかった。
なので、Vueコンポーネント側にscoped属性をstyleタグをもいっこ追加してスタイルを定義してみた。
DetailToolTips.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<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,"&").replace(/</g,"<").replace(/>/g,">"); 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,"&").replace(/</g,"<").replace(/>/g,">"); 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は実装してみたらなんかほしい感じとイメージが違うということが今日はわかった?
- タブメニューでカテゴリ毎にコンテンツを分けて整理
- コンテンツタイトルにオンマウスで記事のアウトライン表示