点击编辑按钮才可以编辑输入框 （点击边框外和回车会保存编辑内容）点击取消按钮取消编辑

验证部分使用vuetify组件进行验证 

回车和点击边框（失去焦点）外面会报错编辑的内容并传改外面套着的div。 其中回车是执行了失去焦点事件。这个是错误提示我写成了直接在页面上弹出提示并且自己消失(类似于弹窗效果)。

效果图：

 

 

 

<template>
  <div class="nameFrame">
    <v-form ref="form" v-model="valid" type="submit" lazy-validation>
      <div v-if="isEdit" class="text">{{ name }}</div>
      <v-text-field
        v-else
        v-model="inputValue"
        hide-details="auto"
        height="15px"
        :rules="rules"
        validate-on-blur
        class="nameBox"
        autofocus="autofocus"
        type="text"
        @keyup.enter="$event.target.blur()"
        @blur="add(inputValue)"
      ></v-text-field>
      <input type="text" style="display: none" />
    </v-form>
    <img v-if="isDisplay" src="/setup/编辑.png" alt="" @click="switchs" /> //  使用自己的编辑图片按钮。
    <div v-else class="cancel" @mousedown="cancel">取消</div>
  </div>
</template>

<script>
export default {
  name: 'HNameEditing',
  data() {
    return {
      valid: true,
      isDisplay: true,
      isEdit: true,
      name: '111111',
      inputValue: '1111111',
      rules: [
        (value) => !!value || '昵称不能为空',
        (value) => (value || '').length <= 13 || '昵称最大不能超过12位',
        (value) => (value || '').length > 2 || '昵称最小不能小于两位',
        (value) => {
          const pattern = /^[\u4E00-\u9FA5A-Za-z0-9_-]{2,12}$/
          return (
            pattern.test(value) ||
            '昵称格式不正确， 需要的是2-12个字符, 只能包含数字、英文、 中文、下划线、减号。'
          )
        },
      ],
    }
  },

  methods: {
    switchs() {
      this.isDisplay = false
      this.isEdit = false
    },
    cancel() {
      this.isDisplay = true
      this.isEdit = true
      this.$refs.form.validate()
      this.inputValue = this.name
    },
    add() {
      this.$refs.form.validate()
      if (this.$refs.form.validate()) {
        this.isDisplay = true
        this.isEdit = true
        this.name = this.inputValue
      }
    },
  },
}
</script>

<style>
@keyframes showTips {
  0% {
    transform: translatey(0);
    opacity: 0;
  }

  15% {
    transform: translatey(70%);
    opacity: 1;
  }

  85% {
    transform: translatey(70%);
    opacity: 1;
  }

  100% {
    transform: translatey(0);
    opacity: 0;
  }
}

.nameBox .v-messages__message {
  text-align: center;
  color: rgba(255, 87, 51, 1);
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
}
.nameBox .v-text-field__details {
  animation: showTips 3s ease;
  animation-fill-mode: forwards;
  z-index: 9;
  position: fixed !important;
  left: 46%;
  top: 8vw;
  height: auto;
  width: 330px;
  background: rgba(255, 238, 235, 1) !important;
  border: 1px solid rgba(255, 87, 51, 1) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06) !important;
  border-radius: 10px !important;
  padding: 16px 18px 16px 18px;
}
</style>
<style lang="scss" scoped>
.cs {
  width: 330px;
  z-index: 10;
  position: absolute;
  bottom: 50%;
  right: -29%;
  background: rgba(255, 238, 235, 1) !important;
  border: 1px solid rgba(255, 87, 51, 1) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06) !important;
  border-radius: 10px !important;
  color: rgba(255, 87, 51, 1);
}
.nameFrame {
  position: relative;
  min-width: 228px;
  height: 40px;
  background: rgba(247, 247, 247, 1);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  line-height: 40px;
  padding-left: 11px;
  padding-right: 18px;
  .text {
    color: rgba(119, 119, 119, 1);
    font-size: 14px;
    font-weight: 400;
  }
  input {
    color: rgba(119, 119, 119, 1);
    font-size: 14px;
    font-weight: 400;
    outline: none;
    outline: medium;
  }
  img {
    width: 12px;
    height: 12px;
    margin-top: 15px;
    cursor: pointer;
    &:hover {
      border: 1px solid rgba(247, 247, 247, 1);
    }
  }
  .cancel {
    color: rgba(119, 119, 119, 0.7);
    font-family: 'ysbt', sans-serif;
    font-size: 16px;
    cursor: pointer;
  }
}

.nameBox {
  width: 150px !important;
}
</style>