1

情况如下：

我有多个按钮来执行不同的异步功能。

都是进度按钮

我想要的是，当按下按钮时，标签会更改，指示功能的状态（功能名称、加载、完成或错误，如果需要的话）

一切正常，但文字没有改变

注意：目前我还没有实现所有四个功能，但一个应该可以工作

这是组件。

组件 1 - 容器

<script>
  import Button from '../components/Button.svelte'
  import { cubiqSetUp } from '../../../store/store.js'
  import { fly } from 'svelte/transition'
  import URLS from '../../../api/endpoints.js'

  let loadingEffect = false
  let ButtonText = null
  async function calibrate(current) {
    console.log(current.detail)
    loadingEffect = true
    ButtonText = 'CARGANDO...'
    console.log(ButtonText)
    let { calibrateURL } = await URLS()
    await fetch(calibrateURL)
      .then(response => {
        loadingEffect = false
        ButtonText = 'LISTO'
        response.json()
        setTimeout(() => {
          ButtonText = current.detail
        }, 1500)
      })
      .catch(error => {
        ButtonText = 'ERROR'
        loadingEffect = false
        setTimeout(() => {
          ButtonText = current.detail
        }, 1500)
      })
  }
</script>

<div class="Buttons">
  <div class="Buttons-container">
    <Button
      on:active={() => console.log('Pending')}
      {loadingEffect}
      ButtonText="CUBICAR" />
    <Button
      on:active={calibrate}
      {loadingEffect}
      ButtonText="CALIBRAR"
      delay={400} />
    {#if $cubiqSetUp.print_info === 'true' && $cubiqSetUp.OCR === 'true'}
      <Button ButtonText="IMPRIMIR" delay={800} />
    {:else if $cubiqSetUp.print_info === 'true'}
      <Button ButtonText="GUARDAR" delay={800} />
      <Button ButtonText="IMPRIMIR" delay={1200} />
    {:else if $cubiqSetUp.OCR === 'true'}
      <!-- No additional buttons -->
    {:else}
      <Button ButtonText="GUARDAR" delay={800} />
    {/if}
  </div>
</div>

组件 1 - 按钮

<script>
  import { fly } from 'svelte/transition'
  import { createEventDispatcher } from 'svelte'

  const dispatch = createEventDispatcher()

  export let ButtonText = ''
  export let delay = 200
  export let loadingEffect = false
</script>

<div
  transition:fly={{ delay, y: 200, duration: 2000 }}
  on:click={() => dispatch('active', ButtonText)}
  class="progress-btn {loadingEffect ? 'active' : ''}">
  <div class="btn">{ButtonText}</div>
  <div class="progress" />
</div>


如果你们给我看一下，我会很感激

4

2 回答 2

1

我假设您的问题与CALIBRAR按钮特别相关，因为它是唯一真正触发完整操作/响应周期的按钮。

我不知道为什么您希望按钮文本在您将其设置为预定义值时更新：

<Button
  on:active={calibrate}
  {loadingEffect}
  ButtonText="CALIBRAR"
  delay={400} />

上面的ButtonText组件调用是一个道具名称，根本没有连接到您在该部分ButtonText中定义的变量。<script>你必须明确地这样做：

<Button
  on:active={calibrate}
  {loadingEffect}
  ButtonText={ButtonText}
  delay={400} />

或者，由于道具名称和变量名称相同，您可以使用简写：

<Button
  on:active={calibrate}
  {loadingEffect}
  {ButtonText}
  delay={400} />

您还必须更新脚本部分以正确初始化ButtonText变量，因为它现在用于设置按钮的默认文本：

<script>
  ...
  let ButtonText = 'CALIBRAR'
  ...
</script>

请注意，这显然仅对单个校准按钮有效。如果您有多个带有动态文本的按钮，则可能必须使用数组或键控对象来保存它们的默认值和当前状态，而不是使用单个变量。

于 2020-04-30T10:22:37.630 回答
0

我这样做如下：

<script>
  import Button from '../components/Button.svelte'
  import { cubiqSetUp } from '../../../store/store.js'
  import { fly } from 'svelte/transition'
  import URLS from '../../../api/endpoints.js'

  let loadingEffect = [false, false, false, false]
  let ButtonText = ['CUBICAR', 'CALIBRAR', 'GUARDAR', 'IMPRIMIR']
  async function calibrate(current) {
    loadingEffect[1] = true
    ButtonText[1] = 'CARGANDO...'
    let { calibrateURL } = await URLS()
    await fetch(calibrateURL)
      .then(response => {
        loadingEffect[1] = false
        ButtonText[1] = 'LISTO'
        response.json()
        setTimeout(() => {
          ButtonText[1] = current.detail
        }, 1500)
      })
      .catch(error => {
        ButtonText[1] = 'ERROR'
        loadingEffect[1] = false
        setTimeout(() => {
          ButtonText[1] = current.detail
        }, 1500)
      })
  }

  async function cubicate(current) {
    loadingEffect[0] = true
    ButtonText[0] = 'CARGANDO...'
    let { calibrateURL } = await URLS()
    await fetch(calibrateURL)
      .then(response => {
        loadingEffect[0] = false
        ButtonText[0] = 'LISTO'
        response.json()
        setTimeout(() => {
          ButtonText[0] = current.detail
        }, 1500)
      })
      .catch(error => {
        ButtonText[0] = 'ERROR'
        loadingEffect[0] = false
        setTimeout(() => {
          ButtonText[0] = current.detail
        }, 1500)
      })
  }
</script>

<div class="Buttons">
  <div class="Buttons-container">
    <Button
      on:active={cubicate}
      loadingEffect={loadingEffect[0]}
      ButtonText={ButtonText[0]} />
    <Button
      on:active={calibrate}
      loadingEffect={loadingEffect[1]}
      ButtonText={ButtonText[1]}
      delay={400} />
    {#if $cubiqSetUp.print_info === 'true' && $cubiqSetUp.OCR === 'true'}
      <Button
        on:active={() => console.log('Pending')}
        ButtonText={ButtonText[3]}
        loadingEffect={loadingEffect[3]}
        delay={800} />
    {:else if $cubiqSetUp.print_info === 'true'}
      <Button
        on:active={() => console.log('Pending')}
        ButtonText={ButtonText[2]}
        loadingEffect={loadingEffect[2]}
        delay={800} />
      <Button
        on:active={() => console.log('Pending')}
        ButtonText={ButtonText[3]}
        loadingEffect={loadingEffect[3]}
        delay={1200} />
    {:else if $cubiqSetUp.OCR === 'true'}
      <!-- No additional buttons -->
    {:else}
      <Button
        on:active={() => console.log('Pending')}
        ButtonText={ButtonText[2]}
        loadingEffect={loadingEffect[2]}
        delay={800} />
    {/if}
  </div>
</div>

我不确定它们是否是最佳实践，但效果很好

注意：我仍然需要实现其余的功能

于 2020-04-30T16:29:47.143 回答