初衷
写这个包的主要目的是为了使用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也是有问题的。
使用方式
vue3
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> <script setup> import slideValidator from "vue-login-slide-validator" import "vue-login-slide-validator/index.css" import { ref } from 'vue' const sliderRef = ref(null); const keys = ref(0); const getStatus = () => { console.log(sliderRef) alert(sliderRef.value.slideValidatorStatus) } const reset = () => { keys.value = Date.now(); } </script> <style> div{ line-height: 50px; } </style>
效果
vue2
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> import SlideValidator from "vue-login-slide-validator" import "vue-login-slide-validator/index.css" import { ref } from "@vue/composition-api"; export default { name: 'App', components: { SlideValidator }, setup() { const sliderRef = ref(null); const keys = ref(0); const getStatus = () => { console.log(sliderRef) alert(sliderRef.value.slideValidatorStatus) } const reset = () => { keys.value = Date.now(); } return { getStatus, reset, keys, sliderRef } } } </script>
api
| 中文意思 | 属性名称 | 默认值 | 类型 |
| 一开始背景颜色 | backgroundColor | #abcdef | string |
| 成功的背景颜色 | successBgColor | 无 | string |
| 宽度 | width | 300px | string |
| 高度 | height | 50px | string |
| 初始内部文字 | innerText | 向右拖动滑块验证 | string |
| 成功后的滑块文字 | sliderSuccessInnerText | 验证成功 | string |
| 槽内样式 | innerTextStyle | 无 | StyleValue |
| 滑块一开始的样式 | sliderStyle | 无 | StyleValue |
| 滑块成功的样式 | sliderSuccessStyle | 无 | StyleValue |
| 获取滑块状态 | slideValidatorStatus | false | boolean |
