Nuxt.js ライブラリ「vue-cobra」を使用してスクロールの長さをインジゲーター表示する
ライブラリ「vue-cobra」をインストールすると、スクロールの長さをインジゲーター表示することが可能です。ここでは、nuxt.jsで vue-cobraを利用するための手順と簡単な使い方を記述してます。
環境
- OS ubuntu20.04
- node v12.16.1
- npm 6.14.2
- Nuxt.js v2.12.0
Nuxt.js環境構築
下記のコマンドで構築。ここでは、nuxtappという名前でプロジェクトを作成してます。
|
1 |
npx create-nuxt-app nuxtapp |
ここでは、下記の設定で構築してます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
create-nuxt-app v2.15.0 ✨ Generating Nuxt.js project in testnuxt ? Project name nuxtapp ? Project description My doozie Nuxt.js project ? Author name ? Choose programming language JavaScript ? Choose the package manager Yarn ? Choose UI framework None ? Choose custom server framework None (Recommended) ? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Choose linting tools ESLint ? Choose test framework None ? Choose rendering mode Universal (SSR) ? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection) yarn run v1.22.4 |
※yarnをインスールしているので、ここではnpmではなくyarnを選択してます。
|
1 2 |
## yarnのインスールは下記コマンド npm install -g yarn |
外部IP許可
localhostではなくプライベートIPを利用して接続して確認したいので、作成したプロジェクトnuxtappの配下にあるpackage.jsonに下記を追加します。
|
1 2 3 4 5 6 |
"config": { "nuxt": { "host": "0.0.0.0", "port": "3000" } }, |
vue-cobraインストール
下記のコマンドでインストールします。
|
1 2 3 4 5 |
## 作成したプロジェクトに移動 cd nuxtapp ## インストール yarn add vue-cobra |
vue-cobra使い方
plugins配下にplugin.jsを作成し、下記の通りに編集します。
|
1 2 3 4 |
import Vue from 'vue' import vueCobra from 'vue-cobra' Vue.component('vue-cobra', vueCobra) |
プロジェクト配下にあるnuxt.config.jsに下記のコードを追加します。
|
1 2 3 4 5 6 |
plugins: [ { src: '@/plugins/plugin', mode: 'client' } ], |
pages配下にあるindex.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 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 |
<template> <div class="container"> <div> <logo /> <div> <vue-cobra :height="10" :z-index="900" color="#4fc08d" :opacity="0.5" position="left" /> <div class="demo"> <p> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> </p> <p> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> </p> <p> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> </p> <p> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> </p> <p> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> test text<br> </p> </div> </div> </div> </div> </template> <script> import Logo from '~/components/Logo.vue' export default { name: 'Nuxttest', components: { Logo } } </script> <style> .container { margin: 0 auto; min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } </style> |
起動します
|
1 |
yarn dev |
ブラウザから http://プライベートIP:3000にアクセスすると、縦クロールの長さがインジゲーター表示されていることが確認できます。
positionをtopに変更するとインジゲーターは上に表示されるようになります。
|
1 2 3 4 5 6 7 |
<vue-cobra :height="10" :z-index="900" color="#4fc08d" :opacity="0.5" position="top" /> |
-
前の記事
ubuntu20.04 wkhtmltopdfをインストールしてサイトをPDF化する 2020.04.29
-
次の記事
React.js ライブラリ「react-image-gallery」を使用してイメージギャラリーを実装する 2020.04.29