Button 按钮

常用的操作按钮。

基础用法

使用 type、usePlain 来定义按钮的样式。

<template>
  <div class="mb-size">
    <pa-button iconName="star_arc_line" :usePlain="false" type="primary">Primary</pa-button>
    <pa-button iconName="star_arc_line" :usePlain="false" type="success">Success</pa-button>
    <pa-button iconName="star_arc_line" :usePlain="false" type="info">Info</pa-button>
    <pa-button iconName="star_arc_line" :usePlain="false" type="warning">Warning</pa-button>
    <pa-button iconName="star_arc_line" :usePlain="false" type="danger">Danger</pa-button>
  </div>

  <div class="mb-size">
    <pa-button iconName="star_arc_line" type="primary">Primary</pa-button>
    <pa-button iconName="star_arc_line" type="success">Success</pa-button>
    <pa-button iconName="star_arc_line" type="info">Info</pa-button>
    <pa-button iconName="star_arc_line" type="warning">Warning</pa-button>
    <pa-button iconName="star_arc_line" type="danger">Danger</pa-button>
  </div>

  <div>
    <pa-button iconName="star_arc_line" type="primary" />
    <pa-button iconName="star_arc_line" type="success" />
    <pa-button iconName="star_arc_line" type="info" />
    <pa-button iconName="star_arc_line" type="warning" />
    <pa-button iconName="star_arc_line" type="danger" />
  </div>
</template>

<script lang="ts" setup></script>

<style></style>

显示代码

Group 组合

使用 pa-button-group 组件来定义按钮的组合样式。

<template>
  <pa-button-group type="primary">
    <pa-button iconName="star_arc_line" is="upload">Upload</pa-button>
    <pa-button iconName="star_arc_line" is="download">Download</pa-button>
    <pa-button iconName="star_arc_line" is="add">Add</pa-button>
    <pa-button iconName="star_arc_line" is="cancel">Cancel</pa-button>
    <pa-button iconName="star_arc_line" is="ok">OK</pa-button>
    <pa-button iconName="star_arc_line" is="trash">Trash</pa-button>
  </pa-button-group>
</template>

<script lang="ts" setup></script>

<style></style>

显示代码

禁用状态

使用 disabled 来定义按钮的禁用。

<template>
  <div class="mb-4">
    <pa-button iconName="star_arc_line" disabled :plain="false" type="primary">Primary</pa-button>
    <pa-button iconName="star_arc_line" disabled :plain="false" type="success">Success</pa-button>
    <pa-button iconName="star_arc_line" disabled :plain="false" type="info">Info</pa-button>
    <pa-button iconName="star_arc_line" disabled :plain="false" type="warning">Warning</pa-button>
    <pa-button iconName="star_arc_line" disabled :plain="false" type="danger">Danger</pa-button>
  </div>
</template>

<script lang="ts" setup></script>

<style>
.mb-4 {
  margin-bottom: 1rem;
}
</style>

显示代码

链接按钮

使用 useLine 来定义按钮的链接样式。

<template>
  <div class="mb-4">
    <pa-button iconName="star_arc_line" useLine :plain="false" type="primary">Primary</pa-button>
    <pa-button iconName="star_arc_line" useLine :plain="false" type="success">Success</pa-button>
    <pa-button iconName="star_arc_line" useLine :plain="false" type="info">Info</pa-button>
    <pa-button iconName="star_arc_line" useLine :plain="false" type="warning">Warning</pa-button>
    <pa-button iconName="star_arc_line" useLine :plain="false" type="danger">Danger</pa-button>
  </div>

  <div class="mb-4">
    <pa-button iconName="star_arc_line" useLine disabled type="primary">Primary</pa-button>
    <pa-button iconName="star_arc_line" useLine disabled type="success">Success</pa-button>
    <pa-button iconName="star_arc_line" useLine disabled type="info">Info</pa-button>
    <pa-button iconName="star_arc_line" useLine disabled type="warning">Warning</pa-button>
    <pa-button iconName="star_arc_line" useLine disabled type="danger">Danger</pa-button>
  </div>
</template>

<script lang="ts" setup></script>

<style>
.mb-4 {
  margin-bottom: 1rem;
}
</style>

显示代码

内置样式

内置样式只需使用 is 即可完成样式选择

<template>
  <el-row class="mb-size">
    <pa-button is="add">Add</pa-button>
    <pa-button is="cancel">Cancel</pa-button>
    <pa-button is="check">Check</pa-button>
    <pa-button is="download">Download</pa-button>
    <pa-button is="edit">Edit</pa-button>
  </el-row>
  <el-row class="mb-size">
    <pa-button is="export">Export</pa-button>
    <pa-button is="file">File</pa-button>
    <pa-button is="go">Go</pa-button>
    <pa-button is="import">Import</pa-button>
    <pa-button is="ok">Ok</pa-button>
  </el-row>
  <el-row class="mb-size">
    <pa-button is="refresh">Refresh</pa-button>
    <pa-button is="remove">Remove</pa-button>
    <pa-button is="save">Save</pa-button>
    <pa-button is="search">Search</pa-button>
    <pa-button is="submit">Submit</pa-button>
  </el-row>
  <el-row class="mb-size">
    <pa-button is="switch">Switch</pa-button>
    <pa-button is="sync">Sync</pa-button>
    <pa-button is="time">Time</pa-button>
    <pa-button is="trash">Trash</pa-button>
    <pa-button is="upload">Upload</pa-button>
  </el-row>
  <el-row>
    <pa-button is="view">View</pa-button>
  </el-row>
</template>

<script lang="ts" setup></script>

<style></style>

显示代码

防抖按钮

使用 debounced 即可控制防抖模式，debouncedTime 用于设置延迟触发事件，该功能默认 开启

<template>
  <el-row>
    <pa-button iconName="star_arc_line" :debounced="false" @click="debouncedClick">非防抖按钮</pa-button>
    <pa-button iconName="star_arc_line" @click="debouncedClick">防抖按钮</pa-button>
  </el-row>
</template>

<script lang="ts" setup>
import { M_Message } from "@/package/components/feedback";

function debouncedClick() {
  M_Message.success("点击触发");
}
</script>

<style></style>

显示代码

Icon 位置

使用 iconPosition 控制按钮图标显示位置。

<template>
  <el-row>
    <pa-button iconName="star_arc_line" @click="debouncedClick">左侧</pa-button>
    <pa-button iconName="star_arc_line" iconPosition="right" @click="debouncedClick">右侧</pa-button>
  </el-row>
</template>

<script lang="ts" setup>
import { M_Message } from "@/package/components/feedback";

function debouncedClick() {
  M_Message.success("点击触发");
}
</script>

<style></style>

显示代码

内置执行提示

使用 @submit-click @delete-click @confirm-click 即可开启内置执行提示, 或者配置 confirmConfig 来自定义弹窗提示

<template>
  <pa-button iconName="star_arc_line" :confirmConfig="confirmConfig">快捷使用Confirm</pa-button>
  <pa-button is="submit" @submit-click="confirmClick">快捷使用Submit</pa-button>
  <pa-button is="trash" @delete-click="confirmClick">快捷使用Delete</pa-button>
  <pa-button is="ok" @confirm-click="confirmClick">快捷使用Confirm</pa-button>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { M_Message } from "@/package/components/feedback";

const confirmConfig = ref({
  title: "自定义弹窗",
  message: "自定义弹窗是否继续",
  onConfirm: () => {
    M_Message.success("确认");
  },
  onClose: () => {
    M_Message.warning("取消");
  }
});

function confirmClick() {
  M_Message.success("确认");
}
</script>

<style></style>

显示代码

SaButtonType

属性名	描述	类型	默认值
is	内置样式选择 样式展示	string	—
type	类型	danger default info primary success warning	default
disabled	是否禁用按钮	boolean	false
loading	是否 Loading 状态	boolean	false
loadingBy	自动 Loading 监听依赖源	string	—
debounced	开启防抖	boolean	true
debouncedTime	防抖延迟时间	number	300
iconPosition	Icon 位置	left right	left
iconName	icon 图标(pa-icon)	string	—
useFont	是否使用字体图标	boolean	true
useLine	是否为链接按钮	boolean	false
usePlain	是否为朴素按钮	boolean	true
confirmConfig	确认弹窗配置	MessageBoxOptions	—