先吐个槽：
input可以获取焦点，可以自动选中，却不能自适应文本宽度；
contenteditable可以自适应文本宽度却不能调用focus()和select()！
要达到新增一个标签时选中示范文本并更改的需求还真是坎坷啊。。。
正文开始：
环境：vue-cli, element-ui
这里选用contenteditable的方式，自适应还是更美观一些：
首先分析一下contenteditable的自动全选：
range是我们创建的需要选定的区域，而selection是屏幕上已经被选定的区域，range可以通过addRange方法添加到屏幕上，看到的效果就是自动选中了。
selectNodeContents可以选择父元素不包括元素本身的所有子元素，利用这个可以实现一个根据文本自适应的输入框，在外层再包一层div，方便hover的时候右上角小叉叉删除键定位。
先写个界面，用上elementui让他好看一点，叉叉就用里面自带的icon了：
<template><div><template v-for="(item,index) in tags"> <div class='el-button primary el-button--mini is-plain newtag' @mouseenter="showCloseBtn(index)" @mouseleave="hideCloseBtn(index)"><div contenteditable="plaintext-only" class="newtag-content" :ref='`newTag${index}`' @blur="checkTag(index)">{{ item }}</div><i class="close-i el-icon-circle-close" :ref="`closeI${index}`" @click="removeTag(index)"></i></div></template><i class="el-icon-circle-plus-outline" @click="addTag()"></i></div></template>需要绑定的方法：
checkTag： 如果新增tag没有内容，则点击空白处tag消失；
showCloseBtn： 鼠标移入tag叉叉出现；
hideCloseBtn： 鼠标移出tag叉叉消失；
removeTag：点击tag右上角叉叉删除本tag；
addTag：点击加号icon新增tag，同时自动全选文本。
另外再给每个tag和icon加上个与循环index相关的ref，方便取元素。
实现方法，补上css：
<script>export default {data() {return {tags:['川建国','奥观海'], //通过操作数组数据直接增减tag}},methods:{addTag() {this.recForm.tags.push('新标签');this.$nextTick(()=>{let len = this.recForm.tags.length;let newtag = this.$refs[`newTag${len-1}`][0]; //获得新增的标签，数组的最后一个let range = document.createRange();range.selectNodeContents(newtag);window.getSelection().removeAllRanges();window.getSelection().addRange(range); //自动全选});},showCloseBtn(index){this.$refs[`closeI${index}`][0].style.display = 'block'; //显示叉叉},hideCloseBtn(index){this.$refs[`closeI${index}`][0].style.display = 'none'; //叉叉消失},checkTag(index){ //判断tag有无内容let text = this.$refs[`newTag${index}`][0].innerText.trim();if(text.length==0){this.recForm.tags.pop();}else{this.recForm.tags[index] = text;}},removeTag(index){ //删除叉叉this.recForm.tags.splice(index,1);},}}</script><style scoped>.close-i{position: absolute;top:-8px;right: -9px;display: none;cursor: pointer;font-size: 18px;background-color: white;border-radius: 10px;}.newtag{position: relative;cursor: text;overflow: visible;display: inline-block;padding: 0;//将原本padding 7px 15px 移到内层，这样鼠标点选位置会大一些，}.newtag-content{margin: 7px 15px; }</style>最终效果图：