vue2实现自定义样式radio单选框

Ocean 发布于2019-08-29 14:14 / 1506人阅读

摘要：先上效果主编已回复是否全部先取消所有选中项再设置当前点击项选中设置值，以供传递样式

先上效果


  主编已回复:
  
    
    {{item.label}}

js:

data() {
  return {
    radio: "1",
    radios:[
      {
        label: "是",
        value:"1",
        isChecked: true,
      },
      {
        label: "否",
        value:"2",
        isChecked: false,
      },
      {
        label: "全部",
        value:"3",
        isChecked: false,
      },
    ]
  }
},
methods: {
  check(index) {
    // 先取消所有选中项
    this.radios.forEach((item) => {
      item.isChecked = false;
    });
    //再设置当前点击项选中
    this.radio = this.radios[index].value;
    // 设置值，以供传递
    this.radios[index].isChecked = true;
    console.log(this.radio);
  }
}

样式：

.radio-box{
  display: inline-block;
  position: relative;
  height: 25px;
  line-height: 25px;
  margin-right: 5px;
}
.radio {
  display: inline-block;
  width: 25px;
  height: 25px;
  vertical-align: middle;
  cursor: pointer;
  background-image: url(../../../common/images/radio.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}
.input-radio {
  display: inline-block;
  position: absolute;
  opacity: 0;
  width: 25px;
  height: 25px;
  cursor: pointer;
  left: 0px;
  outline: none;
  -webkit-appearance: none;
}
.on {
  background-position: -25px 0;
}

专线服务私有云自定义按钮样式 radio单选实现自定义手势自定义如何实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113015.html

CSS魔法堂：改变单选框颜色就这么吹毛求疵！

摘要：前言是否曾经被业务提出能改改这个单选框的颜色吧让它和主题颜色搭配一下吧，然后苦于原生不支持换颜色，最后被迫自己手撸一个凑合使用。设置为的样式行为特征单选框的行为特征，明显就是选中与否，及选中状态的改变事件，因此我们必须保持对外提供事件。前言是否曾经被业务提出能改改这个单选框的颜色吧！让它和主题颜色搭配一下吧！，然后苦于原生不支持换颜色，最后被迫自己手撸一个凑合使用。若抛开inpu...

freecode 2019-08-29 16:52 评论0 收藏0
vue2.0学习笔记（表单输入绑定）

摘要：复选框当选中时当没有选中时这里的和特性并不会影响输入控件的特性，因为浏览器在提交表单时并不会包含未被选中的复选框。 1、基础用法 v-model指令可以实现表单元素和Model中数据的双向数据绑定。只能运用在表单元素中（input、radio、text、address、email、select、checkbox、textarea）可以用 v-model 指令在表单、及元素上...

Seay 2019-08-23 18:35 评论0 收藏0
自定义单选框样式以及获取单选框的选中状态

摘要：为其添加属性区分微信还是支付宝微信支付宝获取标签数组如果被选中则执行以下代码如果选中微信，则输出反之输出四自定义选中框样式未选中的样式不换行空格选中之后的样式一、用户可选择微信支付或者支付宝支付单选框知识点...

沈俭 2019-08-23 14:33 评论0 收藏0
CSS3结合fontawesome字体实现自定义单选框复选框效果

摘要：经常能看到别人做前端的时候，实现一些漂亮的复选框或单选框按钮，由于现在项目原因，很多单选框和复选框看起来很不好看，于是，心血来潮打算自己实现了一遍。经常能看到别人做前端的时候，实现一些漂亮的复选框或单选框按钮，由于现在项目原因，很多单选框和复选框看起来很不好看，于是，心血来潮打算自己实现了一遍。一、首先上css代码：其中，说明我以注释的形式写到里面；关于z-index我是基于...

hover_lew 2019-08-20 12:35 评论0 收藏0
一套基于vue2.0高质量的UI框架，前期开发中

摘要：使用属性时选中的值为的值默认值属性类型说明组合中的所有全部禁用默认值属性类型说明组合中所有的尺寸默认值属性类型说明类似这样的数组，其中指定当前项是否选中，为当前项的文字描述默认值组件组件组件组件组件组件组件组件写在前边自己在业余时间开发的一套基于vue的UI框架，初衷是在平时的开发过程中，发现有很多业务利用现有的UI框架实现起来比较麻烦，另外自己也希望可以写一套可以尽量多的满足业务...

explorer_ddf 2019-08-26 14:06 评论0 收藏0