<template>
  <span  contenteditable="true"
         class="input"
         placeholder="请输入标签"
         @keydown="onKeyDown"
  ></span>
</template>

<script>
export default {
  methods: {
    onKeyDown(e) {
      if (e.keyCode === 13) {
        // 阻止换行
        e.cancelBubble = true;
        e.preventDefault();
        e.stopPropagation();
        
        // 取值
        const newValue = e.target.innerText;
        alert(newValue)
      }
    }
  }
}
</script>
<style>
  .input {
    border: 1px solid #ccc;
    font-size: 16px;
    padding: 5px;
    
    /* 重要： 不设置这个光标看不见 */
    display: inline-block;
  }
  [contenteditable="true"] {
    /* 贯标的颜色 */
    caret-color: red;
  }
  
  /* placeholder的设置 */
  .input:empty::before {
    content: attr(placeholder);
    color: #ccc;
  }
</style>