kz-ui-base 1.0.102 → 1.0.103
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.
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
+
<div class="textarea-wrapper">
|
|
2
3
|
<el-input
|
|
3
4
|
v-if="setting && setting.displayMode == 'form'"
|
|
4
5
|
v-model="entity[column.property]"
|
|
@@ -7,7 +8,9 @@
|
|
|
7
8
|
:rows="setting && setting.height"
|
|
8
9
|
type="textarea"
|
|
9
10
|
:disabled="disabled ? true : column.disabled ? true : false"
|
|
11
|
+
@input="handleInput"
|
|
10
12
|
@change="onChangeEvent"
|
|
13
|
+
class="textarea-with-count"
|
|
11
14
|
/>
|
|
12
15
|
<el-form-item :label="column.text" :prop="column.property" v-else>
|
|
13
16
|
<el-input
|
|
@@ -18,8 +21,15 @@
|
|
|
18
21
|
type="textarea"
|
|
19
22
|
:disabled="disabled ? true : column.disabled ? true : false"
|
|
20
23
|
@change="onChangeEvent"
|
|
24
|
+
@input="handleInput"
|
|
25
|
+
class="textarea-with-count"
|
|
21
26
|
/>
|
|
22
27
|
</el-form-item>
|
|
28
|
+
<!-- 字数统计显示：仅当 showWordCount 为 true 时显示 -->
|
|
29
|
+
<div v-if="column.showWordCount" class="word-count">
|
|
30
|
+
{{ currentLength }} / {{ column.maxLength || '不限' }}
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
23
33
|
</template>
|
|
24
34
|
|
|
25
35
|
<script lang="ts">
|
|
@@ -31,6 +41,22 @@ import {
|
|
|
31
41
|
Emit,
|
|
32
42
|
Mixins,
|
|
33
43
|
} from "vue-property-decorator";
|
|
44
|
+
|
|
45
|
+
interface Column {
|
|
46
|
+
property: string;
|
|
47
|
+
text: string;
|
|
48
|
+
maxLength?: number;
|
|
49
|
+
disabled?: boolean;
|
|
50
|
+
showWordCount?: boolean; // 新增：是否显示字数统计
|
|
51
|
+
[key: string]: any;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
interface Setting {
|
|
55
|
+
displayMode?: string;
|
|
56
|
+
height?: number;
|
|
57
|
+
[key: string]: any;
|
|
58
|
+
}
|
|
59
|
+
|
|
34
60
|
@Component
|
|
35
61
|
export default class Textarea extends Vue {
|
|
36
62
|
@Prop()
|
|
@@ -50,6 +76,21 @@ export default class Textarea extends Vue {
|
|
|
50
76
|
@Prop({ default: false })
|
|
51
77
|
disabled: Boolean;
|
|
52
78
|
public currentValue = (this as any).value;
|
|
79
|
+
currentLength = 0;
|
|
80
|
+
mounted() {
|
|
81
|
+
this.updateLength();
|
|
82
|
+
}
|
|
83
|
+
handleInput() {
|
|
84
|
+
this.updateLength();
|
|
85
|
+
}
|
|
86
|
+
@Watch('entity', { deep: true })
|
|
87
|
+
onEntityChange() {
|
|
88
|
+
this.updateLength();
|
|
89
|
+
}
|
|
90
|
+
private updateLength() {
|
|
91
|
+
const value = this.entity[this.column.property] || '';
|
|
92
|
+
this.currentLength = value.length;
|
|
93
|
+
}
|
|
53
94
|
public onInputEvent(value) {
|
|
54
95
|
this.$emit("input", {
|
|
55
96
|
entity: this.entity,
|
|
@@ -75,3 +116,26 @@ export default class Textarea extends Vue {
|
|
|
75
116
|
}
|
|
76
117
|
}
|
|
77
118
|
</script>
|
|
119
|
+
|
|
120
|
+
<style scoped>
|
|
121
|
+
.textarea-wrapper {
|
|
122
|
+
position: relative;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* 文本域调整：预留右下角空间 */
|
|
126
|
+
.el-textarea__inner {
|
|
127
|
+
padding-right: 80px !important; /* 右侧预留字数统计空间 */
|
|
128
|
+
padding-bottom: 24px !important; /* 底部预留空间 */
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.word-count {
|
|
132
|
+
position: absolute;
|
|
133
|
+
right: 12px; /* 距离右侧边缘 */
|
|
134
|
+
bottom: 4px; /* 距离底部边缘 */
|
|
135
|
+
margin-top: 0;
|
|
136
|
+
color: #b0b2b7;
|
|
137
|
+
font-size: 12px;
|
|
138
|
+
line-height: 1;
|
|
139
|
+
pointer-events: none;
|
|
140
|
+
}
|
|
141
|
+
</style>
|