monoplasty / vue3-slide-verify

vue3 typescript slide verify
MIT License
60 stars 5 forks source link

vue版本3.0.0 没有使用ts,代码是如下,但是报错 #12

Open lvfeijian opened 10 months ago

lvfeijian commented 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>

Snipaste_2023-12-11_18-42-20

monoplasty commented 7 months ago

我没碰到这个警告,但是这个警告应该不影响项目运行吧?还不知道如何复现该问题