Vue 自定义仿word表单录入之单选按钮组件

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

鼠标经过时显示

正常显示及离开时显示

组件代码

javascript 复制代码
<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>

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

javascript 复制代码
<PaperRadioBoxList :data="yesnoData"  v-model="paperData.punishment1"></PaperRadioBoxList>


yesnoData:
[
    { value: 1, text: '有' },
    { value: 0, text: '无' },
],
相关推荐
祈澈菇凉2 小时前
Webpack的基本功能有哪些
前端·javascript·vue.js
小纯洁w2 小时前
Webpack 的 require.context 和 Vite 的 import.meta.glob 的详细介绍和使用
前端·webpack·node.js
想睡好3 小时前
css文本属性
前端·css
qianmoQ3 小时前
第三章:组件开发实战 - 第五节 - Tailwind CSS 响应式导航栏实现
前端·css
zhoupenghui1683 小时前
golang时间相关函数总结
服务器·前端·golang·time
White graces3 小时前
正则表达式效验邮箱格式, 手机号格式, 密码长度
前端·spring boot·spring·正则表达式·java-ee·maven·intellij-idea
庸俗今天不摸鱼3 小时前
Canvas进阶-4、边界检测(流光,鼠标拖尾)
开发语言·前端·javascript·计算机外设
bubusa~>_<4 小时前
解决npm install 出现error,比如:ERR_SSL_CIPHER_OPERATION_FAILED
前端·npm·node.js
yanglamei19624 小时前
基于Python+Django+Vue的旅游景区推荐系统系统设计与实现源代码+数据库+使用说明
vue.js·python·django
流烟默5 小时前
vue和微信小程序处理markdown格式数据
前端·vue.js·微信小程序