Config Provider 全局配置 ​

<template>
  <div>
    <w-segmented v-model="value" class="mb-8" :options="options">
      <template #default="scope">
        {{ scope.item.label }}
        <span v-if="scope.item.value">({{ scope.item.value }})</span>
      </template>
    </w-segmented>
    <w-config-provider :theme="value">
      <div class="mb-4">
        <w-button type="primary">主题色</w-button>
        <w-button type="primary" disabled>主题色</w-button>
        <w-button type="primary" plain>主题色</w-button>
        <w-button type="primary" disabled plain>主题色</w-button>
      </div>
      <w-table :data="tableData" border>
        <w-table-column width="200" prop="name" label="药品名称" />
        <w-table-column prop="size" label="规格" />
        <w-table-column prop="count" label="数量" />
        <w-table-column prop="price" label="单价(元)" align="right" />
        <w-table-column prop="total" label="金额(元)" align="right" />
      </w-table>
    </w-config-provider>
  </div>
</template>

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

const value = ref('')

const options = [
  {
    value: '',
    label: '主色蓝',
  },
  {
    value: 'sauce-purple',
    label: '山梗紫',
  },
  {
    value: 'maternity-pink',
    label: '芙蓉粉',
  },
  {
    value: 'innovation-green',
    label: '松柏绿',
  },
  {
    value: 'calendula',
    label: '落栗棕',
  },
]

const tableData = [
  {
    id: '3',
    name: '炔诺酮片',
    size: '625微克/片',
    count: '10',
    unit: '片',
    price: '10.00',
    total: '100.00',
    parentId: '0',
    check: false,
  },
  {
    id: '4',
    name: '扶达胶囊',
    size: '100毫克/粒',
    count: '5',
    unit: '粒',
    price: '12.00',
    total: '60.00',
    parentId: '0',
    check: false,
  },
  {
    id: '5',
    name: '百士欣胶囊',
    size: '10毫克/粒',
    count: '2',
    unit: '粒',
    price: '22.50',
    total: '45.00',
    parentId: '0',
    check: false,
  },
  {
    id: '6',
    name: '别嘌醇片',
    size: '100毫克/片',
    count: '10',
    unit: '片',
    price: '14.50',
    total: '145.00',
    parentId: '0',
    check: false,
  },
  {
    id: '7',
    name: '复方维生素注射液',
    size: '2毫升/支',
    count: '10',
    unit: '支',
    price: '12.73',
    total: '127.30',
    parentId: '1',
    check: true,
  },
  {
    id: '8',
    name: '注射用盐酸多巴胺',
    size: '20毫升/支',
    count: '6',
    unit: '支',
    price: '49.80',
    total: '298.80',
    parentId: '1',
    check: false,
  },
]
</script>

<template>
  <div>
    <w-segmented v-model="value" class="mb-8" :options="options" />
    <w-config-provider :font-size-base="value">
      <div class="mb-4">
        <w-button type="primary">主题色</w-button>
        <w-button type="primary" disabled>主题色</w-button>
        <w-button type="primary" plain>主题色</w-button>
        <w-button type="primary" disabled plain>主题色</w-button>
      </div>
      <w-dropdown @visible-change="(val: boolean) => (visible = val)">
        <span class="w3-dropdown-link mb-4">
          点击下拉列表
          <w-fake-arrow :is-active="visible" />
        </span>
        <template #dropdown>
          <w-dropdown-menu>
            <w-dropdown-item>待就诊</w-dropdown-item>
            <w-dropdown-item>就诊中</w-dropdown-item>
            <w-dropdown-item>检查中</w-dropdown-item>
            <w-dropdown-item disabled>检验中</w-dropdown-item>
            <w-dropdown-item divided>退出</w-dropdown-item>
          </w-dropdown-menu>
        </template>
      </w-dropdown>
      <w-table :data="tableData" border>
        <w-table-column width="200" prop="name" label="药品名称" />
        <w-table-column prop="size" label="规格" />
        <w-table-column prop="count" label="数量" />
        <w-table-column prop="price" label="单价(元)" align="right" />
        <w-table-column prop="total" label="金额(元)" align="right" />
      </w-table>
    </w-config-provider>
  </div>
</template>

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

const value = ref('14px')

const visible = ref(false)

const options = [
  {
    value: '14px',
    label: '14px',
  },
  {
    value: '16px',
    label: '16px',
  },
  {
    value: '18px',
    label: '18px',
  },
]

const tableData = [
  {
    id: '3',
    name: '炔诺酮片',
    size: '625微克/片',
    count: '10',
    unit: '片',
    price: '10.00',
    total: '100.00',
    parentId: '0',
    check: false,
  },
  {
    id: '4',
    name: '扶达胶囊',
    size: '100毫克/粒',
    count: '5',
    unit: '粒',
    price: '12.00',
    total: '60.00',
    parentId: '0',
    check: false,
  },
  {
    id: '5',
    name: '百士欣胶囊',
    size: '10毫克/粒',
    count: '2',
    unit: '粒',
    price: '22.50',
    total: '45.00',
    parentId: '0',
    check: false,
  },
  {
    id: '6',
    name: '别嘌醇片',
    size: '100毫克/片',
    count: '10',
    unit: '片',
    price: '14.50',
    total: '145.00',
    parentId: '0',
    check: false,
  },
  {
    id: '7',
    name: '复方维生素注射液',
    size: '2毫升/支',
    count: '10',
    unit: '支',
    price: '12.73',
    total: '127.30',
    parentId: '1',
    check: true,
  },
  {
    id: '8',
    name: '注射用盐酸多巴胺',
    size: '20毫升/支',
    count: '6',
    unit: '支',
    price: '49.80',
    total: '298.80',
    parentId: '1',
    check: false,
  },
]
</script>

<template>
  <div>
    <w-button mb-2 @click="toggle">切换语言</w-button>
    <br />

    <w-config-provider :locale="locale">
      <w-table mb-1 :data="[]" />
      <w-pagination :total="100" />
    </w-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import zhCn from 'win-design-next/dist/locale/zh-cn.mjs'
import en from 'win-design-next/dist/locale/en.mjs'

const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))

const toggle = () => {
  language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
}
</script>

<template>
  <div>
    <div class="mb-4 flex items-center gap-8">
      <w-checkbox v-model="config.autoInsertSpace">
        autoInsertSpace
      </w-checkbox>
      <w-config-provider :button="config">
        <w-button>中文</w-button>
      </w-config-provider>
    </div>

    <div class="mb-4 flex items-center gap-8">
      <w-switch
        v-model="config.debounce"
        active-text="开启防抖"
        inactive-text="关闭防抖"
      />
      <w-config-provider :button="config">
        <w-button @click="handleButtonClick">防抖</w-button>
      </w-config-provider>
    </div>
  </div>
</template>

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

const config = reactive({
  autoInsertSpace: true,
  debounce: true,
  debounceTime: 1000,
})

const handleButtonClick = () => {
  console.log('点击事件')
  WMessage({
    message: '点击事件',
    type: 'success',
  })
}
</script>

<template>
  <div>
    <w-config-provider :message="config">
      <w-button @click="open">OPEN</w-button>
    </w-config-provider>
  </div>
</template>

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

const config = reactive({
  max: 3,
})
const open = () => {
  WMessage('This is a message.')
}
</script>

<template>
  <w-config-provider
    :value-on-clear="() => null"
    :empty-values="[undefined, null]"
  >
    <div class="flex flex-wrap gap-4 items-center">
      <w-select
        v-model="value1"
        clearable
        placeholder="Select"
        style="width: 240px"
        @change="handleChange"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
      <w-select-v2
        v-model="value2"
        clearable
        placeholder="Select"
        style="width: 240px"
        :options="options"
        :value-on-clear="() => undefined"
        @change="handleChange"
      />
    </div>
  </w-config-provider>
</template>

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

const value1 = ref('')
const value2 = ref('')
const options = [
  {
    value: '',
    label: 'All',
  },
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

const handleChange = (value) => {
  if ([undefined, null].includes(value)) {
    WMessage.info(`The clear value is: ${value}`)
  }
}
</script>