Button 按钮

基本用法

常规按钮

  1. <nut-button
  2. @click="clickHandler"
  3. :disabled='disabled'
  4. >
  5. 去结算
  6. </nut-button>
  7. <nut-button
  8. disabled
  9. >
  10. 去结算(disabled)
  11. </nut-button>
  1. export default {
  2. data() {
  3. return {
  4. disabled: false
  5. };
  6. },
  7. methods: {
  8. clickHandler(e) {
  9. // alert("我点击了按钮");
  10. console.log(e, "我点击了按钮");
  11. this.disabled = true;
  12. setTimeout(() => {
  13. this.disabled = false;
  14. }, 2000);
  15. }
  16. }
  17. };

常规按钮-小

  1. <nut-button
  2. small
  3. >
  4. 去结算
  5. </nut-button>
  6. <nut-button
  7. small
  8. disabled
  9. >
  10. 去结算(disabled)
  11. </nut-button>

常规按钮组

  1. <nut-buttongroup>
  2. <nut-button
  3. type="light"
  4. >
  5. 重置
  6. </nut-button>
  7. <nut-button>
  8. 确定
  9. </nut-button>
  10. </nut-buttongroup>

通栏按钮

  1. <nut-button
  2. block
  3. >
  4. 登录
  5. </nut-button>

通栏按钮-圆角

  1. <nut-button
  2. block
  3. shape="circle"
  4. >
  5. 登录
  6. </nut-button>

圆角按钮-常规Button

  1. <nut-button
  2. type="red"
  3. shape="circle"
  4. small
  5. >
  6. 确认收货
  7. </nut-button>
  8. <nut-button
  9. type="gray"
  10. shape="circle"
  11. small
  12. >
  13. 查看物流
  14. </nut-button>
  15. <nut-button
  16. type="default"
  17. shape="circle"
  18. small
  19. >
  20. 再次购买
  21. </nut-button>
  22. <nut-button
  23. type="light"
  24. shape="circle"
  25. small
  26. >
  27. 降价通知
  28. </nut-button>

圆角按钮-标签Button

  1. <nut-button
  2. type="primary"
  3. shape="circle"
  4. small
  5. >
  6. 京东快递
  7. </nut-button>
  8. <nut-button
  9. type="lightred"
  10. shape="circle"
  11. small
  12. >
  13. 好评 6.6万
  14. </nut-button>
  15. <nut-button
  16. type="actived"
  17. shape="circle"
  18. icon="tick"
  19. small
  20. >
  21. 全部 100万
  22. </nut-button>

图标按钮-小

  1. <nut-button
  2. type="actived"
  3. shape="circle"
  4. icon="tick"
  5. small
  6. >
  7. </nut-button>

图标按钮-大

  1. <nut-button
  2. type="actived"
  3. shape="circle"
  4. icon="tick"
  5. >
  6. </nut-button>

圆角按钮-商品属性选择Button

  1. <nut-button
  2. type="actived"
  3. shape="circle"
  4. small
  5. >
  6. 象牙白
  7. </nut-button>
  8. <nut-button
  9. type="light"
  10. shape="circle"
  11. small
  12. >
  13. 皓月灰
  14. </nut-button>
  15. <nut-button
  16. type="dashed"
  17. shape="circle"
  18. small
  19. >
  20. 晶钻蓝
  21. </nut-button>

自定义颜色

  1. <nut-button
  2. type="actived"
  3. shape="circle"
  4. small
  5. color="#fff"
  6. >
  7. 象牙白
  8. </nut-button>
  9. <nut-button
  10. type="primary"
  11. shape="circle"
  12. small
  13. color="rgb(0,0,0)"
  14. >
  15. 象牙白
  16. </nut-button>
  17. <nut-button
  18. type="actived"
  19. shape="circle"
  20. icon="tick"
  21. color="rgb(0,0,0)"
  22. small
  23. >
  24. </nut-button>
  25. <nut-button
  26. type="actived"
  27. shape="circle"
  28. icon="tick"
  29. color="rgb(0,0,0)"
  30. small
  31. >
  32. 全部 100
  33. </nut-button>

Prop

字段说明类型默认值
type按钮类型,可选类型包含:空、red、gray、light、lightred、primary、default、actived、dashedString-
block是否为通栏Booleanfalse
small是否为小号组件Booleanfalse
shape形状配置,可选类型:空、circleString-
icon按钮前的图标,参考Icon组件String-
color自定义颜色,包含文字与图片颜色String-

Button 按钮 - 图1