Button 按钮 ​

<template>
  <div class="mb-4 demo-toolbar">
    <span>禁用状态：</span>
    <w-switch v-model="disabled" />
  </div>

  <div class="mb-4">
    <w-title>默认样式</w-title>
    <div>
      <w-button :disabled="disabled">默认按钮</w-button>
      <w-button :disabled="disabled" type="primary">主要按钮</w-button>
      <w-button :disabled="disabled" type="success">成功按钮</w-button>
      <w-button :disabled="disabled" type="warning">警告按钮</w-button>
      <w-button :disabled="disabled" type="danger">危险按钮</w-button>
      <w-button :disabled="disabled" type="error">危险按钮</w-button>
      <w-button :disabled="disabled" type="info">信息按钮</w-button>
    </div>
    <w-divider />
  </div>

  <div class="mb-4">
    <w-title>轻量按钮：plain: boolean</w-title>
    <div>
      <w-button :disabled="disabled" plain>轻量按钮</w-button>
      <w-button :disabled="disabled" type="primary" plain>主要按钮</w-button>
      <w-button :disabled="disabled" type="success" plain>成功按钮</w-button>
      <w-button :disabled="disabled" type="warning" plain>警告按钮</w-button>
      <w-button :disabled="disabled" type="danger" plain>危险按钮</w-button>
      <w-button :disabled="disabled" type="info" plain>信息按钮</w-button>
    </div>
    <w-divider />
  </div>

  <div class="mb-4">
    <w-title>链接按钮：link: boolean</w-title>
    <div>
      <w-button :disabled="disabled" link>默认按钮</w-button>
      <w-button :disabled="disabled" type="primary" link>主要按钮</w-button>
      <w-button :disabled="disabled" type="success" link>成功按钮</w-button>
      <w-button :disabled="disabled" type="warning" link>警告按钮</w-button>
      <w-button :disabled="disabled" type="danger" link>危险按钮</w-button>
      <w-button :disabled="disabled" type="info" link>信息按钮</w-button>
    </div>
    <w-divider />
  </div>

  <div class="mb-4">
    <w-title>
      文字按钮：由于 type 属性会同时控制按钮的样式， 因此我们通过一个新的 API
      text: boolean 来控制文字按钮
    </w-title>
    <div class="mb-4">
      <w-button :disabled="disabled" text>默认按钮</w-button>
      <w-button :disabled="disabled" type="default" text>按钮</w-button>
      <w-button :disabled="disabled" type="success" text>成功按钮</w-button>
      <w-button :disabled="disabled" type="warning" text>警告按钮</w-button>
      <w-button :disabled="disabled" type="danger" text>危险按钮</w-button>
      <w-button :disabled="disabled" type="info" text>信息按钮</w-button>
    </div>
    <div>
      <w-button :disabled="disabled" bg text>默认按钮</w-button>
      <w-button :disabled="disabled" bg type="default" text>按钮</w-button>
      <w-button :disabled="disabled" bg type="success" text>成功按钮</w-button>
      <w-button :disabled="disabled" bg type="warning" text>警告按钮</w-button>
      <w-button :disabled="disabled" bg type="danger" text>危险按钮</w-button>
      <w-button :disabled="disabled" bg type="info" text>信息按钮</w-button>
    </div>
    <w-divider />
  </div>

  <div class="mb-4">
    <w-title>圆形按钮：circle: boolean</w-title>
    <w-button :disabled="disabled" :icon="Search" circle />
    <w-button :disabled="disabled" type="primary" :icon="Edit" circle />
    <w-button :disabled="disabled" type="success" :icon="Check" circle />
    <w-button :disabled="disabled" type="info" :icon="Date" circle />
    <w-button :disabled="disabled" type="warning" :icon="Star" circle />
    <w-button :disabled="disabled" type="danger" :icon="Delete" circle />
    <w-divider />
  </div>

  <div class="mb-4">
    <w-title>圆角按钮：round: boolean</w-title>
    <w-button :disabled="disabled" round>默认按钮</w-button>
    <w-button :disabled="disabled" type="primary" round>主要按钮</w-button>
    <w-button :disabled="disabled" type="success" round>成功按钮</w-button>
    <w-button :disabled="disabled" type="warning" round>警告按钮</w-button>
    <w-button :disabled="disabled" type="danger" round>危险按钮</w-button>
    <w-button :disabled="disabled" type="info" round>信息按钮</w-button>
    <w-divider />
  </div>

  <div class="mb-4">
    <w-title>🎉 紧凑模式：tight: Boolean 默认是开启的</w-title>
    <div class="mb-4">
      <w-button :disabled="disabled" tight>默认是开启的</w-button>
      <w-button :disabled="disabled" :tight="false" type="primary">
        关闭紧凑模式
      </w-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  Check,
  Date,
  Delete,
  Edit,
  Search,
  Star,
} from '@win-design-next/icons-vue'

const disabled = ref(false)
</script>

<style scoped lang="scss">
.demo-toolbar {
  display: flex;
  align-items: center;
}

.w3-button {
  margin: 0 12px 12px 0;
  & + .w3-button {
    margin-left: 0;
  }
}
</style>

<template>
  <section class="demo-wrapper">
    <w-switch
      v-model="isAuto"
      active-text="宽度：自动"
      inactive-text="宽度：400px"
    />
    <w-button style="margin-left: 24px" @click="handleChangeShow"
      >动态切换「查对医嘱」</w-button
    >
    <w-button @click="handleChangeDisabled">动态切换「禁用」</w-button>
    <w-button @click="handleChangeLoading">动态切换「加载中」</w-button>
    <w-divider />
    <div class="flex" :style="{ width: isAuto ? '' : '400px' }">
      <w-button-group
        ref="smartGroup"
        smart
        discrete
        :inactive-ids="inactiveIds"
      >
        <w-button
          :disabled="isDisabled"
          visible-id="a"
          tight
          type="primary"
          @click="handleClick('查对医嘱')"
          >查对医嘱</w-button
        >
        <w-button
          :disabled="isDisabled"
          tight
          type="primary"
          @click="handleClick('通知医生')"
          >通知医生</w-button
        >
        <w-button :loading="isLoading" tight>一键记账</w-button>
        <w-button tight>表格设置</w-button>
        <w-button :disabled="isDisabled" tight>单据打印</w-button>
        <w-button tight>标本采集</w-button>
        <w-button tight>医嘱打印</w-button>
        <w-button tight @click="handleClick('医嘱打印新')">医嘱打印新</w-button>
      </w-button-group>
    </div>

    <div class="table-wrapper">
      <div class="table-header">
        <w-title :round="false">药品数据</w-title>
        <w-button-group smart discrete position="right" style="flex: 1">
          <w-button tight>一键记账</w-button>
          <w-button tight>表格设置</w-button>
          <w-button tight>单据打印</w-button>
          <w-button tight>标本采集</w-button>
          <w-button tight>医嘱打印</w-button>
          <w-button tight>医嘱打印新</w-button>
          <w-button tight type="primary" @click="handleClick('查对医嘱')"
            >查对医嘱</w-button
          >
          <w-button tight type="primary" @click="handleClick('通知医生')"
            >通知医生</w-button
          >
        </w-button-group>
      </div>
      <w-table :data="tableData" border style="width: 100%" size="small">
        <w-table-column
          prop="name"
          label="药品名称"
          show-overflow-tooltip
          overflow-tooltip-inherit
        />
        <w-table-column prop="size" width="120" label="规格" />
        <w-table-column prop="count" label="数量" />
        <w-table-column prop="price" label="单价(元)" align="right" />
        <w-table-column label="操作">
          <template #default>
            <w-button-group
              discrete
              smart
              smart-link
              smart-type="primary"
              size="small"
            >
              <w-button type="primary" link>一键记账</w-button>
              <w-button type="primary" link>表格设置</w-button>
              <w-button type="primary" link>单据打印</w-button>
              <w-button type="primary" link>标本采集</w-button>
              <w-button type="primary" link>医嘱打印</w-button>
              <w-button type="primary" link>医嘱打印新</w-button>
              <w-button link type="primary" @click="handleClick('查对医嘱')"
                >查对医嘱</w-button
              >
              <w-button link type="primary" @click="handleClick('通知医生')"
                >通知医生</w-button
              >
            </w-button-group>
          </template>
        </w-table-column>
      </w-table>
    </div>
  </section>
</template>

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

const isAuto = ref(false)
const isDisabled = ref(false)
const isLoading = ref(false)
const inactiveIds = ref<string[]>([])

const tableData = ref([
  {
    name: '布洛芬颗粒(贝贝清)',
    size: '0.2g*9包',
    count: '10',
    unit: '包',
    price: '10.00',
    total: '100.00',
  },
  {
    name: '氯化钾颗粒',
    size: '1.57:1.5g*4袋',
    count: '10',
    unit: '袋',
    price: '10.00',
    total: '100.00',
  },
  {
    name: '炔诺酮片',
    size: '625微克/片',
    count: '10',
    unit: '片',
    price: '10.00',
    total: '100.00',
  },
  {
    name: '扶达胶囊',
    size: '100毫克/粒',
    count: '5',
    unit: '粒',
    price: '12.00',
    total: '60.00',
  },
  {
    name: '百士欣胶囊',
    size: '10毫克/粒',
    count: '2',
    unit: '粒',
    price: '22.50',
    total: '45.00',
  },
  {
    name: '别嘌醇片',
    size: '100毫克/片',
    count: '10',
    unit: '片',
    price: '14.50',
    total: '145.00',
  },
  {
    name: '复方维生素注射液',
    size: '2毫升/支',
    count: '10',
    unit: '支',
    price: '12.73',
    total: '127.30',
  },
])

const handleClick = (val: string) => {
  console.log('点击：', val)
}

const handleChangeShow = () => {
  inactiveIds.value = inactiveIds.value.length > 0 ? [] : ['a']
}

const handleChangeDisabled = () => {
  isDisabled.value = !isDisabled.value
}

const handleChangeLoading = () => {
  isLoading.value = true
  setTimeout(() => {
    isLoading.value = false
  }, 2000)
}
</script>

<style lang="scss" scoped>
.demo-wrapper .flex {
  padding-bottom: 16px;
  margin-top: 32px;
}
.demo-wrapper .table-header {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.demo-wrapper .table-wrapper {
  margin-top: 32px;
}
</style>

<template>
  <section class="demo-wrapper">
    <w-input-number v-model="number" style="width: 120px" />
    <w-button style="margin-left: 24px" @click="handleChangeShow"
      >动态切换「查对医嘱」</w-button
    >
    <div class="flex">
      <w-button-group
        smart
        discrete
        :max-visible="number"
        :inactive-ids="inactiveIds"
        more-button-text="更多操作"
      >
        <w-button
          visible-id="a"
          tight
          type="primary"
          @click="handleClick('查对医嘱')"
          >查对医嘱</w-button
        >
        <w-button tight type="primary" @click="handleClick('通知医生')"
          >通知医生</w-button
        >
        <w-button tight>一键记账</w-button>
        <w-button tight>表格设置</w-button>
        <w-button tight>单据打印</w-button>
        <w-button tight>标本采集</w-button>
        <w-button tight>医嘱打印</w-button>
        <w-button tight @click="handleClick('医嘱打印新')">医嘱打印新</w-button>
      </w-button-group>
    </div>

    <div class="table-wrapper">
      <div class="table-header">
        <w-title :round="false">药品数据</w-title>
        <w-button-group
          smart
          discrete
          :max-visible="number"
          position="right"
          style="flex: 1"
        >
          <w-button tight>一键记账</w-button>
          <w-button tight>表格设置</w-button>
          <w-button tight>单据打印</w-button>
          <w-button tight>标本采集</w-button>
          <w-button tight>医嘱打印</w-button>
          <w-button tight>医嘱打印新</w-button>
          <w-button tight type="primary" @click="handleClick('查对医嘱')"
            >查对医嘱</w-button
          >
          <w-button tight type="primary" @click="handleClick('通知医生')"
            >通知医生</w-button
          >
        </w-button-group>
      </div>
    </div>
  </section>
</template>

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

const inactiveIds = ref<string[]>([])
const number = ref(5)

const handleClick = (val: string) => {
  console.log('点击：', val)
}

const handleChangeShow = () => {
  inactiveIds.value = inactiveIds.value.length > 0 ? [] : ['a']
}
</script>

<style lang="scss" scoped>
.demo-wrapper .flex {
  padding-bottom: 16px;
  margin-top: 32px;
}
.demo-wrapper .table-header {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.demo-wrapper .table-wrapper {
  margin-top: 32px;
}
</style>

<template>
  <div class="mb-4">
    <w-switch
      v-model="debounce"
      active-text="开启防抖"
      inactive-text="关闭防抖"
    />
  </div>
  <div class="mb-4 flex">
    <div style="width: 140px; font-weight: 700">输入防抖时间：</div>
    <w-input-number
      v-model="debounceTime"
      style="width: 240px"
      placeholder="请输入防抖时间（毫秒）"
      :min="1000"
      :max="10000"
      :controls="false"
      @change="handleChange"
    />
  </div>
  <div class="mb-4 flex">
    <w-button
      :debounce="debounce"
      :debounce-time="debounceTime"
      type="primary"
      @click="handleButtonClick"
      >主要按钮</w-button
    >
    <w-button
      :debounce="debounce"
      :debounce-time="debounceTime"
      type="success"
      @click="handleButtonClick"
      >成功按钮</w-button
    >
    <w-button
      :debounce="debounce"
      :debounce-time="debounceTime"
      type="warning"
      @click="handleButtonClick"
      >警告按钮</w-button
    >
    <w-button
      :debounce="debounce"
      :debounce-time="debounceTime"
      type="danger"
      @click="handleButtonClick"
      >危险按钮</w-button
    >
    <w-button
      :debounce="debounce"
      :debounce-time="debounceTime"
      type="info"
      @click="handleButtonClick"
      >信息按钮</w-button
    >
  </div>
</template>

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

const debounce = ref(true)
const debounceTime = ref(1000)

const handleChange = (val) => {
  console.log('输入框的值：', val)
}

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

<template>
  <div class="flex mb-8">
    <w-button type="primary" loading>加载中</w-button>
  </div>
  <div class="flex mb-8">
    <w-button loading-ball loading>加载中</w-button>
    <w-button loading-ball loading>加载中</w-button>
    <w-button loading-ball type="primary" loading>加载中</w-button>
    <w-button loading-ball size="large" type="primary" loading>加载中</w-button>
  </div>
  <div class="flex">
    <w-button type="primary" :loading-icon="RefreshRight" loading
      >加载中</w-button
    >
    <w-button type="primary" loading>
      <template #loading>
        <div class="custom-loading">
          <svg class="circular" viewBox="-10, -10, 50, 50">
            <path
              class="path"
              d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
              style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
            />
          </svg>
        </div>
      </template>
      加载中
    </w-button>
  </div>
</template>

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

<style scoped>
.w3-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}
.w3-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--w3-button-font-color);
  stroke-linecap: round;
}
</style>

<template>
  <w-radio-group v-model="size" class="mb-4">
    <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 class="mb-4">
    <w-button :size="size" type="primary">主要按钮</w-button>
    <w-button :size="size" type="success">成功按钮</w-button>
    <w-button :size="size" type="warning">警告按钮</w-button>
    <w-button :size="size" type="danger">危险按钮</w-button>
    <w-button :size="size" type="info">信息按钮</w-button>
  </div>
</template>

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

const size = ref('default')
</script>

<template>
  <div>
    <w-button type="primary" :icon="Edit" />
    <w-button type="primary" :icon="Search" />
    <w-button type="primary" :icon="Edit" />
    <w-button type="primary" :icon="Search">搜索</w-button>
  </div>
</template>

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

<template>
  <w-radio-group v-model="direction" class="demo-direction">
    <w-radio-button value="horizontal">横向</w-radio-button>
    <w-radio-button value="vertical">纵向</w-radio-button>
  </w-radio-group>
  <w-button-group>
    <w-button type="primary" :icon="ArrowLeft">上一页</w-button>
    <w-button type="primary">
      下一页<w-icon class="w3-icon--right"><ArrowRight /></w-icon>
    </w-button>
  </w-button-group>

  <w-button-group class="ml-4" :direction="direction">
    <w-button type="primary" :icon="Edit" />
    <w-button type="primary" :icon="Share" />
    <w-button type="primary" :icon="Delete" />
  </w-button-group>

  <w-button-group class="ml-4" discrete :direction="direction">
    <w-button type="primary" :icon="Edit" />
    <w-button type="primary" :icon="Share" />
    <w-button type="primary" :icon="Delete" />
  </w-button-group>
</template>

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

const direction = ref<'horizontal' | 'vertical'>('horizontal')
</script>

<style scoped>
.demo-direction {
  display: block;
  margin: 16px 0 12px;
}
</style>

<template>
  <w-button>button</w-button>
  <w-button tag="div" role="button" tabindex="0">div</w-button>
  <w-button
    type="primary"
    tag="a"
    href="http://wued.winning-health.com.cn:8088/win-design/"
    target="_blank"
    rel="noopener noreferrer"
  >
    a
  </w-button>
</template>

<script lang="ts" setup>
import { isDark } from '~/composables/dark'
</script>

<template>
  <div>
    <w-button color="#626aef" :dark="isDark">默认</w-button>
    <w-button color="#626aef" :dark="isDark" plain>轻量</w-button>

    <w-button color="#626aef" :dark="isDark" disabled>禁用</w-button>
    <w-button color="#626aef" :dark="isDark" disabled plain>
      禁用轻量
    </w-button>
  </div>
</template>

<template>
  <div style="width: 320px">
    <w-button type="primary" long>通栏主要按钮</w-button>
  </div>
  <div style="width: 320px">
    <w-button type="default" long class="mt-2">通栏默认按钮</w-button>
  </div>
</template>

<template>
  <div>
    <w-button type="primary" tip="这是一段提示文字">默认 top</w-button>
    <w-button
      type="success"
      tip="底部提示"
      tip-placement="bottom-start"
      class="ml-4"
    >
      bottom-start
    </w-button>
    <w-button
      type="warning"
      tip="右侧提示"
      tip-placement="right-end"
      class="ml-4"
    >
      right-end
    </w-button>
    <w-button type="info" disabled tip="禁用按钮依然可以提示" class="ml-4">
      禁用
    </w-button>
  </div>
</template>

<template>
  <div>
    <w-button type="primary" disabled>默认透明度（0.6）</w-button>
    <w-button type="primary" disabled :disabled-opacity="0.4" class="ml-4">
      0.4
    </w-button>
  </div>
</template>