mali-applet-ui 0.2.2 → 0.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,6 +2,9 @@
|
|
|
2
2
|
<view v-if="isFromReadonly" class="ml-input is-readonly" :class="[className || '', {'is-right': align === 'right', 'is-border': border}]">
|
|
3
3
|
<view class="ml-input-readonly-content">{{ inpVal }}</view>
|
|
4
4
|
</view>
|
|
5
|
+
<view v-else-if="!editable" class="ml-input not-edit" :class="[className || '', {'is-right': align === 'right', 'is-border': border}]">
|
|
6
|
+
<view class="ml-input-simulate">{{ inpVal }}</view>
|
|
7
|
+
</view>
|
|
5
8
|
<view v-else class="ml-input" :class="[className || '', {'is-right': align === 'right', 'is-border': border, 'is-prefix': prefixIcon || type === 'search', 'is-suffix': suffixIcon, 'is-disabled': disabled, 'is-clear': clearable && inpVal}]">
|
|
6
9
|
<view v-if="prefixIcon || type === 'search'" class="ml-input-prefix-icon">
|
|
7
10
|
<ml-icon v-if="prefixIcon" :className="prefixIcon"></ml-icon>
|
|
@@ -45,6 +48,10 @@ export default {
|
|
|
45
48
|
suffixIcon: String,
|
|
46
49
|
clearable: Boolean,
|
|
47
50
|
readonly: Boolean,
|
|
51
|
+
editable: {
|
|
52
|
+
type: Boolean,
|
|
53
|
+
default: true
|
|
54
|
+
},
|
|
48
55
|
placeholder: {
|
|
49
56
|
type: String,
|
|
50
57
|
default: '请输入'
|
|
@@ -112,10 +119,20 @@ export default {
|
|
|
112
119
|
flex-grow: 1;
|
|
113
120
|
display: flex;
|
|
114
121
|
flex-direction: row;
|
|
122
|
+
.ml-input-simulate {
|
|
123
|
+
padding: 0 10rpx;
|
|
124
|
+
height: 70rpx;
|
|
125
|
+
line-height: 70rpx;
|
|
126
|
+
overflow: hidden;
|
|
127
|
+
text-overflow: ellipsis;
|
|
128
|
+
white-space: nowrap;
|
|
129
|
+
background: #ffffff;
|
|
130
|
+
}
|
|
115
131
|
.ml-input-readonly-content {
|
|
116
132
|
padding: 20rpx 4rpx;
|
|
117
133
|
}
|
|
118
|
-
.ml-input-inp
|
|
134
|
+
.ml-input-inp,
|
|
135
|
+
.ml-input-simulate {
|
|
119
136
|
padding: 0 10rpx;
|
|
120
137
|
height: 70rpx;
|
|
121
138
|
width: 100%;
|
|
@@ -161,7 +178,8 @@ export default {
|
|
|
161
178
|
border: 1px solid #e5e5e5;
|
|
162
179
|
border-left: 0;
|
|
163
180
|
}
|
|
164
|
-
.ml-input-inp
|
|
181
|
+
.ml-input-inp,
|
|
182
|
+
.ml-input-simulate {
|
|
165
183
|
border: 1px solid #e5e5e5;
|
|
166
184
|
border-radius: $ml-border-radius;
|
|
167
185
|
}
|
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view v-if="isFromReadonly" class="ml-textarea is-readonly" :class="[className || '', {'is-border': border}]">
|
|
2
|
+
<view v-if="isFromReadonly" class="ml-textarea is-readonly" :class="[className || '', {'is-right': align === 'right', 'is-border': border}]">
|
|
3
3
|
<view class="ml-textarea-readonly-content">{{ inpVal }}</view>
|
|
4
4
|
</view>
|
|
5
|
+
<view v-else-if="!editable" class="ml-textarea not-edit" :class="[className || '', {'is-right': align === 'right', 'is-border': border}]">
|
|
6
|
+
<view class="ml-textarea-simulate" :style="{color: fontColor, height: `${rows * 30}rpx`}">{{ inpVal }}</view>
|
|
7
|
+
<view v-if="showWordLimit && !disabled" class="ml-textarea-word-count">
|
|
8
|
+
<!-- <VoiceInput v-if="showVoice" v-model="inpVal" @input="inputEvent"></VoiceInput> -->
|
|
9
|
+
<view class="ml-textarea-word-numbers">{{ value ? value.length : 0 }}/{{ maxLength }}</view>
|
|
10
|
+
</view>
|
|
11
|
+
</view>
|
|
5
12
|
<view v-else class="ml-textarea" :class="[className || '', {'is-border': border, 'is-disabled': disabled}]">
|
|
6
|
-
<view
|
|
7
|
-
<view v-else>
|
|
13
|
+
<view>
|
|
8
14
|
<textarea
|
|
9
15
|
class="ml-textarea-inp"
|
|
10
16
|
v-model="inpVal"
|
|
@@ -59,6 +65,10 @@ export default {
|
|
|
59
65
|
type: Boolean,
|
|
60
66
|
default: true
|
|
61
67
|
},
|
|
68
|
+
editable: {
|
|
69
|
+
type: Boolean,
|
|
70
|
+
default: true
|
|
71
|
+
},
|
|
62
72
|
readonly: {
|
|
63
73
|
type: Boolean,
|
|
64
74
|
default: false
|
|
@@ -117,6 +127,11 @@ export default {
|
|
|
117
127
|
font-size: $uni-font-size-base;
|
|
118
128
|
padding: 20rpx 10rpx 10rpx 20rpx;
|
|
119
129
|
background: #fff;
|
|
130
|
+
.ml-textarea-simulate {
|
|
131
|
+
background: #ffffff;
|
|
132
|
+
white-space: pre-wrap;
|
|
133
|
+
overflow: auto;
|
|
134
|
+
}
|
|
120
135
|
&.is-border {
|
|
121
136
|
border: 1px solid #e5e5e5;
|
|
122
137
|
border-radius: $ml-border-radius;
|
|
@@ -129,7 +144,8 @@ export default {
|
|
|
129
144
|
overflow: auto;
|
|
130
145
|
word-break: break-all;
|
|
131
146
|
}
|
|
132
|
-
.ml-textarea-inp
|
|
147
|
+
.ml-textarea-inp,
|
|
148
|
+
.ml-textarea-simulate {
|
|
133
149
|
color: rgba(39, 42, 48, 0.4500);
|
|
134
150
|
height: 280rpx;
|
|
135
151
|
width: 100%;
|