vue switch函数,
这篇文章介绍了vue。j实现开关（开关)组件的实例代码，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
最近开发组件的时候，自定义开发了开关（开关)组件，现将代码整理如下，方便日后复用。
拨动开关。某视频剪辑软件
模板
label role= checkbox :class=[ switch ，{ toggled }]
输入类型=复选框
class=开关输入
@change=toggle/
div class=交换机核心
:style= {背景色：已切换？已检查颜色：已检查颜色}
div class=开关按钮
:style= { transition:` transform $ { speed } ms `，
变换：切换？null: `translate3d(32px，0px，0px)`}
/div
/div
span class= switch-label label-right
v-if=toggled
v-html=已检查标签
/span
span class=开关-标签标签-左
v-html=labelUnchecked v-else
/span
/标签
/模板
脚本
导出默认值{
名称：切换开关，
data () {
返回{
切换：这个值，
检查颜色：“# 25b9e 9”，
颜色未选中：“# db 572 e”，
已检查标签: 开，
已检查的标签: 关
}
},
道具：{
值：{
类型：布尔型，
默认值：真
},
速度：{
类型：数量，
默认值：100
}
},
方法：{
切换（事件){
this.toggled=！这。切换
这个$emit(change ，事件)
}
}
}
/脚本
样式lang=scss 范围。开关{
显示：内嵌-块；
位置：相对；
溢出：隐藏；
垂直对齐：居中；
用户选择：无；
字体大小：10px
光标：指针；开关-输入{
显示：无；
}。开关-标签{
位置：绝对；
top:0；
字体粗细：600;
颜色：白色；
z指数：2;标签-左侧{
左：10px
行高：20px
border-top-left-radius:2px；
border-bottom-left-radius:2px；
}。标签-右侧{
右：10px
行高：20px
border-top-right-radius:2px；
border-bottom-right-radius:2px；
}
}。交换核心{
显示：块；
位置：相对；
框大小：边框-框；
大纲：0;
边距：0;
过渡：边框颜色。3s，背景颜色。3s；
用户选择：无；
宽度：64px
高度：20px
边框-半径：4px
行高：20px。开关按钮{
宽度：32px
高度：20px
显示：块；
位置：绝对；
溢出：隐藏；
top:0；
左：0;
z指数：3;
transform: translate3d(0，0，0)；
背景色：# ecf0f5
}
}
}
/风格
App.vue
模板
div id=应用程序
div class=left
拨动开关/拨动开关
/div
div class=main
路由器视图/路由器视图
/div
/div
/模板
脚本
从" @/组件/拨动开关"导入拨动开关
导出默认值{
名称："应用程序",
组件：{
拨动开关
}
}
/脚本
风格
#app {
字体系列：微软雅黑，‘Avenir’，Helvetica，Arial，无衬线；
-WebKit-字体-平滑：抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：左对齐；
颜色：# 2c3e50
身高：100%;
}。左侧{
边距：50px 200px
}。主要{
浮动：左；
宽度：95%;
背景色：# EFF2F7
身高：100%;
溢出：自动；
}
/风格
到此这篇关于vue。j实现开关（开关)组件的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。