gdy_app_8/src/components/Mtextarea2.vue

<template>
  <div class="mtext-box">
    <span v-show="text_max != ''" class="text-max-tip">{{ text.length }}/{{ text_max }}</span>
    <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>
        <div v-html="s_text"></div>
        <textarea :placeholder="placeholder" v-model="text" class="diy_text" @input="onTextInput"></textarea>
      </div>
    </div>
    <div v-show="imgs.length > 0" style="padding:0.24rem;" class="upload_box">
        <Uploader ref="uploader" class="needsclick" v-model="s_imgs" :accept="accept"  :beforeRead="beforeRead" :max-count="3" />
    </div>
    <div style="text-align: left; min-height: 0.5rem;">
<!--      <label  href="javascript:void(0)" v-show="false && speech && isapp && !speech_start" @click="startRecognize" class="speech_btn">
        <icon name="speech" class="speech_icon"></icon>
      </label>
      <a href="javascript:void(0)" v-show="speech && isapp && speech_start" @click="stopRecognize" class="speech_btn"><icon name="speech_end" class="speech_icon"></icon></a>
      -->
	  <a href="javascript:void(0)" class="images_btn" @click="imgs_max_tip">
        <Uploader ref="uploader" style="position: absolute; opacity: 0;" :accept="accept"  :beforeRead="beforeRead" v-model="s_imgs" :max-count="imgs_max"></Uploader>
        <icon v-show="images" name="image_upload" class="images_icon"></icon>
      </a>
    </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: {
    onTextInput(e){
      this.text = specialFilter(e.target.value)
    },
    // 返回布尔值
    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;
    },
    imgs_max_tip () {
      if (this.images_length == this.s_imgs.length) {
        this.$toast('最多只能上传' + this.images_length + '张图片')
        return false
      }
    },
    images_upload () {
      let uploader = this.$refs['uploader'].$el
      let inputs = document.querySelectorAll('.van-uploader__input')
      let input = null
      for (let i in inputs) {
        if (uploader.contains(inputs.item(i))) {
          input = inputs.item(i)
        }
      }
      if (input != null) {
        input.classList.add('needsclick')
        input.click()
        input.click()
      }
    },
    // startRecognize () {
    //   let self = this
    //   var options = {}
    //   options.engine = 'baidu'
    //   this.speech_start = true
    //   if (window.plus) {
    //     plus.speech.startRecognize(
    //       options,
    //       function (s) {
    //         self.speech_start = false
    //       },
    //       function (e) {
    //         self.speech_start = false
    //         alert('语音识别失败：' + e.message)
    //       }
    //     )
    //   }
    // },
    // stopRecognize () {
    //   this.speech_start = false
    //   if (window.plus) {
    //     plus.speech.stopRecognize()
    //   }
    // },
  }
}
</script>

<style scoped>
.diy_text_box {
  position: relative;
  min-height: 80px;
  font-size: 0.32rem;
  color: #666;
  line-height: 1.5;
  margin: 0rem;
  overflow: hidden;
  word-break: break-all;
}

.diy_text {
  width: 100%;
  top: 0;
  display: block;
  padding: 0;
  margin: 0;
  position: absolute;
  height: 100%;
  outline: none;
  border: none;
  font-size: 0.32rem;
  color: #000;
  line-height: 1.5;
  resize: none;
}

.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;
}

/deep/ .upload_box .van-uploader__upload {
  display: none;
}

/deep/ .images_btn .van-uploader__preview {
  display: none;
}

.text-max-tip {
  position: absolute;
  bottom: 0rem;
  right: 0;
  font-size: 0.24rem;
  color: #ccc;
  z-index: 1;
}
.mtext-box {
  position: relative;
}
</style>