119 lines
3.1 KiB
Plaintext
119 lines
3.1 KiB
Plaintext
<template>
|
|
<view class="textarea" style="{{tabSearch?'padding: 0;':''}}">
|
|
<textarea
|
|
class="areas"
|
|
style="{{tabSearch?'text-align: left;min-height: 40rpx;font-size: 28rpx;border-bottom: #F2F2F2 solid 2rpx;line-height: 72rpx;':''}}"
|
|
auto-height
|
|
placeholder="{{placeholderText}}（请勿留下联系方式，否则将会被禁封）"
|
|
placeholder-style="placeholder_class"
|
|
minlength="{{min}}"
|
|
maxlength="{{max}}"
|
|
bindinput="inputs"
|
|
value="{{value}}"
|
|
>
|
|
</textarea>
|
|
<view v-if="!tabSearch" class="currentWordNumber font_24">{{currentWordNumber}}/{{max}}</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import wepy from '@wepy/core'
|
|
import https from '../mixins/https'
|
|
import { service } from '../config.js'
|
|
import base from '../mixins/base'
|
|
wepy.component({
|
|
mixins: [base, https],
|
|
props: {
|
|
placeholderText: {
|
|
type: String,
|
|
default: '说出你的性格特点、兴趣爱好、自我评论、家庭情况等'
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 最多字数
|
|
max: {
|
|
type: Number,
|
|
default: 800
|
|
},
|
|
// 最少字数
|
|
min: {
|
|
type: Number,
|
|
default: 15
|
|
},
|
|
tabSearch: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
watch: {
|
|
value(e) {
|
|
if (!e) return this.currentWordNumber = 0
|
|
var len = parseInt(e.length)
|
|
console.log(len)
|
|
if (len <= this.min) {
|
|
this.texts = '至少还需要'
|
|
this.textss = '字'
|
|
this.num = this.min - len
|
|
} else if (len > this.min) {
|
|
this.texts = ' '
|
|
this.textss = ' '
|
|
this.num = ''
|
|
}
|
|
this.currentWordNumber = len
|
|
if (len > this.max) return this.currentWordNumber = this.max
|
|
}
|
|
},
|
|
data: {
|
|
texts: '至少需要15个字',
|
|
currentWordNumber: 0
|
|
},
|
|
methods: {
|
|
inputs(e) {
|
|
var len = parseInt(e.$wx.detail.value.length)
|
|
console.log(len)
|
|
if (len >= this.max) {
|
|
wx.showToast({
|
|
title: `内容不能超过${this.max}字`,
|
|
icon: 'none',
|
|
duration: 1500
|
|
})
|
|
return
|
|
}
|
|
this.value = e.$wx.detail.value
|
|
this.$emit('textareaValue', e.$wx.detail.value)
|
|
}
|
|
},
|
|
events: {}
|
|
})
|
|
</script>
|
|
<style lang="less">
|
|
textarea {
|
|
width: 100%;
|
|
caret-color:#FF95B1;
|
|
}
|
|
.textarea {
|
|
padding: 10rpx 30rpx 10rpx;
|
|
box-sizing: border-box;
|
|
background-color: white;
|
|
margin-bottom: 80rpx;
|
|
border-radius: 32rpx;
|
|
.areas {
|
|
width: 100%;
|
|
min-height: 300rpx;
|
|
font-size: 30rpx;
|
|
line-height: 40rpx;
|
|
color: #333333;
|
|
}
|
|
.placeholder_class {
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
.currentWordNumber {
|
|
text-align: right;
|
|
color: #C2C2C2;
|
|
}
|
|
}
|
|
</style>
|