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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<template>
<div class="app-mob-input">
<ion-input
class="form-value-content"
debounce="300"
:type="type"
:min="min"
:max="max"
:disabled="disabled"
:value="value"
:placeholder="placeholder"
@ionChange="change"
@ionFocus="enter"
@ionBlur="leave"
ref="ioninput"
/>
<div class="app-mob-input__unit" v-if="unit">{{unit}}</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop} from 'vue-property-decorator';
@Component({
components: {
}
})
export default class AppInput extends Vue {
/**
* 编辑器名称
*
* @type {string}
* @memberof AppInput
*/
@Prop() public name?: string;
/**
* 值
*
* @type {string}
* @memberof AppInput
*/
@Prop() public value?: string;
/**
* 禁用
*
* @type {string}
* @memberof AppInput
*/
@Prop({default:false}) public disabled?: boolean;
/**
* 类型
*
* @type {string}
* @memberof AppInput
*/
@Prop() public type?: string;
/**
* 占位提示文字
*
* @type {string}
* @memberof AppInput
*/
@Prop() public placeholder?:string;
/**
* 单位
*
* @type {string}
* @memberof AppInput
*/
@Prop() public unit?: string;
/**
* 最小值
*
* @type {number}
* @memberof AppInput
*/
@Prop() public min?: number;
/**
* 最大值
*
* @type {number}
* @memberof AppInput
*/
@Prop() public max?: number;
/**
* change事件
*
* @memberof AppInput
*/
public change(value: any) {
if(value?.detail?.value == this.value ){
return;
}
if(!value?.detail?.value){
this.$emit("change", {name:this.name, value:null, event:value});
return;
}
if(this.type == "number"){
if (this.min && value.detail.value < this.min) {
this.$emit("change", {name:this.name, value:this.min, event:value});
// 手动ion数值框设为最小值
let ioninput:any = this.$refs.ioninput;
ioninput.value = this.min;
return
}
if (this.max && value.detail.value > this.max) {
this.$emit("change", {name:this.name, value:this.max, event:value});
// 手动ion数值框设为最大值
let ioninput:any = this.$refs.ioninput;
ioninput.value = this.max;
return
}
this.$emit("change", {name:this.name, value:value.detail.value ? parseFloat(value.detail.value) : "", event:value});
}else{
this.$emit("change", {name:this.name, value:value.detail.value, event:value});
}
}
/**
* 有焦点时事件
*
* @memberof AppInput
*/
public enter(e: any) {
this.$emit('enter', {name: this.name, value: this.value, event: e});
}
/**
* 失去焦点事件
*
* @memberof AppInput
*/
public leave(e: any) {
this.$emit('leave', {name: this.name, value: this.value, event: e});
}
}
</script>