elementUI单选框按钮样式

elementUI 单选框按钮样式,用el-radio-group标签嵌套着el-radio-button,就是单选框的按钮样式

可以通过size属性,指定单选框按钮的大小,size属性可选的值有medium,small,mini

el-radio-button的其他用法和el-radio一样

例子:

<template>
<div>
  <el-radio-group v-model="radio" @change="getValue()" size="mini">
    <el-radio-button v-for="(item,i) in items" :key="i" :label="i" :disabled="item.disabled">{{item.content}}</el-radio-button>
  </el-radio-group>
</div>
</template>
<script>
export default {
  name: "HelloWorld",
  data () {
    return {
      radio:0,
      items:[
        {id:0,content:"选项一",disabled:false},
        {id:1,content:"选项二",disabled:true},
        {id:2,content:"选项三",disabled:false},
      ]
    };
  },
  methods: {
    getValue(){
      console.log(this.radio)
    }
  },
}
</script>
<style lang="css" scoped>
</style>

原文地址:https://www.cnblogs.com/luguankun/p/11623900.html

时间: 2024-10-08 00:45:07

elementUI单选框按钮样式的相关文章

单击行,自动选中当前行中的单选框按钮

需求:单击行,自动选中当前行中的单选框按钮. aspx页面: <asp:Repeater ID="rptRecordList" runat="server"> <HeaderTemplate> <table style="width: 100%;" id="tbList"> </HeaderTemplate> <ItemTemplate> <tr class=&

替换input单选框的样式

实现效果:. css的input单选框的样式很丑,有时候不想使用原生的样式,如上照片,可以使用下面的方法. 思路是,给inpu加visibility:hidden隐藏,然后使用不同的图片绝对定位覆盖在input上面,之后将不同的图片和input状态绑定一下.设置visibility而不用display的好处是,前者在视觉隐藏的情况下还会占据原来的空间,这样可以调整下面的input和上面的图片大小一致. <div> 提现方式 <span><img src="img/x

elementUI单选框获取值

elementUI 单选框获取值有三种方法: 方法一: 如果,单选框选项不是循环得来的,并且不使用el-radio标签的 (1)给每个el-radio标签添加v-model属性,v-model的属性值是label绑定的值,label绑定的值,可以是数字,也可以是选项的内容. (2)给每个e--radio标签添加@change事件,@change事件,打印v-model绑定的值,这个值就是选中项的内容 例子: <template> <div> <div> <el-r

js自定义修改复选框单选框样式,清除复选框单选框默认样式

之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认样式进行修改,但发现,并没有可以重置效果的方法,之前用过-webkit-appearance的方法,但是这个只在webkit内核的浏览器里面生效,火狐不生效. 所以自己写了个js,用li来模拟复选框和单选框的效果,很简单,7行就行. 效果图:  涉及到的知识点:自定义属性来存储点击状态和原来的class名 h

element-ui 单选框点击整个行为选中状态

element-ui 带单选框的表格 效果:不只是带单选框,点击当前行单选框选中状态网上查了一些发现很多都是只能点击当前radio选中当前行,配合element-ui的单选table时发现两个的选择状态是不一致的,所以调整了一下效果 提供下思路: 1.保证不止是点击单选框,点击列表某行也能够选中,通过设置highlight-current-row和@current-change="handleCurrentChange"实现 2.radio为单选框的值,选中后为当前行数,翻页后为保证重

自定义多选框和单选框css样式

直接上代码: input[type="radio"],input[type="checkbox"]{ -webkit-appearance: none; outline: none; } input[type="radio"]{ position: relative; width: .12rem; height: .12rem; border: 1px solid #186D9A; border-radius: .06rem; -webkit-b

【mfc】组框、单选框控件与复选框控件

VC6中的MFC中的单选框与复选框控件也不简单,它没有VS中C#那样可以之间通过一个封装之后的函数进行判断,该单选框/复选框有没有被选中啊?或者控制单选框/复选框的选中状态.这东西比较复杂,通过相应的值来控制的. 一.基本目标 下面就用一个简单例子来说明VC6中的MFC中的单选框与复选框控件,点击"确定"按钮能够判断对话框中的所有单选框与复选框的选中状态.Radio1-Radio3互成一个组,组内仅能够有一个组员被选中,Radio4-Radio5也互成一组,选择Radio4能够令复选框

LODOP打印超文本字符串拼接2 单选选择css样式表格

之前的相关字符串拼接的博文:LODOP打印超文本字符串拼接1 固定表格填充数值之前博文介绍过,字符串可以随意拼接,只要最后组织成的字符串是自己需要的超文本就可以了,前面还有一篇也是拼接样式的:Lodop打印如何隐藏table某一列.该文也演示拼接样式,演示如何用单选框选择样式,一个按钮实现不同的样式的打印效果.由于之前的博文:Lodop打印控件不打印css背景图怎么办,这个是早期写的,没有在博文里放代码,代码都在图里,这里再演示下lodop不打印css背景图的解决方法. 如图,一个单选框是选择的

字体图标单选框,复选框效果

第一步:使用font-face声明字体 @font-face {font-family: 'iconfont'; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome.firefox */ url('iconfont.ttf') forma