基于 Web Components + lit 实现
# 选择一个你喜欢的包管理器
# NPM
$ npm install @bluesyoung/beginner-guid --save
# Yarn
$ yarn add @bluesyoung/beginner-guid
# pnpm
$ pnpm add @bluesyoung/beginner-guid
<script setup lang="ts">
import { YoungImgSlider } from '@bluesyoung/slide-verify';
const slider = new YoungImgSlider(() => {
console.log('验证通过!')
});
</script>
<template>
<div>
<button @click="slider.show()">开始</button>
</div>
</template>
<!-- 国内推荐使用 jsdelivr -->
<script src="//cdn.jsdelivr.net/npm/@bluesyoung/slide-verify"></script>
<!-- or -->
<script src="//unpkg.com/@bluesyoung/slide-verify"></script>
<script>
const { YoungImgSlider } = window.YoungSlideVerify;
const slide = new YoungBeginnerGuidController();
slide.show();
</script>
node: 16.13.1
pnpm: 7.1.9