KvcSpinner

ローディングスピナーコンポーネントです。データの読み込み中や処理中であることをユーザーに伝えます。

ライブデモ

使用方法

基本的な使い方

import { useSpinner } from '@zygapp/kintone-vue3-component'

const $spinner = useSpinner()
$spinner.open('読み込み中...')
setTimeout(() => $spinner.close(), 3000)

簡易関数を使用

import { showSpinner, hideSpinner } from '@zygapp/kintone-vue3-component'

showSpinner('読み込み中...')
setTimeout(() => hideSpinner(), 3000)

Spinner メソッド

メソッド	引数	説明
`open(text?: string)`	text?: 表示するメッセージ	スピナーを表示します
`close()`	なし	スピナーを非表示にします
`update(text: string)`	text: 新しいメッセージ	表示中のメッセージを更新します
`isOpen()`	なし	スピナーの表示状態を返します

使用例

データ読み込み

<template>
  <kvc-wrap>
    <kvc-button @click="loadData" color="save">
      データを読み込む
    </kvc-button>

    <div v-if="data">
      <h3>読み込まれたデータ:</h3>
      <pre>{{ data }}</pre>
    </div>
  </kvc-wrap>
</template>

<script setup>
import { ref } from 'vue'
import { useSpinner } from '@zygapp/kintone-vue3-component'

const $spinner = useSpinner()
const data = ref(null)

const loadData = async () => {
  $spinner.open('データを読み込んでいます...')

  try {
    // APIからデータを取得
    const response = await fetch('https://api.example.com/data')
    data.value = await response.json()
  } catch (error) {
    console.error('Error loading data:', error)
  } finally {
    $spinner.close()
  }
}
</script>

注意事項

スピナーを表示したら、必ずclose()で閉じてください
エラーが発生した場合でもfinallyブロックでスピナーを閉じることを推奨します
長時間の処理の場合は、適切なメッセージを表示してユーザーに状況を伝えましょう