di-radio-list.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <u-radio-group v-model="tempVal" :active-color="activeColor" @change="handleChange">
  3. <u-radio v-for="(item, index) in list" :key="index" :name="item.value">
  4. {{ item.label }}
  5. </u-radio>
  6. </u-radio-group>
  7. </template>
  8. <script>
  9. /**
  10. * di-radio-list 单选列表
  11. * @description 单选列表组件,基于uview,适应与diboot接口的radio列表
  12. * @property {String} activeColor 激活时候的颜色
  13. * @property {String Boolean, Number} value 支持字符串、布尔、数字
  14. * @property {Array} list 传入labelValue列表
  15. */
  16. export default {
  17. name:"di-radio-list",
  18. data() {
  19. return {
  20. tempVal: this.value
  21. };
  22. },
  23. methods: {
  24. /**
  25. * 切换后触发
  26. * @param {Object} val
  27. */
  28. handleChange(val) {
  29. this.$emit('input', val)
  30. }
  31. },
  32. watch: {
  33. value(value) {
  34. this.tempVal = value
  35. }
  36. },
  37. props: {
  38. value: {
  39. type: [String, Boolean, Number],
  40. require: true
  41. },
  42. list: {
  43. type: Array,
  44. require: true
  45. },
  46. activeColor: {
  47. type: String,
  48. default: '#19be6b'
  49. }
  50. }
  51. }
  52. </script>
  53. <style lang="scss">
  54. </style>