gdy_app_8/src/components/Mtextarea.vue

<template>
  <div class="mtext-box">
    <div class="diy_text_box">
      <div v-if="label" class="van-cell van-field" :class="{ 'van-cell--required': required }">
        <div class="van-cell__title van-field__label">
          <span>{{ label }}</span>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            <div v-html="s_text"></div>
            <textarea :placeholder="placeholder" v-model="text" class="diy_text"></textarea>
          </div>
        </div>
      </div>

      <div v-else style="position: relative;min-height: 1.6rem;margin: 0.16rem;">
        <div v-html="s_text"></div>
        <textarea :placeholder="placeholder" v-model="text" class="diy_text" @input="onTextInput"></textarea>
      </div>
      <div style="height: 0.3rem;"></div>
      <span v-show="text_max != ''" class="text-max-tip">{{ text.length }}/{{ text_max }}</span>
    </div>
    <div class="upload_box flex-box-ce" v-show="images">
       <Uploader ref="uploader" class="needsclick" :isCamera="false" v-model="s_imgs" :accept="accept" :beforeRead="beforeRead" :max-count="3" />
    </div>
  </div>
</template>

<script>
import Uploader from '@/components/OssUploader';
import {specialFilter} from "../utils/helper";

export default {
  name: 'Mtextarea',
  model: {
    prop: 'value',
    event: 'value'
  },
  components: {
    Uploader
  },
  props: {
    label: { type: String, default: null },
    required: { type: Boolean, default: false },
    value: {
      type: String,
      default: ''
    },
    speech: {
      type: Boolean,
      default: false
    },
    imgs: {
      type: Array,
      default: () => {
        return [];
      }
    },
    images: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    text_max: {
      type: Number,
      default: 0
    },
    imgs_max: {
      type: Number,
      default: 0
    }
  },
  data() {
    let imgs_max = this.imgs_max != '' ? this.imgs_max * 1 : 3;
    return {
      images_length: imgs_max,
      s_imgs: [],
      isapp: window.plus,
      speech_start: false,
      text: '',
      s_text: '',
      textarea_show: false,
      position: 0,
      accept: 'image/jpeg,image/png,image/jpg',
    };
  },
  watch: {
    imgs(val, old) {
      this.s_imgs = val;
      this.$emit('update:imgs', val);
    },
    s_imgs(val, old) {
      this.$emit('update:imgs', val);
    },
    text(val, old) {
      if (this.text_max * 1 > 0 && val.length > this.text_max * 1) {
        this.text = old;
        return false;
      }
      if (Math.abs(val.length - old.length) > 20) {
        setTimeout(() => {
          this.s_text = val.replace(/\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029)/g, '<br>');
          this.$emit('value', val);
        }, 100);
      } else {
        this.s_text = val.replace(/\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029)/g, '<br>');
        this.$emit('value', val);
      }
    },
    value(val) {
      this.text = val;
      this.$emit('value', val);
    }
  },
  created() {
    this.text = specialFilter(this.value);
    this.s_imgs = this.imgs;
  },
  methods: {
    // 返回布尔值
    beforeRead(file) {
      const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type);
      // const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$toast('上传图片只能是 jpeg|png|jpg 格式!');
      }
      // if (!isLt2M) {
      //   this.$toast('上传图片大小不能超过 2MB!');
      // }
      return isJPG;
    },
    onTextInput(e){
      this.text = specialFilter(e.target.value)
    }
  }
};
</script>

<style scoped>
 .plus{
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    overflow: hidden;
    border-radius: 0.16rem;
    background-color: #E9E9E9;
    text-align: center;
    font-size: 0.36rem;
    color: #333;
    line-height: 1.2rem;
 }
.diy_text_box {
  position: relative;
  min-height: 80px;
  font-size: 0.32rem;
  color: #666;
  /* padding: 0.16rem; */
  line-height: 1.5;
  overflow: hidden;
  word-break: break-all;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.diy_text {
  top: 0;
  bottom: 0rem;
  width: 100%;
  display: block;
  margin: 0;
  position: absolute;
  outline: none;
  border: none;
  font-size: 0.32rem;
  color: #333;
  resize: none;
  /* padding: 0.16rem; */
  /* background-color:red; */
}

.focus_hidden_input.diy_text {
  top: 5000000px !important;
}

.speech_btn {
  padding: 0 0.16rem;
}

.speech_icon {
  width: 0.4rem;
}

.images_icon {
  width: 0.45rem;
}

.images_btn {
  overflow: hidden;
}
.upload_box{
  margin-top: 0.24rem;
  position: relative;
}
.text-max-tip {
  position: absolute;
  bottom: 3px;
  right: 3px;
  font-size: 0.24rem;
  color: #ccc;
  z-index: 1;
}
.mtext-box {
  position: relative;
}
/deep/ .van-uploader__upload-icon {
    color: #6C6C6C;
    font-size: 0.48rem;
}
/deep/ .van-uploader__upload {
    background-color: #f5f7fa;
    border-radius: 0.16rem;
}
</style>