InputTag 标签输入框 ​

<template>
  <w-radio-group v-model="size" aria-label="size control" class="mb-4">
    <w-radio-button value="large">large</w-radio-button>
    <w-radio-button value="default">default</w-radio-button>
    <w-radio-button value="small">small</w-radio-button>
    <w-radio-button value="mini">mini</w-radio-button>
  </w-radio-group>
  <div class="flex gap-4 mb-8">
    <w-segmented v-model="tagType" :options="type" class="mr-5" />
    <w-segmented v-model="tagEffect" :options="effect" />
  </div>
  <div class="flex gap-4" style="flex-direction: column">
    <w-input-tag
      v-model="input"
      placeholder="请输入患者症状"
      :size="size"
      aria-label="Please click the Enter key after input"
    />
    <w-input-tag
      v-model="input"
      disabled
      placeholder="请输入患者症状"
      :size="size"
      aria-label="Please click the Enter key after input"
    />
    <w-input-tag
      v-model="input2"
      :size="size"
      :tag-type="tagType"
      :tag-effect="tagEffect"
      placeholder="请输入过敏源"
    >
      <template #tag="{ value }">
        <div class="flex items-center">
          <w-icon class="mr-1">
            <Good />
          </w-icon>
          <span>{{ value }}</span>
        </div>
      </template>
    </w-input-tag>
    <w-input-tag
      v-model="input2"
      disabled
      :size="size"
      :tag-type="tagType"
      :tag-effect="tagEffect"
      placeholder="请输入过敏源"
    >
      <template #tag="{ value }">
        <div class="flex items-center">
          <w-icon class="mr-1">
            <Good />
          </w-icon>
          <span>{{ value }}</span>
        </div>
      </template>
    </w-input-tag>
  </div>
</template>

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

import type { TagProps } from 'win-design-next'

const size = ref('default')

const input = ref<string[]>()

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']>('light')
const input2 = ref<string[]>(['青霉素', '花粉', '尘螨'])
</script>

<template>
  <w-input-tag v-model="input" :max="3" placeholder="最多可添加 3 个主诊断" />
</template>

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

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

<template>
  <div class="m-4">
    <p>默认折叠并在悬停时显示全部标签</p>
    <w-input-tag
      v-model="input1"
      collapse-tags
      placeholder="请输入既往病史"
      aria-label="请输入内容后按回车键"
    />
    <p>仅折叠</p>
    <w-input-tag
      v-model="input2"
      collapse-tags
      :collapse-tags-tooltip="false"
      placeholder="请输入既往病史"
      aria-label="请输入内容后按回车键"
    />
    <p>自定义折叠时显示的标签数</p>
    <w-input-tag
      v-model="input3"
      collapse-tags
      collapse-tags-tooltip
      :max-collapse-tags="3"
      placeholder="请输入既往病史"
      aria-label="请输入内容后按回车键"
    />
  </div>
</template>

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

const input1 = ref<string[]>([
  '高血压',
  '糖尿病',
  '冠心病',
  '脑梗塞',
  '慢性肾炎',
])
const input2 = ref<string[]>([
  '高血压',
  '糖尿病',
  '冠心病',
  '脑梗塞',
  '慢性肾炎',
])
const input3 = ref<string[]>([
  '高血压',
  '糖尿病',
  '冠心病',
  '脑梗塞',
  '慢性肾炎',
])
</script>

<template>
  <div style="display: flex; gap: 16px">
    <w-input-tag
      v-model="value1"
      type="number"
      placeholder="输入给药频次（次/日）"
    />
    <w-input-tag
      v-model="value2"
      type="number"
      :precision="2"
      placeholder="输入单次剂量（ml）"
    />
  </div>
</template>

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

const value1 = ref<(number | string)[]>([2, 3])
const value2 = ref<(number | string)[]>([0.65, 1.25])
</script>

<template>
  <w-input-tag v-model="value" :before-create-tag="validateTag" />
</template>

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

const value = ref<(number | string)[]>()
const validateTag = (input: string) => {
  return new Promise<boolean>((resolve) => {
    setTimeout(() => {
      console.log('输入的过敏药物：', input)
      const result = !value.value?.includes(input)
      WMessage({
        message: result ? '校验通过，允许添加' : '错误：该药物已存在',
        type: result ? 'success' : 'error',
      })
      // resolve true or false
      resolve(result)
    }, 300)
  })
}
</script>

<template>
  <w-input-tag v-model="input" clearable placeholder="请输入患者症状" />
</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"
    clearable
    :clear-icon="Delete"
    placeholder="请输入过敏药物"
  />
</template>

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

const input = ref<string[]>(['青霉素', '头孢克洛', '布洛芬'])
</script>

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

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

const input = ref<string[]>(['血常规', '尿常规', '心电图'])
</script>

<template>
  <w-input-tag
    v-model="input"
    draggable
    delimiter=","
    placeholder="输入会诊科室时使用逗号分隔"
  />
</template>

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

const input = ref<string[]>(['心内科', '神经内科', '内分泌科'])
</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>