InputTag 标签输入框 ​

<template>
  <w-input-tag
    v-model="input"
    placeholder="请输入"
    aria-label="Please click the Enter key after input"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref<string[]>()
</script>

<template>
  <div>
    <w-segmented v-model="trigger" :options="options" />
  </div>
  <br />
  <w-input-tag v-model="input" :trigger="trigger" placeholder="请输入" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { EVENT_CODE } from 'win-design-next'

const trigger = ref<'Enter' | 'Space'>('Space')
const input = ref<string[]>()
const options = [EVENT_CODE.enter, EVENT_CODE.space]
</script>

<template>
  <w-input-tag v-model="input" :max="3" placeholder="enter up to 3 tags" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref<string[]>()
</script>

<template>
  <w-input-tag v-model="input" disabled placeholder="请输入" class="mb-8" />

  <w-input-tag v-model="input1" disabled placeholder="请输入" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const input = ref<string[]>(['tag1', 'tag2', 'tag3'])

const input1 = ref<string[]>([])
</script>

<template>
  <w-input-tag v-model="input" clearable placeholder="请输入" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref<string[]>(['tag1', 'tag2', 'tag3'])
</script>

<template>
  <w-input-tag v-model="input" draggable placeholder="请输入" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref<string[]>(['tag1', 'tag2', 'tag3'])
</script>

<template>
  <w-input-tag v-model="input" size="large" placeholder="请输入" />
  <br />
  <w-input-tag v-model="input" placeholder="请输入" />
  <br />
  <w-input-tag v-model="input" size="small" placeholder="请输入" />
  <br />
  <w-input-tag v-model="input" size="mini" placeholder="请输入" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref<string[]>()
</script>

<template>
  <div>
    <w-segmented v-model="tagType" :options="type" class="mr-5" />
    <w-segmented v-model="tagEffect" :options="effect" />
  </div>
  <br />
  <w-input-tag
    v-model="input"
    :tag-type="tagType"
    :tag-effect="tagEffect"
    placeholder="请输入"
  >
    <template #tag="{ value }">
      <div class="flex items-center">
        <w-icon class="mr-1">
          <Edit />
        </w-icon>
        <span>{{ value }}</span>
      </div>
    </template>
  </w-input-tag>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Edit } from '@win-design-next/icons-vue'
import type { TagProps } from 'win-design-next'

const type: Array<TagProps['type']> = [
  'primary',
  'success',
  'info',
  'warning',
  'danger',
  'error',
]
const effect: Array<TagProps['effect']> = ['light', 'dark', 'plain']

const tagType = ref<TagProps['type']>('primary')
const tagEffect = ref<TagProps['effect']>('plain')
const input = ref<string[]>(['tag1', 'tag2', 'tag3'])
</script>

<template>
  <w-input-tag v-model="input" clearable placeholder="请输入">
    <template #prefix>
      <w-icon><Search /></w-icon>
    </template>
    <template #suffix>
      <w-icon><Search /></w-icon>
    </template>
  </w-input-tag>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Search } from '@win-design-next/icons-vue'

const input = ref<string[]>()
</script>