diff --git a/index.html b/index.html index 030a6ff..11603f8 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,6 @@
- + diff --git a/src/App.vue b/src/App.vue index 71ed959..5b8b8f5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,23 +7,24 @@ - diff --git a/src/plugins/directive/index.ts b/src/plugins/directive/index.ts new file mode 100644 index 0000000..c0e99c4 --- /dev/null +++ b/src/plugins/directive/index.ts @@ -0,0 +1,12 @@ +import {App} from "vue"; + +export default { + install(app: App) { + app.directive('focus', { + mounted(el) { + el.focus() + } + }) + + } +} diff --git a/src/plugins/pulldown.js b/src/plugins/pulldown.ts similarity index 74% rename from src/plugins/pulldown.js rename to src/plugins/pulldown.ts index c7d5fb5..b219851 100644 --- a/src/plugins/pulldown.js +++ b/src/plugins/pulldown.ts @@ -1,15 +1,15 @@ import {onMounted, ref} from "vue"; -export function OnRefresh(hookEvent) { +export function OnRefresh(hookEvent:()=>{}) { } -export function OnLoadMore(hookEvent) { +export function OnLoadMore(hookEvent:()=>{}) { } -export default function (el) { - let exportData = {} +export default function (el:string) { + let exportData:any = {} let ELoading = { NORMAL: 0, LOADING: 1, @@ -26,19 +26,19 @@ export default function (el) { exportData.isRefresh = isRefresh; exportData.isLoading = isLoading; - let refreshArray = []; - exportData.RefreshEvent = (hook) => { + let refreshArray:((done:Function)=>{})[] = []; + exportData.RefreshEvent = (hook:()=>{}) => { refreshArray.push(hook) } - let loadMoreArray = []; - exportData.LoadMoreEvent = (hook) => { + let loadMoreArray:((done:Function)=>{})[] = []; + exportData.LoadMoreEvent = (hook:()=>{}) => { loadMoreArray.push(hook) } - let list = null + let list:HTMLElement|null = null - function Refreshing(needAnim) { + function Refreshing(needAnim?:boolean) { if (!list) { return } @@ -50,6 +50,9 @@ export default function (el) { let done = ()=>{ isRefresh.value = ERefresh.END setTimeout(() => { + if (!list) { + return + } list.style.transform = `translateY(${0}px)`; setTimeout(() => { isRefresh.value = ERefresh.NORMAL @@ -68,7 +71,7 @@ export default function (el) { loadMoreArray.forEach(v => v(done)) } - exportData.Refreshing = (type, needAnim) => { + exportData.Refreshing = (type:string, needAnim:boolean) => { setTimeout(() => { if (type == undefined) { Refreshing() @@ -77,7 +80,7 @@ export default function (el) { Refreshing(needAnim) } if (!type) { - LoadMoreing(needAnim) + LoadMoreing() } },0) } @@ -90,14 +93,14 @@ export default function (el) { let zu = .2 let pageHeight = window.innerHeight; // 屏幕高度 let moreHeight = 50; - let parentNode = list.parentNode + let parentNode = list!.parentNode let recordPoint = true // 是否可以记录起始点（下拉加载用） let canRefresh = true // 是否可以刷新（下拉加载用） let canLoading = true // let lastScrollTop = 0 - parentNode.addEventListener("scroll", (e) => { - let listHeight = list.offsetHeight; // 列表高度 - let top = parentNode.scrollTop; + parentNode!.addEventListener("scroll", (e) => { + let listHeight = list!.offsetHeight; // 列表高度 + let top = (parentNode)!.scrollTop; if (top <= 50) { //下拉刷新 canRefresh = true @@ -110,10 +113,10 @@ export default function (el) { } lastScrollTop = top }) - list.addEventListener("touchstart", (e) => { + list!.addEventListener("touchstart", (e) => { isMove = true }) - list.addEventListener("touchmove", (e) => { + list!.addEventListener("touchmove", (e) => { if (!isMove || !canRefresh || (isRefresh.value != ERefresh.NORMAL && isRefresh.value != ERefresh.PRELOADING @@ -128,8 +131,8 @@ export default function (el) { } let y = (touch.clientY - startY) * zu; if (y > 0) { - list.style.transform = `translateY(${y}px)` - list.style.transition = '' + list!.style.transform = `translateY(${y}px)` + list!.style.transition = '' if (y > 70) { isRefresh.value = ERefresh.PRELOADING } else { @@ -138,18 +141,18 @@ export default function (el) { } }) - list.addEventListener("touchend", (e) => { + list!.addEventListener("touchend", (e) => { isMove = false recordPoint = true if (isRefresh.value == ERefresh.LOADING) { return } - list.style.transition = `transform .4s ease`; + list!.style.transition = `transform .4s ease`; if (isRefresh.value == ERefresh.PRELOADING) { Refreshing() } else { isRefresh.value = ERefresh.NORMAL - list.style.transform = `translateY(${0})`; + list!.style.transform = `translateY(${0})`; } }) diff --git a/src/plugins/toast.js b/src/plugins/toast.js new file mode 100644 index 0000000..0cfb9b3 --- /dev/null +++ b/src/plugins/toast.js @@ -0,0 +1,21 @@ +import {createApp, h ,onMounted} from "vue"; + +let toast = document.createElement("div") +toast.id = "toast"; +document.body.appendChild(toast); + +const toastData = createApp({ + setup(){ + return ()=> h("div",{ + onClick: ($event)=>{ + console.log(toastData) + }, + style: { + color: 'red' + }, + on:{ + + } + },"sadsa") + } +}).mount('#toast'); diff --git a/src/plugins/version.ts b/src/plugins/version.ts new file mode 100644 index 0000000..ec05e89 --- /dev/null +++ b/src/plugins/version.ts @@ -0,0 +1,12 @@ +import { App } from "vue" + +declare module '@vue/runtime-core' { + interface ComponentCustomProperties { + $version: string + } +} +export default { + install(app: App) { + app.config.globalProperties.$version = 'xianyu' + } +} diff --git a/src/router/index.js b/src/router/index.ts similarity index 100% rename from src/router/index.js rename to src/router/index.ts diff --git a/src/shim.d.ts b/src/shim.d.ts new file mode 100644 index 0000000..c08a5b8 --- /dev/null +++ b/src/shim.d.ts @@ -0,0 +1,22 @@ +// 文件路径 shims-vue.d.ts +declare module '*.vue' { + import type { DefineComponent } from 'vue' + const component: DefineComponent<{}, {}, any> + export default component +} + +// 对vue进行类型补充说明 +// declare module '@vue/runtime-core' { +// interface ComponentCustomProperties { +// name: string +// } +// } +// +// declare module 'vue/types/vue' { +// interface Vue { +// $globalData: any; +// } +// interface ComponentInternalInstance { +// proxy: any +// } +// } diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..f837ae4 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "esnext", + "module": "esnext", + "moduleResolution": "node", + "strict": true, + "jsx": "preserve", + "sourceMap": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "lib": ["esnext", "dom", "node"], + "types": ["vite/client"], + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + }, + "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "vite.config.ts"], + "exclude": ["node_modules"] +} diff --git a/vite.config.js b/vite.config.ts similarity index 100% rename from vite.config.js rename to vite.config.ts