因项目需要，要实现仿word方式录入数据，要实现鼠标经过时才显示编辑组件，预览及离开后则显示具体的文字。

鼠标经过时显示

正常显示及离开时显示

 组件代码

<template ><div class="pager-input flex  border-box full-width flex-center-sp"   ><div class="font-l border-box text margin-left-m " style="font-family: FangSong;">{{text}}</div><div  v-if="val === ''" class="color-white textplus" >请输入</div><div class="input flex full-width hidden flex-center-sp"><div v-for="item in data" class="item flex border-box flex-center-cz "><input :name="dataId" type="radio" v-model="val" @change="change(item.value)"  :value="item.value"><div class="flex flex-center-sp" >{{item.text}}</div></div></div></div>
</template><script>import {getNewId} from '@/utils/sysUtils'export default{name:'PaperRadioBoxList',created() {this.dataId = getNewId();},data() {return {dataId: "",text:"",val:"",}},props: {data:{},value:{}},model: {prop: "value",event: "change"},mounted() {let find = this.data.filter(d=>d.value == this.val);if (find.length >= 0) {this.text = find[0].text;}},watch:{value:{handler(newValue) {this.val =  newValue;},immediate: true,deep: true   //深度监听                },},methods:{change(item) {this.val = item;                let find = this.data.filter(d=>d.value === item);if (find.length > 0) {this.text = find[0].text;}console.log(this.val);this.$emit("change", this.val)}}}
</script><style scoped>.pager-input:hover .text   {display: none;}.pager-input:hover .textplus   {display: none;}.pager-input:hover .input   {display: flex;}.item input {width: 18px;height: 18px;}</style>

引用组件，支持数据双向绑定

<PaperRadioBoxList :data="yesnoData"  v-model="paperData.punishment1"></PaperRadioBoxList>yesnoData:
[{ value: 1, text: '有' },{ value: 0, text: '无' },
],