crm-mobile/components/wk-form/wk-field-textarea.vue

<template>
  <view class="wk-field wk-field-textarea">
    <view v-if="_label" class="wk-field__label">
      <view v-if="field.isNull === 1" class="line" />
      {{ _label }}
    </view>
    <view class="wk-field__body" @click="handleClick">
      <textarea
        ref="core"
        v-model="formValue"
        :type="type"
        :placeholder="_placeholder"
        :maxlength="getMaxlength"
        :disabled="field.disabled"
        placeholder-style="font-size: 28rpx;"
        placeholder-class="wk-placeholder placeholder"
        class="wk-field__body-core"
        @input="changeText" />
    </view>
  </view>
</template>

<script>
  import mixins from './mixins'

  export default {
    name: 'WkFieldTextarea',
    mixins: [mixins],
    props: {
      type: {
        type: String,
        default: 'text'
      }
    },
    data() {
      return {
      }
    },
    computed: {
      getMaxlength() {
        return this.field.maxlength || 800
      }
    },
    methods: {
      handleClick() {
        if (this.field.disabled) {
          if (this.config && this.config.disabledMsg) {
            this.$toast(this.config.disabledMsg)
          }
          return
        }
      },
			
      // 禁止输入 emoji
      changeText() {
        const regStr = /[\ud800-\udbff]|[\udc00-\udfff]/g;
        let _str = this.formValue
        if (regStr.test(_str)) {
          _str = _str.replace(regStr, '');
        }
        this.$nextTick(() => {
          this.formValue = _str
          if (this.value !== this.formValue) {
            this.emitChangeEvt(this.formValue)
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "wkField";

  .wk-field-textarea {
    display: block;
    .wk-field__body {

			.wk-field__body-core {
				height: 150rpx;
			}
    }
  }
	
	.placeholder {
		font-size: $wk-font-base;
	}
</style>