写这个包的主要目的是为了使用vue-demi来写vue2和vue3的公用组件。简单说一下自己的开发感受吧。不没有想象中的那么顺利（可能是自己没有理解到位）； 使用vue-demi 里面目前来说只能vue2和vue3选择一种来进行测试，如果你想在同一个项目中对vue2和vue3来切换测试，我没有做到，会有些问题。比如： 我曾在项目中建立了一个examplev2和examplev3来进行项目测试，vue3正常启动，vue2就会启动不了。我使用的是yarn workspace来进行搭建的。所以全局只能有一个vue,vue2我就重命名了，重命名后的结果就是vue-template-complier 里面不能识别我的vue2. 所以自己就只能单独搭建项目来进行测试
希望有大佬可以做到在同一个项目中能够切换vue2和vue3的测试。目前我看到的线上的包，我fork下来看，人家的vue2也是有问题的。
npm i vue-login-slide-validator
yarn add vue-login-slide-validator
<template><div><button@click="getStatus">获取状态</button><button@click="reset">重置</button></div><div><slide-validator:key="keys"width="300px":slider-success-style="{backgroundColor: 'lightgreen'}":success-bg-color="'#ccc'"ref="sliderRef"></slide-validator></div></template><scriptsetup>importslideValidatorfrom"vue-login-slide-validator"import"vue-login-slide-validator/index.css"import{ref}from'vue'constsliderRef=ref(null);constkeys=ref(0);constgetStatus=()=>{console.log(sliderRef)alert(sliderRef.value.slideValidatorStatus)}constreset=()=>{keys.value=Date.now();}</script><style>div{line-height:50px;}</style>
npm i vue-login-slide-validator @vue/composition-api或者yarn add vue-login-slide-validator @vue/composition-api
<template><div><div><button@click="getStatus">获取状态</button><button@click="reset">重置</button></div><div><slide-validator:key="keys"width="300px":slider-success-style="{backgroundColor: 'lightgreen'}":success-bg-color="'#ccc'"ref="sliderRef"></slide-validator></div></div></template><script>importSlideValidatorfrom"vue-login-slide-validator"import"vue-login-slide-validator/index.css"import{ref}from"@vue/composition-api";exportdefault{name:'App',components:{ SlideValidator},setup(){constsliderRef=ref(null);constkeys=ref(0);constgetStatus=()=>{console.log(sliderRef)alert(sliderRef.value.slideValidatorStatus)}constreset=()=>{keys.value=Date.now();}return{ getStatus, reset, keys, sliderRef}}}</script>| 中文意思 | 属性名称 | 默认值 | 类型 |
|---|
| 一开始背景颜色 | backgroundColor | #abcdef | string |
| 成功的背景颜色 | successBgColor | 无 | string |
| 宽度 | width | 300px | string |
| 高度 | height | 50px | string |
| 初始内部文字 | innerText | 向右拖动滑块验证 | string |
| 成功后的滑块文字 | sliderSuccessInnerText | 验证成功 | string |
| 槽内样式 | innerTextStyle | 无 | StyleValue |
| 滑块一开始的样式 | sliderStyle | 无 | StyleValue |
| 滑块成功的样式 | sliderSuccessStyle | 无 | StyleValue |
| 获取滑块状态 | slideValidatorStatus | false | boolean |
源代码请查看https://github.com/cll123456/test-demi.git
