vue.jsの自分用メモ書き
- 2020.03.14
◆ボックスの情報を取得 １、refで名前を指定 <div ref="box"></div> 2、要素の情報を取得（下記では高さ） let scrollHeight = this.$refs.box.clientHeight; ◆子供要素から親要素に値を渡す １、親に値を渡す this.$emit(‘hogehoge’, this.index); ２、 […]
Coding
imgをmargin: autoで中央寄せにする
- 2020.02.10
よく忘れるのでメモ。 画像はインライン要素のため、margin: autoが効かない。 display: block を行い、ブロック要素に変更する。
vue.jsでスライダーを導入する
htmlで実装していたページをvue.js形式で作り直すことになった。 その際にスライダーを導入する必要があったため下記の対応を行った。 １、VueAwesomeSwiperを追加 ◯yarnでのインストール yarn add vue-awesome-swiper ◯npmでのインストール npm install vue-awesome-swiper ２、main.jsへの記述追加 // Swip […]
Hubspotで導入したフォーム送信ボタンにFacebookピクセルコードの処理を追加する
- 2019.10.16
- Facebookピクセルコード, Hubspot
Hubspotフォームを作成し、そのボタンに発火処理を入れた。 <script> window.addEventListener('message', event => { if ( event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit' ) { fbq('tr […]
Vue.jsのrouter-linkにアンカーリンクを設定する
- 2019.10.02
- hash, router-link, アンカー, アンカーリンク, ハッシュタグ
遷移先の項目にアンカー移動したいときなど、router-linkの指定を行うことで「#hashtag」を末尾に追加出来る <router-link :to="{ name: 'hogeProject', hash: '#hashtag' }" > ページを移動する </router-link> ただしこのままでは、URL末尾にハッシュがつくのみであり、移動はまだ行われない。 […]
Vue.jsでURLパラメータから値を取り出す
- 2019.08.26
- パラメータ
http://hogehoge.com/info?edit=true&id=123456 上記のようなパラメータを含んだURLから、パラメータの値を取り出す。 今回、編集ページとそれ以外でページの分岐を行い、またパラメータでIDを渡す事を行った。 ——————————& […]
Vue.jsでウィンドウ及びボックスのサイズ取得を行う
ベースとなる処理は、VueコンポーネントでWindowサイズ変更検知＆値取得を参照した。 <template> <div> <p>window width: {{ width }}</p> <p>window height: {{ height }}</p> </div> </template> < […]
Vue.js環境でスクロールバーのデザインを変更する（perfect-scrollbar）
- 2019.07.09
- perfect-scrollbar, カスタマイズ, スクロールバー
Vue.jsで構築したサイトに対して、下記のサイトを参考にしperfect-scrollbarの導入を行った。 Vue.jsで「vue2-perfect-scrollbar」を使ってカスタムスクロールバーを実装する https://nori-life.com/vue-js-perfect-scroll-bar/ ——————& […]
Vue.jsで追従サイドメニューを作成
<div class="sticky-scroll" // ベースのスタイル :class="{ isScrollEnd: isScrollEnd }" // フローティングするボックスがウィンドウ下部を付け抜けないための判定 ref="sideHeight" // 計算のための高さ取得 > ～ ここにコンテンツが入ります ～ </div> <script> e […]
Vue.jsでのスタイル操作
◆取得した値をstyleに入れる 例）スクロール位置を取得＆その値をstyleとして渡す <div :style="{ top: scrollY + 'px' }"> ～ここにコンテンツが入ります。 </div> <script> export default { data() { return { scrollY: 0 }; }, mounted() { / […]