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

<template>
  <view class="wk-field wk-field-input">
    <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">
      <input
        ref="core"
        v-model="formValue"
        type="text"
        :disabled="field.disabled"
        :placeholder="_placeholder"
        :maxlength="getMaxlength"
        placeholder-class="wk-placeholder placeholder"
        class="wk-field__body-core"
        @input="changeText">
    </view>
  </view>
</template>

<script>
  import mixins from './mixins'
	
  export default {
    name: 'WkFieldInput',
    mixins: [mixins],
    data() {
      return {}
    },
    computed: {
      getMaxlength() {
        if (this.field.formType === 'website') return 800
        return this.field.maxlength || 100
      }
    },
    methods: {
      handleClick() {
        if (this.field.disabled) {
          if (this.config && this.config.disabledMsg) {
            this.$toast(this.config.disabledMsg)
          }
          return
        }
      },
			
      formatValue(oldStr) {
        // 禁止输入 emoji
        const regStr = /[\ud800-\udbff]|[\udc00-\udfff]/g;
        return oldStr.replace(regStr, '');
      },
			
      changeText() {
        let oldStr = String(this.formValue)
        let valueStr = this.formatValue(this.formValue)

        this.formValue = oldStr
        this.$nextTick(function() {
          this.formValue = valueStr
          if (this.value !== this.formValue) {
            this.emitChangeEvt(this.formValue)
          }
        })
      }
    }
  }
</script>

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

	.placeholder {
		font-size: 26rpx;
	}
</style>