<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>

elementUI自定义单选框内容的更多相关文章

  1. CSS学习笔记三:自定义单选框,复选框,开关

    一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...

  2. 自定义单选框radio样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. vue+elementUI中单选框el-radio设置默认值和唯一标识某个单选框

    vue+elementUI中单选框el-radio设置默认值 如果后台返回的单选框的值是number:单选框的lable需要设置成 :lable='0';如下: <el-form-item la ...

  4. PHP下拉框内容随单选框内容变化

    这久在修改一个项目的小东西,要求把下拉框改为单选框,由于代码封闭,修改不了获取函数,所以想了个办法让下拉框的内容随单选框的内容变化,下面把代码分享给大家: <!DOCTYPE html PUBL ...

  5. element-ui 带单选框的表格

    效果:不只是带单选框,点击当前行单选框选中状态网上查了一些发现很多都是只能点击当前radio选中当前行,配合element-ui的单选table时发现两个的选择状态是不一致的,所以调整了一下效果 提供 ...

  6. jq form表单渲染单选框内容渲染

    单选框赋值 单选按钮赋值的主要就在于一个value值和name值对应,但是单选的选中状态按钮是input标签的check(选中)属性 当newattr的属性是1的时候为true,或者当newattr的 ...

  7. 在echarts中自定义提示框内容

    1.期望效果 以柱状图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容. 如下图,鼠标滑过每个数据项时, 第1张是默认提示框: 第2张是处理成 ...

  8. Echarts修改提示框及自定义提示框内容

    1:首先先定义自定义的json数据 var msg = [{ 'tell':'110', 'ContentMessage':"我今天去吃大餐" },{ 'tell':'111', ...

  9. 商务系统的构造思路(无源码!)+如何用jsp实现点击单选框内容显示在另一个jsp页面

    敲码经验总结: 之前犯了一个错误就是,没有从底层开始学起,有啥问题,就直接博客园找源码,去CSDN找源代码,看到代码就复制粘贴,结果从新梳理知识点的时候,貌似除了复制粘贴,印象深刻的知识啥也没学到. ...

  10. js初学—js全自定义单选框

    代码如下: <script type="text/javascript"> window.onload=function() { var oIput=document. ...

随机推荐

  1. HTML 首页 欢迎页

    HTML 首页 欢迎页,将下面代码复制出来,贴到HTML中,直接运行 <!DOCTYPE html> <html lang="en"> <head&g ...

  2. Axure 创建轮播图

    拖一个动态面板,设置名称 双击动态面板,添加3个状态 给3个状态,分别添加3张图片 设置交互 新建交互 -> 载入时 -> 设置面板状态 双击进去,界面看得直观些 下一项.向后循环,循环间 ...

  3. PPT 如何做出高大上的表格

    字不如表.表不如图 如何做 https://www.bilibili.com/video/BV1ha411g7f5?p=17

  4. 携程OceanBase开源实践——索引统计功能实现

    [作者] 施纬,携程数据库研发工程师,主要负责数据库运维和内核研发. 姜贤富,携程高级数据库研发工程师,主要负责携程数据库监控运维及工具研发,拥有十年运维经验. [概述] 自从2021年OceanBa ...

  5. (error) MOVED 12706 10.176.246.204:9736

    使用redis-cli连接上redis后,执行get命令报错: (error) MOVED 12706 10.176.246.204:9736 百度到原因是未以集群模式连接,在连接时加上-c参数就可以 ...

  6. Python 3.12 抢先看——关于 f-string 的改动

    Python 3.12 抢先看--关于 f-string 的改动 哈喽大家好,我是咸鱼 相信小伙伴们对 python 中的 f-string 都不陌生 f-string 是格式化字符串的缩写,是以小写 ...

  7. 遇到 Request header is too large,你是如何解决的?

    看到群里有小伙伴问,这个异常要怎么解决: java.lang.IllegalArgumentException: Request header is too large 异常原因 根据Exceptio ...

  8. 【每日一题】11.黑白树 (树上DFS)

    补题链接:Here 题目描述 一棵 \(n\) 个点的有根树,\(1\) 号点为根,相邻的两个节点之间的距离为 \(1\) .树上每个节点 \(i\)对应一个值\(k[i]\).每个点都有一个颜色,初 ...

  9. 一、redis单例安装(linux)

    系列导航 一.redis单例安装(linux) 二.redis主从环境搭建 三.redis集群搭建 四.redis增加密码验证 五.java操作redis 环境:centos7.5需要的安装包: re ...

  10. myeclipse过期问题

    安装myeclipse后就会遇到过期问题.如下代码永久解决过期问题. import java.io.BufferedReader; import java.io.IOException; import ...