に投稿に更新1分で読む (約174語)

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

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

モーダルコンポーネント

MyModal.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
<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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <MyModal
    :isOpened="isOpenModal"
    @hide="isOpenModal = false"
  />
</template>

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

export default {
  components: {
    MyModal,
  },
  data() {
    return {
      isOpenModal: false,
    };
  },
}
に投稿に更新1分で読む (約145語)

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

ライブラリ公式ページ

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

ライブラリインストール

1
npm install vue-infinite-loading -S

コンポーネント登録

main.js

1
2
3
4
5
6
7
import InfiniteLoading from 'vue-infinite-loading'
Vue.use(InfiniteLoading, {
  slots: {
    noResults: '',
    noMore: ''
  }
})

HTML コード

1
2
3
4
5
6
<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 コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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();で初期化できます

に投稿に更新1分で読む (約128語)

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

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

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

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

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

1
2
3
4
<div>
  <label>test label</label>
  <input type="number" :value="hoge" @change="min($event.target.value)" />
</div>
1
2
3
4
5
6
7
8
methods: {
  min(val) {
    if (val < 0) {
      this.hoge = 0;
    } else {
      this.hoge = val;
    }
  },

タグ

Android28
Android開発1
Cordova26
Docker2
FCM2
FP1
Firebase2
Git1
Hexo2
Ionic1
JavaScript16
Kotlin2
MongoDB2
Node.js1
Numerai1
PHP4
PWA2
Python1
RSpec1
Rails3
RubyMine2
RubyOnRails1
VR1
Vue12
XCode2
bitcoin1
bitflyer1
bot12
css4
ethereum1
iOS開発1
js1
kintone1
mongoDB1
python2
レビュー1
感想2
振り返り1
損益公開4
日記1
機械学習11
筋トレ2
読書メモ13

アーカイブ

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×

×