Vue可编辑区域

TIPS

一个双击可编辑的区域，可增加输入验证

EditArea组件

<template>
  <div
    class="edit-cell"
    :class="{
      'is-error': validateState === 'error',
      'is-validating': validateState === 'validating',
      'is-success': validateState === 'success',
    }"
    @dblclick="onFieldClick"
  >
    <div v-if="!edit && !showInput" tabindex="0" @keyup.enter="onFieldClick">
      <slot name="content" />
    </div>

    <el-tooltip
      v-if="edit || showInput"
      poper-class="table-edit-tooltip"
      :placement="tooltipPlacement"
      :open-delay="tooltipDelay"
      :disabled="disabled"
    >
      <span slot="content"> {{ validateMessage }} </span>
      <component
        :is="editableComponent"
        ref="input"
        v-model="model"
        v-bind="$attrs"
        @focus="onFieldClick"
        @keyup.enter.native="onInputExit"
        v-on="listeners"
      >
        <slot name="edit-component-slot" />
      </component>
    </el-tooltip>
  </div>
</template>

<script>
import AsyncValidator from 'async-validator'
import ElTooltip from 'element-ui/lib/tooltip'

export default {
  name: "EditArea",
  components: {
    ElTooltip
  },
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      default: ''
    },
    rules: [Object, Array],
    tooltipDelay: {
      type: Number,
      default: 300
    },
    tooltipPlacement: {
      type: String,
      default: 'right'
    },
    showInput: {
      type: Boolean,
      default: false
    },
    editableComponent: {
      type: String,
      default: 'el-input'
    },
    closeEvent: {
      type: String,
      default: 'blur'
    }
  },
  data() {
    return {
      validateState: '',
      validateMessage: '',
      edit: false,
      editMode: false
    }
  },
  computed: {
    model: {
      get() {
        return this.value
      },
      set(val) {
        return this.$emit('input', val)
      }
    },
    disabled() {
      return this.validateState !== 'error'
    },
    listeners() {
      return {
        [this.closeEvent]: this.onInputExit,
        ...this.$listeners
      }
    }
  },
  watch: {
    editMode(val) {
      if (val) {
        this.edit = true
      } else {
        this.validate((message, invalidFields) => {
          if (!message) {
            this.edit = false
          }
        })
      }
    }
  },
  methods: {
    onFieldClick() {
      this.editMode = true
      this.$nextTick(() => {
        const inputRef = this.$refs.input
        if (inputRef) {
          inputRef.focus()
        }
      })
    },
    onInputExit() {
      this.editMode = false
    },
    onInputChange(val) {
      this.$emit('input', val)
    },
    validate(callback) {
      if (!this.rules || this.rules.length === 0) {
        callback()
        return true
      }
      this.validateState = 'validating'
      const descriptor = {
        value: this.rules
      }
      const validator = new AsyncValidator(descriptor)
      const model = {
        value: this.value
      }
      validator.validate(model, { firstFields: true }, (errors, invalidFields) => {
        this.validateState = !errors ? 'success' : 'error'
        this.validateMessage = errors ? errors[0].message : ''
        callback(this.validateMessage, invalidFields)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.is-error .el-input__inner{
  border-color: red!important;
  &:hover{
    border-color: red!important;
  }
}
.table-edit-tooltip{
  background-color: #fff!important;
  color: red!important;
  border: 1px solid red!important;
  &[x-placement^='right'] .poper__arrow{
    border-right-color: red!important;
  }
  &[x-placement^='left'] .poper__arrow{
    border-left-color: red!important;
  }
  &[x-placement^='top'] .poper__arrow{
    border-top-color: red!important;
  }
  &[x-placement^='bottom'] .poper__arrow{
    border-bottom-color: red!important;
  }
}
</style>

使用

<template>
  <div>
    asdasdaasd
    <edit-area v-model="value" :rules="{required: true, message: '不能为空'}" :show-input="editMode">
      <span slot="content">{{ content }}</span>
    </edit-area>
    asdasdasdasd
  </div>
</template>

<script>
import EditArea from './EditArea'

export default {
  name: "index",
  components: {
    EditArea
  },
  data() {
    return {
      editMode: false,
      content: 'asdqweadasd'
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>

</style>