Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
lvfeijian opened this issue Dec 11, 2023 · 1 comment
Open

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

lvfeijian opened this issue Dec 11, 2023 · 1 comment

Comments

@lvfeijian
Copy link

lvfeijian commented Dec 11, 2023

<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
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants