Skip to content

Commit 1c7cc3a

Browse files
ArsenseArsense
committed
form表单vue初步改写
1 parent 5f15a03 commit 1c7cc3a

File tree

7 files changed

+165
-79
lines changed

7 files changed

+165
-79
lines changed

‎src/main/static/src/components/baseDict.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import {baseInput} from './baseInput'
12
export const baseDict = {
3+
extends: baseInput ,
24
props : {
3-
items : []
5+
items : Array
46
} ,
57
methods : {
68
get_value:function() {

‎src/main/static/src/components/baseInput.js

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,32 @@ export const baseInput = {
99
disabled: {type: Boolean,default: false}
1010
},
1111
data() {
12-
return {}
12+
return {
13+
v: this.value
14+
}
1315
} ,
1416
methods: {
15-
set_value(val){
16-
this.value=val
17-
this.$refs.input.value=this.value
17+
set_v(v){
18+
this.v = v
19+
this.$emit('input', this.v)
20+
} ,
21+
set_value(v){
22+
this.set_v(v)
1823
} ,
1924
get_value(){
20-
return this.$refs.input.value
25+
return this.v
26+
} ,
27+
reset() {
28+
this.set_value('')
2129
} ,
2230
handleInput(event) {
23-
var value = event.target.value
24-
this.$emit('input', value)
25-
this.value = value
31+
var v = event.target.value
32+
this.set_value(v)
33+
}
34+
} ,
35+
watch: {
36+
value(newV) {
37+
this.set_value(newV)
2638
}
2739
} ,
2840
computed: {
@@ -35,7 +47,5 @@ export const baseInput = {
3547
return (this.name || '_input_' + unique_id())
3648
}
3749
},
38-
mounted () {
39-
layui.use('form' , function(){})
40-
}
50+
4151
}

‎src/main/static/src/components/form/check-box.vue

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,20 @@
11
<template>
2-
<div :class="wrapClasses">
3-
<input type="checkbox" :lay-filter="dynName" v-for="item in items"
4-
:name="dynName"
5-
:value="item.code"
6-
ref="input"
7-
:title="item.label"
8-
:checked="isChecked(item)"
9-
:disabled="disabled"
10-
lay-skin="primary">
2+
<div :class="wrapClasses" :id="dynName" >
3+
<div v-for="item in dict" @click="change_state(item)" :data-val="v"
4+
:class="item.state?'layui-form-checkbox layui-form-checked':'layui-form-checkbox'"
5+
lay-skin="primary">
6+
<span>{{item.label}}</span>
7+
<i :class="item.state?'layui-icon layui-icon-ok': 'layui-icon'"></i>
8+
</div>
119
</div>
1210
</template>
1311
<script>
14-
import {baseInput} from '../baseInput'
15-
import {baseDict} from '../baseDict'
12+
import {baseDict} from '../baseDict'
13+
export default {
14+
mixins: [baseDict],
15+
name: 'v-checkbox',
16+
methods : {
1617
17-
export default {
18-
mixins: [baseInput ,baseDict],
19-
name: 'v-checkbox',
20-
mounted () {
21-
var self = this
22-
layui.use('form' , function(){
23-
var form = layui.form
24-
form.on('checkbox('+ self.dynName +')', function(data){
25-
self.$emit('input', self.get_value());
26-
//console.log(data.elem); //得到checkbox原始DOM对象
27-
})
28-
})
18+
}
2919
}
30-
}
3120
</script>

‎src/main/static/src/components/form/input.vue

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@
22
<div :class="wrapClasses">
33
<input :type="type" class="layui-input"
44
:name="dynName"
5-
ref="input"
65
:lay-verify="verify"
76
:placeholder="placeholder"
8-
:value="value"
7+
:value="v"
98
:disabled="disabled"
109
v-on:input="handleInput">
1110
</div>
@@ -22,11 +21,6 @@ export default {
2221
default: 'text'
2322
}
2423
} ,
25-
data() {
2624
27-
} ,
28-
methods: {
29-
30-
}
3125
}
3226
</script>

‎src/main/static/src/components/form/radio.vue

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,24 @@
11
<template>
2-
<div :class="wrapClasses">
3-
<input type="radio" :lay-filter="dynName" v-for="item in items"
4-
:name="dynName"
5-
ref="input"
6-
:value="item.code"
7-
:title="item.label"
8-
:checked="isChecked(item)">
2+
<div :class="wrapClasses" :data-val="v">
3+
<div v-for="item in dict" :class="item.state?'layui-form-radio layui-form-radioed': 'layui-form-radio'"
4+
@click="change_state(item)">
5+
<i class="layui-anim layui-icon"></i>
6+
<div>{{item.label}}</div>
7+
</div>
98
</div>
109
</template>
1110

1211
<script>
13-
import {baseInput} from '../baseInput'
14-
import {baseDict} from '../baseDict'
15-
export default {
16-
mixins: [baseInput ,baseDict],
17-
name: 'v-radio'
18-
}
12+
import {baseDict} from '../baseDict'
13+
export default {
14+
mixins: [baseDict],
15+
name: 'v-radio' ,
16+
methods: {
17+
change_state(item) {
18+
this.reset_state()
19+
item.state = 1
20+
this.set_v(item.code)
21+
}
22+
}
23+
}
1924
</script>

‎src/main/static/src/components/form/select.vue

Lines changed: 57 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,66 @@
11
<template>
22
<div :class="wrapClasses">
3-
<select :name="dynName" lay-verify="" lay-search>
4-
<option value="" selected v-text="this.placeholder"></option>
5-
<template v-for="item in items">
6-
<option v-if="isChecked(item)" :value="item.code" v-text="item.label" selected></option>
7-
<option v-else :value="item.code" v-text="item.label"></option>
8-
</template>
9-
10-
</select>
3+
<div :class="pop_state?'layui-form-select layui-form-selected':'layui-form-select'" :id="dynName">
4+
<div class="layui-select-title" @click="pop_up">
5+
<input :placeholder="placeholder" :value="get_text()" class="layui-input">
6+
<i class="layui-edge"></i>
7+
</div>
8+
<dl v-if="pop_state" class="layui-anim layui-anim-upbit" >
9+
<dd class="layui-select-tips" @click="change_state()">{{placeholder}}</dd>
10+
<dd v-for="item in dict" @click="change_state(item)" :class="item.state?'layui-this': ''" >
11+
{{item.label}}
12+
</dd>
13+
</dl>
14+
</div>
1115
</div>
1216
</template>
1317

1418
<script>
15-
import {baseInput} from '../baseInput'
16-
import {baseDict} from '../baseDict'
17-
export default {
18-
mixins: [baseInput ,baseDict],
19-
name: 'v-select' ,
20-
props:{
21-
placeholder: {type:String ,default:'Please Select '},
22-
} ,
23-
methods:{
24-
get_value:function() {
25-
return $(this.$el).find('select').val()
19+
import {baseDict} from '../baseDict'
20+
export default {
21+
mixins: [baseDict],
22+
name: 'v-select' ,
23+
data() {
24+
return {
25+
pop_state: 0
26+
}
27+
} ,
28+
methods: {
29+
change_state(item) {
30+
this.pop_state =0
31+
if(item) {
32+
this.reset_state()
33+
item.state = 1
34+
this.set_v(item.code)
35+
} else {
36+
this.reset()
37+
}
38+
} ,
39+
pop_up() {
40+
var self = this
41+
this.pop_state ^=1
42+
if(this.pop_state) {
43+
eventBus.$on('doc_click', this.doc_click_event)
44+
}
45+
},
46+
get_text() {
47+
for(var k in this.dict) {
48+
if(this.dict[k].state){
49+
return this.dict[k].label
50+
}
51+
}
52+
} ,
53+
doc_click_event(e) {
54+
if(!this.$el.contains(e.target)) {
55+
this.pop_state =0
56+
}
57+
}
58+
},
59+
mounted() {
60+
61+
} ,
62+
beforeDestroy(){
63+
2664
}
2765
}
28-
}
2966
</script>

‎src/test/resources/static/form/checkbox.html

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,35 @@
1010
<body class="hold-transition skin-purple sidebar-mini ">
1111

1212
<v-app id="app" :data="data">
13+
<v-box title="复选框使用">
14+
<v-form>
15+
<v-form-item label="复选框1">
16+
<v-checkbox :items="items" ref="a1" v-model="bind_value1"></v-checkbox>
17+
</v-form-item>
18+
<v-form-item label="复选框2">
19+
<v-checkbox value='1' :items="items" ref="a2"></v-checkbox>
20+
</v-form-item>
21+
<v-form-item label="复选框3">
22+
<v-checkbox :items="items" ref="a3"></v-checkbox>
23+
</v-form-item>
24+
25+
<v-form-item label="复选框4">
26+
<v-checkbox :items="items" ref="a4" v-bind:value="bind_value1"></v-checkbox>
27+
</v-form-item>
28+
</v-form>
29+
<v-row>
30+
<v-col>
31+
<br>
32+
<v-button @click="set_value">set_value</v-button>
33+
<v-button @click="reset">reset</v-button>
34+
<v-button @click="queryValues">all_values</v-button>
35+
<br>
36+
bind_value1: {{bind_value1}}
37+
<br>
38+
all_values:{{all_values}}
39+
</v-col>
40+
</v-row>
41+
</v-box>
1342

1443

1544

@@ -18,11 +47,31 @@
1847
<script src="/lib/lib.js"></script>
1948
<script>
2049
app.main({
21-
22-
methods : {
50+
el:"#app" ,
51+
data : {
52+
items : [
53+
{code:'1' , label:'男' ,checked:false},
54+
{code:'2' , label:'女',checked:false},
55+
{code:'3' , label:'中性',checked:false}
56+
] ,
57+
bind_value1: '1,2' ,
58+
all_values:''
2359

2460
} ,
25-
mounted : function () {}
61+
methods : {
62+
set_value() {
63+
this.$refs.a1.set_value("2,3")
64+
this.$refs.a3.set_value( "1,2,3")
65+
} ,
66+
queryValues() {
67+
this.all_values = this.$refs.a1.get_value()
68+
} ,
69+
reset() {
70+
this.$refs.a1.reset()
71+
this.$refs.a2.reset()
72+
this.$refs.a3.reset()
73+
}
74+
}
2675
})
2776
</script>
2877
</body>

0 commit comments

Comments
 (0)