z-base-ui

Appearance

Button 按钮 ​

常用的操作按钮

按钮类型 ​

按钮有七种类型：主按钮、次按钮、成功按钮、警告按钮、失败失败、信息按钮和链接按钮

<template>
  <div class="group">
    <z-button type="primary">Primary</z-button>
    <z-button>Default</z-button>
    <z-button type="success">Warning</z-button>
    <z-button type="warning">Warning</z-button>
    <z-button type="danger">Danger</z-button>
    <z-button type="info">Info</z-button>
    <z-button type="link">Link</z-button>
  </div>
</template>

幽灵按钮 ​

添加 ghost 属性即可切换按钮为幽灵按钮，幽灵按钮时背景为透明。

<template>
  <div class="group">
    <z-button ghost type="primary">Primary</z-button>
    <z-button ghost>Default</z-button>
    <z-button ghost type="success">Warning</z-button>
    <z-button ghost type="warning">Warning</z-button>
    <z-button ghost type="danger">Danger</z-button>
    <z-button ghost type="info">Info</z-button>
  </div>
</template>


<style scoped>
.group {
  background: #bec8c8;
  padding: 24px;
}
</style>

按钮边框 ​

添加 dashed 属性即可切换边框线为虚线。

<template>
  <div class="group">
    <z-button ghost>Solid</z-button>
    <z-button dashed ghost>Dashed</z-button>
  </div>
</template>


<style scoped>
.group {
  background: #bec8c8;
  padding: 24px;
}
</style>

不可用 ​

添加 disabled 属性即可让按钮处于不可用状态。

<template>
  <div class="group">
    <z-button type="primary">Normal</z-button>
    <z-button disabled type="primary">Disabled</z-button>

    <z-button type="link">Link</z-button>
    <z-button disabled type="link">Disabled Link</z-button>
  </div>

  <div class="group mt12">
    <z-button type="primary" ghost>Normal</z-button>
    <z-button disabled type="primary" ghost>Disabled</z-button>

    <z-button type="primary" dashed ghost>Normal</z-button>
    <z-button disabled type="primary" dashed ghost>Disabled</z-button>
  </div>
</template>

按钮尺寸 ​

按钮有大、中、小三种尺寸。

<template>
  <div class="group">
    <z-button size="large" type="primary">Warning</z-button>
    <z-button size="normal" type="primary">Primary</z-button>
    <z-button size="small" type="primary">Default</z-button>
  </div>
</template>

加载状态 ​

添加 loading 属性即可让按钮处于加载状态。

<template>
  <div class="group">
    <z-button loading type="primary">loading</z-button>
    <z-button loading type="success">loading</z-button>
    <z-button loading type="success" ghost>loading</z-button>

  </div>

  <div class="group mt12">
    <z-button loading type="primary"></z-button>
    <z-button loading type="primary" shape="circle"></z-button>
    <z-button type="primary" :loading="loading" @click="() => loading = true">click loading</z-button>
  </div>
</template>

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

const loading = ref<boolean>(false);
</script>

按钮形态 ​

添加 shape 属性即可修改按钮形态。

<template>
  <div class="group">
    <z-button shape="circle" type="primary">12</z-button>
    <z-button shape="round" type="primary">Primary</z-button>
    <z-button shape="default" type="primary">Primary</z-button>
  </div>
</template>

图标按钮 ​

添加 icon 属性或使用默认插槽自定义内容。

<template>
  <div class="group">
    <z-button shape="circle" icon="magnifying-glass" type="primary"></z-button>
    <z-button shape="circle" icon="user" type="primary"></z-button>
    <z-button shape="circle" icon="bell" type="primary" ghost dashed></z-button>
    <z-button shape="circle" icon="bell" type="info" dashed></z-button>
    <z-button shape="round" icon="file" type="primary">file</z-button>
    <z-button shape="round" type="primary">
      <z-icon icon="download"/>
      download
    </z-button>
  </div>
</template>

链接 ​

添加 link 属性即可使按钮具备A标签的跳转功能，同时您还可搭配 target 属性决定以何种方法打开该链接

<template>
  <div class="group">
    <z-button link="https://www.baidu.com" type="primary">Go to Baidu</z-button>
    <z-button target="_self" link="https://www.baidu.com" type="primary">Current page</z-button>
    <z-button link="https://www.baidu.com" type="link">Go to Baidu</z-button>
  </div>
</template>

button 属性 ​

属性名说明类型默认值
size尺寸large | small | normal—
type类型string，详见type—
ghost幽灵按钮booleanfalse
shape形状default | circle | round—
disabled禁用属性boolean—
loading加载中boolean—
icon图标string，详见icon—
htmlType设置 button 原生的 type 值string，详见 HTML 标准—
dashed定义边框线boolean—
link相当于a标签中的href，此属性存在时按钮功能转为a标签string—
target以何种形式打开linkstring，详见target 属性_target

button - type ​

属性名说明类型
primary主要按钮string
default默认按钮string
success成功string
warning警告string
danger危险的string
info普通string
link链接按钮string

button 事件 ​

事件名称说明回调参数
click点击按钮时回调(event) => void