vue.js实现开关(switch)组件实例代码 vue.js实现开关(switch)组件实例代

最近开发组件的时候，自定义开发了开关(switch)组件，现将代码整理如下，方便日后复用。

文章图片

toggle-switch.vue

.switch {display: inline-block; position: relative; overflow: hidden; vertical-align: middle; user-select: none; font-size: 10px; cursor: pointer; .switch-input {display: none; } .switch-label {position: absolute; top: 0; font-weight: 600; color: white; z-index: 2; &.label-left {left: 10px; line-height: 20px; border-top-left-radius: 2px; border-bottom-left-radius:2px; } &.label-right {right: 10px; line-height: 20px; border-top-right-radius: 2px; border-bottom-right-radius:2px; }} .switch-core {display: block; position: relative; box-sizing: border-box; outline: 0; margin: 0; transition: border-color .3s, background-color .3s; user-select: none; width: 64px; height: 20px; border-radius: 4px; line-height: 20px; .switch-button {width: 32px; height: 20px; display: block; position: absolute; overflow: hidden; top: 0; left: 0; z-index: 3; transform: translate3d(0, 0, 0); background-color: #ecf0f5; }}}

App.vue

#app {font-family: 'Microsoft YaHei','Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: left; color: #2c3e50; height:100%; } .left {margin: 50px 200px; }.main{float:left; width:95%; background-color: #EFF2F7; height:100%; overflow: auto; }

【vue.js实现开关(switch)组件实例代码】到此这篇关于vue.js实现开关(switch)组件的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。