| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| 31ff05 | 2 | <PageWrapper title="拖动校验示例"> |
| 2f6253 | 3 | <div class="flex justify-center p-4 items-center bg-gray-700"> |
| 陈 | 4 | <BasicDragVerify ref="el1" @success="handleSuccess" /> |
| 6b3195 | 5 | <a-button type="primary" class="ml-2" @click="handleBtnClick(el1)">还原</a-button> |
| 2f6253 | 6 | </div> |
| 陈 | 7 | |
| 8 | <div class="flex justify-center p-4 items-center bg-gray-700"> | |
| 9 | <BasicDragVerify ref="el2" @success="handleSuccess" circle /> | |
| 6b3195 | 10 | <a-button type="primary" class="ml-2" @click="handleBtnClick(el2)">还原</a-button> |
| 2f6253 | 11 | </div> |
| 陈 | 12 | |
| 13 | <div class="flex justify-center p-4 items-center bg-gray-700"> | |
| 14 | <BasicDragVerify | |
| 15 | ref="el3" | |
| 16 | @success="handleSuccess" | |
| 17 | text="拖动以进行校验" | |
| 18 | successText="校验成功" | |
| 19 | :barStyle="{ | |
| 20 | background: '#018ffb', | |
| 21 | }" | |
| 22 | /> | |
| 6b3195 | 23 | <a-button type="primary" class="ml-2" @click="handleBtnClick(el3)">还原</a-button> |
| 2f6253 | 24 | </div> |
| 陈 | 25 | |
| 26 | <div class="flex justify-center p-4 items-center bg-gray-700"> | |
| 27 | <BasicDragVerify ref="el4" @success="handleSuccess"> | |
| faf3f4 | 28 | <template #actionIcon="isPassing"> |
| 2f6253 | 29 | <BugOutlined v-if="isPassing" /> |
| 陈 | 30 | <RightOutlined v-else /> |
| 31 | </template> | |
| 32 | </BasicDragVerify> | |
| 6b3195 | 33 | <a-button type="primary" class="ml-2" @click="handleBtnClick(el4)">还原</a-button> |
| 2f6253 | 34 | </div> |
| 陈 | 35 | |
| 36 | <div class="flex justify-center p-4 items-center bg-gray-700"> | |
| 37 | <BasicDragVerify ref="el5" @success="handleSuccess"> | |
| faf3f4 | 38 | <template #text="isPassing"> |
| 2f6253 | 39 | <div v-if="isPassing"> |
| 陈 | 40 | <BugOutlined /> |
| 41 | 成功 | |
| 42 | </div> | |
| 43 | <div v-else> | |
| 44 | 拖动 | |
| 45 | <RightOutlined /> | |
| 46 | </div> | |
| 47 | </template> | |
| 48 | </BasicDragVerify> | |
| 6b3195 | 49 | <a-button type="primary" class="ml-2" @click="handleBtnClick(el5)">还原</a-button> |
| 2f6253 | 50 | </div> |
| 31ff05 | 51 | </PageWrapper> |
| 2f6253 | 52 | </template> |
| 陈 | 53 | <script lang="ts"> |
| 54 | import { defineComponent, ref } from 'vue'; | |
| 55 | import { BasicDragVerify, DragVerifyActionType, PassingData } from '/@/components/Verify/index'; | |
| 56 | import { useMessage } from '/@/hooks/web/useMessage'; | |
| 57 | import { BugOutlined, RightOutlined } from '@ant-design/icons-vue'; | |
| 31ff05 | 58 | import { PageWrapper } from '/@/components/Page'; |
| V | 59 | |
| 2f6253 | 60 | export default defineComponent({ |
| 31ff05 | 61 | components: { BasicDragVerify, BugOutlined, RightOutlined, PageWrapper }, |
| 2f6253 | 62 | setup() { |
| 陈 | 63 | const { createMessage } = useMessage(); |
| 9bb751 | 64 | const el1 = ref<Nullable<DragVerifyActionType>>(null); |
| V | 65 | const el2 = ref<Nullable<DragVerifyActionType>>(null); |
| 66 | const el3 = ref<Nullable<DragVerifyActionType>>(null); | |
| 67 | const el4 = ref<Nullable<DragVerifyActionType>>(null); | |
| 68 | const el5 = ref<Nullable<DragVerifyActionType>>(null); | |
| 2f6253 | 69 | |
| 陈 | 70 | function handleSuccess(data: PassingData) { |
| 71 | const { time } = data; | |
| 72 | createMessage.success(`校验成功,耗时${time}秒`); | |
| 73 | } | |
| 74 | ||
| 9bb751 | 75 | function handleBtnClick(elRef: Nullable<DragVerifyActionType>) { |
| 2f6253 | 76 | if (!elRef) { |
| 陈 | 77 | return; |
| 78 | } | |
| 9bb751 | 79 | elRef.resume(); |
| 2f6253 | 80 | } |
| 陈 | 81 | return { |
| 82 | handleSuccess, | |
| 83 | el1, | |
| 84 | el2, | |
| 85 | el3, | |
| 86 | el4, | |
| 87 | el5, | |
| 88 | handleBtnClick, | |
| 89 | }; | |
| 90 | }, | |
| 91 | }); | |
| 92 | </script> | |
| 03b602 | 93 | <style lang="less" scoped> |
| N | 94 | .bg-gray-700 { |
| 95 | background: #4a5568; | |
| 96 | } | |
| 97 | </style> | |
