lbp-form-input.js
3.08 KB
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
// https://github.com/luban-h5-components/plugin-common-props
import commonProps from '@luban-h5/plugin-common-props'
export default {
name: 'lbp-form-input',
render (h) {
const style = {
color: this.color,
textAlign: this.textAlign,
backgroundColor: this.backgroundColor,
fontSize: this.fontSize + 'px',
lineHeight: this.lineHeight + 'em',
borderColor: this.borderColor,
borderRadius: this.borderRadius + 'px',
borderWidth: this.borderWidth + 'px',
padding: '0 5px'
}
return <input
disabled={this.disabled}
type={this.type}
style={style}
name={this.name}
placeholder={this.placeholder}
autocomplete="off"
data-type="lbp-form-input" // 点击[表单提交]按钮的时候,找到data-type为:lbp-form-input 的输入框，并将其值添加到formData,提交到后台
/>
},
props: {
name: {
type: String,
default () {
return 'name'
}
},
type: {
type: String,
default: 'text',
editor: {
type: 'lbs-select-input-type',
label: '类型'
}
},
disabled: {
type: Boolean,
default: false
},
// type: commonProps.type,
placeholder: commonProps.placeholder('姓名'),
fontSize: commonProps.fontSize,
color: commonProps.color,
backgroundColor: commonProps.backgroundColor,
borderColor: commonProps.borderColor,
borderWidth: commonProps.borderWidth,
borderRadius: commonProps.borderRadius,
lineHeight: commonProps.lineHeight,
textAlign: commonProps.textAlign({ defaultValue: 'left' })
},
componentsForPropsEditor: {
'lbs-select-input-type': {
props: ['value'],
computed: {
value_: {
get () {
return this.value
},
set (val) {
this.$emit('input', val)
}
}
},
render (h) {
return (
<a-select
placeholder="类型"
value={this.value}
onChange={(value) => {
this.$emit('input', value)
this.$emit('change', value)
}}
>
{
this.options.map(option => (
<a-select-option
key={option.value}
value={option.value}
>{option.label}</a-select-option>
))
}
</a-select>
)
},
data: () => ({
options: [
{
label: '文字',
value: 'text'
},
{
label: '密码',
value: 'password'
},
{
label: '日期',
value: 'date'
},
{
label: '邮箱',
value: 'email'
},
{
label: '手机号',
value: 'tel'
}
]
})
}
}
}
// .lb-plugin__input {
// display: block;
// margin: 0;
// padding: 0 5px;
// box-sizing: border-box;
// overflow: visible;
// border: 1px solid #ced4da;
// &:focus {
// outline: none;
// }
// }