优化自定义指令

.eslintrc.json

@@ -22,10 +22,10 @@
     "jsx-quotes": 0, // 强制使用单引号
     "max-len": 0, // 强制一行的最大长度
     "semi": [ 2, "never" ], // 禁止使用分号
-    "no-unused-vars": 2,
+    "no-unused-vars": 0,
     "no-unneeded-ternary": 2, // 禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
     "no-unreachable": 2, // 不能有无法执行的代码
-    "no-unused-expressions": 2, // 禁止无用的表达式
+    "no-unused-expressions": 1, // 禁止无用的表达式
     "linebreak-style": [ 0, "error", "windows" ],
     "import/no-unresolved": 0,
     "import/extensions": 0,
@@ -55,6 +55,10 @@
     "no-sparse-arrays": 0,
     "no-nested-ternary": 0,
     "no-continue": 0,
-    "complexity": [ 2, 9 ]
+    "complexity": [ 2, 9 ],
+    "no-return-await": 0,
+    "max-classes-per-file": 0,
+    "consistent-return" : 0,
+    "no-shadow": 0
   }
 }

README.md

@@ -29,7 +29,7 @@
 |           - `App.vue`           子模板
 |           - `main.ts`           子入口文件
 |   - `components`                全局组件
-|   - `utils`                     全局插件
+|   - `services`                  全局服务
 |   - `assets`                    全局静态文件
 ```
 ## 编写规范

src/pages/index/main.ts

@@ -3,7 +3,10 @@ import App from './App.vue'
 import { createPinia } from 'pinia'
 import naive from './assets/js/nativeUiPluginPublic'
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
-import '@/utils/rem'
+import '@/services/rem'
+import DirectiveService from '@/services/vue.directive.service'
+
+const directive = new DirectiveService()
 // 动态路由
 const routes = Object.values(import.meta.glob('./views/*/route.ts', { eager: true, import: 'default' })) as unknown as RouteRecordRaw[]
 routes.push({ path: '/:path(.*)', redirect: '/' })
@@ -21,4 +24,12 @@ const router = createRouter({
 app.use(store)
   .use(naive)
   .use(router)
+  .directive('longPress', directive.longpress)
   .mount('#app')
+router.isReady().then(() => {
+  app.config.errorHandler = (err: any) => {
+    if (err.reason === 401) {
+      router.replace('/')
+    }
+  }
+})

src/pages/index/views/home/index.vue

@@ -1,17 +1,23 @@
 <script setup lang="ts">
-import { POST } from '@/utils/request'
+import NetService from '@/services/net.service'
 
-function change() {
-  POST('/sys/login', { userAccount: 1, userPwd: 'c4ca4238a0b923820dcc509a6f75849b' })
+const netService = new NetService()
+function sendAudio() {
+  console.log(123)
+
+  // netService.post('/sys/login', { userAccount: 1, userPwd: 'c4ca4238a0b923820dcc509a6f75849b' })
 }
 </script>
 <template>
-  <div>
-    <n-button
-      type="primary"
-      @click="change"
-    >
+  <div style="position: relative;">
+    <!-- <n-button type="primary">
       我不是全局组件
-    </n-button>
+    </n-button> -->
+    <div
+      v-longPress="sendAudio"
+      style="position: absolute;top: 0;z-index: 2;"
+    >
+      test
+    </div>
   </div>
 </template>

src/services/fn.service.ts

@@ -20,7 +20,7 @@ export default class FnService extends Service {
             's+': date.getSeconds(),                 //秒 
             'q+': Math.floor((date.getMonth() + 3) / 3), //季度 
             'S': date.getMilliseconds()             //毫秒 
-        } as Any
+        } as any
         if (/(y+)/.test(fmt)) {
             fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
         }
@@ -93,9 +93,9 @@ export default class FnService extends Service {
      * @param interval 
      * @returns 
      */
-    debounce(fn: (...arg: Any[]) => Any, duration = 300) {
+    debounce(fn: (...arg: any[]) => any, duration = 300) {
         let timer = -1
-        return function (this: unknown, ...args: Any[]) {
+        return function (this: unknown, ...args: any[]) {
             if (timer > -1) {
                 clearTimeout(timer)
             }
@@ -112,9 +112,9 @@ export default class FnService extends Service {
      * @param interval 
      * @returns 
      */
-    throttle(fn: (...arg: Any[]) => Any, interval = 300) {
+    throttle(fn: (...arg: any[]) => any, interval = 300) {
         let lock = false
-        return function (this: unknown, ...args: Any[]) {
+        return function (this: unknown, ...args: any[]) {
             if (lock) return
             lock = true
             setTimeout(() => lock = false, interval)
@@ -129,7 +129,7 @@ export default class FnService extends Service {
      * @returns 
      */
     base64ImgtoFile(base64: string, filename = 'file') {
-        const arr = base64.split(',') as Any
+        const arr = base64.split(',') as any
         const mime = arr[0].match(/:(.*?);/)[1]
         const suffix = mime.split('/')[1]
         const bstr = atob(arr[1])
@@ -172,7 +172,7 @@ export default class FnService extends Service {
      * @param arr
      * @returns
      */
-    flatten: Any = (arr: Array<any>) => [].concat(...arr.map((x) => (Array.isArray(x) ? this.flatten(x) : x)))
+    flatten: any = (arr: Array<any>) => [].concat(...arr.map((x) => (Array.isArray(x) ? this.flatten(x) : x)))
 
     /**
      * 多字段匹配

src/services/request.service.ts → src/services/net.service.ts

@@ -1,21 +1,15 @@
 import { injectable, Service } from './service'
+import StoreService from './store.service'
+const storeService = new StoreService()
 const urls = import.meta.env.VITE_PROXY_URL
 /** api接口返回值类型 */
 declare type NetResult = {
   success: boolean,
-  data: Any,
+  data: any,
   msg: string,
   code: number
 }
 
-const NET_ERRORS = {
-  400: '请求格式错误',
-  401: '权限错误',
-  404: '接口未定义',
-  405: '请求方法无效',
-  500: '系统错误'
-} as Any
-
 /**
  * API网络请求服务
  */
@@ -26,8 +20,8 @@ export default class NetService extends Service {
    * @param url 接口地址
    * @param params 接口参数
    */
-  post(url: string, params: Any = {}, timeout = 6000): Promise<NetResult> {
-    const newToken = ''
+  post(url: string, params: any = {}, timeout = 6000): Promise<NetResult> {
+    const newToken = `${storeService.tokenInfo.type} ${storeService.tokenInfo.access_token}`
     return new Promise((resolve) => {
       const controller = new AbortController()
       const { signal } = controller
@@ -42,17 +36,8 @@ export default class NetService extends Service {
           Authorization: newToken
         },
         body: JSON.stringify(params)
-      }).then(res => {
-        if (res.status === 401) {
-          throw res.status
-        } else if (res.status === 404) {
-          // throw new Error(`接口'${url}'未定义`)
-          this.throw(`接口'${url}'未定义`, import.meta.url, 404)
-        }
-        return res.json()
-      }).then(res => {
+      }).then((res) => res.json()).then((res) => {
         if (res.code !== 200) {
-          // throw new Error(res.msg)
           this.throw(res.msg, import.meta.url, 404)
         }
         resolve({
@@ -61,20 +46,13 @@ export default class NetService extends Service {
           msg: res?.msg || null,
           code: res?.code || -1
         })
-      }).catch((err: Any) => {
-        if (err.code === 20) {
-          throw '网络请求超时'
-        }
-        if (err === 401) {
-          throw err
-        }
+      }).catch((err: any) => {
         resolve({
           success: false,
           data: null,
           msg: `接口 [${url}] 错误: ${err.message || err}`,
           code: -1
         })
-        throw err
       })
     })
   }
@@ -83,13 +61,13 @@ export default class NetService extends Service {
    * get请求api接口
    * @param url 接口地址
    */
-  get(url: string, params: Any = {}, timeout = 6000): Promise<NetResult> {
+  get(url: string, params: any = {}, timeout = 6000): Promise<NetResult> {
     let urlParams = ''
-    const newToken = ''
+    const newToken = `${storeService.tokenInfo.type} ${storeService.tokenInfo.access_token}`
     for (const key in params) {
       if (params[key]) {
         urlParams += (urlParams.includes('?') ? '&' : '?')
-        urlParams += key + '=' + params[key]
+        urlParams += `${key}=${params[key]}`
       }
     }
     return new Promise((resolve) => {
@@ -105,33 +83,18 @@ export default class NetService extends Service {
           'Content-Type': 'application/json',
           Authorization: newToken
         }
-      }).then(res => {
-        if (res.status !== 200) {
-          throw res.status
-        }
-        return res.json()
-      }).then(res => {
+      }).then((res) => res.json()).then((res) => {
         resolve({
           success: res?.success,
           data: res?.data || null,
           msg: res?.msg || null,
           code: res?.code || -1
         })
-      }).catch((err: Any) => {
-        if (err.code === 20) {
-          throw '网络请求超时'
-        }
-        let error = err?.message || err
-        if (typeof err === 'number') {
-          if (err === 401 || err === 404) {
-            throw err
-          }
-          error = NET_ERRORS[err]
-        }
+      }).catch((err: any) => {
         resolve({
           success: false,
           data: null,
-          msg: `接口 [${url.split('?')[0]}] 错误: ${error}`,
+          msg: `接口 [${url.split('?')[0]}] 错误: ${err?.message || err}`,
           code: -1
         })
       })
@@ -143,7 +106,7 @@ export default class NetService extends Service {
    * @param url 接口地址
    */
   del(url: string, timeout = 6000): Promise<NetResult> {
-    const newToken = ''
+    const newToken = `${storeService.tokenInfo.type} ${storeService.tokenInfo.access_token}`
     return new Promise((resolve) => {
       const controller = new AbortController()
       const { signal } = controller
@@ -157,33 +120,18 @@ export default class NetService extends Service {
           'Content-Type': 'application/json',
           Authorization: newToken
         }
-      }).then(res => {
-        if (res.status !== 200) {
-          throw res.status
-        }
-        return res.json()
-      }).then(res => {
+      }).then((res) => res.json()).then((res) => {
         resolve({
           success: res?.success,
           data: res?.data || null,
           msg: res?.msg || null,
           code: res?.code || -1
         })
-      }).catch((err: Any) => {
-        if (err.code === 20) {
-          throw '网络请求超时'
-        }
-        let error = err?.message
-        if (typeof err === 'number') {
-          if (err === 401 || err === 404) {
-            throw err
-          }
-          error = NET_ERRORS[err]
-        }
+      }).catch((err: any) => {
         resolve({
           success: false,
           data: null,
-          msg: `接口 [${url.split('?')[0]}] 错误: ${error}`,
+          msg: `接口 [${url.split('?')[0]}] 错误: ${err?.message || err}`,
           code: -1
         })
       })
@@ -195,8 +143,8 @@ export default class NetService extends Service {
    * @param url 接口地址
    * @param params 接口参数
    */
-  put(url: string, params: Any = {}, timeout = 6000): Promise<NetResult> {
-    const newToken = ''
+  put(url: string, params: any = {}, timeout = 6000): Promise<NetResult> {
+    const newToken = `${storeService.tokenInfo.type} ${storeService.tokenInfo.access_token}`
     return new Promise((resolve) => {
       const controller = new AbortController()
       const { signal } = controller
@@ -211,17 +159,8 @@ export default class NetService extends Service {
           Authorization: newToken
         },
         body: JSON.stringify(params)
-      }).then(res => {
-        if (res.status === 401) {
-          throw res.status
-        } else if (res.status === 404) {
-          // throw new Error(`接口'${url}'未定义`)
-          this.throw(`接口'${url}'未定义`, import.meta.url, 404)
-        }
-        return res.json()
-      }).then(res => {
+      }).then((res) => res.json()).then((res) => {
         if (res.code !== 200) {
-          // throw new Error(res.msg)
           this.throw(res.msg, import.meta.url, 404)
         }
         resolve({
@@ -230,32 +169,24 @@ export default class NetService extends Service {
           msg: res?.msg || null,
           code: res?.code || -1
         })
-      }).catch((err: Any) => {
-        if (err.code === 20) {
-          throw '网络请求超时'
-        }
-        if (err === 401) {
-          throw err
-        }
+      }).catch((err: any) => {
         resolve({
           success: false,
           data: null,
-          msg: `接口 [${url}] 错误: ${err.message}`,
+          msg: `接口 [${url}] 错误: ${err?.message || err}`,
           code: -1
         })
-        throw err
       })
     })
   }
 
-
   /**
    * upload上传文件接口
    * @param url 接口地址
    * @param params 接口参数
    */
-  upload(url: string, params: Any, timeout = 6000): Promise<NetResult> {
-    const newToken = ''
+  upload(url: string, params: any, timeout = 6000): Promise<NetResult> {
+    const newToken = `${storeService.tokenInfo.type} ${storeService.tokenInfo.access_token}`
     return new Promise((resolve) => {
       const controller = new AbortController()
       const { signal } = controller
@@ -268,17 +199,8 @@ export default class NetService extends Service {
         method: 'POST',
         headers: { Authorization: newToken },
         body: params
-      }).then(res => {
-        if (res.status === 401) {
-          throw res.status
-        } else if (res.status === 404) {
-          // throw new Error(`接口'${url}'未定义`)
-          this.throw(`接口'${url}'未定义`, import.meta.url, 404)
-        }
-        return res.json()
-      }).then(res => {
+      }).then((res) => res.json()).then((res) => {
         if (res.code !== 200) {
-          // throw new Error(res.msg)
           this.throw(res.msg, import.meta.url, 404)
         }
         resolve({
@@ -287,25 +209,17 @@ export default class NetService extends Service {
           msg: res?.msg || null,
           code: res?.code || -1
         })
-      }).catch((err: Any) => {
-        if (err.code === 20) {
-          throw '网络请求超时'
-        }
-        if (err === 401) {
-          throw err
-        }
+      }).catch((err: any) => {
         resolve({
           success: false,
           data: null,
-          msg: `接口 [${url}] 错误: ${err.message || err}`,
+          msg: `接口 [${url}] 错误: ${err?.message || err}`,
           code: -1
         })
-        throw err
       })
     })
   }
 
-
   /** token 续期 */
   async refresh() {
     await this.put('/upms/v3/auth/check_token')

src/services/service.ts

@@ -1,63 +1,64 @@
 export class ServiceError extends Error {
-    code?: number
-    origin?: string
-  
-    constructor (message: string, origin?: string, code?: number) {
-      super(message)
-      this.code = code
-      this.origin = origin
-      this.stack = `${this.message}\n${this.origin}\n${this.code || ''}`
-    }
-  
-    toString () {
-      return this.message
-    }
+  code?: number
+
+  origin?: string
+
+  constructor(message: string, origin?: string, code?: number) {
+    super(message)
+    this.code = code
+    this.origin = origin
+    this.stack = `${this.message}\n${this.origin}\n${this.code || ''}`
   }
-  
-  export class Service {
-    throw (message: string, origin?: string, code?: number) {
-      throw new ServiceError(message, origin, code)
-    }
+
+  toString() {
+    return this.message
   }
-  
-  export function injectable<T extends { new (..._args: Any[]): {} }> (Ctor: T) {
-    let instance!: Any
-    return new Proxy(Ctor, {
-      construct (t, args) {
-        if (!instance) {
-          instance = new Ctor(args)
-          // console.log('instance ' + Ctor.name)
-        }
-        return instance
-      }
-    })
+}
+
+export class Service {
+  throw(message: string, origin?: string, code?: number) {
+    throw new ServiceError(message, origin, code)
   }
-  const runnerMap: { [key: string]: ((_res: Any) => void)[] | undefined } = {}
-  /**
+}
+
+export function injectable<T extends { new(..._args: any[]): {} }> (Ctor: T) {
+  let instance!: any
+  return new Proxy(Ctor, {
+    construct(t, args) {
+      if (!instance) {
+        instance = new Ctor(args)
+        // console.log('instance ' + Ctor.name)
+      }
+      return instance
+    }
+  })
+}
+const runnerMap: { [key: string]: ((_res: any) => void)[] | undefined } = {}
+/**
    * 互斥注解
    * 用于保证某个方法同一时间只有单次调用
    */
-  export function mutex (target: Any, property: string) {
-    const oriFn = target[property]
-    const funcKey = `${target.constructor.name}-${property}`
-    Object.defineProperty(target, property, {
-      value: async function (...args: Any[]) {
-        const key = funcKey + JSON.stringify(args)
-        if (runnerMap[key]) {
-          return await new Promise(res => {
-            runnerMap[key]?.push((result: Any) => res(result))
-          })
-        } else {
-          runnerMap[key] = []
-        }
-        setTimeout(() => {
-          runnerMap[key] = undefined
-        }, 4000)
-        const res = await Reflect.apply(oriFn, this, args || [])
-        runnerMap[key]?.forEach(fn => fn(res))
-        runnerMap[key] = undefined
-        return res
+export function mutex(target: any, property: string) {
+  const oriFn = target[property]
+  const funcKey = `${target.constructor.name}-${property}`
+  Object.defineProperty(target, property, {
+    async value(...args: any[]) {
+      const key = funcKey + JSON.stringify(args)
+      if (runnerMap[key]) {
+        return await new Promise((res) => {
+          runnerMap[key]?.push((result: any) => res(result))
+        })
       }
-    })
-    return target[property]
-  }
+      runnerMap[key] = []
+
+      setTimeout(() => {
+        runnerMap[key] = undefined
+      }, 4000)
+      const res = await Reflect.apply(oriFn, this, args || [])
+      runnerMap[key]?.forEach((fn) => fn(res))
+      runnerMap[key] = undefined
+      return res
+    }
+  })
+  return target[property]
+}

src/services/store.service.ts

@@ -0,0 +1,85 @@
+import { injectable, Service } from './service'
+
+/**
+ * 存储服务，只允许存有的字段
+ */
+@injectable
+export default class StoreService extends Service {
+  private _tokenInfo!: {
+    type: string,
+    access_token: string
+  }
+
+  private _userInfo!: {
+    avatar?: string,
+    created_at?: string,
+    email?: string,
+    gender?: number,
+    id: number,
+    is_qiye?: boolean,
+    is_robot?: number,
+    mobile?: string,
+    nickname?: string,
+    password?: string,
+    updated_at?: string,
+    username?: string
+  }
+
+  constructor() {
+    super()
+    this._tokenInfo = { type: 'Bearer', access_token: '' }
+    this._getAll()
+  }
+
+  public get tokenInfo() {
+    return this._tokenInfo
+  }
+
+  public get userInfo() {
+    return this._userInfo
+  }
+
+  /** 保存 */
+  save(key: string, data: object | string) {
+    try {
+      // 只允许服务存在属性才能保存
+      const k = `_${key}`
+      if (Object.prototype.hasOwnProperty.call(this, k)) {
+        const db = JSON.stringify(data)
+        sessionStorage.setItem(key, db)
+        const that = this as any
+        that[k] = data
+      } else {
+        this.throw('存储错误')
+      }
+    } catch (error) {
+      this.throw('存储错误')
+    }
+  }
+
+  private _getAll() {
+    const all = sessionStorage
+    for (const key in all) {
+      if (typeof all[key] === 'string') {
+        const k = `_${key}`
+        const that = this as any
+        that[k] = JSON.parse(all[key])
+      }
+    }
+  }
+
+  clear() {
+    const all = sessionStorage
+    for (const key in all) {
+      if (typeof all[key] === 'string') {
+        const k = `_${key}`
+        const that = this as any
+        that[k] = undefined
+      }
+    }
+    sessionStorage.clear()
+    this._tokenInfo = { type: 'Bearer', access_token: '' }
+    const db = JSON.stringify(this._tokenInfo)
+    sessionStorage.setItem('_tokenInfo', db)
+  }
+}

src/services/vue.directive.service.ts

@@ -3,159 +3,155 @@ import { injectable, Service } from './service'
 /** vue 自定义指令 */
 @injectable
 export default class directiveService extends Service {
-    /** 长按 */
-    longpress() {
-        return {
-            beforeMount(el: { $duration: number | undefined; addEventListener: (arg0: string, arg1: { (e: { type: string; button: number; preventDefault: () => void; }): void; (e: { type: string; button: number; preventDefault: () => void; }): void; (): void; (): void; (): void; }) => void; }, binding: { value: any; arg: number; }) {
-                const cb = binding.value;
-                el.$duration = binding.arg || 3000; // 获取长按时长, 默认3秒执行长按事件
-                if (typeof cb !== 'function') return console.warn('v-longpress指令必须接收一个回调函数');
-                let timer: string | number | NodeJS.Timeout | null | undefined = null;
-                const add: Any = (e: { type: string; button: number; preventDefault: () => void; }) => {
-                    // 排除点击与右键情况, event.button: 0-左键  2-右键
-                    if (e.type === 'click' && e.button !== 0) return;
-                    e.preventDefault();
-                    if (timer === null) {
-                        timer = setTimeout(() => {
-                            cb('start');
-                            timer = null;
-                        }, el.$duration)
-                    }
-                }
-                const cancel = () => {
-                    if (timer !== null) {
-                        clearTimeout(timer);
-                        timer = null;
-                    }
-                    cb('end');
-                }
+  /** 长按 */
+  longpress = {
 
-                // 添加计时器
-                el.addEventListener('mousedown', add);
-                el.addEventListener('touchstart', add);
-                // 取消计时器
-                el.addEventListener('mouseout', cancel);
-                el.addEventListener('touchend', cancel)
-                el.addEventListener('touchcancel', cancel)
-            },
-            updated(el: { $duration: any; }, binding: { arg: any; }) {
-                // 可以实时更新时长
-                el.$duration = binding.arg;
-            },
-            unmounted(el: { removeEventListener: (arg0: string, arg1: { (): void; (): void; (): void; (): void; (): void; (): void; }) => void; }) {
-                el.removeEventListener('mousedown', () => { });
-                el.removeEventListener('touchstart', () => { });
-                el.removeEventListener('click', () => { });
-                el.removeEventListener('mouseout', () => { });
-                el.removeEventListener('touchend', () => { });
-                el.removeEventListener('touchcancel', () => { });
-            }
+    beforeMount(el: any, binding: any) {
+      const cb = binding.value
+      el.$durations = binding.arg || 3000 // 获取长按时长, 默认3秒执行长按事件
+      if (typeof cb !== 'function') return console.warn('v-longpress指令必须接收一个回调函数')
+      let timer: any = null
+      const add = (e: { type: string; button: number; preventDefault: () => void }) => {
+        // 排除点击与右键情况, event.button: 0-左键  2-右键
+        if (e.type === 'click' && e.button !== 0) return
+        e.preventDefault()
+        if (timer === null) {
+          timer = setTimeout(() => {
+            cb('start')
+            timer = null
+          }, el.$durations)
         }
+      }
+      const cancel = () => {
+        if (timer !== null) {
+          clearTimeout(timer)
+          timer = null
+        }
+        cb('end')
+      }
+
+      // 添加计时器
+      el.addEventListener('mousedown', add)
+      el.addEventListener('touchstart', add)
+      // 取消计时器
+      el.addEventListener('mouseout', cancel)
+      el.addEventListener('touchend', cancel)
+      el.addEventListener('touchcancel', cancel)
+    },
+    updated(el: any, binding: any) {
+      // 可以实时更新时长
+      el.$durations = binding.arg
+    },
+    unmounted(el: any) {
+      el.removeEventListener('mousedown', () => { })
+      el.removeEventListener('touchstart', () => { })
+      el.removeEventListener('click', () => { })
+      el.removeEventListener('mouseout', () => { })
+      el.removeEventListener('touchend', () => { })
+      el.removeEventListener('touchcancel', () => { })
     }
 
-    /** 拖拽 */
-    drag() {
-        return {
-            mounted(el: HTMLElement | null) {
-                const oDiv = el // 当前元素
-                el!.style.pointerEvents = 'none' // 防止触发点击事件
-                oDiv!.onmousedown = e => {
-                    // 找父级 是否是absolute来进行移动
-                    let target = oDiv
-                    while (window.getComputedStyle(target!).position !== 'absolute' && target !== document.body) {
-                        target = target!.parentElement
-                    }
-                    // 找父级 是否是relative来进行宽度计算
-                    let targetParent = target!.parentElement
-                    while (window.getComputedStyle(targetParent!).position !== 'relative' && targetParent !== document.body) {
-                        targetParent = targetParent!.parentElement
-                    }
+  }
 
-                    document.onselectstart = () => {
-                        return false
-                    }
+  /** 拖拽 */
+  drag = {
 
-                    // 鼠标按下，计算当前元素距离可视区的距离
-                    const disX = e.clientX - target!.offsetLeft
-                    const disY = e.clientY - target!.offsetTop
-                    const cW = +window.getComputedStyle(target!).width.replace('px', '')
-                    const cH = +window.getComputedStyle(target!).height.replace('px', '')
-                    const maxW = +window.getComputedStyle(targetParent!).width.replace('px', '')
-                    const maxH = +window.getComputedStyle(targetParent!).height.replace('px', '')
-                    document.onmousemove = e => {
-                        // 通过事件委托，计算移动的距离
-                        // 因为浏览器里并不能直接取到并且使用clientX、clientY,所以使用事件委托在内部做完赋值
-                        el!.style.pointerEvents = 'none'
-                        const l = e.clientX - disX
-                        const t = e.clientY - disY
-                        const cl = maxW - cW
-                        const ct = maxH - cH
-                        // 计算移动当前元素的位置，并且给该元素样式中的left和top值赋值
-                        target!.style.left = (l < 0 ? 0 : l > cl ? cl : l) + 'px'
-                        target!.style.top = (t < 0 ? 0 : t > ct ? ct : t) + 'px'
-                    }
-                    document.onmouseup = e => {
-                        el!.style.pointerEvents = 'none'
-                        document.onmousemove = null
-                        document.onmouseup = null
-                        document.onselectstart = null
-                    }
-                    // return false不加的话可能导致黏连，拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
-                    return false
-                }
-            }
+    mounted(el: HTMLElement | null) {
+      const oDiv = el // 当前元素
+      // el!.style.pointerEvents = null // 防止触发点击事件
+      oDiv!.onmousedown = (e) => {
+        // 找父级 是否是absolute来进行移动
+        let target = oDiv
+        while (window.getComputedStyle(target!).position !== 'absolute' && target !== document.body) {
+          target = target!.parentElement
+        }
+        // 找父级 是否是relative来进行宽度计算
+        let targetParent = target!.parentElement
+        while (window.getComputedStyle(targetParent!).position !== 'relative' && targetParent !== document.body) {
+          targetParent = targetParent!.parentElement
         }
 
-    }
+        document.onselectstart = () => false
 
-    /** 点击其它地方消失 */
-    clickoutside() {
-        return {
-            beforeMount(el: { contains: (arg0: EventTarget | null) => any; }, binding: { value: () => any; }) {
-                document.addEventListener('click', (e) => {
-                    el.contains(e.target) && binding.value();
-                }, false)
-            },
-            unmounted() {
-                document.removeEventListener('click', () => { })
-            }
+        // 鼠标按下，计算当前元素距离可视区的距离
+        const disX = e.clientX - target!.offsetLeft
+        const disY = e.clientY - target!.offsetTop
+        const cW = +window.getComputedStyle(target!).width.replace('px', '')
+        const cH = +window.getComputedStyle(target!).height.replace('px', '')
+        const maxW = +window.getComputedStyle(targetParent!).width.replace('px', '')
+        const maxH = +window.getComputedStyle(targetParent!).height.replace('px', '')
+        document.onmousemove = (e) => {
+          // 通过事件委托，计算移动的距离
+          // 因为浏览器里并不能直接取到并且使用clientX、clientY,所以使用事件委托在内部做完赋值
+          // el!.style.pointerEvents = 'none'
+          const l = e.clientX - disX
+          const t = e.clientY - disY
+          const cl = maxW - cW
+          const ct = maxH - cH
+          // 计算移动当前元素的位置，并且给该元素样式中的left和top值赋值
+          target!.style.left = `${l < 0 ? 0 : l > cl ? cl : l}px`
+          target!.style.top = `${t < 0 ? 0 : t > ct ? ct : t}px`
+        }
+        document.onmouseup = (e) => {
+          // el!.style.pointerEvents = 'none'
+          document.onmousemove = null
+          document.onmouseup = null
+          document.onselectstart = null
         }
+        // return false不加的话可能导致黏连，拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
+        return false
+      }
     }
 
-    /** 复制 */
-    copy() {
-        return {
-            beforeMount(el: { targetContent: string; addEventListener: (arg0: string, arg1: () => void) => void; }, binding: { arg: Any; value: Any; }) {
-                el.targetContent = binding.value;
-                const success = binding.arg;
-                el.addEventListener('click', () => {
-                    if (!el.targetContent) return console.warn('没有需要复制的目标内容');
-                    // 创建textarea标签
-                    const textarea = document.createElement('textarea');
-                    // 设置相关属性
-                    textarea.readOnly = true;
-                    textarea.style.position = 'fixed';
-                    textarea.style.top = '-99999px';
-                    // 把目标内容赋值给它的value属性
-                    textarea.value = el.targetContent;
-                    // 插入到页面
-                    document.body.appendChild(textarea);
-                    // 调用onselect()方法
-                    textarea.select();
-                    // 把目标内容复制进剪贴板, 该API会返回一个Boolean
-                    const res = document.execCommand('Copy');
-                    res && success ? success(el.targetContent) : console.log('复制成功，剪贴板内容：' + el.targetContent);
-                    // 移除textarea标签
-                    document.body.removeChild(textarea);
-                })
-            },
-            updated(el: { targetContent: any; }, binding: { value: any; }) {
-                // 实时更新最新的目标内容
-                el.targetContent = binding.value;
-            },
-            unmounted(el: { removeEventListener: (arg0: string, arg1: () => void) => void; }) {
-                el.removeEventListener('click', () => { })
-            }
-        }
+  }
+
+  /** 点击其它地方消失 */
+  clickoutside = {
+
+    beforeMount(el: { contains: (arg0: EventTarget | null) => any; }, binding: { value: () => any; }) {
+      document.addEventListener('click', (e) => {
+        el.contains(e.target) && binding.value()
+      }, false)
+    },
+    unmounted() {
+      document.removeEventListener('click', () => { })
+    }
+
+  }
+
+  /** 复制 */
+  copy = {
+
+    beforeMount(el: { targetContent: string; addEventListener: (arg0: string, arg1: () => void) => void; }, binding: { arg: any; value: any; }) {
+      el.targetContent = binding.value
+      const success = binding.arg
+      el.addEventListener('click', () => {
+        if (!el.targetContent) return console.warn('没有需要复制的目标内容')
+        // 创建textarea标签
+        const textarea = document.createElement('textarea')
+        // 设置相关属性
+        textarea.readOnly = true
+        textarea.style.position = 'fixed'
+        textarea.style.top = '-99999px'
+        // 把目标内容赋值给它的value属性
+        textarea.value = el.targetContent
+        // 插入到页面
+        document.body.appendChild(textarea)
+        // 调用onselect()方法
+        textarea.select()
+        // 把目标内容复制进剪贴板, 该API会返回一个Boolean
+        const res = document.execCommand('Copy')
+        res && success ? success(el.targetContent) : console.log(`复制成功，剪贴板内容：${el.targetContent}`)
+        // 移除textarea标签
+        document.body.removeChild(textarea)
+      })
+    },
+    updated(el: { targetContent: any; }, binding: { value: any; }) {
+      // 实时更新最新的目标内容
+      el.targetContent = binding.value
+    },
+    unmounted(el: { removeEventListener: (arg0: string, arg1: () => void) => void; }) {
+      el.removeEventListener('click', () => { })
     }
+  }
 }

src/vite-env.d.ts

@@ -1,12 +1,8 @@
 /// <reference types="vite/client" />
 
-/** 代指任意类型 请不要随意使用 */
-// eslint-disable-next-line no-unused-vars
-declare type Any = any
-
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, Any>
+  const component: DefineComponent<{}, {}, any>
   export default component
 }