u-radio.vue 11 KB

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