u-checkbox.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  1. <template>
  2. <view
  3. class="u-checkbox"
  4. :style="[checkboxStyle]"
  5. @tap.stop="wrapperClickHandler"
  6. :class="[`u-checkbox-label--${parentData.iconPlacement}`, parentData.borderBottom && parentData.placement === 'column' && 'u-border-bottom']"
  7. >
  8. <view
  9. class="u-checkbox__icon-wrap"
  10. @tap.stop="iconClickHandler"
  11. :class="iconClasses"
  12. :style="[iconWrapStyle]"
  13. >
  14. <slot name="icon">
  15. <u-icon
  16. class="u-checkbox__icon-wrap__icon"
  17. name="checkbox-mark"
  18. :size="elIconSize"
  19. :color="elIconColor"
  20. />
  21. </slot>
  22. </view>
  23. <text
  24. @tap.stop="labelClickHandler"
  25. :style="{
  26. color: elDisabled ? elInactiveColor : elLabelColor,
  27. fontSize: elLabelSize,
  28. lineHeight: elLabelSize
  29. }"
  30. >{{label}}</text>
  31. </view>
  32. </template>
  33. <script>
  34. import props from './props.js';
  35. /**
  36. * checkbox 复选框
  37. * @description 复选框组件一般用于需要多个选择的场景,该组件功能完整,使用方便
  38. * @tutorial https://uviewui.com/components/checkbox.html
  39. * @property {String | Number | Boolean} name checkbox组件的标示符
  40. * @property {String} shape 形状,square为方形,circle为圆型
  41. * @property {String | Number} size 整体的大小
  42. * @property {Boolean} checked 是否默认选中
  43. * @property {String | Boolean} disabled 是否禁用
  44. * @property {String} activeColor 选中状态下的颜色,如设置此值,将会覆盖parent的activeColor值
  45. * @property {String} inactiveColor 未选中的颜色
  46. * @property {String | Number} iconSize 图标的大小,单位px
  47. * @property {String} iconColor 图标颜色
  48. * @property {String | Number} label label提示文字,因为nvue下,直接slot进来的文字,由于特殊的结构,无法修改样式
  49. * @property {String} labelColor label的颜色
  50. * @property {String | Number} labelSize label的字体大小,px单位
  51. * @property {String | Boolean} labelDisabled 是否禁止点击提示语选中复选框
  52. * @property {Object} customStyle 定义需要用到的外部样式
  53. *
  54. * @event {Function} change 任一个checkbox状态发生变化时触发,回调为一个对象
  55. * @example <u-checkbox v-model="checked" :disabled="false">天涯</u-checkbox>
  56. */
  57. export default {
  58. name: "u-checkbox",
  59. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  60. data() {
  61. return {
  62. isChecked: false,
  63. // 父组件的默认值,因为头条小程序不支持在computed中使用this.parent.shape的形式
  64. // 故只能使用如此方法
  65. parentData: {
  66. iconSize: 12,
  67. labelDisabled: null,
  68. disabled: null,
  69. shape: 'square',
  70. activeColor: null,
  71. inactiveColor: null,
  72. size: 18,
  73. value: null,
  74. iconColor: null,
  75. placement: 'row',
  76. borderBottom: false,
  77. iconPlacement: 'left'
  78. }
  79. }
  80. },
  81. computed: {
  82. // 是否禁用,如果父组件u-raios-group禁用的话,将会忽略子组件的配置
  83. elDisabled() {
  84. return this.disabled !== '' ? this.disabled : this.parentData.disabled !== null ? this.parentData.disabled : false;
  85. },
  86. // 是否禁用label点击
  87. elLabelDisabled() {
  88. return this.labelDisabled !== '' ? this.labelDisabled : this.parentData.labelDisabled !== null ? this.parentData.labelDisabled :
  89. false;
  90. },
  91. // 组件尺寸,对应size的值,默认值为21px
  92. elSize() {
  93. return this.size ? this.size : (this.parentData.size ? this.parentData.size : 21);
  94. },
  95. // 组件的勾选图标的尺寸,默认12px
  96. elIconSize() {
  97. return this.iconSize ? this.iconSize : (this.parentData.iconSize ? this.parentData.iconSize : 12);
  98. },
  99. // 组件选中激活时的颜色
  100. elActiveColor() {
  101. return this.activeColor ? this.activeColor : (this.parentData.activeColor ? this.parentData.activeColor : '#2979ff');
  102. },
  103. // 组件选未中激活时的颜色
  104. elInactiveColor() {
  105. return this.inactiveColor ? this.inactiveColor : (this.parentData.inactiveColor ? this.parentData.inactiveColor :
  106. '#c8c9cc');
  107. },
  108. // label的颜色
  109. elLabelColor() {
  110. return this.labelColor ? this.labelColor : (this.parentData.labelColor ? this.parentData.labelColor : '#606266')
  111. },
  112. // 组件的形状
  113. elShape() {
  114. return this.shape ? this.shape : (this.parentData.shape ? this.parentData.shape : 'circle');
  115. },
  116. // label大小
  117. elLabelSize() {
  118. return uni.$u.addUnit(this.labelSize ? this.labelSize : (this.parentData.labelSize ? this.parentData.labelSize :
  119. '15'))
  120. },
  121. elIconColor() {
  122. const iconColor = this.iconColor ? this.iconColor : (this.parentData.iconColor ? this.parentData.iconColor :
  123. '#ffffff');
  124. // 图标的颜色
  125. if (this.elDisabled) {
  126. // disabled状态下,已勾选的checkbox图标改为elInactiveColor
  127. return this.isChecked ? this.elInactiveColor : 'transparent'
  128. } else {
  129. return this.isChecked ? iconColor : 'transparent'
  130. }
  131. },
  132. iconClasses() {
  133. let classes = []
  134. // 组件的形状
  135. classes.push('u-checkbox__icon-wrap--' + this.elShape)
  136. if (this.elDisabled) {
  137. classes.push('u-checkbox__icon-wrap--disabled')
  138. }
  139. if (this.isChecked && this.elDisabled) {
  140. classes.push('u-checkbox__icon-wrap--disabled--checked')
  141. }
  142. // 支付宝,头条小程序无法动态绑定一个数组类名,否则解析出来的结果会带有",",而导致失效
  143. // #ifdef MP-ALIPAY || MP-TOUTIAO
  144. classes = classes.join(' ')
  145. // #endif
  146. return classes
  147. },
  148. iconWrapStyle() {
  149. // checkbox的整体样式
  150. const style = {}
  151. style.backgroundColor = this.isChecked && !this.elDisabled ? this.elActiveColor : '#ffffff'
  152. style.borderColor = this.isChecked && !this.elDisabled ? this.elActiveColor : this.elInactiveColor
  153. style.width = uni.$u.addUnit(this.elSize)
  154. style.height = uni.$u.addUnit(this.elSize)
  155. // 如果是图标在右边的话,移除它的右边距
  156. if (this.parentData.iconPlacement === 'right') {
  157. style.marginRight = 0
  158. }
  159. return style
  160. },
  161. checkboxStyle() {
  162. const style = {}
  163. if (this.parentData.borderBottom && this.parentData.placement === 'row') {
  164. uni.$u.error('检测到您将borderBottom设置为true,需要同时将u-checkbox-group的placement设置为column才有效')
  165. }
  166. // 当父组件设置了显示下边框并且排列形式为纵向时,给内容和边框之间加上一定间隔
  167. if (this.parentData.borderBottom && this.parentData.placement === 'column') {
  168. style.paddingBottom = '8px'
  169. }
  170. return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
  171. }
  172. },
  173. mounted() {
  174. this.init()
  175. },
  176. methods: {
  177. init() {
  178. // 支付宝小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环引用
  179. this.updateParentData()
  180. if (!this.parent) {
  181. uni.$u.error('u-checkbox必须搭配u-checkbox-group组件使用')
  182. }
  183. // 设置初始化时,是否默认选中的状态,父组件u-checkbox-group的value可能是array,所以额外判断
  184. if (this.checked) {
  185. this.isChecked = true
  186. } else if (uni.$u.test.array(this.parentData.value)) {
  187. // 查找数组是是否存在this.name元素值
  188. this.isChecked = this.parentData.value.some(item => {
  189. return item === this.name
  190. })
  191. }
  192. },
  193. updateParentData() {
  194. this.getParentData('u-checkbox-group')
  195. },
  196. // 横向两端排列时,点击组件即可触发选中事件
  197. wrapperClickHandler(e) {
  198. this.parentData.iconPlacement === 'right' && this.iconClickHandler(e)
  199. },
  200. // 点击图标
  201. iconClickHandler(e) {
  202. this.preventEvent(e)
  203. // 如果整体被禁用,不允许被点击
  204. if (!this.elDisabled) {
  205. this.setRadioCheckedStatus()
  206. }
  207. },
  208. // 点击label
  209. labelClickHandler(e) {
  210. this.preventEvent(e)
  211. // 如果按钮整体被禁用或者label被禁用,则不允许点击文字修改状态
  212. if (!this.elLabelDisabled && !this.elDisabled) {
  213. this.setRadioCheckedStatus()
  214. }
  215. },
  216. emitEvent() {
  217. this.$emit('change', this.isChecked)
  218. // 尝试调用u-form的验证方法,进行一定延迟,否则微信小程序更新可能会不及时
  219. this.$nextTick(() => {
  220. uni.$u.formValidate(this, 'change')
  221. })
  222. },
  223. // 改变组件选中状态
  224. // 这里的改变的依据是,更改本组件的checked值为true,同时通过父组件遍历所有u-checkbox实例
  225. // 将本组件外的其他u-checkbox的checked都设置为false(都被取消选中状态),因而只剩下一个为选中状态
  226. setRadioCheckedStatus() {
  227. // 将本组件标记为与原来相反的状态
  228. this.isChecked = !this.isChecked
  229. this.emitEvent()
  230. typeof this.parent.unCheckedOther === 'function' && this.parent.unCheckedOther(this)
  231. }
  232. },
  233. watch:{
  234. checked(){
  235. this.isChecked = this.checked
  236. }
  237. }
  238. }
  239. </script>
  240. <style lang="scss" scoped>
  241. @import "../../libs/css/components.scss";
  242. $u-checkbox-icon-wrap-margin-right:6px !default;
  243. $u-checkbox-icon-wrap-font-size:6px !default;
  244. $u-checkbox-icon-wrap-border-width:1px !default;
  245. $u-checkbox-icon-wrap-border-color:#c8c9cc !default;
  246. $u-checkbox-icon-wrap-icon-line-height:0 !default;
  247. $u-checkbox-icon-wrap-circle-border-radius:100% !default;
  248. $u-checkbox-icon-wrap-square-border-radius:3px !default;
  249. $u-checkbox-icon-wrap-checked-color:#fff !default;
  250. $u-checkbox-icon-wrap-checked-background-color:red !default;
  251. $u-checkbox-icon-wrap-checked-border-color:#2979ff !default;
  252. $u-checkbox-icon-wrap-disabled-background-color:#ebedf0 !default;
  253. $u-checkbox-icon-wrap-disabled-checked-color:#c8c9cc !default;
  254. $u-checkbox-label-margin-left:5px !default;
  255. $u-checkbox-label-margin-right:12px !default;
  256. $u-checkbox-label-color:$u-content-color !default;
  257. $u-checkbox-label-font-size:15px !default;
  258. $u-checkbox-label-disabled-color:#c8c9cc !default;
  259. .u-checkbox {
  260. /* #ifndef APP-NVUE */
  261. @include flex(row);
  262. /* #endif */
  263. overflow: hidden;
  264. flex-direction: row;
  265. align-items: center;
  266. &-label--left {
  267. flex-direction: row
  268. }
  269. &-label--right {
  270. flex-direction: row-reverse;
  271. justify-content: space-between
  272. }
  273. &__icon-wrap {
  274. /* #ifndef APP-NVUE */
  275. box-sizing: border-box;
  276. // nvue下,border-color过渡有问题
  277. transition-property: border-color, background-color, color;
  278. transition-duration: 0.2s;
  279. /* #endif */
  280. color: $u-content-color;
  281. @include flex;
  282. align-items: center;
  283. justify-content: center;
  284. color: transparent;
  285. text-align: center;
  286. margin-right: $u-checkbox-icon-wrap-margin-right;
  287. font-size: $u-checkbox-icon-wrap-font-size;
  288. border-width: $u-checkbox-icon-wrap-border-width;
  289. border-color: $u-checkbox-icon-wrap-border-color;
  290. border-style: solid;
  291. /* #ifdef MP-TOUTIAO */
  292. // 头条小程序兼容性问题,需要设置行高为0,否则图标偏下
  293. &__icon {
  294. line-height: $u-checkbox-icon-wrap-icon-line-height;
  295. }
  296. /* #endif */
  297. &--circle {
  298. border-radius: $u-checkbox-icon-wrap-circle-border-radius;
  299. }
  300. &--square {
  301. border-radius: $u-checkbox-icon-wrap-square-border-radius;
  302. }
  303. &--checked {
  304. color: $u-checkbox-icon-wrap-checked-color;
  305. background-color: $u-checkbox-icon-wrap-checked-background-color;
  306. border-color: $u-checkbox-icon-wrap-checked-border-color;
  307. }
  308. &--disabled {
  309. background-color: $u-checkbox-icon-wrap-disabled-background-color !important;
  310. }
  311. &--disabled--checked {
  312. color: $u-checkbox-icon-wrap-disabled-checked-color !important;
  313. }
  314. }
  315. &__label {
  316. /* #ifndef APP-NVUE */
  317. word-wrap: break-word;
  318. /* #endif */
  319. margin-left: $u-checkbox-label-margin-left;
  320. margin-right: $u-checkbox-label-margin-right;
  321. color: $u-checkbox-label-color;
  322. font-size: $u-checkbox-label-font-size;
  323. &--disabled {
  324. color: $u-checkbox-label-disabled-color;
  325. }
  326. }
  327. }
  328. </style>