2020-11-10 1分 read (About 174 words)

【Vue.js】モーダルコンポーネントのサンプル

Vue.js のモーダルコンポーネントのサンプルです。

モーダルコンポーネント

MyModal.vue

<template>
  <transition name="b2t">
    <div class="modal-wrapper" @click.self.stop="$emit('hide')" v-if="isOpened">
      <div id="modal" class="modal-container">
        <div class="hide" @click="$emit('hide')">
          <i class="far fa-times"></i>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    props: {
      isOpened: false,
    },
  }
</script>

<style scoped="" lang="scss">
  .modal {
    &-wrapper {
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 10000;
    }
    &-container {
      position: fixed;
      top: 20vh;
      left: 10vw;
      width: 80vw;
      background-color: white;
      border-radius: 15px 15px 0px 0px;
      padding: 15px;
      padding-top: 5vh;
      overflow: auto;
    }
  }

  .hide {
    position: absolute;
    top: 0;
    right: 2vw;
    font-size: 2.5rem;
  }

  .b2t-enter-active,
  .b2t-leave-active {
    transition: opacity 300ms;
  }
  .b2t-enter-active > .modal-container,
  .b2t-leave-active > .modal-container {
    transition: all 300ms;
  }
  .b2t-enter > .modal-container {
    transform: translateX(100vw);
  }
  .b2t-leave-to > .modal-container {
    transform: translateX(100vw);
  }
</style>

モーダルコンポーネントを呼び出すコンポーネント

<template>
  <MyModal
    :isOpened="isOpenModal"
    @hide="isOpenModal = false"
  />
</template>

<script>
import MyModal from '@/components/MyModal.vue';

export default {
  components: {
    MyModal,
  },
  data() {
    return {
      isOpenModal: false,
    };
  },
}

2020-03-24 1分 read (About 199 words)

【Vue.js】要素の枠線をマウスで掴んでサイズ変更する

はじめに

要素の枠線をマウスで掴んでサイズ変更するやり方をメモします

2020-03-09 1分 read (About 145 words)

【Vue.js】無限スクロール処理

ライブラリ公式ページ

https://peachscript.github.io/vue-infinite-loading/

ライブラリインストール

1	npm install vue-infinite-loading -S

コンポーネント登録

main.js

import InfiniteLoading from 'vue-infinite-loading'
Vue.use(InfiniteLoading, {
  slots: {
    noResults: '',
    noMore: ''
  }
})

HTML コード

<template>
  <div>
    <div v-for="hoge in hoge_list"></div>
    <infinite-loading ref="infiniteLoading" spinner="bubbles" v-on:infinite="infiniteHandler"></infinite-loading>
  </div>
</template>

JavaScript コード

infiniteHandler() {
  if (/* 無限するロールする条件 */) {
    this.get_news_list();
  } else {
    console.log("無限スクロール完了")
    this.$refs.infiniteLoading.stateChanger.complete();
  },
},

async get_news_list() {
  const params = {
    page: this.page,
  };
  const res = await this.gm_api_get("news", params)
  this.page += 1;
  this.$refs.infiniteLoading.stateChanger.loaded();
}

this.$refs.infiniteLoading.stateChanger.reset();で初期化できます

2020-02-06 1分 read (About 128 words)

【Vue】inputのv-modelの値を0以上に制限する方法

input の v-model の値を 0 以上に制限する方法をメモします

filter だと表示上は制限できますが実際の値は制限できないんですよね

コツとしては v-model を使うのではなく、:value と@change に分けることですね

分かってしまえば簡単ですが微妙にハマったので一応メモしておきます

<div>
  <label>test label</label>
  <input type="number" :value="hoge" @change="min($event.target.value)" />
</div>

methods: {
  min(val) {
    if (val < 0) {
      this.hoge = 0;
    } else {
      this.hoge = val;
    }
  },

2020-01-08 1分 read (About 146 words)

Vueサイトにgoogle analyticsを埋め込むシンプルな方法

はじめに

Vue サイトに google analytics を埋め込んだのでメモします
めっちゃ簡単です。

2019-10-10 4分 read (About 549 words)

【Vue.js】LocalForageを導入してみた

はじめに

Vue.js プロジェクトに LocalForage を導入してみたので手順をメモしておきます。

2019-10-01 3分 read (About 447 words)

【node-forge】Maximum call stack size exceededエラーの原因【vue-i18n】

はじめに

表題のエラーが発生して原因特定にかなり手こずったのでメモしておきます

2019-09-26 数秒 read (About 70 words)

【Vue.js】後ろの要素のクリックイベントを発生させないようにする方法

一瞬なのでコードだけ載せます

<!-- 修正前 -->
<div @click="hoge()"></div>
<!-- 修正後 -->
<div v-on:click.stop="hoge()"></div>

参考
https://vuejs.org/v2/guide/events.html

知ってれば一瞬なのですが、知らなかったので少しハマりました、、

以上です。

2019-07-29 1分 read (About 117 words)

【Vue】「$attrs is readonly.」エラーの解決策

はじめに

bootstrap-vue を導入すると[Vue warn]: $attrs is readonly.というワーニングがコンソールに表示されるようになったので
解決策をメモしておきます。

2019-07-24 1分 read (About 126 words)

electron-vueのテンプレートのvuexの初期エラーの解決策

はじめに

electron-vue のテンプレートに vuex が入ってますがその使い方にクセがあったのでメモしておきます

【Vue.js】モーダルコンポーネントのサンプル

モーダルコンポーネント

モーダルコンポーネントを呼び出すコンポーネント

【Vue.js】要素の枠線をマウスで掴んでサイズ変更する

はじめに

【Vue.js】無限スクロール処理

ライブラリ公式ページ

ライブラリインストール

コンポーネント登録

HTML コード

JavaScript コード

【Vue】inputのv-modelの値を0以上に制限する方法

Vueサイトにgoogle analyticsを埋め込むシンプルな方法

はじめに

【Vue.js】LocalForageを導入してみた

はじめに

【node-forge】Maximum call stack size exceededエラーの原因【vue-i18n】

はじめに

【Vue.js】後ろの要素のクリックイベントを発生させないようにする方法

【Vue】「$attrs is readonly.」エラーの解決策

はじめに

electron-vueのテンプレートのvuexの初期エラーの解決策

はじめに

タグクラウド

アーカイブ

タグ

アーカイブ

タグ

Your browser is out-of-date!