Skip to content

Commit 9ec4db0

Browse files
felixpyfelixpy
committed
chore: update file format
1 parent bab319f commit 9ec4db0

File tree

4 files changed

+421
-421
lines changed

4 files changed

+421
-421
lines changed

‎src/modules/form/pages/form-builder/components/ExampleActorComplex.vue‎

Lines changed: 135 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,135 @@
1-
<template>
2-
<div class="el-form-adaptor">
3-
<validation-provider :rules="rules" v-slot="{ errors }">
4-
<el-form-item
5-
label="人物"
6-
size="medium"
7-
:required="isRequired"
8-
:error="errors[0]"
9-
>
10-
<el-input
11-
clearable
12-
v-model="actor.director"
13-
type="text"
14-
placeholder="请填写导演姓名"
15-
>
16-
<template slot="prepend">导演</template>
17-
</el-input>
18-
</el-form-item>
19-
</validation-provider>
20-
<validation-provider :rules="rules" v-slot="{ errors }">
21-
<el-form-item size="medium" :error="errors[0]">
22-
<el-input
23-
clearable
24-
v-model="actor.protagonist"
25-
type="text"
26-
placeholder="请填写主演姓名"
27-
>
28-
<template slot="prepend">主演</template>
29-
</el-input>
30-
<div class="el-form-item__tip" v-if="tip">{{ tip }}</div>
31-
</el-form-item>
32-
</validation-provider>
33-
</div>
34-
</template>
35-
36-
<style lang="scss" scoped></style>
37-
38-
<script>
39-
import { useFormElement } from '@fext/vue-use';
40-
41-
export default {
42-
// 组合型组件，内部有多个输入元素
43-
// 整个组件有自己的 getValue/setValue 方法
44-
// 通过 composition api 与 v-model 进行同步
45-
name: 'example-actor-complex',
46-
47-
props: {
48-
name: String,
49-
tip: {
50-
type: String,
51-
default: '必须同时填写导演、主演才有效'
52-
},
53-
tooltip: String,
54-
hide: Boolean,
55-
rules: {
56-
type: [String, Object]
57-
},
58-
value: {
59-
required: false
60-
},
61-
extend: Object,
62-
metadata: Object,
63-
formValues: {
64-
type: Object,
65-
required: false
66-
}
67-
},
68-
69-
setup(props, context) {
70-
const {
71-
dirty,
72-
isRequired,
73-
localValue,
74-
watchPropValue,
75-
setInitialValue,
76-
updateLocalValue
77-
} = useFormElement(props, context);
78-
79-
return {
80-
dirty,
81-
isRequired,
82-
localValue,
83-
watchPropValue,
84-
setInitialValue,
85-
updateLocalValue
86-
};
87-
},
88-
89-
data() {
90-
return {
91-
actor: {
92-
director: '',
93-
protagonist: ''
94-
}
95-
};
96-
},
97-
98-
watch: {
99-
actor: {
100-
handler() {
101-
this.updateLocalValue(this.getActorValue());
102-
},
103-
deep: true
104-
}
105-
},
106-
107-
created() {
108-
this.setActorValue(this.value);
109-
110-
this.watchPropValue(value => {
111-
this.setActorValue(value);
112-
});
113-
},
114-
115-
methods: {
116-
getActorValue() {
117-
const { director, protagonist } = this.actor;
118-
119-
if (!director || !protagonist) {
120-
return [];
121-
}
122-
123-
return [director, protagonist];
124-
},
125-
126-
setActorValue(value = []) {
127-
const [director = '', protagonist = ''] = value;
128-
this.actor = {
129-
director,
130-
protagonist
131-
};
132-
}
133-
}
134-
};
135-
</script>
1+
<template>
2+
<div class="el-form-adaptor">
3+
<validation-provider :rules="rules" v-slot="{ errors }">
4+
<el-form-item
5+
label="人物"
6+
size="medium"
7+
:required="isRequired"
8+
:error="errors[0]"
9+
>
10+
<el-input
11+
clearable
12+
v-model="actor.director"
13+
type="text"
14+
placeholder="请填写导演姓名"
15+
>
16+
<template slot="prepend">导演</template>
17+
</el-input>
18+
</el-form-item>
19+
</validation-provider>
20+
<validation-provider :rules="rules" v-slot="{ errors }">
21+
<el-form-item size="medium" :error="errors[0]">
22+
<el-input
23+
clearable
24+
v-model="actor.protagonist"
25+
type="text"
26+
placeholder="请填写主演姓名"
27+
>
28+
<template slot="prepend">主演</template>
29+
</el-input>
30+
<div class="el-form-item__tip" v-if="tip">{{ tip }}</div>
31+
</el-form-item>
32+
</validation-provider>
33+
</div>
34+
</template>
35+
36+
<style lang="scss" scoped></style>
37+
38+
<script>
39+
import { useFormElement } from '@fext/vue-use';
40+
41+
export default {
42+
// 组合型组件，内部有多个输入元素
43+
// 整个组件有自己的 getValue/setValue 方法
44+
// 通过 composition api 与 v-model 进行同步
45+
name: 'example-actor-complex',
46+
47+
props: {
48+
name: String,
49+
tip: {
50+
type: String,
51+
default: '必须同时填写导演、主演才有效'
52+
},
53+
tooltip: String,
54+
hide: Boolean,
55+
rules: {
56+
type: [String, Object]
57+
},
58+
value: {
59+
required: false
60+
},
61+
extend: Object,
62+
metadata: Object,
63+
formValues: {
64+
type: Object,
65+
required: false
66+
}
67+
},
68+
69+
setup(props, context) {
70+
const {
71+
dirty,
72+
isRequired,
73+
localValue,
74+
watchPropValue,
75+
setInitialValue,
76+
updateLocalValue
77+
} = useFormElement(props, context);
78+
79+
return {
80+
dirty,
81+
isRequired,
82+
localValue,
83+
watchPropValue,
84+
setInitialValue,
85+
updateLocalValue
86+
};
87+
},
88+
89+
data() {
90+
return {
91+
actor: {
92+
director: '',
93+
protagonist: ''
94+
}
95+
};
96+
},
97+
98+
watch: {
99+
actor: {
100+
handler() {
101+
this.updateLocalValue(this.getActorValue());
102+
},
103+
deep: true
104+
}
105+
},
106+
107+
created() {
108+
this.setActorValue(this.value);
109+
110+
this.watchPropValue(value => {
111+
this.setActorValue(value);
112+
});
113+
},
114+
115+
methods: {
116+
getActorValue() {
117+
const { director, protagonist } = this.actor;
118+
119+
if (!director || !protagonist) {
120+
return [];
121+
}
122+
123+
return [director, protagonist];
124+
},
125+
126+
setActorValue(value = []) {
127+
const [director = '', protagonist = ''] = value;
128+
this.actor = {
129+
director,
130+
protagonist
131+
};
132+
}
133+
}
134+
};
135+
</script>

0 commit comments

Comments
 (0)