vue实现开关,自定义vue组件分三个步骤

　　这篇文章主要为大家详细介绍了某视频剪辑软件自定义开关组件的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件自定义开关组件的具体代码，供大家参考，具体内容如下

　　开关。vue:

　　模板

　　div class=disLB

　　div class= switch disLB @ click= toggle switch :class=是打开的？打开":"。

　　span class= disB switch-circle :是否打开？于： /span

　　/div

　　/div

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　//isOpen: false

　　}

　　},

　　道具：[isOpen]，

　　方法：{

　　toggleSwitch() {

　　//子组件不能直接修改父组件的数据，要通过$emit

　　这个发出( changeSwitch )

　　}

　　}

　　}

　　/脚本

　　style lang=less 范围。开关{

　　位置：相对；

　　边框半径：20px

　　边框：1px固体# dfdfdf

　　宽度：45像素

　　高度：23px。开关-圆圈{

　　位置：绝对；

　　宽度：21px

　　身高：21px

　　背景色：# fff

　　边界半径：50%;

　　边框：1px固体# dfdfdf

　　box-shadow:0 1px 1px # CCC；

　　}。在{

　　右：0;

　　//background-color:# 64bd 63；

　　边框颜色：# 64bd63

　　transform:translate(X)；

　　过渡：变换0.5s，右0.5s

　　}

　　}。打开{

　　背景色：# 64bd63

　　}

　　/风格

　　在父组件中引入并传值使用：

　　模板

　　切换开关：iso pen=系统配置。enable _ email @ change switch= change switch v-model= system config。enable _ email /toggle-开关

　　/模板

　　脚本

　　从导入拨动开关././组件/开关。vue ；

　　导出默认值{

　　data() {

　　返回{}

　　},

　　组件：{

　　拨动开关

　　},

　　方法：{

　　changeSwitch() {

　　这个。系统配置。enable _ email=！这个。系统配置。启用_电子邮件；

　　}

　　}

　　}

　　效果图：

　　注：

　　父组件向子组件传值，可以直接通过：iso pen=系统配置。启用电子邮件传递数据，子组件通过支柱接收数据：道具：[isOpen]，

　　但子组件不能直接修改父组件的数据，可以通过$emit调用父组件的方法来修改父组件的数据，$emit的第一个参数要与父组件@后的名称保持一致。

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。