El-Plus-Crud

Appearance

Button 按钮 ​

名称 ​

组件名称：ElPlusFormBtn

被引用类型: btn

TIP

被引用类型是指：当该组件作为子组件被 form 或者 table 组件引用时， formDesc 中对应的 type 类型。

基础用法 ​

先看效果

代码
html
<div class="demo">
  <ElPlusFormBtn :desc="{ label:'Default' }" />
  <ElPlusFormBtn :desc="{ label:'Primary', type: 'primary' }" />
  <ElPlusFormBtn type="success">Success</ElPlusFormBtn>
  <ElPlusFormBtn type="info">Info</ElPlusFormBtn>
  <ElPlusFormBtn :desc="{ label:'Warning', type: 'warning' }" />
  <ElPlusFormBtn :desc="{ label:'Danger', type: 'danger', disabled: true }" />
</div>
<div class="demo">
  <ElPlusFormBtn :desc="{ label:'Default' }" plain />
  <ElPlusFormBtn :desc="{ label:'Primary' }" type="primary" plain />
  <ElPlusFormBtn :desc="{ label:'Success', type: 'success', plain: true }" />
  <ElPlusFormBtn :desc="{ label:'Info', type: 'info', plain: true }" />
  <ElPlusFormBtn :desc="{ label:'Warning', type: 'warning'}" plain />
  <ElPlusFormBtn :desc="{ label:'Danger', type: 'danger', plain: true, disabled: true }" />
</div>
<div class="demo">
  <ElPlusFormBtn :desc="{ label:'Default', round: true }" />
  <ElPlusFormBtn :desc="{ label:'Primary', type: 'primary' }" round />
  <ElPlusFormBtn :desc="{ label:'Success', type: 'success' }" round />
  <ElPlusFormBtn :desc="{ label:'Info', type: 'info', round: true }" />
  <ElPlusFormBtn :desc="{ label:'Warning', type: 'warning', round: true }" />
  <ElPlusFormBtn :desc="{ label:'Danger', type: 'danger', round: true }" disabled />
</div>
<div class="demo">
  <ElPlusFormBtn :desc="{ icon: Search, circle : true }" />
  <ElPlusFormBtn :desc="{ type: 'primary', icon: Edit, circle: true }" />
  <ElPlusFormBtn :desc="{ type: 'success', icon: Check, circle: true }" />
  <ElPlusFormBtn :desc="{ type: 'info', icon: Message }" circle />
  <ElPlusFormBtn :desc="{ type: 'warning', icon: Star }" circle />
  <ElPlusFormBtn :desc="{ type: 'danger', icon: Delete, circle: true }" disabled />
</div>
<div class="demo">
  <ElPlusFormBtn :desc="{ label:'Default', text: true }" />
  <ElPlusFormBtn :desc="{ label:'Primary', type: 'primary', text: true }" />
  <ElPlusFormBtn :desc="{ label:'Success', type: 'success' }" text />
  <ElPlusFormBtn :desc="{ label:'Info', type: 'info' }" text />
  <ElPlusFormBtn :desc="{ label:'Warning', type: 'warning', text: true }" />
  <ElPlusFormBtn :desc="{ label:'Danger', type: 'danger', text: true }" disabled />
</div>
<div class="demo">
  <ElPlusFormBtn :desc="{ label:'Default', link: true }" />
  <ElPlusFormBtn :desc="{ label:'Primary', type: 'primary', link: true }" />
  <ElPlusFormBtn :desc="{ label:'Success', type: 'success' }" link />
  <ElPlusFormBtn :desc="{ label:'Info', type: 'info' }" link />
  <ElPlusFormBtn :desc="{ label:'Warning', type: 'warning', link: true }" />
  <ElPlusFormBtn :desc="{ label:'Danger', type: 'danger' }" link disabled />
</div>
<div class="demo">
  <ElPlusFormBtn :desc="{ label:'Default' }" />
  <ElPlusFormBtn :desc="{ label:'Primary', type: 'primary' }" />
  <ElPlusFormBtn type="success">Success</ElPlusFormBtn>
  <ElPlusFormBtn type="info">Info</ElPlusFormBtn>
  <ElPlusFormBtn :desc="{ label:'Warning', type: 'warning' }" />
  <ElPlusFormBtn :desc="{ label:'Danger', type: 'danger', disabled: true }" />
</div>
<div class="demo">
  <ElPlusFormBtn :desc="{ label:'Default' }" plain />
  <ElPlusFormBtn :desc="{ label:'Primary' }" type="primary" plain />
  <ElPlusFormBtn :desc="{ label:'Success', type: 'success', plain: true }" />
  <ElPlusFormBtn :desc="{ label:'Info', type: 'info', plain: true }" />
  <ElPlusFormBtn :desc="{ label:'Warning', type: 'warning'}" plain />
  <ElPlusFormBtn :desc="{ label:'Danger', type: 'danger', plain: true, disabled: true }" />
</div>
<div class="demo">
  <ElPlusFormBtn :desc="{ label:'Default', round: true }" />
  <ElPlusFormBtn :desc="{ label:'Primary', type: 'primary' }" round />
  <ElPlusFormBtn :desc="{ label:'Success', type: 'success' }" round />
  <ElPlusFormBtn :desc="{ label:'Info', type: 'info', round: true }" />
  <ElPlusFormBtn :desc="{ label:'Warning', type: 'warning', round: true }" />
  <ElPlusFormBtn :desc="{ label:'Danger', type: 'danger', round: true }" disabled />
</div>
<div class="demo">
  <ElPlusFormBtn :desc="{ icon: Search, circle : true }" />
  <ElPlusFormBtn :desc="{ type: 'primary', icon: Edit, circle: true }" />
  <ElPlusFormBtn :desc="{ type: 'success', icon: Check, circle: true }" />
  <ElPlusFormBtn :desc="{ type: 'info', icon: Message }" circle />
  <ElPlusFormBtn :desc="{ type: 'warning', icon: Star }" circle />
  <ElPlusFormBtn :desc="{ type: 'danger', icon: Delete, circle: true }" disabled />
</div>
<div class="demo">
  <ElPlusFormBtn :desc="{ label:'Default', text: true }" />
  <ElPlusFormBtn :desc="{ label:'Primary', type: 'primary', text: true }" />
  <ElPlusFormBtn :desc="{ label:'Success', type: 'success' }" text />
  <ElPlusFormBtn :desc="{ label:'Info', type: 'info' }" text />
  <ElPlusFormBtn :desc="{ label:'Warning', type: 'warning', text: true }" />
  <ElPlusFormBtn :desc="{ label:'Danger', type: 'danger', text: true }" disabled />
</div>
<div class="demo">
  <ElPlusFormBtn :desc="{ label:'Default', link: true }" />
  <ElPlusFormBtn :desc="{ label:'Primary', type: 'primary', link: true }" />
  <ElPlusFormBtn :desc="{ label:'Success', type: 'success' }" link />
  <ElPlusFormBtn :desc="{ label:'Info', type: 'info' }" link />
  <ElPlusFormBtn :desc="{ label:'Warning', type: 'warning', link: true }" />
  <ElPlusFormBtn :desc="{ label:'Danger', type: 'danger' }" link disabled />
</div>

不知道你发现没有，当独立使用组件时，你可以完全按照官方组件的写法：

vue
<!-- 以下两种写法是等效的 -->
<ElPlusFormBtn type="danger" plain>Danger</ElPlusFormBtn>
<ElPlusFormBtn :desc="{ label: 'Danger', type: 'danger', plain: true }" />
<!-- 以下两种写法是等效的 -->
<ElPlusFormBtn type="danger" plain>Danger</ElPlusFormBtn>
<ElPlusFormBtn :desc="{ label: 'Danger', type: 'danger', plain: true }" />

官网组件的所有属性均可配置到 desc 属性中，组件的其他用法请参考 官网 Button

mask 遮罩 / 加载 ​

配置中同时设置点击事件（on: { click: xxxFn }）和 mask: true 则可实现快捷遮罩；loading 状态需要手动取消，取消遮罩只需执行 click 中的回调函数 callBack: (time) => void

代码
vue
<ElPlusFormBtn :desc="desc1" />
<ElPlusFormBtn :desc="desc2" />

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

const desc1 = ref({
  type: 'primary',
  label: '点我一直加载',
  mask: true,
  on: { click: () => {} }
})

const desc2 = ref({
  type: 'primary',
  label: '点我加载2秒',
  mask: true,
  on: { click: ({ callBack }: IBtnBack) => callBack(2000) }
})
</script>
<ElPlusFormBtn :desc="desc1" />
<ElPlusFormBtn :desc="desc2" />

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

const desc1 = ref({
  type: 'primary',
  label: '点我一直加载',
  mask: true,
  on: { click: () => {} }
})

const desc2 = ref({
  type: 'primary',
  label: '点我加载2秒',
  mask: true,
  on: { click: ({ callBack }: IBtnBack) => callBack(2000) }
})
</script>

confirm - 二次确认 ​

配置 confirm: 'xxxx' 则可实现快捷用户二次确认

代码
vue
<ElPlusFormBtn :desc="desc1" />
<ElPlusFormBtn :desc="desc2" />

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

const desc1 = ref({
  type: 'danger',
  label: '删除',
  confirm: '确定要删除?',
  on: {
    click: () => ElMessage.success('删除成功~')
  }
})

const desc2 = ref({
  type: 'danger',
  label: '删除(mask:true)',
  confirm: '确定要删除?',
  mask: true,
  on: {
    click: ({ callBack }: IBtnBack) => {
      ElMessage.success('删除成功~')
      callBack(1000)
    }
  }
})
</script>
<ElPlusFormBtn :desc="desc1" />
<ElPlusFormBtn :desc="desc2" />

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

const desc1 = ref({
  type: 'danger',
  label: '删除',
  confirm: '确定要删除?',
  on: {
    click: () => ElMessage.success('删除成功~')
  }
})

const desc2 = ref({
  type: 'danger',
  label: '删除(mask:true)',
  confirm: '确定要删除?',
  mask: true,
  on: {
    click: ({ callBack }: IBtnBack) => {
      ElMessage.success('删除成功~')
      callBack(1000)
    }
  }
})
</script>

API 属性 ​

这里只列举除官方组件以外的属性，官网属性参考 官网 Button API

desc 属性说明 ​

插槽 ​