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


相关文章
|
1月前
|
移动开发 JavaScript 小程序
uniapp中组件库的Checkbox 复选框 的丰富使用方法
uniapp中组件库的Checkbox 复选框 的丰富使用方法
448 0
|
8月前
|
JavaScript
41Vue - 表单控件绑定(文本)
41Vue - 表单控件绑定(文本)
30 0
|
1月前
elementui实现表格单选功能
elementui实现表格单选功能
16 0
|
1月前
uniapp中组件库的Checkbox 复选框的使用方法
uniapp中组件库的Checkbox 复选框的使用方法
|
1月前
|
移动开发 小程序 JavaScript
uniapp中组件库的Textarea 文本域的丰富使用方法
uniapp中组件库的Textarea 文本域的丰富使用方法
140 0
|
1月前
|
测试技术
【sgAutocomplete】自定义组件:基于elementUI的el-autocomplete组件开发的自动补全下拉框组件(带输入建议的自动补全输入框)
【sgAutocomplete】自定义组件:基于elementUI的el-autocomplete组件开发的自动补全下拉框组件(带输入建议的自动补全输入框)
|
7月前
uniapp u-tabs表单如何默认选中
uniapp u-tabs表单如何默认选中
234 0
|
8月前
42Vue - 表单控件绑定(多行文本)
42Vue - 表单控件绑定(多行文本)
32 0
|
8月前
|
JavaScript
43Vue - 表单控件绑定(复选框)
43Vue - 表单控件绑定(复选框)
22 0

热门文章

最新文章