快捷導(dǎo)航

vue中checkbox如何修改為圓形樣式

更新時間：2022年12月02日 14:38:30 作者：cc25485697

這篇文章主要介紹了vue中checkbox如何修改為圓形樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

checkbox修改為圓形樣式

有些時候我們需要對checkbox進(jìn)行樣式修改，例如改為圓圈：

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;
}
/*直接用圖片代替選中的樣子，如果不需要，可設(shè)置背景色*/
.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;
	}
}

官網(wǎng)圖