setup

x_admin_app/components/verify/verify.vue

@@ -27,7 +27,7 @@
             :explain="explain"
             :imgSize="imgSize"
             :blockSize="blockSize"
-            :barSize="barSize"
+   
             ref="VerifySlideInstance"
             @success="success"
             @error="error"
@@ -45,7 +45,7 @@
             :explain="explain"
             :imgSize="imgSize"
             :blockSize="blockSize"
-            :barSize="barSize"
+        
             ref="VerifyPointsInstance"
             @success="success"
             @error="error"
@@ -55,129 +55,105 @@
     </view>
   </view>
 </template>
-<script>
+<script setup>
 /**
  * Verify 验证码组件
  * @description 分发验证码使用
  * */
+
+ import { ref, computed, onMounted } from 'vue';
 import VerifySlide from "./verifySlider/verifySlider.vue";
 import VerifyPoint from "./verifyPoint/verifyPoint.vue";
 
-export default {
+const props = defineProps({
-  name: "Vue2Verify",
+  captchaType: {
-  components: {
+    type: String,
-    VerifySlide,
+    required: true
-    VerifyPoint,
   },
-  props: {
+  figure: Number,
-    captchaType: {
+  arith: Number,
-      type: String,
+  mode: {
-      required: true,
+    type: String,
-    },
+    default: 'pop'
-    figure: {
-      type: Number,
-    },
-    arith: {
-      type: Number,
-    },
-    mode: {
-      type: String,
-      default: "pop",
-    },
-    vSpace: {
-      type: Number,
-      default: 5,
-    },
-    explain: {
-      type: String,
-      default: "向右滑动完成验证",
-    },
-    imgSize: {
-      type: Object,
-      default() {
-        return {
-          width: "310px",
-          height: "155px",
-        };
-      },
-    },
-    blockSize: {
-      type: Object,
-      default() {
-        return {
-          width: "50px",
-          height: "50px",
-        };
-      },
-    },
-    barSize: {
-      type: Object,
-    },
   },
-  data() {
+  vSpace: {
-    return {
+    type: Number,
-      // showBox:true,
+    default: 5
-      clickShow: false,
-    };
   },
-  computed: {
+  explain: {
-    showBox() {
+    type: String,
-      if (this.mode == "pop") {
+    default: '向右滑动完成验证'
-        return this.clickShow;
+  },
-      } else {
+  imgSize: {
-        return true;
+    type: Object,
-      }
+    default: () => ({
-    },
+      width: 310,
-    // 内部类型
+      height: 155
-    verifyType() {
+    })
-      if (this.captchaType == "blockPuzzle") {
+  },
-        return "2";
+  blockSize: {
-      }
+    type: Object,
-      return "1";
+    default: () => ({
-    },
+      width: 50,
-    // 所用组件类型
+      height: 50
-    componentType() {
+    })
-      if (this.captchaType == "blockPuzzle") {
-        return "VerifySlide";
-      } else {
-        return "VerifyPoints";
-      }
-    },
   },
 
-  mounted() {},
+});
-  methods: {
-    success(e) {
-      this.$emit("success", e);
 
-      if (this.mode == "pop") {
+const emit = defineEmits(['success', 'error']);
-        this.clickShow = false;
+
-      }
+const clickShow = ref(false);
-    },
+const showBox = computed(() => {
-    error() {
+  return props.mode === 'pop' ? clickShow.value : true;
-      this.$emit("error");
+});
-    },
+
-    /**
+const verifyType = computed(() => {
-     * refresh
+  return props.captchaType === 'blockPuzzle' ? '2' : '1';
-     * @description 刷新
+});
-     * */
+
-    refresh() {
+const componentType = computed(() => {
-      if (this.captchaType == "blockPuzzle") {
+  return props.captchaType === 'blockPuzzle' ? 'VerifySlide' : 'VerifyPoints';
-        this.$refs.VerifySlideInstance?.refresh?.();
+});
-      } else {
+
-        this.$refs.VerifyPointsInstance?.refresh?.();
+const VerifySlideInstance = ref(null);
-      }
+const VerifyPointsInstance = ref(null);
-    },
+
-    show() {
+const success = (e) => {
-      if (this.mode == "pop") {
+  emit('success', e);
-        this.clickShow = true;
+  if (props.mode === 'pop') {
-        // this.refresh()
+    clickShow.value = false;
-      }
+  }
-    },
-  },
 };
+
+const error = () => {
+  emit('error');
+};
+
+const refresh = () => {
+  if (props.captchaType === 'blockPuzzle') {
+    VerifySlideInstance.value.refresh();
+  } else {
+    VerifyPointsInstance.value.refresh();
+  }
+};
+
+const show = () => {
+  if (props.mode === 'pop') {
+    clickShow.value = true;
+    // refresh();
+  }
+};
+defineExpose({
+  refresh,
+  show
+})
+onMounted(() => {
+  // 组件挂载后执行的逻辑
+});
+
 </script>
-<style>
+<style scoped>
 .verifybox {
   position: relative;
   box-sizing: border-box;