Проверка слайдера плагина с открытым исходным кодом Vue

Vue.js
Проверка слайдера плагина с открытым исходным кодом Vue

предисловие

Привет, меня зовут Сикс Сикс. В предыдущем проекте использовался чужой компонент скользящей проверки, и это было немного сложно, благо я написал его сам. Поделитесь этим с вами сегодня. В настоящее время это только грубое первое издание, и могут быть недостатки во всех аспектах.Все усердно работают, чтобы высказать свое мнение и стремиться быть самым совершенным, ха-ха. Итак, первый раздел для обновления контента, пожалуйста, обратите внимание и поддержите.

демо

успех:

потерпеть неудачу:

Слишком много неудач:

инициализация:

содержание:

  • Обновить содержимое и версию
  • установка и использование
  • возникшие проблемы
  • Плагины с открытым исходным кодом и загрузка npm
  • Обновления в следующей версии
  • Суммировать

1. Обновите содержимое и версию:

номер версии:

 v- 0.0.1

Время обновления:

2020.7.28

обновить содержимое

实现了滑动验证功能。

2. Установка и использование:

Установить:

npm install huakuai-vue --save

main.js использует:

import huakuai from 'huakuai-vue'
Vue.use(huakuai)

Его можно использовать по всему миру, не нужно регистрироваться

<hua-kuai></hua-kuai>

Параметры события:

название события Типы описывать
verify мероприятие Судя по тому, пройдена ли скользящая проверка пользователя, успех является истинным, а трехкратный отказ - ложным.
refresh мероприятие Пользователю не удалось нажать кнопку инициализации три раза

Пример:

<template>
  <div class=''>
    <hua-kuai @verify='verify' @refresh='refresh'></hua-kuai>
  </div>
</template>
<script>
// import huakuai from './components/huakuai'
export default {
  // components:{
  //   huakuai
  // }
  methods:{
    verify(result){
      console.log(result) // result为true表示验证通过，false表示验证三次都失败了哦
    },
    refresh(){
      console.log('用户点击了初始化')
    }
  }
}
</script>
<style scoped>

</style>

3. Возникшие проблемы:

1. Задача получения значений координат

最开始一直使用的是offsetLeft来确定坐标及偏移量，但一直有bug存在，偏移量时不时为0，
最后使用clientx成功解决。

2. Щелчок по картинке вызовет эффект перетаскивания

在img标签加一个属性即可:ondragstart="return false;"

3. Дважды щелкните, чтобы выделить текст

document.onselectstart=()=> false

4. Принцип реализации на самом деле очень прост

一开始写这个的时候用的是canvas技术，各种计算坐标值，到最后设计的还很丑，
直到有一天发现是叠加两张照片就可以实现了，晕~，github里有一个canvas实现的版本，

Как открыть исходный код и загрузить в npm:

Портал:разработка плагина vue-loading + развертывание npm

4. Содержание обновления следующей версии

1.ui优化
2. 可以定制化移动图片
3.增加显示的模式
4.删除水印
5.兼容手机端

5. Резюме

下个版本应该趋向完美了，也是比较大的改动吧，大家多支持一下啦。
使用中遇到问题，及时留言，我会第一时间来解决的。
开源是我的爱好，六六会坚持下去的，给个关注呗~
Категории