Button按钮

基本用法

普通按钮 宽度设置 高度设置 颜色设置

图标 自定义图标

使用 med-button 标签来定义基本的button按钮

<template>
  <div>
    <div class="base">
      <med-button>普通按钮</med-button>
      <med-button width="100px">宽度设置</med-button>
      <med-button height="20px">高度设置</med-button>
      <med-button color="red" bg="yellow">颜色设置</med-button>
    </div>
    <div class="base">
      <med-button icon="search">图标</med-button>
      <med-button cusIcon="">自定义图标</med-button>
    </div>
  </div>
</template>
<style>
  .ant-btn {
    margin: 0 10px;
  }
</style>

显示代码

预设状态

小按钮 大按钮

普通按钮 普通按钮 普通按钮 普通按钮 默认选中状态 形状 形状

撑满父级

幽灵背景

载入状态

无法点击

使用 med-button 标签来定义基本的button按钮

<template>
  <div>
     <div class="base">
      <med-button size="small">小按钮</med-button>
      <med-button size="large">大按钮</med-button>
     </div>
     <div class="base">
      <med-button type="danger">普通按钮</med-button>
      <med-button type="primary">普通按钮</med-button>
      <med-button type="dashed">普通按钮</med-button>
      <med-button type="link">普通按钮</med-button>
      <med-button active>默认选中状态</med-button>
      <med-button shape="circle">形状</med-button>
      <med-button shape="round">形状</med-button>
    </div>
    <div class="base">
      <med-button block>撑满父级</med-button>
    </div>
    <div class="base">
      <med-button ghost>幽灵背景</med-button>
    </div>
    <div class="base">
      <med-button loading>载入状态</med-button>
    </div>
    <div class="base">
      <med-button disabled>无法点击</med-button>
    </div>
  </div>
</template>
<style>
  .ant-btn {
    margin: 0 10px;
  }
</style>

显示代码

点击延时响应

点击事件延时

使用 med-button 标签来定义基本的button按钮

<template>
  <div>
    <div class="base">
      <med-button :timeout="1000" @click="handleClick">点击事件延时</med-button>
    </div>
  </div>
</template>
<script>
  export default {
    methods:{
      handleClick() {
        alert('我延时了1秒钟才出来！')
      }
    }
  }
</script>
<style>
  .ant-btn {
    margin: 0 10px;
  }
</style>

显示代码

参数列表

参数	方式	示例	解释
html-type	Prop	html-type="submit"	设置 button 原生的 type 值，可选值为 button reset 或者submit
size	Prop	size="large"	预设按钮大小，可选值为 small large 或者不设，优先级低于自定义宽高
type	Prop	type="primary"	预设的按钮类型，可选值为 primary dashed danger link 或者不设，优先级低于 active 属性
shape	Prop	shape="circle"	设置按钮形状，可选值为 circle round 或者不设
timeout	Prop	timeout="1000"	点击事件触发延时
click	Emit	@click="onClick"	按钮点击回调事件