From 1c61f9b244a43263951c65e04a13cb79f697f205 Mon Sep 17 00:00:00 2001 From: npmrun <62639956+npmrun@users.noreply.github.com> Date: Fri, 4 Jun 2021 19:10:28 +0800 Subject: [PATCH] add --- index.html | 2 +- src/App.vue | 27 +- src/api/index.js | 14 - src/api/index.ts | 25 + src/api/request/index.js | 50 -- src/api/request/index.ts | 59 ++ src/assets/script/util.js | 15 - src/assets/script/util.ts | 23 + src/assets/style/common.scss | 20 +- src/assets/style/github-markdown.scss | 985 ----------------------------- src/assets/style/reset.scss | 48 ++ src/components/Image.vue | 28 +- src/main.js | 21 - src/main.ts | 27 + src/pages/Demo/Demo.vue | 40 +- src/pages/Demo/Detail/Detail.vue | 8 +- src/pages/Demo/Detail/github-markdown.scss | 985 +++++++++++++++++++++++++++++ src/pages/Demo/Home/Home.vue | 12 +- src/pages/Home/Home.scss | 55 ++ src/pages/Home/Home.vue | 121 ++-- src/plugins/directive/index.ts | 12 + src/plugins/pulldown.js | 158 ----- src/plugins/pulldown.ts | 161 +++++ src/plugins/toast.js | 21 + src/plugins/version.ts | 12 + src/router/index.js | 80 --- src/router/index.ts | 80 +++ src/shim.d.ts | 22 + tsconfig.json | 20 + vite.config.js | 20 - vite.config.ts | 20 + 31 files changed, 1727 insertions(+), 1444 deletions(-) delete mode 100644 src/api/index.js create mode 100644 src/api/index.ts delete mode 100644 src/api/request/index.js create mode 100644 src/api/request/index.ts delete mode 100644 src/assets/script/util.js create mode 100644 src/assets/script/util.ts delete mode 100644 src/assets/style/github-markdown.scss create mode 100644 src/assets/style/reset.scss delete mode 100644 src/main.js create mode 100644 src/main.ts create mode 100644 src/pages/Demo/Detail/github-markdown.scss create mode 100644 src/pages/Home/Home.scss create mode 100644 src/plugins/directive/index.ts delete mode 100644 src/plugins/pulldown.js create mode 100644 src/plugins/pulldown.ts create mode 100644 src/plugins/toast.js create mode 100644 src/plugins/version.ts delete mode 100644 src/router/index.js create mode 100644 src/router/index.ts create mode 100644 src/shim.d.ts create mode 100644 tsconfig.json delete mode 100644 vite.config.js create mode 100644 vite.config.ts 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.js deleted file mode 100644 index c7d5fb5..0000000 --- a/src/plugins/pulldown.js +++ /dev/null @@ -1,158 +0,0 @@ -import {onMounted, ref} from "vue"; - -export function OnRefresh(hookEvent) { - -} - -export function OnLoadMore(hookEvent) { - -} - -export default function (el) { - let exportData = {} - let ELoading = { - NORMAL: 0, - LOADING: 1, - END: 2, - } - let ERefresh = { - NORMAL: 0, - PRELOADING: 1, - LOADING: 2, - END: 3, - } - let isRefresh = ref(ERefresh.NORMAL) - let isLoading = ref(ELoading.NORMAL) - exportData.isRefresh = isRefresh; - exportData.isLoading = isLoading; - - let refreshArray = []; - exportData.RefreshEvent = (hook) => { - refreshArray.push(hook) - } - - let loadMoreArray = []; - exportData.LoadMoreEvent = (hook) => { - loadMoreArray.push(hook) - } - - let list = null - - function Refreshing(needAnim) { - if (!list) { - return - } - isRefresh.value = ERefresh.LOADING - if (needAnim) { - list.style.transition = `transform .4s ease`; - } - list.style.transform = `translateY(${50}px)`; - let done = ()=>{ - isRefresh.value = ERefresh.END - setTimeout(() => { - list.style.transform = `translateY(${0}px)`; - setTimeout(() => { - isRefresh.value = ERefresh.NORMAL - }, 400) - }, 200) - } - refreshArray.forEach(v => v(done)) - } - - function LoadMoreing() { - isLoading.value = ELoading.LOADING - let done = ()=>{ - isLoading.value = ELoading.END - } - //上拉加载 - loadMoreArray.forEach(v => v(done)) - } - - exportData.Refreshing = (type, needAnim) => { - setTimeout(() => { - if (type == undefined) { - Refreshing() - } - if (type) { - Refreshing(needAnim) - } - if (!type) { - LoadMoreing(needAnim) - } - },0) - } - - - onMounted(() => { - list = document.querySelector(el) - let startY = 0; - let isMove = false; - let zu = .2 - let pageHeight = window.innerHeight; // 屏幕高度 - let moreHeight = 50; - 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; - if (top <= 50) { - //下拉刷新 - canRefresh = true - recordPoint = true - } else { - canRefresh = false - } - if (top - lastScrollTop > 0 && listHeight - (top + pageHeight) <= moreHeight && isLoading.value != ELoading.LOADING) { - LoadMoreing() - } - lastScrollTop = top - }) - list.addEventListener("touchstart", (e) => { - isMove = true - }) - list.addEventListener("touchmove", (e) => { - if (!isMove || !canRefresh || - (isRefresh.value != ERefresh.NORMAL - && isRefresh.value != ERefresh.PRELOADING - && isRefresh.value != ERefresh.END) - ) { - return - } - let touch = e.touches[0]; - if (recordPoint) { - startY = touch.clientY; - recordPoint = false - } - let y = (touch.clientY - startY) * zu; - if (y > 0) { - list.style.transform = `translateY(${y}px)` - list.style.transition = '' - if (y > 70) { - isRefresh.value = ERefresh.PRELOADING - } else { - isRefresh.value = ERefresh.NORMAL - } - } - }) - - list.addEventListener("touchend", (e) => { - isMove = false - recordPoint = true - if (isRefresh.value == ERefresh.LOADING) { - return - } - list.style.transition = `transform .4s ease`; - if (isRefresh.value == ERefresh.PRELOADING) { - Refreshing() - } else { - isRefresh.value = ERefresh.NORMAL - list.style.transform = `translateY(${0})`; - } - }) - - }) - return exportData -} diff --git a/src/plugins/pulldown.ts b/src/plugins/pulldown.ts new file mode 100644 index 0000000..b219851 --- /dev/null +++ b/src/plugins/pulldown.ts @@ -0,0 +1,161 @@ +import {onMounted, ref} from "vue"; + +export function OnRefresh(hookEvent:()=>{}) { + +} + +export function OnLoadMore(hookEvent:()=>{}) { + +} + +export default function (el:string) { + let exportData:any = {} + let ELoading = { + NORMAL: 0, + LOADING: 1, + END: 2, + } + let ERefresh = { + NORMAL: 0, + PRELOADING: 1, + LOADING: 2, + END: 3, + } + let isRefresh = ref(ERefresh.NORMAL) + let isLoading = ref(ELoading.NORMAL) + exportData.isRefresh = isRefresh; + exportData.isLoading = isLoading; + + let refreshArray:((done:Function)=>{})[] = []; + exportData.RefreshEvent = (hook:()=>{}) => { + refreshArray.push(hook) + } + + let loadMoreArray:((done:Function)=>{})[] = []; + exportData.LoadMoreEvent = (hook:()=>{}) => { + loadMoreArray.push(hook) + } + + let list:HTMLElement|null = null + + function Refreshing(needAnim?:boolean) { + if (!list) { + return + } + isRefresh.value = ERefresh.LOADING + if (needAnim) { + list.style.transition = `transform .4s ease`; + } + list.style.transform = `translateY(${50}px)`; + let done = ()=>{ + isRefresh.value = ERefresh.END + setTimeout(() => { + if (!list) { + return + } + list.style.transform = `translateY(${0}px)`; + setTimeout(() => { + isRefresh.value = ERefresh.NORMAL + }, 400) + }, 200) + } + refreshArray.forEach(v => v(done)) + } + + function LoadMoreing() { + isLoading.value = ELoading.LOADING + let done = ()=>{ + isLoading.value = ELoading.END + } + //上拉加载 + loadMoreArray.forEach(v => v(done)) + } + + exportData.Refreshing = (type:string, needAnim:boolean) => { + setTimeout(() => { + if (type == undefined) { + Refreshing() + } + if (type) { + Refreshing(needAnim) + } + if (!type) { + LoadMoreing() + } + },0) + } + + + onMounted(() => { + list = document.querySelector(el) + let startY = 0; + let isMove = false; + let zu = .2 + let pageHeight = window.innerHeight; // 屏幕高度 + let moreHeight = 50; + 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; + if (top <= 50) { + //下拉刷新 + canRefresh = true + recordPoint = true + } else { + canRefresh = false + } + if (top - lastScrollTop > 0 && listHeight - (top + pageHeight) <= moreHeight && isLoading.value != ELoading.LOADING) { + LoadMoreing() + } + lastScrollTop = top + }) + list!.addEventListener("touchstart", (e) => { + isMove = true + }) + list!.addEventListener("touchmove", (e) => { + if (!isMove || !canRefresh || + (isRefresh.value != ERefresh.NORMAL + && isRefresh.value != ERefresh.PRELOADING + && isRefresh.value != ERefresh.END) + ) { + return + } + let touch = e.touches[0]; + if (recordPoint) { + startY = touch.clientY; + recordPoint = false + } + let y = (touch.clientY - startY) * zu; + if (y > 0) { + list!.style.transform = `translateY(${y}px)` + list!.style.transition = '' + if (y > 70) { + isRefresh.value = ERefresh.PRELOADING + } else { + isRefresh.value = ERefresh.NORMAL + } + } + }) + + list!.addEventListener("touchend", (e) => { + isMove = false + recordPoint = true + if (isRefresh.value == ERefresh.LOADING) { + return + } + list!.style.transition = `transform .4s ease`; + if (isRefresh.value == ERefresh.PRELOADING) { + Refreshing() + } else { + isRefresh.value = ERefresh.NORMAL + list!.style.transform = `translateY(${0})`; + } + }) + + }) + return exportData +} 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.js deleted file mode 100644 index ef572ca..0000000 --- a/src/router/index.js +++ /dev/null @@ -1,80 +0,0 @@ -import * as VueRouter from "vue-router" - -/** -const routes = [ - { - path: '/', - redirect: '/home', - }, - { - path: '/home', - component: () => import("@/pages/home"), - }, - { - path: '/about', - component: () => import("@/pages/about"), - } - ] - * - * */ - -const routes = [ - // 不能缺少.vue,因为没有指定extensions字段 - { - path: '/', - alias: '/home', - component: () => import("@/pages/Home/Home.vue"), - meta:{ - alive: true, - title: '干货集中营' - } - }, - { - path: '/demo', - redirect: '/demo/home', - component: () => import("@/pages/Demo/Demo.vue"), - children:[ - { - path: 'home', - name: 'demo-home', - component: () => import("@/pages/Demo/Home/Home.vue"), - meta:{ - alive: true, - title: '干货集中营' - } - }, - { - path: 'detail', - name: 'demo-detail', - component: () => import("@/pages/Demo/Detail/Detail.vue"), - meta:{ - alive: true - } - }, - { - path: 'about', - name: 'demo-about', - component: () => import("@/pages/Demo/About/About.vue"), - meta:{ - alive: true , - title: '关于我们' - } - } - ] - } -] - - -const router = VueRouter.createRouter({ - history: VueRouter.createWebHashHistory(), - routes, - scrollBehavior(to, from, savedPosition) { - if (savedPosition) { - return savedPosition - } else { - return { top: 0 } - } - }, -}); - -export default router; diff --git a/src/router/index.ts b/src/router/index.ts new file mode 100644 index 0000000..ef572ca --- /dev/null +++ b/src/router/index.ts @@ -0,0 +1,80 @@ +import * as VueRouter from "vue-router" + +/** +const routes = [ + { + path: '/', + redirect: '/home', + }, + { + path: '/home', + component: () => import("@/pages/home"), + }, + { + path: '/about', + component: () => import("@/pages/about"), + } + ] + * + * */ + +const routes = [ + // 不能缺少.vue,因为没有指定extensions字段 + { + path: '/', + alias: '/home', + component: () => import("@/pages/Home/Home.vue"), + meta:{ + alive: true, + title: '干货集中营' + } + }, + { + path: '/demo', + redirect: '/demo/home', + component: () => import("@/pages/Demo/Demo.vue"), + children:[ + { + path: 'home', + name: 'demo-home', + component: () => import("@/pages/Demo/Home/Home.vue"), + meta:{ + alive: true, + title: '干货集中营' + } + }, + { + path: 'detail', + name: 'demo-detail', + component: () => import("@/pages/Demo/Detail/Detail.vue"), + meta:{ + alive: true + } + }, + { + path: 'about', + name: 'demo-about', + component: () => import("@/pages/Demo/About/About.vue"), + meta:{ + alive: true , + title: '关于我们' + } + } + ] + } +] + + +const router = VueRouter.createRouter({ + history: VueRouter.createWebHashHistory(), + routes, + scrollBehavior(to, from, savedPosition) { + if (savedPosition) { + return savedPosition + } else { + return { top: 0 } + } + }, +}); + +export default router; 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.js deleted file mode 100644 index ffa7757..0000000 --- a/vite.config.js +++ /dev/null @@ -1,20 +0,0 @@ -import {defineConfig} from 'vite' -import vue from '@vitejs/plugin-vue' -import path from "path" -// https://vitejs.dev/config/ -export default defineConfig({ - resolve: { - extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], - alias: { - "@": path.resolve("./src") - } - }, - css: { - preprocessorOptions: { - scss: { - additionalData: `@import '@/assets/style/_global.scss';\n` - } - } - }, - plugins: [vue()] -}) diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..ffa7757 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,20 @@ +import {defineConfig} from 'vite' +import vue from '@vitejs/plugin-vue' +import path from "path" +// https://vitejs.dev/config/ +export default defineConfig({ + resolve: { + extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], + alias: { + "@": path.resolve("./src") + } + }, + css: { + preprocessorOptions: { + scss: { + additionalData: `@import '@/assets/style/_global.scss';\n` + } + } + }, + plugins: [vue()] +})