Button

主要按钮

默认展示主要按钮。

我是主要按钮

<template>
  <d-button @click="handleClick">我是主要按钮</d-button>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        alert('hello');
      },
    },
  };
</script>

次要按钮

通过 secondary 属性可展示次要按钮。

我是次级按钮

<template>
  <d-button secondary @click="handleClick">我是次级按钮</d-button>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        alert('hello');
      },
    },
  };
</script>

自定义大小

通过 size 属性可设置按钮尺寸。

我是小号主要按钮

我是中号主要按钮

我是大号主要按钮

我是小号次要按钮

我是中号次要按钮

我是大号次要按钮

<template>
  <div class="button-group">
    <d-button size="small" @click="handleClick">我是小号主要按钮</d-button>
    <d-button @click="handleClick">我是中号主要按钮</d-button>
    <d-button size="large" @click="handleClick">我是大号主要按钮</d-button>
    <d-button secondary size="small" @click="handleClick">
      我是小号次要按钮
    </d-button>
    <d-button secondary @click="handleClick">我是中号次要按钮</d-button>
    <d-button secondary size="large" @click="handleClick">
      我是大号次要按钮
    </d-button>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        alert('hello');
      },
    },
  };
</script>

<style lang="scss" scoped>
  .button-group {
    > *:not(:first-child) {
      margin-top: 12px;
    }
  }

  .gradient {
    background: linear-gradient(90deg, #fead2c 0%, #fe7404 100%);
  }
</style>

自定义颜色

通过 CSS 属性 background 设置颜色。

我是绿色按钮

我是渐变按钮

我是被禁用的绿色按钮

我是被禁用的渐变按钮

<template>
  <div class="button-group">
    <d-button style="background: #00bc9d" @click="handleClick">
      我是绿色按钮
    </d-button>
    <d-button class="gradient" @click="handleClick">我是渐变按钮</d-button>
    <d-button style="background: #00bc9d" disabled @click="handleClick">
      我是被禁用的绿色按钮
    </d-button>
    <d-button class="gradient" disabled @click="handleClick">
      我是被禁用的渐变按钮
    </d-button>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        alert('hello');
      },
    },
  };
</script>

<style lang="scss" scoped>
  .button-group {
    > *:not(:first-child) {
      margin-top: 12px;
    }
  }

  .gradient {
    background: linear-gradient(90deg, #fead2c 0%, #fe7404 100%);
  }
</style>

禁用状态

通过 disabled 属性可禁用按钮。

我是被禁用的主要按钮

我是被禁用的次要按钮

<template>
  <div class="button-group">
    <d-button disabled @click="handleClick">我是被禁用的主要按钮</d-button>
    <d-button secondary disabled @click="handleClick">
      我是被禁用的次要按钮
    </d-button>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        alert('hello');
      },
    },
  };
</script>

<style lang="scss" scoped>
  .button-group {
    > *:not(:first-child) {
      margin-top: 12px;
    }
  }
</style>

API

属性

名称	说明	类型	默认值
secondary	是否为次级按钮	boolean	false
size	按钮尺寸	normal | large | small	normal
disabled	是否为禁用状态	boolean	false

插槽

名称	说明	参数
default	按钮内容	无

事件

名称	说明	参数
click	点击时触发	名称 说明 类型 e 事件对象 object

贡献者

无