Button 按钮

点击后会触发一个操作。

使用指南

在 page.json 中引入组件

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

视频演示

代码演示

按钮类型

支持 defaultinfowarndanger 四种类型,默认为 default

  1. <w-pane title="Button" desc="按钮" />
  2. <w-pane desc="ButtonType" />
  3. <w-button type="default">Default</w-button>
  4. <w-button type="primary">Primary</w-button>
  5. <w-button type="info">Info</w-button>
  6. <w-button type="warn">Warn</w-button>
  7. <w-button type="danger">Danger</w-button>
  8. <w-button
  9. type="custom"
  10. styles="border-color: #b643cd!important;"
  11. bgColor="#b643cd"
  12. color="#ffffff"
  13. >
  14. Custom
  15. Button
  16. </w-button>
  17. <w-pane desc="Disabled" />
  18. <w-button disabled type="default">Default</w-button>
  19. <w-button disabled type="info">Info</w-button>
  20. <w-button disabled type="warn">Warn</w-button>
  21. <w-button disabled type="danger">Danger</w-button>
  22. <w-pane desc="Loading" />
  23. <w-button loading="{{true}}" type="default">Default</w-button>
  24. <w-button loading="{{true}}" type="info">Info</w-button>
  25. <w-button loading="{{true}}" type="warn">Warn</w-button>
  26. <w-button loading="{{true}}" type="danger">Danger</w-button>
  27. <w-pane desc="Ghost" />
  28. <w-button ghost type="default">Default</w-button>
  29. <w-button ghost type="info">Info</w-button>
  30. <w-button ghost type="warn">Warn</w-button>
  31. <w-button ghost type="danger">Danger</w-button>
  32. <w-pane desc="Dashed" />
  33. <w-button
  34. ghost
  35. dashed
  36. type="default"
  37. >
  38. Default
  39. </w-button>
  40. <w-button
  41. ghost
  42. dashed
  43. type="info"
  44. >
  45. Info
  46. </w-button>
  47. <w-button
  48. ghost
  49. dashed
  50. type="warn"
  51. >
  52. Warn
  53. </w-button>
  54. <w-button
  55. ghost
  56. dashed
  57. type="danger"
  58. >
  59. Danger
  60. </w-button>
  61. <w-pane desc="Icon" />
  62. <w-button
  63. icon="android"
  64. styles="border-color: #99ddcc!important;"
  65. iconColor="#ffffff"
  66. bgColor="#99ddcc"
  67. color="#ffffff"
  68. >
  69. Android
  70. </w-button>
  71. <w-button
  72. icon="edit"
  73. iconColor="#ffffff"
  74. type="info"
  75. >
  76. Edit
  77. </w-button>
  78. <w-button
  79. icon="refresh"
  80. iconColor="#ffffff"
  81. type="warn"
  82. >
  83. Reload
  84. </w-button>
  85. <w-button
  86. icon="apple"
  87. iconColor="#ffffff"
  88. type="danger"
  89. >
  90. Apple
  91. </w-button>
  92. <w-pane desc="Flat" />
  93. <w-button type="warn">NO Flat</w-button>
  94. <w-button flat type="info">Flat</w-button>
  95. <w-pane desc="Full" />
  96. <w-button type="warn">NO Full</w-button>
  97. <w-button full type="info">Full</w-button>
  98. <w-pane desc="Display" />
  99. <w-button type="warn">Block</w-button>
  100. <w-button inline type="info">Inline</w-button>
  101. <w-pane desc="In Cell Circle" />
  102. <w-cell-group>
  103. <w-cell
  104. direction="flex-start"
  105. is-link
  106. highlight
  107. >
  108. <w-button
  109. circle
  110. inline
  111. slot="content"
  112. type="warn"
  113. >
  114. btn1
  115. </w-button>
  116. <w-button
  117. circle
  118. inline
  119. slot="content"
  120. type="warn"
  121. >
  122. btn2
  123. </w-button>
  124. <w-button
  125. circle
  126. inline
  127. slot="content"
  128. type="warn"
  129. >
  130. btn3
  131. </w-button>
  132. <w-button
  133. circle
  134. inline
  135. slot="content"
  136. type="warn"
  137. >
  138. btn4
  139. </w-button>
  140. </w-cell>
  141. </w-cell-group>
  142. <w-pane desc="OpenType" />
  143. <w-button circle type="info" open-type="getUserInfo" bindgetuserinfo="change">getUserInfo</w-button>
  144. <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禁用按钮booleanfalse
loading设置loading状态booleanfalse
formType处理表单类型,可选值为 [submitreset]string
ghost幽灵按钮booleanfalse
dashed虚线booleanfalse
icon添加按钮图标string-
iconColor按钮图标颜色string#333333
iconSize按钮图标大小number-
openType设置开放数据, 可选值为 [contactsharegetUserInfo
appParameter打开 APP 时,向 APP 传递的参数string-
type按钮样式类型,可选值为 [default,primary,info,warn,danger,custom]stringdefault
styles按钮的自定义样式string-
color自定义按钮颜色string-
bgColor自定义背景颜色string-
flat开启按钮扁平化booleanfalse
full撑满容器booleanfalse
inline行内块按钮booleanfalse
circle按钮显示为椭圆形booleanfalse

Event 事件

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

Slot 插槽

名称说明
slot自定义内容

Class 自定义类名

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