将按钮更改为 "Loading"，点击时带有加载动画

Question

我创建了一个显示 "Load More" 的 Vue 按钮，然后在单击并加载更多内容时显示 "Loading..."。但是，我现在想在 "Loading." 旁边添加另一个组件作为加载动画该按钮工作得很好，但我只想在 "loading."

一词旁边添加该动画

我尝试过使用 Vue 的 ref 标签，但在我的方法中没有成功使用它。

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>

我希望按钮能像现在一样继续工作，但现在当在 [=31= 中单击按钮时，"Loader" 组件也会显示在 "Loading..." 旁边] loadMore 方法。

Answer 1

如果您想在 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 作为 prop 添加到该不同的组件，并将模板代码移动到该组件
使用插槽并将 html 直接传递到您的加载按钮。如果您有多个不同的配置，并且不想处理越来越复杂的配置选项只是为了适应它们，这将特别有用。

将按钮更改为 "Loading"，点击时带有加载动画

Changing a button to say "Loading" with a loading animation on click

javascript

vue.js

vue-component

vuejs2

vue-cli