test

cuiqian2004

2025-06-12 ade379c26e00929b7295b37d7c274ccbb0026b7d

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
<template>
    <view class="oi-form-input">
        <text v-if="data.setting.prefix && !viewMode" class="form-input-icon" :class="[data.setting.prefix]"
            @click="onPrefixButton">&#xe568;</text>
        <input v-if="model" class="oi-input" :class="data.disabled?'input-disabled':''"
            :style="{'padding-left':data.setting.prefix?0 : '8rpx','right':data.setting.suffix?0 : '8rpx'}"
            v-model="model[data.fieldId]" :focus="focus" :placeholder="data.placeholder" @focus="onFocus"
            @blur="onChange" @confirm="onConfirm" @click="onClick" :disabled="data.disabled" :maxlength="-1"></input>
        <input v-else class="oi-input" :class="data.disabled?'input-disabled':''"
            :style="{'padding-left':data.setting.prefix?0 : '8rpx','right':data.setting.suffix?0 : '8rpx'}"
            v-model="data.value" :focus="focus" :placeholder="data.placeholder" @blur="onChange" @confirm="onConfirm"
            @click="onClick" :disabled="data.disabled"></input>
        <text v-if="data.setting.suffix&& !viewMode" class="form-input-icon" :class="[data.setting.suffix]"
            @click="onSuffixButton">&#xe568;</text>
 
    </view>
</template>
 
<script>
    import buttonClickMixin from '@/mixins/button-click.js';
 
    export default {
 
        name: "OIFormInput",
        mixins: [buttonClickMixin],
        props: {
            viewMode: {
                type: Boolean,
                default: false
            },
            data: {
                type: Object,
                required: true,
            },
            model: Object,
            focus: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                largeMode: getApp().globalData?.largeMode || false,
            }
        },
        methods: {
            onChange(e) {
                this.$emit("on-change", e)
            },
            onConfirm(e) {
                console.log("onConfirm")
                this.onChange(e)
            },
            onClick(e) {
                this.$emit("on-click", e)
            },
            onFocus(e) {
                this.$emit("on-focus", e)
            },
            onPrefixButton() {
                this.handleButtonClick((done) => {
                    this.$emit("on-click-prefix")
                    setTimeout(() => {
                        done(); // 重置状态
                    }, 1000);
                });
            },
            onSuffixButton() {
 
                this.handleButtonClick((done) => {
                    this.$emit("on-click-suffix")
                    setTimeout(() => {
                        done(); // 重置状态
                    }, 1000);
                });
 
 
            },
        },
 
    };
</script>
 
<style lang="scss">
    .oi-form-input {
        border: 1px solid #d5d5d5;
        border-radius: 6px !important;
        padding: 3rpx;
        width: calc(100% - 6rpx);
        display: flex;
        flex-direction: row;
 
        .input-disabled {
            background-color: #f3f3f3 !important;
        }
 
        .oi-input {
            color: #2d8cf0;
            padding: 10rpx 8rpx;
            flex: 1;
            height: 20px;
            background: #FFF;
            line-height: 20px;
            font-size: 14px;
            font-family: inherit;
            transition-duration: 0.1s;
            vertical-align: middle;
        }
 
        .form-input-icon {
            width: 30rpx;
            font-family: uniicons;
            font-weight: 400;
            font-style: normal;
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;
            padding: 10rpx 5rpx;
            font-size: 32rpx;
            color: rgb(192, 196, 204);
        }
    }
 
    .oi-form-input:hover {
        border: 1px solid rgb(41, 121, 255);
    }
 
    .large-mode {
        .oi-form-input {
            .oi-input {
                font-size: 24px;
                height: 36px;
            }
 
            .form-input-icon {
                font-size: 30px;
                height: 36px;
                width: 36px;
            }
        }
    }
</style>