152 lines
3.0 KiB
Vue
152 lines
3.0 KiB
Vue
<template>
|
|
<textarea class="_textarea" :class="{_bb:bb,_disabled:disabled}" :name="name" :value="txtvalue" :placeholder="placeholder" :cursor="cursor" :cursor-spacing="120" :disabled="disabled" :maxlength="maxlength" :auto-height="!ciystyle.height" :fixed="fixed" @input="textinput" :style="ciystyle" @focus="textfocus" @blur="textblur" @linechange="textline"></textarea>
|
|
<view v-if="showtotal" class="txt-right txt1 txt-smmm" style="line-height:1em;margin:-0.5em 0.4em 0.6em 0;">{{totaltxt}}<text v-if="maxlength>-1">/{{maxlength}}</text>字</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
options: {
|
|
virtualHost: true
|
|
},
|
|
behaviors: ['uni://form-field-group'],
|
|
emits: ['change', 'update:modelValue', 'focus', 'blur', 'linechange'],
|
|
props: {
|
|
name: {
|
|
type: String
|
|
},
|
|
modelValue: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
initevent: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
ciystyle: {
|
|
type: [String, Object],
|
|
default: {}
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
bb: { //传统文本框效果
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showtotal: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
maxlength: {
|
|
type: Number,
|
|
default: -1
|
|
},
|
|
fixed: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
totaltxt: '0字',
|
|
cursor:0
|
|
};
|
|
},
|
|
watch: {},
|
|
computed: {
|
|
txtvalue() {
|
|
var val = '';
|
|
if (this.modelValue)
|
|
val = this.modelValue;
|
|
else if (this.value)
|
|
val = this.value;
|
|
this.total(val);
|
|
return val;
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.initevent) {
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'init',
|
|
value: this.txtvalue
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
textfocus(e) {
|
|
this.$emit('focus', e);
|
|
},
|
|
textblur(e) {
|
|
this._cursor = e.detail.cursor;
|
|
this.$emit('blur', e);
|
|
},
|
|
textline(e) {
|
|
this.$emit('linechange', e);
|
|
},
|
|
textinput(e) {
|
|
this._cursor = e.detail.cursor;
|
|
var txt = e.detail.value;
|
|
if (txt === undefined)
|
|
txt = e.data;
|
|
this.total(txt);
|
|
this.$emit('update:modelValue', txt);
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'input',
|
|
value: txt
|
|
});
|
|
},
|
|
total(val) {
|
|
if (!val) {
|
|
this.totaltxt = '0';
|
|
return;
|
|
}
|
|
var linelen = val.split('\n').length;
|
|
this.totaltxt = linelen + '行，' + val.length;
|
|
},
|
|
Getcursor() {
|
|
return this._cursor;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
._textarea {
|
|
text-align: left;
|
|
display: block;
|
|
padding: 1rem 0.5rem;
|
|
box-sizing: border-box;
|
|
line-height: 1.6em;
|
|
font-size: 1em;
|
|
min-height: 3em;
|
|
overflow: auto;
|
|
width: 100%;
|
|
z-index: 0;
|
|
max-height:80vh;
|
|
/* 解决微信覆盖bug */
|
|
}
|
|
|
|
._textarea._bb {
|
|
border: 1px solid var(--bg4);
|
|
border-radius: 0.2em;
|
|
padding: 0.5rem;
|
|
margin: 0.5em 0;
|
|
background: var(--bg1);
|
|
}
|
|
|
|
._textarea._disabled {
|
|
color: var(--txt1);
|
|
background: var(--bg4);
|
|
}
|
|
</style> |