Tag 标签 ​

<template>
  <div class="mb-4 flex flex-wrap items-center gap-4">
    <span class="demo-label">主题</span>
    <w-radio-group v-model="effect">
      <w-radio value="light">light</w-radio>
      <w-radio value="dark">dark</w-radio>
      <w-radio value="plain">plain</w-radio>
    </w-radio-group>
  </div>
  <div class="mb-4 flex flex-wrap items-center gap-4">
    <span class="demo-label">尺寸</span>
    <w-radio-group v-model="size">
      <w-radio value="large">large</w-radio>
      <w-radio value="default">default</w-radio>
      <w-radio value="small">small</w-radio>
      <w-radio value="mini">mini</w-radio>
    </w-radio-group>
  </div>
  <div class="mb-4 flex flex-wrap items-center gap-4">
    <span class="demo-label">修饰</span>
    <w-checkbox v-model="hit">hit 边框描边</w-checkbox>
    <w-checkbox v-model="round">round 圆形</w-checkbox>
  </div>
  <w-divider />
  <div class="flex flex-wrap gap-2">
    <w-tag
      v-for="type in types"
      :key="type"
      :type="type"
      :effect="effect"
      :size="size"
      :hit="hit"
      :round="round"
    >
      {{ labelOf(type) }}
    </w-tag>
  </div>
</template>

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

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

const types = ref<TagProps['type'][]>([
  'primary',
  'success',
  'info',
  'warning',
  'danger',
  'error',
])
const effect = ref<NonNullable<TagProps['effect']>>('light')
const size = ref<NonNullable<TagProps['size']>>('default')
const hit = ref(false)
const round = ref(false)

const labelMap: Record<string, string> = {
  primary: '在院',
  success: '治愈',
  info: '观察',
  warning: '隔离',
  danger: '危急',
  error: '过敏',
}

const labelOf = (type: string) => labelMap[type] ?? type
</script>

<style scoped>
.demo-label {
  width: 40px;
  color: var(--w-text-color-secondary);
  font-size: 14px;
}
</style>

<template>
  <div class="mb-4">
    <w-title>默认样式</w-title>
    <div class="flex gap-2">
      <w-check-tag>全部</w-check-tag>
      <w-check-tag type="primary">急诊</w-check-tag>
      <w-check-tag type="success">门诊</w-check-tag>
    </div>
    <w-divider />
  </div>
  <div class="mb-4">
    <w-title>按科室筛选</w-title>
    <div class="flex gap-2">
      <w-check-tag :checked="checked" @change="onChange"
        >点我切换试试</w-check-tag
      >
      <w-check-tag :checked="checked1" type="primary" @change="onChange1">
        内科
      </w-check-tag>
      <w-check-tag :checked="checked2" type="success" @change="onChange2">
        外科
      </w-check-tag>
      <w-check-tag :checked="checked3" type="info" @change="onChange3">
        妇科
      </w-check-tag>
      <w-check-tag :checked="checked4" type="warning" @change="onChange4">
        儿科
      </w-check-tag>
      <w-check-tag :checked="checked5" type="danger" @change="onChange5">
        急诊
      </w-check-tag>
      <w-check-tag
        :checked="checked6"
        disabled
        type="success"
        @change="onChange6"
      >
        骨科（停诊）
      </w-check-tag>
    </div>
    <w-divider />
  </div>

  <div class="mb-4">
    <w-title>禁用</w-title>
    <div class="flex gap-2 mb-4">
      <w-check-tag disabled>默认禁用</w-check-tag>
      <w-check-tag type="primary" disabled>急诊禁用</w-check-tag>
      <w-check-tag type="success" disabled>门诊禁用</w-check-tag>
      <w-check-tag type="danger" disabled>危急禁用</w-check-tag>
      <w-check-tag type="warning" disabled>警示禁用</w-check-tag>
      <w-check-tag type="info" disabled>普通禁用</w-check-tag>
    </div>
    <div class="flex gap-2">
      <w-check-tag checked disabled>选中默认禁用</w-check-tag>
      <w-check-tag checked type="primary" disabled>选中急诊禁用</w-check-tag>
      <w-check-tag checked type="success" disabled>选中门诊禁用</w-check-tag>
      <w-check-tag checked type="danger" disabled>选中危急禁用</w-check-tag>
      <w-check-tag checked type="warning" disabled>选中警示禁用</w-check-tag>
      <w-check-tag checked type="info" disabled>选中普通禁用</w-check-tag>
    </div>
  </div>
</template>

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

const checked = ref(true)
const checked1 = ref(true)
const checked2 = ref(false)
const checked3 = ref(false)
const checked4 = ref(true)
const checked5 = ref(false)
const checked6 = ref(false)

const onChange = (status: boolean) => {
  checked.value = status
}

const onChange1 = (status: boolean) => {
  checked1.value = status
}

const onChange2 = (status: boolean) => {
  checked2.value = status
}

const onChange3 = (status: boolean) => {
  checked3.value = status
}

const onChange4 = (status: boolean) => {
  checked4.value = status
}

const onChange5 = (status: boolean) => {
  checked5.value = status
}

const onChange6 = (status: boolean) => {
  checked6.value = status
}
</script>

<template>
  <div class="flex gap-2">
    <w-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
      {{ tag.name }}
    </w-tag>
  </div>
</template>

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

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

interface TagsItem {
  name: string
  type: TagProps['type']
}

const tags = ref<TagsItem[]>([
  { name: '在院', type: 'primary' },
  { name: '治愈', type: 'success' },
  { name: '观察', type: 'info' },
  { name: '隔离', type: 'warning' },
  { name: '危急', type: 'danger' },
])
</script>

<template>
  <div class="flex gap-2" style="flex-wrap: wrap">
    <w-tag
      v-for="tag in dynamicTags"
      :key="tag"
      closable
      :disable-transitions="false"
      @close="handleClose(tag)"
    >
      {{ tag }}
    </w-tag>
    <w-input
      v-if="inputVisible"
      ref="InputRef"
      v-model="inputValue"
      class="w-20"
      size="small"
      @keyup.enter="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <w-button v-else class="button-new-tag" size="small" @click="showInput">
      + 添加过敏药物
    </w-button>
  </div>
</template>

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

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

const inputValue = ref('')
const dynamicTags = ref(['青霉素', '磺胺类', '头孢类'])
const inputVisible = ref(false)
const InputRef = ref<InputInstance>()

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>

<template>
  <w-title>
    设置 cursor 属性可以定义鼠标悬停时标签的指针样式，它接受一个
    String，取值为任意合法的 CSS cursor 值：可以是 pointer、copy
    等内置手势，也可以用 url(...) 自定义图片光标。不设置时不会写入
    cursor，保持默认光标。
  </w-title>
  <div class="flex gap-2">
    <w-tag cursor="pointer" type="success">点击查看</w-tag>
    <w-tag cursor="copy" type="info">复制病历</w-tag>
    <w-tag :cursor="customCursor" type="warning">自定义关闭</w-tag>
  </div>
</template>

<script lang="ts" setup>
// 自定义图片光标取自文档站静态资源，public 资源需带 base 前缀
const customCursor = 'url(/win-design-next/imgs/mouse/close.svg), default'
</script>