初始提交

components/Jnpf/Radio/index.vue

@@ -0,0 +1,72 @@
+<template>
+	<u-radio-group class="jnpf-radio" :disabled='disabled' v-model="innerValue"
+		:wrap="direction == 'horizontal' ? false : true" @change="onChange">
+		<u-radio v-for="(item, index) in options" :key="index" :name="item[props.value]"
+			:class="{'jnpf-radio-disabled':disabled}">
+			{{ item[props.label] }}
+		</u-radio>
+	</u-radio-group>
+</template>
+<script>
+	export default {
+		inheritAttrs: false,
+		name: 'jnpfRadio',
+		props: {
+			modelValue: {
+				type: [String, Number, Boolean],
+			},
+			direction: {
+				type: String,
+				default: "horizontal"
+			},
+			options: {
+				type: Array,
+				default: () => []
+			},
+			props: {
+				type: Object,
+				default: () => ({
+					label: 'fullName',
+					value: 'id'
+				})
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				innerValue: ''
+			}
+		},
+		watch: {
+			modelValue: {
+				handler(val) {
+					this.innerValue = val
+				},
+				immediate: true,
+			}
+		},
+		methods: {
+			onChange(value, e) {
+				const selectData = this.options.filter(o => value == o[this.props.value]) || []
+				this.$emit('update:modelValue', value)
+				this.$emit('change', value, selectData[0])
+			},
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	:deep(.u-radio__icon-wrap--circle) {
+		border-color: #D9D9D9 !important;
+	}
+
+	.jnpf-radio-disabled {
+		:deep(.u-radio__icon-wrap--disabled) {
+			background-color: #E6E6E6 !important;
+			border-color: #D9D9D9 !important;
+		}
+
+	}
+</style>