Casilla de verificación personalizada del subprograma uni-app, cambio de estilo y forma

Mostrar representaciones

El estilo cuando se selecciona

El estilo cuando no se selecciona

El color se puede cambiar a voluntad, la forma es originalmente un cuadrado, pero se puede cambiar a un círculo, el siguiente es el código:

Prepárese con anticipación: escriba en la página app.vue

#ec6330 es el color de CheckBox, que usted mismo puede cambiar.

<style>
	/*每个页面公共css */
	/* //设置圆角 */
	checkbox.round .wx-checkbox-input,
	checkbox.round .uni-checkbox-input {
    
    
		border-radius: 100upx;
		border: 2px solid #ec6330;
	}

	/* //设置背景色 */
	checkbox.red[checked] .wx-checkbox-input,
	checkbox.red.checked .uni-checkbox-input {
    
    
		background-color: #ffffff !important;
		border-color: #ec6330 !important;
		color: #ec6330 !important;
	}

	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
    
    
		content: '\2022';
	}

	/* //元素使用的时候就是使用 round 和 red */
</style>

Cuando se usa el elemento, se usa redondo y rojo. Por ejemplo: <casilla de verificación ... clase="redonda roja" >

página en uso

html:

<checkbox-group @change="checkboxChange">
	<view class="uni-list-cell">
		<label>
			<checkbox style="transform: scale(0.9)" class="round red"></checkbox>
		</label>
		<view>登录即代表同意《隐私政策》《用户协议》</view>
	</view>
</checkbox-group>

JavaScript:

checkboxChange: function(e) {
    
     //监听勾选框变化			
	if (e.target.value.length > 0) {
    
    
		this.checked = true  //checked在data中定义
	} else {
    
    
		this.checked = false
	}
},