vue中checkbox如何修改为圆形样式

 更新时间:2022年12月02日 14:38:30   作者:cc25485697  
这篇文章主要介绍了vue中checkbox如何修改为圆形样式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

checkbox修改为圆形样式

有些时候我们需要对checkbox进行样式修改,例如改为圆圈:

checkbox代码 

<input type="checkbox" class="layers-item-selector" :value="item.name" v-model="value" />

css样式

.layers-item-selector {
  outline: none;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  border: solid 0px #cccccc;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance: none;
  -webkit-user-select: none;
  user-select: none;
}
/*直接用图片代替选中的样子,如果不需要,可设置背景色*/
.layers-item-selector:checked {
  /* background: #0242c6; */
  background: url("../../assets/images/checkbox_checked.png") no-repeat;
  background-size: 100% 100%;
}

更改AntD中CheckBox样式

代码

index.js文件

import React from 'react';
import { Checkbox } from 'antd';
import './index.less';

class demo extends React.PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			checkBoxValue: [],
			checkBoxOptions: [
				// { label: '周', value: 'week', disabled: true },
				// { label: '月', value: 'month', disabled: true },
				{ label: '周', value: 'week' },
				{ label: '月', value: 'month' },
				{ label: '季', value: 'quarter' },
				{ label: '半年', value: 'halfYear' },
				{ label: '年', value: 'year' }
			],
		}
	}
	
	onCheckChange = (value) => {
		this.setState({
			checkBoxValue: value
		});
	}
		
	render() {
		const {
			checkBoxValue,
			checkBoxOptions,
		} = this.state;
		return (<>
			<div className='head-area-select'>
				<span className='head-area-title'>时间维度:</span>
				<Checkbox.Group
					options={checkBoxOptions}
					defaultValue={['week','month','quarter']}
					onChange={this.onCheckChange}
					value={checkBoxValue}
				/>
			</div>
		</>)
	}
}
export default demo;

index.less文件

.head-area {
	display: flex;
	align-items: center;
	margin: 0 0 10px 0;
	&-select {
		margin-right: 30px;
	}
	.ant-checkbox-group {
		grid-template-columns: repeat(3, 1fr);
	}
	.ant-checkbox-group-item {
		color: #3C5378;
	}
	.ant-checkbox-inner {
		width: 20px;
		height: 20px;
	}
	.ant-checkbox-checked .ant-checkbox-inner::after {
		top: 50%;
		left: 27%;
	}
	&-title {
		color: #3C5378;
	}
}

官网图

改后图

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中el-table实现可拖拽移动列和动态排序字段

    vue中el-table实现可拖拽移动列和动态排序字段

    最近公司需要做个项目,需要拖拽表格和自定义表格字段,本文主要介绍了vue中el-table实现可拖拽移动列和动态排序字段,具有一定吃参考价值,感兴趣的可以了解一下
    2023-12-12
  • vue中父子组件的参数传递和应用示例

    vue中父子组件的参数传递和应用示例

    这篇文章主要介绍了vue中父子组件的参数传递和应用示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • vue实现打印功能的示例代码

    vue实现打印功能的示例代码

    这篇文章主要为大家详细介绍了如何通过vue实现打印功能,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • 详解实现vue的数据响应式原理

    详解实现vue的数据响应式原理

    这篇文章主要介绍了详解实现vue的数据响应式原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • VueJs里利用CryptoJs实现加密及解密的方法示例

    VueJs里利用CryptoJs实现加密及解密的方法示例

    这篇文章主要介绍了VueJs里利用CryptoJs实现加密及解密的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • Vue router 路由守卫详解

    Vue router 路由守卫详解

    这篇文章主要为大家介绍了Vue router 路由守卫,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • VUE element上传动态设置action路径和参数的坑及解决

    VUE element上传动态设置action路径和参数的坑及解决

    这篇文章主要介绍了VUE element上传动态设置action路径和参数的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue动态组件实例解析

    Vue动态组件实例解析

    让多个组件使用同一个挂载点,并动态切换,这就是动态组件。这篇文章主要介绍了Vue动态组件 ,需要的朋友可以参考下
    2017-08-08
  • ElementUI级联选择器实现同一父级下最多只能选中一个子级

    ElementUI级联选择器实现同一父级下最多只能选中一个子级

    本文主要介绍了ElementUI级联选择器实现同一父级下最多只能选中一个子级,同一父级下的子节点单选,又可以选择多个不同父级下的节点,具有一定参考价值,感兴趣的可以了解一下
    2023-10-10
  • 详解基于vue的服务端渲染框架NUXT

    详解基于vue的服务端渲染框架NUXT

    这篇文章主要介绍了Nuxt之vue服务端渲染,NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06

最新评论