xinkeaboard/xinkeaboard-web/components/SliderVerify.vue

<template>
  <div class="verify-content">
    <slide-verify
      ref="block"
      :slider-text="sliderText"
      @again="onAgain"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import SlideVerify from "vue3-slide-verify";
import type { SlideVerifyInstance } from "vue3-slide-verify";
import { getCurLanguage } from "@/composables/common.js";
import "vue3-slide-verify/dist/style.css";


const block = ref<SlideVerifyInstance>();
const L = getCurLanguage();


const sliderText = computed(() => L["向右滑动"])

const onSuccess = () => {
  // TODO: 根据权限跳转
};

const onFail = () => {};

const onRefresh = () => {
  block.value?.refresh();
};

const onAgain = () => {
  // 刷新
  block.value?.refresh();
};
</script>
<style lang="scss" scoped>
.verify-content {
  position: relative;
  overflow: hidden;
  height: 100%;

  .slide-verify {
    // width: 100% !important;
  }
}
</style>