feat(组件): corrper与floating 组件整理

packages/components/basic/cropper/index.ts

@@ -1,5 +1,5 @@
+import { toRawType } from '@kankan-components/utils'
 import { mount } from '../../utils/componentHelper'
-import { toRawType } from '../../utils/index'
 import Cropper from './cropper.vue'
 
 Cropper.use = function use(app) {

packages/components/basic/cropper/src/cropper.ts

@@ -0,0 +1,42 @@
+import { buildProps } from '@kankan-components/utils'
+import type { ExtractPropTypes, PropType } from 'vue'
+import type cropper from './cropper.vue'
+
+export const cropperProps = buildProps({
+    fixedNumber: {
+        type: Array as PropType<number[]>,
+        default: () => [1, 1],
+    },
+    img: { type: String },
+    cb: {
+        type: Function as PropType<(target?: any, data?: any) => void>,
+    },
+    showSize: {
+        type: Boolean,
+        default: false,
+    },
+    noText: {
+        type: String,
+        default: '取消',
+    },
+    okText: {
+        type: String,
+        default: '确认',
+    },
+    title: {
+        type: String,
+        default: '裁剪',
+    },
+    longSize: {
+        type: String,
+        default: '长型',
+    },
+    squareSize: {
+        type: String,
+        default: '方型',
+    },
+})
+
+export type CropperProps = ExtractPropTypes<typeof cropperProps>
+
+export type CropperInstance = InstanceType<typeof cropper>

packages/components/basic/cropper/cropper.vue

@@ -21,6 +21,7 @@ import { computed, defineProps, nextTick, ref } from 'vue'
 import { VueCropper } from 'vue-cropper'
 import confirm from '@kankan-components/components/basic/dialog/src/confirm.vue'
 import 'vue-cropper/dist/index.css'
+import { cropperProps } from './cropper'
 // import { useI18n } from '@/i18n'
 // const { t } = useI18n({ useScope: 'global' })
 const sizeType = ref(1)
@@ -29,44 +30,44 @@ const layerWidth = 500
 defineOptions({
     name: 'UICropper',
 })
-
-const props = defineProps({
-    fixedNumber: {
-        type: Array,
-        default: () => [1, 1],
-    },
-    img: { type: String },
-    cb: {
-        type: Function,
-    },
-    showSize: {
-        type: Boolean,
-        default: false,
-    },
-    noText: {
-        type: String,
-        default: '取消',
-    },
-    okText: {
-        type: String,
-        default: '确认',
-    },
-    title: {
-        type: String,
-        default: '裁剪',
-    },
-    longSize: {
-        type: String,
-        default: '长型',
-    },
-    squareSize: {
-        type: String,
-        default: '方型',
-    },
-})
+const props = defineProps(cropperProps)
+// const props = defineProps({
+//     fixedNumber: {
+//         type: Array,
+//         default: () => [1, 1],
+//     },
+//     img: { type: String },
+//     cb: {
+//         type: Function,
+//     },
+//     showSize: {
+//         type: Boolean,
+//         default: false,
+//     },
+//     noText: {
+//         type: String,
+//         default: '取消',
+//     },
+//     okText: {
+//         type: String,
+//         default: '确认',
+//     },
+//     title: {
+//         type: String,
+//         default: '裁剪',
+//     },
+//     longSize: {
+//         type: String,
+//         default: '长型',
+//     },
+//     squareSize: {
+//         type: String,
+//         default: '方型',
+//     },
+// })
 const show = ref(true)
 // const fixedNumber = props.fixedNumber
-const getHeight = width => (fixedNumber[1] / fixedNumber[0]) * width
+const getHeight = (width: number) => (props.fixedNumber[1] / props.fixedNumber[0]) * width
 
 const option = {
     outputSize: 1,
@@ -88,7 +89,7 @@ const option = {
     maxImgSize: 400,
     // ...props,
 }
-const changSize = type => {
+const changSize = (type: number) => {
     if (sizeType.value != type) {
         sizeType.value = type
         show.value = false
@@ -117,7 +118,7 @@ const on = {
     },
 }
 
-const clickHandler = async status => {
+const clickHandler = async (status: string) => {
     if (status === 'ok') {
         const data = await Promise.all([new Promise(resolve => vmRef.value.getCropBlob(resolve)), new Promise(resolve => vmRef.value.getCropData(resolve))])
         if (props.showSize) {

packages/components/basic/floating/src/floating.ts

@@ -0,0 +1,28 @@
+import { buildProps, definePropType } from '@kankan-components/utils'
+import type { ExtractPropTypes, VNode } from 'vue'
+import type floating from './floating.vue'
+
+export const floatingProps = buildProps({
+    mount: {
+        type: definePropType<VNode>(Object),
+        default: document.body,
+    },
+    class: {
+        type: String,
+        default: '',
+    },
+    refer: {
+        type: Object,
+    },
+    dire: { type: String },
+    width: {
+        type: definePropType<number | string>([Number, String]),
+    },
+    height: {
+        type: definePropType<number | string>([Number, String]),
+    },
+})
+
+export type FloatingProps = ExtractPropTypes<typeof floatingProps>
+
+export type FloatingInstance = InstanceType<typeof floating>

packages/components/basic/floating/src/floating.vue

@@ -11,6 +11,7 @@
 import { computed, defineExpose, defineProps, onActivated, onUnmounted, reactive, watch } from 'vue'
 import { getPostionByTarget, getScrollParents } from '@kankan-components/utils'
 import { useZIndex } from '@kankan-components/hooks'
+import { floatingProps } from './floating'
 const { currentZIndex } = useZIndex()
 
 defineOptions({
@@ -29,17 +30,7 @@ const Vertical = {
 }
 const Divide = '-'
 
-const props = defineProps({
-    mount: {
-        require: true,
-        default: document.body,
-    },
-    class: { type: String },
-    refer: { type: Object },
-    dire: { type: String },
-    width: { type: [Number, String] },
-    height: { type: [Number, String] },
-})
+const props = defineProps(floatingProps)
 const emit = defineEmits(['leave', 'enter'])
 
 // 确定方向