Изменение кнопки с надписью «Загрузка» с анимацией загрузки по клику - PullRequest
Новая
       35

Изменение кнопки с надписью «Загрузка» с анимацией загрузки по клику

1 голос
/ 09 июля 2019

Я создал кнопку Vue, которая отображает «Load More», а затем «Loading ...» при нажатии и загрузке дополнительного содержимого.Но теперь я хотел бы добавить еще один компонент - анимацию загрузки - рядом с «Загрузка».Кнопка работает совершенно нормально, но я просто хотел бы добавить эту анимацию вместе со словом «загрузка».

Я пытался использовать тег ref Vue, но мне не очень повезло с его успешным использованием в моем методе.

Loader.vue: 

<template>
  <div
    ref="sdcVueLoader"
    class="sdc-vue-Loader"
  >
    Loading...
  </div>
</template>

<script>
export default {
  name: 'Loader'
</script>

App.vue: 

<Button
  :disabled="clicked"
  @click="loadMore"
>
  {{ loadMoreText }}
</Button>

<script>
import Button from './components/Button'
import Loader from './components/Loader'

export default {
  name: 'ParentApp',
  components: {
    Button,
    Loader
  },
  data () {
    return {
      loadMoreText: 'Load More',
      clicked: false
    }
  },
  methods: {
    loadMore () {
      if ... {
        this.page += 1
        this.loadMoreText = 'Loading...' + this.$refs.sdcVueLoader
        this.clicked = true
        this.somerequest().then(resp => {
          this.clicked = false
          this.loadMoreText = 'Load More'
        })
        return this.loadMoreText
      }
    }
</script>

Я надеюсь, что кнопка продолжит работать в том виде, в каком она есть сейчас, но теперь и длякомпонент «Загрузчик» отображается рядом с «Загрузка ...» при нажатии кнопки в методе loadMore app.vue.

1 Ответ

0 голосов
/ 09 июля 2019

Если вы хотите сделать что-либо с любой формой сложности в html, лучше перенести это на ваш шаблон. В вашем случае у вас есть два состояния: либо загружается, либо не загружается. Итак, давайте создадим переменную loading, которая будет true или false. 

data () {
  return {
    loading: false,
    page: 1,
  }
},
methods: {
  async loadMore () {
    if (this.loading) {
      return;
    }

    this.page += 1;
    this.loading = true;
    const response = await this.somerequest();

    this.loading = false;
    // Oddly enough, we do nothing with the response
  }
}

Теперь в шаблоне используйте v-if с v-else: 

<button
  :disabled="loading"
  @click="loadMore"
>
  <template v-if="loading">
    <icon name="loader" />
    Loading...
  </template>
  <template v-else>
    Load more
  </template>
</button>

Если вы хотите переместить логику в другой компонент, у вас есть два варианта:

  • Добавьте loading в качестве опоры для этого другого компонента и переместите код шаблона в этот компонент
  • Используйте слот и передайте HTML прямо в кнопку загрузки. Это особенно полезно, если у вас есть несколько разных конфигураций, и вы не хотите иметь дело со все более сложными вариантами конфигурации, чтобы приспособить их все.
...