网赚网为广大上网爱好者提供目前网上赚钱好项目,以及大学生兼职网赚、就业平台。网赚网免费公益公开课讲座教程,网赚纯干货技术分享,让你轻松做网赚,在家等收入,还在等什么,轻松登陆,赶快加入我们,安全更可靠!

实现一个微信小程序Button组件

2020-06-28 07:28:07 栏目 : 手机APP 围观 : 评论

微信小程序存在Button组件

微信小程序原生存在Button组件,而且样式也不丑,拓展属性也很多,只要去看文档,一边看一边试,还是很容易构造一个理想的按钮Button出来。微信小程序Button传送门。
但是某些时候可能也会觉得原生Button组件配置过于复杂,或者并不满足当前需求,那么就可能需要自定义一个Button组件了。

好的,开始

比如想要这样的效果。拥有五种不同的颜色
拥有三种不同的大小
拥有镂空效果
可以圆角
可以禁用
可以设置图标

上代码

第一步,创建组件

首先打开编辑器,这里就打开微信开发者工具吧,然后创建一个组件,像这样
组件文件夹
我这里用的是Vscode然后用到了less,和easyLess插件自动编译less为wxss样式。

第二步,控制结构和样式

结构中需要注意:文字应该居中显示,所以此处可能需要使用flex布局方便些
需要预留图标位置,没有设置时,则不显示
需要设置背景颜色控制选项
注意结构和样式对应即可
  1. <button
  2. class="pm-button pm-button--{{size}} pm-button--{{type}} {{plain?'pm-button--plain':''}} {{round?'pm-button--round':''}} {{disabled?'pm-button--disabled':''}}"
  3. style="{{cStyle}}"
  4. bindtap="clickHandler"
  5. >
  6. <pm-icon icon="{{icon}}" color="{{iconColor}}" size="{{iconSize}}" wx:if="{{icon}}"></pm-icon>
  7. <slot/>
  8. </button>
  1. .pm-button {
  2. border-radius: 0;
  3. font-weight: normal;
  4. display: flex;
  5. flex-flow: row nowrap;
  6. justify-content: center;
  7. align-items: center;
  8. white-space: nowrap;
  9. }
  10. .pm-button:not([size='mini']) {
  11. width: 0;
  12. }
  13. .pm-button--normal {
  14. width: 80px !important;
  15. height: 40px;
  16. font-size: 16px;
  17. }
  18. .pm-button--normal.pm-button--round {
  19. border-radius: 40px;
  20. }
  21. .pm-button--small {
  22. width: 60px !important;
  23. height: 30px;
  24. font-size: 14px;
  25. }
  26. .pm-button--small.pm-button--round {
  27. border-radius: 30px;
  28. }
  29. .pm-button--mini {
  30. width: 40px !important;
  31. height: 20px;
  32. font-size: 12px;
  33. }
  34. .pm-button--mini.pm-button--round {
  35. border-radius: 20px;
  36. }
  37. .pm-button--primary {
  38. background-color: #1989fa;
  39. border: 1px solid #1989fa;
  40. color: white;
  41. }
  42. .pm-button--primary.pm-button--plain {
  43. color: #1989fa;
  44. }
  45. .pm-button--success {
  46. background-color: #07c160;
  47. border: 1px solid #07c160;
  48. color: white;
  49. }
  50. .pm-button--success.pm-button--plain {
  51. color: #07c160;
  52. }
  53. .pm-button--danger {
  54. background-color: #ee0a24;
  55. border: 1px solid #ee0a24;
  56. color: white;
  57. }
  58. .pm-button--danger.pm-button--plain {
  59. color: #ee0a24;
  60. }
  61. .pm-button--warning {
  62. background-color: #ff976a;
  63. border: 1px solid #ff976a;
  64. color: white;
  65. }
  66. .pm-button--warning.pm-button--plain {
  67. color: #ff976a;
  68. }
  69. .pm-button--default {
  70. background-color: #ffffff;
  71. border: 1px solid #ebedf0;
  72. color: black;
  73. }
  74. .pm-button--primary:active,
  75. .pm-button--success:active,
  76. .pm-button--danger:active,
  77. .pm-button--warning:active,
  78. .pm-button--default:active {
  79. opacity: 0.8;
  80. }
  81. .pm-button--default:active {
  82. background-color: #ebedf0;
  83. }
  84. .pm-button--plain {
  85. background-color: transparent;
  86. }
  87. .pm-button--plain:active {
  88. opacity: 1!important;
  89. background-color: #ebedf0;
  90. }
  91. .pm-button--disabled {
  92. opacity: 0.6;
  93. }
  94. .pm-button--disabled:active {
  95. opacity: 0.6 !important;
  96. }
  97. .pm-button--disabled.pm-button--plain:active,
  98. .pm-button--disabled.pm-button--default:active {
  99. background-color: transparent;
  100. }

第三步,逻辑处理

  1. Component({
  2. /**
  3. * 组件的属性列表
  4. */
  5. properties: {
  6. size: {
  7. type: String,
  8. value: 'normal'
  9. },
  10. type: {
  11. type: String,
  12. value: 'primary'
  13. },
  14. plain: Boolean,
  15. disabled: Boolean,
  16. round: Boolean,
  17. cStyle: String,
  18. icon: String,
  19. iconColor: String,
  20. iconSize: String
  21. },
  22. /**
  23. * 组件的方法列表
  24. */
  25. methods: {
  26. clickHandler() {
  27. !this.data.disabled && this.triggerEvent('click', {})
  28. }
  29. }
  30. })

相关文章