• elementUI单选框按钮样式修改问题,elementUI的elradiobutton自带的样式无法满足业务需求,所以直接对组件进行了二次封装,最后完成了业务。


    <template>
        <div>
            <el-row class="ml-row">
                全部地区:
                <el-radio-group v-model="radio1" @change="getValue()">
                    <el-radio-button class="ml-top-button" :label="1" plain>全部</el-radio-button>
                    <el-radio-button class="ml-top-button" :label="2">内地</el-radio-button>
                    <el-radio-button class="ml-top-button" :label="3">韩剧</el-radio-button>
                </el-radio-group>
            </el-row>
            <el-row class="ml-row">
                全部年份:
                <el-radio-group v-model="radio2" @change="getValue()">
                    <el-radio-button class="ml-top-button" :label="1" plain>全部</el-radio-button>
                    <el-radio-button class="ml-top-button" :label="2">2022</el-radio-button>
                    <el-radio-button class="ml-top-button" :label="3">2021</el-radio-button>
                </el-radio-group>
            </el-row>
            <el-row class="ml-row">
                全部资费:
                <el-radio-group v-model="radio3" @change="getValue()">
                    <el-radio-button class="ml-top-button" :label="1" plain>全部</el-radio-button>
                    <el-radio-button class="ml-top-button" :label="2">免费</el-radio-button>
                    <el-radio-button class="ml-top-button" :label="3">付费</el-radio-button>
                </el-radio-group>
            </el-row>
        </div>
    </template>
    
    <script>
    export default {
        data () {
            return {
                radio1: 1,
                radio2: 1,
                radio3: 1,
            }
        },
        methods: {
            getValue () {
                console.log(this.radio);
            },
        }
    
    };
    </script>
    
    <style lang="scss">
    .ml-row {
        margin-bottom: 5px;
    }
    
    .el-radio-button__inner {
        //  82px;
        height: 36px;
        border-radius: 4px 0px 0px 4px;
        border: 1px solid rgba(0, 0, 0, 0) !important;
        border-radius: 2px !important;
        background-color: rgba(0, 0, 0, 0);
        font-size: 14px;
        font-weight: 400;
        color: #606677;
        line-height: 14px;
        outline: none;
        box-shadow: none;
    }
    
    .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        background: rgba(0, 0, 0, 0);
        border: 1px solid #3E7BFA !important;
        color: #3E7BFA;
        line-height: 14px;
        outline: none;
        box-shadow: none;
    }
    
    .ml-top-button {
        border-color: #ffffff;
        background: rgba(0, 0, 0, 0);
        font-size: 16px;
        margin: 0 10px 0 10px;
    }
    </style>
    

  • 相关阅读:
    前端优化技巧
    AngularJS 细节
    Xamarin.ios 目录结构
    Java编程中“为了性能”需做的26件事
    Java中的反射Reflection
    在MyEclipse中导入Datebase方法以及在MyEclipse项目工程里加载jar驱动的方法
    Solr 使用 Log4j
    solr学习笔记linux下配置solr
    Java程序员应该了解的10个面向对象设计原则
    Java堆内存的10个要点
  • 原文地址:https://www.cnblogs.com/spotlighter/p/16394054.html
Copyright © 2020-2023  润新知