elementUI自定义单选框内容

简介: elementUI自定义单选框内容
<template>
    <div>
     <div class="heng-div">
        <el-radio v-model="radio" label="0" class="chun-se">纯色 </el-radio> <el-color-picker v-model="color4" class="min-div" size="mini"></el-color-picker>
        <el-radio v-model="radio" label="1">图片<i class="el-icon-info ele-icon"></i></el-radio>
        <el-radio v-model="radio" label="2">视频<i class="el-icon-warning ele-icon"></i></el-radio> 
        <el-radio v-model="radio" label="3">直播<i class="el-icon-warning ele-icon"></i></el-radio>
     </div>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                radio: '1',
                color4:"#409EFF"
            }
        }
    }
</script>
<style scoped>
.ele-icon{
    color: #ccc;
}
.heng-div{
    display: flex;
    align-items: center;
}
.chun-se{
    margin-right: 0 !important;
}
.min-div{
    margin-right: 30px;
}
</style>


1425695-20200323221514297-1016457470.png


相关文章
|
8月前
|
JavaScript 前端开发
【vue】iview如何把input输入框和点击输入框之后的边框去掉
【vue】iview如何把input输入框和点击输入框之后的边框去掉
166 0
|
2月前
CSS3注册表单文本框占位符特效源码
CSS3注册表单文本框占位符特效源码是一段简单的css3 input文本框占位符,placeholders占位符内容填写注册表单特效,非常有意思,欢迎有兴趣的朋友前来下载使用。
31 5
|
4月前
|
前端开发
element菜单组件样式修改NavMenu导航菜单
本文介绍了如何修改Element UI的NavMenu导航菜单组件的样式,包括激活菜单项的颜色、菜单项hover颜色、父级菜单hover颜色以及菜单行高。提供了相应的CSS代码示例,并展示了如何将这些样式应用到实际的NavMenu组件中。
334 3
element菜单组件样式修改NavMenu导航菜单
|
6月前
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
550 0
|
8月前
elementui实现表格单选功能
elementui实现表格单选功能
|
JavaScript
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
1732 0
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
uniapp u-tabs表单如何默认选中
uniapp u-tabs表单如何默认选中
550 0
|
JavaScript 前端开发 UED
Vue中如何进行表单自动完成与下拉选择器
Vue中如何进行表单自动完成与下拉选择器
|
JavaScript
Vue antdv dropdown 自定义下拉内容 overlay 禁止点击事件下传导致收起
Vue antdv dropdown 自定义下拉内容 overlay 禁止点击事件下传导致收起
370 0