Vue实现Switch组件——通过vue.use()注册

//加载动画@keyframesrotate{from{transform:rotate(0deg);}到{变换：旋转（360deg）；}}//switchstyle.sun-switch{position:relative;显示：内联块；框大小：内容框；宽度：2em；高度：1em；字体大小：30px；背景色：#fff；border:1pxsolidrgba(0,0,0,0.1);边界半径：1em；游标：指针；过渡：背景色0.3s；}//内圈按钮style.sun-switch-node{display:flex;证明内容：居中；对齐项目：居中；位置：绝对；顶部：0；左：0；z-索引：1；宽度：1em；高度：1em；背景色：#fff；边界半径：100%；框阴影：03px1px0rgba(0,0,0,0.05),02px2px0rgba(0,0,0,0.1),03px3px0rgba(0,0,0,0.05);过渡：变换0.3秒立方贝塞尔曲线（0.3、1.05、0.4、1.05），-webkit变换0.3秒立方贝塞尔曲线（0.3、1.05、0.4、1.05）；.sun-icon-loading{动画：旋转2s无限线性；字体大小：0.6em；}}//选中style.sun-switch-on{background-color:#1989fa;.sun-switch-node{转换：translateX(1em);.sun-icon-loading{动画：旋转2s无限线性；颜色：#1989fa；}}}.sun-switch-disabled{光标：不允许；不透明度：0.5；}组件封装代码components/switch/switch.vue//加载动画@keyframesrotate{from{transform:rotate(0deg);}到{变换：旋转（360deg）；}}//switchstyle.sun-switch{position:relative;显示：内联块；框大小：内容框；宽度：2em；高度：1em；字体大小：30px；背景色：#fff；border:1pxsolidrgba(0,0,0,0.1);边界半径：1em；游标：指针；过渡：背景色0.3s；}//内圈按钮style.sun-switch-node{display:flex;证明内容：居中；对齐项目：居中；位置：绝对；顶部：0；左：0；z-索引：1；宽度：1em；高度：1em；背景色：#fff；边界半径：100%；框阴影：03px1px0rgba(0,0,0,0.05),02px2px0rgba(0,0,0,0.1),03px3px0rgba(0,0,0,0.05);过渡：变换0.3秒立方贝塞尔曲线（0.3、1.05、0.4、1.05），-webkit变换0.3秒立方贝塞尔曲线（0.3、1.05、0.4、1.05）；.sun-icon-loading{动画：旋转2s无限线性；字体大小：0.6em；}}//选中style.sun-switch-on{background-color:#1989fa;.sun-switch-node{转换：translateX(1em);.sun-icon-loading{动画：旋转2s无限线性；颜色：#1989fa；}}}.sun-switch-disabled{光标：不允许；不透明度：0.5；}注册组件components/index.js/*该方法主要是实现vue.use(注册方法)*///先导入Switch组件importSwitchfrom'./switch/switch.vue'//创建一个install方法接收一个Vue作为参数constinstall=function(Vue){/*使用Vue注册名为Switch的组件组件nameattribute*/Vue.component(Switch.name,Switch)}/*默认导出一个对象，这个对象中必须有install方法。使用vue.use(component)时，会调用这个install方法，传入Vue*/exportdefault{install,}在main.js中添加如下代码//importimportswitchfrom'./components/index'//注册Vue.use(switch)测试代码app.vue