2021-01-28

antDesign of Vue:  组件库使用：

1： a-button:  按钮组：  按钮样式： 按钮有五种样式： 

      主按钮样式：  type="primary"    次按钮样式： type="default"     虚线按钮： type="dash"    警告按钮： type= "danger"    连接按钮：  type="link";

    <a-button type="primary">
      Primary
    </a-button>
    <a-button>Default</a-button>
    <a-button type="dashed">
      Dashed
    </a-button>
    <a-button type="danger">
      Danger
    </a-button>

2: 添加idsabled 属性让按钮处于禁用状态：

    <a-button type="primary">
      Primary
    </a-button>
    <a-button type="primary" disabled>
      Primary(disabled)
    </a-button>

3： 当需要在button 按钮内部嵌入： icon 图图表的时候

    <a-button type="primary" shape="circle" icon="search" />
    <a-button type="primary" shape="circle">
      A
    </a-button>
    <a-button type="primary" icon="search">
      Search
    </a-button>
    <a-button shape="circle" icon="search" />

 4：  block  按钮将其宽度设置为父级的宽度：

  <div>
    <a-button type="primary" block>
      Primary
    </a-button>
    <a-button block>
      Default
    </a-button>
    <a-button type="dashed" block>
      Dashed
    </a-button>
    <a-button type="danger" block>
      Danger
    </a-button>
    <a-button type="link" block>
      Link
    </a-button>
  </div>

5： 通过 button 属性产生不同的样式：   推荐使用顺序是： type（按钮样式） ==> shape（外观形状） ==> size（尺寸大小） ==> loading（加载中） ==> disabled （禁用）

6： disabled:   属性按钮失效状态；  （禁用状态：）  type:  boolean          type: boolean(布尔类型)

7： ghost:  幽灵属性。  使用按钮透明。

8： icon： 设置按钮图标的样式

9： loading : 加载状态默认设置为 false;          在事件处理函数: 把loading 在设置为true; 

10:  shape:   设置形状按钮；  可选值： circle, round，  或者不设置；

11：size:   设置 Button 按钮形状的大小，  可选值： primary,  dashed,  danger， link,  或者不设置。

12：block: 将宽度设设置为父级的宽度，       添加block属性，  类型为boolean.

 

13: 点击事件：  @click:  定义点击事件：  点击按钮是回调。

补充 vue 中清楚定时器： 

 直接调用clearTimeout（this.timer）;

  
   ClearTimeout(this.timer);

   this.timer = setTimeout (()=> {
         // console.log(this.iconLoading + "加载中...")
         // this.iconLoading = true;
   })