Open lvfeijian opened 10 months ago
<template> <div> <h1>Vue3 + Typescript Slide Verify</h1> <slide-verify ref="block" :imgs="imgs" :slider-text="text" :accuracy="accuracy" @again="onAgain" @success="onSuccess" @fail="onFail" @refresh="onRefresh" ></slide-verify> <button class="btn" @click="handleClick">在父组件可以点我刷新哦</button> <div>{{ msg }}</div> </div> </template> <script> import { defineComponent, ref } from "vue"; import SlideVerify from "vue3-slide-verify"; export default defineComponent({ components: { SlideVerify }, setup() { const msg = ref(""); const block = ref(); const onAgain = () => { msg.value = "检测到非人为操作的哦! try again"; // 刷新 block.value?.refresh(); }; const onSuccess = (times) => { msg.value = `login success, 耗时${(times / 1000).toFixed(1)}s`; }; const onFail = () => { msg.value = "验证不通过"; }; const onRefresh = () => { msg.value = "滑块重置了"; }; const handleClick = () => { // 刷新 block.value?.refresh(); msg.value = ""; }; let imgs = [ "https://revolutionary-cultural-relics.oss-cn-shenzhen.aliyuncs.com/mp/static/carouselFigure/3-%E5%B9%BF%E5%B7%9E%E5%85%AC%E7%A4%BE%E6%97%A7%E5%9D%80.JPG", "https://revolutionary-cultural-relics.oss-cn-shenzhen.aliyuncs.com/mp/static/carouselFigure/5-%E5%B9%BF%E5%B7%9E%E5%A4%A7%E5%85%83%E5%B8%85%E5%BA%9C%E6%97%A7%E5%9D%80.JPG" ] return { block, msg, text: "向右滑动->", accuracy: 1, imgs, onAgain, onSuccess, onFail, onRefresh, handleClick, }; }, }); </script> <style lang="scss" scoped> .btn { margin-top: 20px; outline: 0; border: none; padding: 8px 15px; border-radius: 5px; color: #fff; background-color: #1890ff; cursor: pointer; } .btn:active { box-shadow: 1px 5px 0 rgba(0, 0, 0, 0.1) inset; } </style>
我没碰到这个警告,但是这个警告应该不影响项目运行吧?还不知道如何复现该问题