button.nvue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">按钮类型</text>
  5. <view class="u-demo-block__content">
  6. <view class="u-page__button-item">
  7. <u-button
  8. text="默认按钮"
  9. size="normal"
  10. type="info"
  11. @click="click"
  12. ></u-button>
  13. </view>
  14. <view class="u-page__button-item">
  15. <u-button
  16. text="成功按钮"
  17. size="normal"
  18. type="success"
  19. ></u-button>
  20. </view>
  21. <view class="u-page__button-item">
  22. <u-button
  23. text="危险按钮"
  24. size="normal"
  25. type="error"
  26. ></u-button>
  27. </view>
  28. <view class="u-page__button-item">
  29. <u-button
  30. text="主要按钮"
  31. size="normal"
  32. type="primary"
  33. ></u-button>
  34. </view>
  35. <view class="u-page__button-item">
  36. <u-button
  37. text="警告按钮"
  38. size="normal"
  39. type="warning"
  40. ></u-button>
  41. </view>
  42. </view>
  43. </view>
  44. <view class="u-demo-block">
  45. <text class="u-demo-block__title">镂空按钮</text>
  46. <view class="u-demo-block__content">
  47. <view class="u-page__button-item">
  48. <u-button
  49. text="镂空按钮"
  50. size="normal"
  51. type="info"
  52. plain
  53. ></u-button>
  54. </view>
  55. <view class="u-page__button-item">
  56. <u-button
  57. text="镂空按钮"
  58. size="normal"
  59. type="success"
  60. plain
  61. ></u-button>
  62. </view>
  63. <view class="u-page__button-item">
  64. <u-button
  65. text="镂空按钮"
  66. size="normal"
  67. type="error"
  68. plain
  69. ></u-button>
  70. </view>
  71. <view class="u-page__button-item">
  72. <u-button
  73. text="镂空按钮"
  74. size="normal"
  75. type="primary"
  76. plain
  77. ></u-button>
  78. </view>
  79. <view class="u-page__button-item">
  80. <u-button
  81. text="镂空按钮"
  82. size="normal"
  83. type="warning"
  84. plain
  85. ></u-button>
  86. </view>
  87. </view>
  88. </view>
  89. <view class="u-demo-block">
  90. <text class="u-demo-block__title">细边按钮</text>
  91. <view class="u-demo-block__content">
  92. <view class="u-page__button-item">
  93. <u-button
  94. text="细边按钮"
  95. size="normal"
  96. type="info"
  97. plain
  98. hairline
  99. ></u-button>
  100. </view>
  101. <view class="u-page__button-item">
  102. <u-button
  103. text="细边按钮"
  104. size="normal"
  105. type="success"
  106. plain
  107. hairline
  108. ></u-button>
  109. </view>
  110. <view class="u-page__button-item">
  111. <u-button
  112. text="细边按钮"
  113. size="normal"
  114. type="error"
  115. plain
  116. hairline
  117. ></u-button>
  118. </view>
  119. <view class="u-page__button-item">
  120. <u-button
  121. text="细边按钮"
  122. size="normal"
  123. type="primary"
  124. plain
  125. hairline
  126. ></u-button>
  127. </view>
  128. <view class="u-page__button-item">
  129. <u-button
  130. text="细边按钮"
  131. size="normal"
  132. type="warning"
  133. plain
  134. hairline
  135. ></u-button>
  136. </view>
  137. </view>
  138. </view>
  139. <view class="u-demo-block">
  140. <text class="u-demo-block__title">禁用按钮</text>
  141. <view class="u-demo-block__content">
  142. <view class="u-page__button-item">
  143. <u-button
  144. disabled
  145. text="禁用按钮"
  146. size="normal"
  147. type="info"
  148. ></u-button>
  149. </view>
  150. <view class="u-page__button-item">
  151. <u-button
  152. disabled
  153. text="禁用按钮"
  154. size="normal"
  155. type="success"
  156. ></u-button>
  157. </view>
  158. <view class="u-page__button-item">
  159. <u-button
  160. disabled
  161. text="禁用按钮"
  162. size="normal"
  163. type="error"
  164. ></u-button>
  165. </view>
  166. <view class="u-page__button-item">
  167. <u-button
  168. disabled
  169. text="禁用按钮"
  170. size="normal"
  171. type="primary"
  172. ></u-button>
  173. </view>
  174. <view class="u-page__button-item">
  175. <u-button
  176. disabled
  177. text="禁用按钮"
  178. size="normal"
  179. type="warning"
  180. ></u-button>
  181. </view>
  182. </view>
  183. </view>
  184. <view class="u-demo-block">
  185. <text class="u-demo-block__title">加载中</text>
  186. <view class="u-demo-block__content">
  187. <view class="u-page__button-item">
  188. <u-button
  189. loadingText="加载中"
  190. size="normal"
  191. loading
  192. loadingMode="circle"
  193. type="success"
  194. ></u-button>
  195. </view>
  196. <view class="u-page__button-item">
  197. <u-button
  198. class="button-layout__item"
  199. loadingText="加载中"
  200. size="normal"
  201. loading
  202. type="error"
  203. ></u-button>
  204. </view>
  205. </view>
  206. </view>
  207. <view class="u-demo-block">
  208. <text class="u-demo-block__title">按钮图标&按钮形状</text>
  209. <view class="u-demo-block__content">
  210. <view class="u-page__button-item">
  211. <u-button
  212. text="按钮图标"
  213. size="normal"
  214. icon="map"
  215. plain
  216. type="warning"
  217. ></u-button>
  218. </view>
  219. <view class="u-page__button-item">
  220. <u-button
  221. text="按钮图标"
  222. size="normal"
  223. plain
  224. shape="circle"
  225. type="success"
  226. ></u-button>
  227. </view>
  228. </view>
  229. </view>
  230. <view class="u-demo-block">
  231. <text class="u-demo-block__title">自定义颜色</text>
  232. <view class="u-demo-block__content">
  233. <view class="u-page__button-item">
  234. <u-button
  235. text="渐变色按钮"
  236. size="normal"
  237. color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
  238. ></u-button>
  239. </view>
  240. <view class="u-page__button-item">
  241. <u-button
  242. text="渐变色按钮"
  243. size="normal"
  244. color="linear-gradient(to right, rgb(220, 194, 11), rgb(4, 151, 99))"
  245. ></u-button>
  246. </view>
  247. <view class="u-page__button-item">
  248. <u-button
  249. text="青绿色按钮"
  250. size="normal"
  251. color="rgb(10, 185, 156)"
  252. ></u-button>
  253. </view>
  254. </view>
  255. </view>
  256. <view class="u-demo-block">
  257. <text class="u-demo-block__title">自定义大小</text>
  258. <view class="u-demo-block__content" style="padding-bottom: 15px; flex-direction: column;align-items: stretch;flex-wrap: nowrap;">
  259. <u-button
  260. text="超大尺寸"
  261. size="large"
  262. type="success"
  263. ></u-button>
  264. </view>
  265. <view class="u-demo-block__content">
  266. <view class="u-page__button-item">
  267. <u-button
  268. text="普通尺寸"
  269. size="normal"
  270. type="error"
  271. ></u-button>
  272. </view>
  273. <view class="u-page__button-item">
  274. <u-button
  275. text="小型尺寸"
  276. size="small"
  277. type="primary"
  278. ></u-button>
  279. </view>
  280. <view class="u-page__button-item">
  281. <u-button
  282. class="button-layout__item"
  283. text="超小尺寸"
  284. size="mini"
  285. type="warning"
  286. ></u-button>
  287. </view>
  288. </view>
  289. </view>
  290. </view>
  291. </template>
  292. <script>
  293. export default {
  294. data() {
  295. return {
  296. // type: 'default',
  297. // disabled: false
  298. }
  299. },
  300. onLoad() {
  301. setTimeout(() => {
  302. this.type = 'primary'
  303. this.disabled = true
  304. }, 2000)
  305. },
  306. methods: {
  307. click() {
  308. console.log('click');
  309. }
  310. }
  311. }
  312. </script>
  313. <style lang="scss">
  314. .u-page {
  315. &__button-item {
  316. margin: 0 15px 15px 0;
  317. }
  318. }
  319. .u-demo-block__content {
  320. flex-direction: row;
  321. flex-wrap: wrap;
  322. align-items: center;
  323. }
  324. </style>