button

基础用法

ykc-button 的基础用法。

<template>
  <!-- ykc-button 组件 -->
  <div>      
    <ykc-button @click="handleClick">按钮</ykc-button>
    <ykc-button type="plain">按钮</ykc-button>
    <ykc-button type="primary-plain">导出</ykc-button>
  </div>
</template>

<script>
  export default {
    methods:{
      handleClick(v) {
        console.log('v', v)
      }
    }
  };
</script>

显示代码 复制代码 复制代码

文字按钮

ykc-button 没有边框和背景色。

<template>
  <!-- ykc-button 组件 -->
  <ykc-button type="text">文字按钮</ykc-button>
</template>

<script>
  export default {};
</script>

显示代码 复制代码 复制代码

图标按钮

ykc-button 带图标的按钮

<template>
  <!-- ykc-button 组件 -->
  <ykc-button type="text" btnIcon="ykc-icon-logout">启用</ykc-button>
</template>

<script>
  export default {};
</script>

显示代码 复制代码 复制代码

禁用状态

ykc-button 按钮不可用状态。

<template>
  <!-- ykc-button 组件 -->
  <div class="button-wrap"> 
    <ykc-button disabled>按钮</ykc-button>
    <ykc-button disabled type="text">文字按钮</ykc-button>
    <ykc-button disabled type="text" btnIcon="ykc-icon-logout">启用</ykc-button>
  </div>
</template>

<script>
  export default {};
</script>
<style>
  .button-wrap{
    display: flex;
  }
</style>

显示代码 复制代码 复制代码

Attributes

参数	必填	说明	类型	可选值	默认值
type	否	按钮类型	string	primary / primary-plain / plain / text	primary
disabled	否	是否禁用状态	boolean	—	false
padding	否	按钮内边距	string	—	—

Events

事件名称	说明	回调参数
click	点击触发	(event: Event)