Button

基本用法

<template>
  <bc-button>默认</bc-button>
  <bc-button type="primary">
    主要
  </bc-button>
  <bc-button type="warning">
    警告
  </bc-button>
  <bc-button type="danger">
    危险
  </bc-button>
  <bc-button text>
    文本
  </bc-button>
</template>

Hide Source

操作确认

<template>
  <bc-button type="danger" @click="handleRemove">删除</bc-button>
  <bc-button
    @click="handleRemove"
    confirm="自定义警告内容"
    style="margin-left: 20px"
  >自定义警告内容</bc-button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Confirm',
})
</script>

<script lang="ts" setup>
function handleRemove() {
  console.log('trigger remove')
}
</script>```

Hide Source

最小化

<template>
  <bc-button
    :icon="Edit"
    mini
    tooltip
    type="primary"
    size="small"
  >编辑</bc-button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Mini',
})
</script>

<script lang="ts" setup>
import { Edit } from '@element-plus/icons-vue'
console.log(Edit)
</script>```

Hide Source

属性

属性	说明	类型	可选值	默认值
confirm	是否需要操作确认提示	boolean / string	-	false
tooltip	是否以悬浮框展示按钮名称，主要用于按钮最小化后的提示	boolean	-	false
mini	是否最小化	boolean	-	false

Source

Docs