Vue.jsのライブラリVue–slick-popoverをインストールしてポップオーバーを実装する
- 2020.02.11
- Vue.js
- Vue.js, Vue–slick-popover

vue.jsのライブラリである 「Vue–slick-popover」を利用して、ポップオーバーさせるための手順と簡単な使い方
環境
- OS CentOS 8.0.1905 (Core)
- node v12.13.1
- npm 6.13.2
- @vue/cli 4.1.1
Vue環境構築
下記のコマンドで構築。今回は、vueappという名前でプロジェクトを作成してます。
1 |
vue create vueapp |
プロジェクト作成時は、defaultを選択してます 。
1 |
Vue CLI v4.1.1? Please pick a preset: default (babel, eslint) |
Vue–slick-popoverインストール
下記の手順でインストールします。
1 2 3 4 5 |
## 移動 cd vueapp ## インストール vue i -S Vue–slick-popover |
Vue–slick-popover使い方
src配下のApp.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 |
<template> <div id="app"> <img ref="popoverReference" width="20%" src="./assets/logo.png" @click="openPopover"> <VueSlickPopover v-if="isPopoverVisible" :popover-options="popoverOptions" @closePopover="closePopover" > <VueSlickPopoverContent> <p @closePopover="closePopover">ポップアップされます</p> </VueSlickPopoverContent> </VueSlickPopover> </div> </template> <script> import { VueSlickPopover, VueSlickPopoverContent } from 'vue-slick-popover' import "vue-slick-popover/dist/vue-slick-popover.css" export default { name: "App", components: { VueSlickPopover, VueSlickPopoverContent }, data() { return { isPopoverVisible: false, popoverOptions: { animation: "scale-fade", popoverReference: null, placement: "top", offset: "0,0" } } }, mounted() { this.popoverOptions.popoverReference = this.$refs.popoverReference }, methods: { closePopover() { this.isPopoverVisible = false }, openPopover() { this.isPopoverVisible = true } } }; </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; padding-top: 150px; margin: 0 auto; width: 800px; } </style> |
起動します。
1 |
npm run serve |
ブラウザから http://プライベートIP:8080 に アクセスし、logoをクリックするとポップオーバーされることが確認できます。

-
前の記事
PythonとSeleniumを使ってchromeで検索をする 2020.02.11
-
次の記事
windows10 ElixirをインストールしてHello Worldしてみる 2020.02.12
コメントを書く