fs-radio.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <view
  3. class="fs-radio"
  4. :class="['fs-radio-' + justify, { 'fs-radio-reverse': reverse, 'fs-radio-inline': inline }]"
  5. @click="handleToggle"
  6. >
  7. <fs-icon
  8. v-if="icon"
  9. source="out"
  10. :type="selected ? selectIcon || icon : icon"
  11. :color-type="selected ? checkedColorType : 'gray'"
  12. :size="iconSize"
  13. :color="checkedColor"
  14. ></fs-icon>
  15. <fs-icon
  16. v-else
  17. :type="selected ? 'icon-checked' : 'icon-uncheck'"
  18. :color-type="selected ? checkedColorType : 'gray'"
  19. :size="iconSize"
  20. :color="checkedColor"
  21. ></fs-icon>
  22. <view class="fs-radio-lable">
  23. {{ label }}
  24. <slot />
  25. </view>
  26. </view>
  27. </template>
  28. <script>
  29. /**
  30. * 单选框组件
  31. * @description 单选框组件
  32. * @property {String} label 文本
  33. * @property {String} icon 自定义图标
  34. * @property {String} iconSize 图标大小
  35. * @property {String} selectIcon 自定义选中图标
  36. * @property {null} value 标识符(必须传)
  37. * @property {String} checkedColor 选中颜色
  38. * @property {String} checkedColorType = [primary | danger | warning | info | success] 选中颜色类型
  39. */
  40. export default {
  41. name: 'fs-radio'
  42. }
  43. </script>
  44. <script setup>
  45. import { inject, reactive, watch, toRefs, ref } from 'vue'
  46. const props = defineProps({
  47. label: String,
  48. iconSize: {
  49. type: String,
  50. default: '42rpx'
  51. },
  52. value: {
  53. type: null,
  54. required: true
  55. },
  56. icon: String,
  57. selectIcon: String,
  58. checkedColor: String,
  59. checkedColorType: {
  60. type: String,
  61. default: 'primary'
  62. }
  63. })
  64. const emits = defineEmits(['change'])
  65. const radioGroup = inject('radioGroup')
  66. const { reverse, justify, inline } = radioGroup
  67. let selected = ref(props.checked)
  68. watch(
  69. () => props.checked,
  70. val => {
  71. selected.value = val
  72. }
  73. )
  74. radioGroup.updateChildren({
  75. selected,
  76. value: props.value
  77. })
  78. const handleToggle = () => {
  79. radioGroup.updateValue(props.value)
  80. }
  81. </script>
  82. <style lang="scss" scoped>
  83. .fs-radio {
  84. display: flex;
  85. align-items: center;
  86. justify-content: flex-start;
  87. padding: 10rpx 0;
  88. &-lable {
  89. margin-left: 6rpx;
  90. margin-right: 20rpx;
  91. }
  92. &-reverse {
  93. flex-direction: row-reverse;
  94. justify-content: flex-end;
  95. }
  96. &-reverse &-lable {
  97. margin-left: 20rpx;
  98. margin-right: 6rpx;
  99. }
  100. &-right {
  101. justify-content: space-between;
  102. }
  103. }
  104. </style>