Button 按钮

改变样式

通过 type 颜色，改变样式。disabled 禁用。

<template>
  <div class="demo">
    <div>
      <mist-button type="success">成功按钮</mist-button>
      <mist-button type="default">默认按钮</mist-button>
      <mist-button type="primary">主要按钮</mist-button>
      <mist-button type="warning">警告按钮</mist-button>
      <mist-button type="danger">危险按钮</mist-button>
    </div>

    <div>
      <mist-button type="default" disabled>默认按钮</mist-button>
      <mist-button type="primary" disabled>主要按钮</mist-button>
    </div>
  </div>
</template>
<style>
  .demo{
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  .demo button{
    margin-bottom: 10px
  }
</style>

Expand Copy Copy

类型

通过 round 椭圆，circle 圆形，改变形状。

<template>
  <div class="demo2">
    <div>
      <mist-button type="success" round>椭圆按钮</mist-button>
      <mist-button type="default" round>默认按钮</mist-button>
      <mist-button type="primary" round>主要按钮</mist-button>
    </div>
    
    <div>
      <mist-button type="default" circle>默</mist-button>
      <mist-button type="primary" circle>主</mist-button>
      <mist-button type="warning" circle>警</mist-button>
    </div>
  </div>
</template>
<style>
  .demo2{
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  .demo2 button{
    margin-bottom: 10px
  }
</style>

Expand Copy Copy

大小

size属性，medium/small/mini控制大小

<template>
  <div class="demo3">
    <div>
      <mist-button type="default">默认按钮</mist-button>
      <mist-button type="default" size="medium">中等按钮</mist-button>
      <mist-button type="default" size="small">小型按钮</mist-button>
      <mist-button type="default" size="mini">迷你按钮</mist-button>
    </div>

    <div>
      <mist-button type="success" round>圆形按钮</mist-button>
      <mist-button type="default" round size="medium">中等按钮</mist-button>
      <mist-button type="primary" round size="small">小型按钮</mist-button>
      <mist-button type="warning" round size="mini">迷你按钮</mist-button>
    </div>
  </div>
</template>
<style>
  .demo3{
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  .demo3 button{
    margin-bottom: 10px
  }
</style>

Expand Copy Copy

加载中

loading属性，控制是否加载动画

<template>
  <mist-button :loading="loading">加载中</mist-button>
  <mist-button :loading="loading" disabled>加载中</mist-button>
</template>  
<script>
  export default {
    data() {
      return {
        loading:true
      }
    }
  };
</script>

Expand Copy Copy