Vue.jsでウィンドウ及びボックスのサイズ取得を行う
ベースとなる処理は、VueコンポーネントでWindowサイズ変更検知＆値取得を参照した。 <template> <div> <p>window width: {{ width }}</p> <p>window height: {{ height }}</p> </div> </template> < […]
Vue.js
2/2ページ
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() { / […]
Vue.jsチェックポイント（随時更新）
- 2019.05.29
- チェックポイント
◆最終チェック時に行うこと ☆不要な処理（使用していないもの／console.log(); など）が残っていないか ◆ポイント ☆要素の変更により値が変わる、計算するもの computed で処理を行う。 ☆==は===にしましょう（型の比較もしてくれるので安全です） ◆ソースコード短縮 ☆ v-bind:は省略して:にしましょう ☆ hoge: function() {}は省略してhoge() […]
Vue.jsでのスクロール感知
スクロール位置を判定したパーツの表示に利用。 下記ソースではスクロール値が200pxに達すると、divに対して「isVue」クラスを付与。 handleScroll()でwindow.scrollYを指定すると、横スクロールが取得できる。 ◆hrml <div v-bind:class="{ isView: isView }"> ◆vue new Vue({ el: '#app', d […]
vue.jsで条件に合わせてクラスを変更する（複合条件）
- 2019.05.02
◆単一条件 <div v-bind:class="{ addclass: 条件 }">ほげほげ</div> ◆複合条件 <div v-bind:class="{ addclass: !aaaa || bbbb }">ほげほげ</div>
vue.jsでbuttonのdisabledを切り替える
■html <div id="app"> <button href="#" class="btn btn-info" v-on:click="button_disable()" :disabled="isTestDisabled">Disable_Button</button> </div> ■script <script> var vm […]