bjquanjiang
/
DigitalScholl


			
				
					
						
						
							
							<template>
  <view v-if="!simpleMode">
    <view class="cu-form-group" style="border-bottom: none">
      <view class="title">
        <text v-if="required" class="lr-required">*</text>
        {{ title }}
      </view>
    </view>
    <view class="cu-form-group" style="position: relative;border-top: none">
      <textarea
        @input="textareaInput"
        @focus.stop.prevent
        :maxlength="maxlength"
        :placeholder="displayPlaceHolder"
        :fixed="fixed"
        :value="display"
        :auto-height="autoHeight"
        :readonly="readonly"
        style="margin-top:0;"
      ></textarea>
      <cover-view v-if="readonly" @click.stop.prevent class="textarea-mask"></cover-view>
    </view>
  </view>

  <view v-else class="cu-form-group" style="position: relative;">
    <textarea
      @input="textareaInput"
      @focus.stop.prevent
      :maxlength="maxlength"
      :placeholder="displayPlaceHolder"
      :fixed="fixed"
      :value="display"
      :auto-height="autoHeight"
      :readonly="readonly"
      :style="textareaStyle"
    ></textarea>
    <cover-view v-if="readonly" @click.stop.prevent class="textarea-mask"></cover-view>
  </view>
</template>

<script>
export default {
  name: 'l-textarea',

  props: {
    maxlength: { default: -1 },
    readonly: {},
    placeholder: {},
    fixed: {},
    value: {},
    textareaStyle: {},
    autoHeight: {},
    simpleMode: {},
    required: {},
    title: {},
  },

  data() {
    return {
      hide: false
    }
  },

  // #ifdef MP-WEIXIN
  beforeMount() {
    uni.$on('modal', this.handelModal)
  },

  beforeDestroy() {
    uni.$off('modal', this.handelModal)
  },
  // #endif

  methods: {
    textareaInput(e) {
      this.$emit('change', e.detail.value)
      this.$emit('input', e.detail.value)
    },

    // #ifdef MP-WEIXIN
    handelModal(modal) {
      this.hide = !!modal
    }
    // #endif
  },

  computed: {
    display() {
      return this.hide ? '' : this.value
    },

    displayPlaceHolder() {
      if (this.readonly || this.hide) {
        return ''
      }

      if (this.placeholder) {
        return this.placeholder
      }

      return !this.simpleMode && this.title ? `请输入${this.title}` : '请输入…'
    }
  }
}
</script>

<style lang="less" scoped>
.textarea-mask {
  z-index: 999;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
</style>