Button 按钮

点击后会触发一个操作。

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-button": "wuss-weapp/w-button/index",
  3. }

视频演示

代码演示

按钮类型

支持 default、info、warn、danger 四种类型，默认为 default

  1. <w-pane title="Button" desc="按钮" />
  3. <w-pane desc="ButtonType" />
  5. <w-button type="default">Default</w-button>
  6. <w-button type="primary">Primary</w-button>
  7. <w-button type="info">Info</w-button>
  8. <w-button type="warn">Warn</w-button>
  9. <w-button type="danger">Danger</w-button>
  10. <w-button
  11.  type="custom"
  12.  styles="border-color: #b643cd!important;"
  13.  bgColor="#b643cd"
  14.  color="#ffffff"
  15. >
  16.     Custom
  17.     Button
  18. </w-button>
  20. <w-pane desc="Disabled" />
  22. <w-button disabled type="default">Default</w-button>
  23. <w-button disabled type="info">Info</w-button>
  24. <w-button disabled type="warn">Warn</w-button>
  25. <w-button disabled type="danger">Danger</w-button>
  27. <w-pane desc="Loading" />
  29. <w-button loading="{{true}}" type="default">Default</w-button>
  30. <w-button loading="{{true}}" type="info">Info</w-button>
  31. <w-button loading="{{true}}" type="warn">Warn</w-button>
  32. <w-button loading="{{true}}" type="danger">Danger</w-button>
  34. <w-pane desc="Ghost" />
  36. <w-button ghost type="default">Default</w-button>
  37. <w-button ghost type="info">Info</w-button>
  38. <w-button ghost type="warn">Warn</w-button>
  39. <w-button ghost type="danger">Danger</w-button>
  41. <w-pane desc="Dashed" />
  43. <w-button
  44.  ghost
  45.  dashed
  46.  type="default"
  47. >
  48.     Default
  49. </w-button>
  50. <w-button
  51.  ghost
  52.  dashed
  53.  type="info"
  54. >
  55.     Info
  56. </w-button>
  57. <w-button
  58.  ghost
  59.  dashed
  60.  type="warn"
  61. >
  62.     Warn
  63. </w-button>
  64. <w-button
  65.  ghost
  66.  dashed
  67.  type="danger"
  68. >
  69.     Danger
  70. </w-button>
  72. <w-pane desc="Icon" />
  74. <w-button
  75.  icon="android"
  76.  styles="border-color: #99ddcc!important;"
  77.  iconColor="#ffffff"
  78.  bgColor="#99ddcc"
  79.  color="#ffffff"
  80. >
  81.     Android
  82. </w-button>
  83. <w-button
  84.  icon="edit"
  85.  iconColor="#ffffff"
  86.  type="info"
  87. >
  88.     Edit
  89. </w-button>
  90. <w-button
  91.  icon="refresh"
  92.  iconColor="#ffffff"
  93.  type="warn"
  94. >
  95.     Reload
  96. </w-button>
  97. <w-button
  98.  icon="apple"
  99.  iconColor="#ffffff"
  100.  type="danger"
  101. >
  102.     Apple
  103. </w-button>
  105. <w-pane desc="Flat" />
  107. <w-button type="warn">NO Flat</w-button>
  108. <w-button flat type="info">Flat</w-button>
  110. <w-pane desc="Full" />
  112. <w-button type="warn">NO Full</w-button>
  113. <w-button full type="info">Full</w-button>
  115. <w-pane desc="Display" />
  117. <w-button type="warn">Block</w-button>
  118. <w-button inline type="info">Inline</w-button>
  120. <w-pane desc="In Cell Circle" />
  122. <w-cell-group>
  123.     <w-cell
  124.      direction="flex-start"
  125.      is-link
  126.      highlight
  127.     >
  128.         <w-button
  129.      circle
  130.          inline
  131.          slot="content"
  132.          type="warn"
  133.         >
  134.             btn1
  135.         </w-button>
  137.         <w-button
  138.      circle
  139.          inline
  140.          slot="content"
  141.          type="warn"
  142.         >
  143.             btn2
  144.         </w-button>
  145.         <w-button
  146.      circle
  147.          inline
  148.          slot="content"
  149.          type="warn"
  150.         >
  151.             btn3
  152.         </w-button>
  153.         <w-button
  154.      circle
  155.          inline
  156.          slot="content"
  157.          type="warn"
  158.         >
  159.             btn4
  160.         </w-button>
  161.     </w-cell>
  162. </w-cell-group>
  165. <w-pane desc="OpenType" />
  166. <w-button circle type="info" open-type="getUserInfo" bindgetuserinfo="change">getUserInfo</w-button>
  167. <w-button circle type="info" open-type="getPhoneNumber" bindgetPhoneNumber="change">getPhoneNumber</w-button>
  1. .w-button-hover-class {
  2.  background-color: #a93cbe!important;
  3. }

API

Attribute 属性

属性 说明 类型 默认值
disabled 禁用按钮 boolean false
loading 设置loading状态 boolean false
formType 处理表单类型，可选值为 [submit reset] string -
ghost 幽灵按钮 boolean false
dashed 虚线 boolean false
icon 添加按钮图标 string -
iconColor 按钮图标颜色 string #333333
iconSize 按钮图标大小 number -
openType 设置开放数据, 可选值为 [contact share getUserInfo openSetting feedback] string -
appParameter 打开 APP 时，向 APP 传递的参数 string -
type 按钮样式类型，可选值为 [default,primary,info,warn,danger,custom] string default
styles 按钮的自定义样式 string -
color 自定义按钮颜色 string -
bgColor 自定义背景颜色 string -
flat 开启按钮扁平化 boolean false
full 撑满容器 boolean false
inline 行内块按钮 boolean false
circle 按钮显示为椭圆形 boolean false

Event 事件

事件名 说明 参数
onClick 点击按钮且按钮状态不为加载或禁用时触发 -
onError 点击操作失败时触发,例如openType为getUserInfo时若授权失败则进入回调 -

Slot 插槽

名称 说明
slot 自定义内容

Class 自定义类名

类名 说明
wuss-class 根节点样式类
wuss-button-hover-class button 的 hover-class