1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
| <template>
| <!--本文件由FirstUI授权予四川政采招投标咨询有限公司（会员ID：1 6 3，营业执照号： 9 1 51 01313 32 0 0619 3 K）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
| <!-- #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-TOUTIAO|| MP-KUAISHOU || MP-JD || MP-360 || MP-LARK -->
| <radio-group :name="name">
| <slot></slot>
| </radio-group>
| <!-- #endif -->
|
| <!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
| <fui-form-field :name="name" v-model="val">
| <slot></slot>
| </fui-form-field>
| <!-- #endif -->
| </template>
|
| <script>
| export default {
| name: "fui-radio-group",
| emits: ['change', 'input', 'update:modelValue'],
| // #ifdef MP-WEIXIN
| behaviors: ['wx://form-field-group'],
| // #endif
| // #ifdef MP-BAIDU
| behaviors: ['swan://form-field'],
| // #endif
| // #ifdef MP-QQ
| behaviors: ['qq://form-field'],
| // #endif
| // #ifdef H5
| behaviors: ['uni://form-field'],
| // #endif
| props: {
| name: {
| type: String,
| default: ''
| },
| // #ifdef VUE3
| modelValue: {
| type: String,
| default: ''
| },
| // #endif
| value: {
| type: String,
| default: ''
| }
| },
| data() {
| return {
| val: ''
| }
| },
| watch: {
| // #ifdef VUE3
| modelValue(val) {
| this.modelChange(val)
| },
| // #endif
| value(val) {
| this.modelChange(val)
| }
| },
| created() {
| this.childrens = []
| },
| methods: {
| radioChange(e) {
| this.$emit('change', e)
| // TODO vue2 兼容
| this.$emit('input', e.detail.value)
| // TODO vue3 兼容
| // #ifdef VUE3
| this.$emit("update:modelValue", e.detail.value);
| // #endif
| },
| changeValue(value, target) {
| if (value === this.val) return;
| this.val = value;
| this.childrens.forEach(item => {
| if (item !== target) {
| item.val = false;
| }
| })
| let e = {
| detail: {
| value: value
| }
| }
| this.radioChange(e)
| },
| modelChange(val) {
| this.childrens.forEach(item => {
| if (item.value === val) {
| item.val = true;
| } else {
| item.val = false;
| }
| })
| }
| }
| }
| </script>
| <style scoped></style>
|
|
