vue switch 开关可以自定义样式

最新推荐文章于 2023-04-14 17:19:15 发布

who_become_gods

最新推荐文章于 2023-04-14 17:19:15 发布

阅读量825

点赞数

本文链接：https://blog.csdn.net/who_become_gods/article/details/104535210

版权

本文介绍了如何在Vue中使用switch开关组件，并提供了一个实例，展示如何通过template HTML、script逻辑和style样式来自定义开关的样式，从而实现个性化设计。

摘要由CSDN通过智能技术生成

效果如下
在这里插入图片描述
下面是template html

<template>
	<div>
	    <label role="checkbox" :class="['switch', { value }]">
	      <input type="checkbox" class="switch-input" @change="toggle" />
	      <div class="switch-core" :style="{ backgroundColor: value ? '#11CED2' : '#E6EAF1' }">
	        <div
	          class="switch-button"
	          :style="{
   
	            transition: `transform 100ms`,
	            transform: value ? `translate3d(32px, 0px, 0px)`<

最低0.47元/天解锁文章

who_become_gods

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue switch 开关可以自定义样式

效果如下下面是template html<template> <div> <label role="checkbox" :class="['switch', { value }]"> <input type="checkbox" class="switch-input" @change="toggle" /> ...
复制链接

扫一扫