KvcDropdown

ドロップダウン選択コンポーネントです。リストから1つの項目を選択できます。

ライブデモ

基本的な使い方

<template>
  <kvc-dropdown
    v-model="selectedValue"
    :items="items"
  />
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { label: '選択肢1', value: 'option1' },
  { label: '選択肢2', value: 'option2' },
  { label: '選択肢3', value: 'option3' }
])

const selectedValue = ref('option1')
</script>

プロパティ

プロパティ	型	デフォルト	説明
modelValue	`string`	`''`	選択された値（v-model）
items	`Array<{label: string, value: string}>`	`[]`	ドロップダウンの項目
placeholder	`string`	`'選択してください'`	プレースホルダーテキスト
readOnly	`boolean`	`false`	読み取り専用モード
disabled	`boolean`	`false`	無効化状態

イベント

イベント名	ペイロード	説明
update:modelValue	`string`	選択値が変更されたときに発火

使用例

基本的な使用

<template>
  <kvc-field label="カテゴリ">
    <kvc-dropdown
      v-model="category"
      :items="categories"
      placeholder="カテゴリを選択"
    />
  </kvc-field>
  <p>選択されたカテゴリ: {{ category }}</p>
</template>

<script setup>
import { ref } from 'vue'

const categories = ref([
  { label: '開発', value: 'dev' },
  { label: 'デザイン', value: 'design' },
  { label: 'マーケティング', value: 'marketing' },
  { label: 'セールス', value: 'sales' }
])

const category = ref('')
</script>

初期値を設定

<template>
  <kvc-field label="言語">
    <kvc-dropdown
      v-model="language"
      :items="languages"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const languages = ref([
  { label: '日本語', value: 'ja' },
  { label: 'English', value: 'en' },
  { label: '中文', value: 'zh' }
])

const language = ref('ja')
</script>

読み取り専用

<template>
  <kvc-field label="ステータス">
    <kvc-dropdown
      v-model="status"
      :items="statuses"
      :read-only="true"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const statuses = ref([
  { label: '完了', value: 'completed' },
  { label: '進行中', value: 'in-progress' },
  { label: '未着手', value: 'not-started' }
])

const status = ref('completed')
</script>

無効化

<template>
  <kvc-field label="地域">
    <kvc-dropdown
      v-model="region"
      :items="regions"
      :disabled="true"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const regions = ref([
  { label: '東京', value: 'tokyo' },
  { label: '大阪', value: 'osaka' },
  { label: '名古屋', value: 'nagoya' }
])

const region = ref('tokyo')
</script>

TypeScript サポート

import type { KvcDropdownProps, DropdownItem } from '@zygapp/kintone-vue3-component'

const items: DropdownItem[] = [
  { label: 'オプション1', value: 'opt1' },
  { label: 'オプション2', value: 'opt2' }
]

const props: KvcDropdownProps = {
  modelValue: 'opt1',
  items: items,
  placeholder: '選択してください',
  readOnly: false,
  disabled: false
}