cv-btn 按钮

简要

button按钮
可以通过type、plain、round和circle属性更改样式。

示例

::: demo

<template>
  <div>
    <h3>常规按钮</h3>
    <cvRow>
      <cv-btn-base type="primary">主要按钮</cv-btn-base>
      <cv-btn-base type="success">成功按钮</cv-btn-base>
      <cv-btn-base type="info">信息按钮</cv-btn-base>
      <cv-btn-base type="warning">警告按钮</cv-btn-base>
      <cv-btn-base type="danger">危险按钮</cv-btn-base>
    </cvRow>
    <br />
    <cvRow>
      <cv-btn-base plain>朴素按钮</cv-btn-base>
      <cv-btn-base type="primary" plain>主要按钮</cv-btn-base>
      <cv-btn-base type="success" plain>成功按钮</cv-btn-base>
      <cv-btn-base type="info" plain>信息按钮</cv-btn-base>
      <cv-btn-base type="warning" plain>警告按钮</cv-btn-base>
      <cv-btn-base type="danger" plain>危险按钮</cv-btn-base>
    </cvRow>
    <h3>圆角按钮</h3>
    <cvRow>
      <cv-btn-base round>圆角按钮</cv-btn-base>
      <cv-btn-base type="primary" round>主要按钮</cv-btn-base>
      <cv-btn-base type="success" round>成功按钮</cv-btn-base>
      <cv-btn-base type="info" round>信息按钮</cv-btn-base>
      <cv-btn-base type="warning" round>警告按钮</cv-btn-base>
      <cv-btn-base type="danger" round>危险按钮</cv-btn-base>
    </cvRow>
    <br />
    <cvRow>
      <cv-btn-base circle />
      <cv-btn-base type="primary" icon="ElIconEdit" circle />
      <cv-btn-base type="success" icon="ElIconCheck" circle />
      <cv-btn-base type="info" icon="ElIconMessage" circle />
      <cv-btn-base type="warning" icon="ElIconStar" circle />
      <cv-btn-base type="danger" icon="ElIconDelete" circle />
    </cvRow>
    <h3>图标按钮</h3>
    <cv-btn-base type="primary" icon="ElIconEdit" />
    <cv-btn-base type="primary" icon="ElIconShare" />
    <cv-btn-base type="primary" icon="ElIconDelete" />
    <cv-btn-base type="primary" icon="ElIconSearch">搜索</cv-btn-base>
    <cv-btn-base type="primary">
      上传
      <cv-icons type="ElIconUpload" />
    </cv-btn-base>

    <h3>加载中，防止重复点击</h3>
    <cv-btn-base type="primary" :autoLoading="true" @click="handleSubmit1($event, 'aaaa', 'bbb')">提交按钮</cv-btn-base>

    <h3>文字按钮</h3>
    <cv-btn-text type="primary" autoLoading @click="handleSubmit1($event)">提交按钮</cv-btn-text>
    <cv-btn-text type="primary" autoLoading @click="handleSubmit2($event, 'aaaa', 'bbb')">删除按钮</cv-btn-text>

    <div style="height: 100px"></div>
  </div>
</template>

<script>
export default {
  methods: {
    handleSubmit1(done, aaa, bbb) {
      console.log(aaa, bbb, done);

      // 这里供业务组件处理一些事情,比如ajax请求,此处用setTimeout模拟, 执行done()方法消失loading
      setTimeout(() => {
        done();
      }, 1000);
    },
    // 传递参数，防止重复提交
    handleSubmit2(done, aaa, bbb) {
      console.log(aaa, bbb, done);
      setTimeout(() => {
        done();
      }, 1000);
    }
  }
};
</script>

:::

属性

属性名	类型	默认值	说明	可选值
size	String	-	尺寸	medium / small / mini
type	String	-	类型	primary / success / warning / danger / info / text
plain	boolean	false	是否朴素按钮	--
round	boolean	false	是否圆角按钮	--
circle	boolean	false	是否圆形按钮	--
loading	boolean	false	是否加载中状态	--
disabled	boolean	false	是否禁用状态	--
icon	string	-	图标类名	--
autoLoading	boolean	false	自动开启loading