├── .gitignore ├── README.md ├── index.html ├── package.json ├── public ├── 1.gif ├── 2.gif ├── demo.gif └── favicon.ico ├── src ├── app.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── env.d.ts ├── lib │ ├── App.vue │ └── main.ts └── main.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-flip-down [![npm](https://img.shields.io/npm/v/vue-flip-down.svg)](https://www.npmjs.com/package/vue-flip-down) [![npm](https://img.shields.io/npm/dt/vue-flip-down.svg)](https://www.npmjs.com/package/vue-flip-down) 2 | 3 | 4 | 5 | 这是一个简单的翻页倒计时vue组件，项目中有用到，所以提取了一下。
6 | 你们也可以直接把`src/app.vue`文件拷贝到项目里直接用，就是个普通vue组件，就不用`npm install` 了 7 | 8 | # 注意：vue2.x 和 vue3.x 9 | **vue-flip-down 1.x的版本仅适用于vue2.x**
10 | **vue-flip-down 3.x的版本仅适用于vue3.x** 11 | 12 | ### 示例 13 | ![img](public/demo.gif) 14 | 15 | ### 在线DEMO 16 | https://isluo.com/work/vue-flip-down/ 17 | 18 | 19 | ### 安装 20 | ``` 21 | npm install vue-flip-down --save 22 | ``` 23 | 24 | ### 使用 25 | ```vue 26 | import FlipDown from 'vue-flip-down'; 27 | 28 | 32 | ``` 33 | 34 | ### 参数 35 | 36 | | 名称 | 类型 | 默认 | 描述 | 37 | | ------- | ----------- | ---- | ------------------------------------------------------------------------------------- | 38 | | endDate | Date/Number | 0 | 结束的时间，即倒计时会从当前时间一直到endDate停止，可以是一个日期对象，也可以是毫秒数 | 39 | | type | Number | 4 | 要怎么显示倒计时：4-日时分秒，3-时分秒，2-分秒，1-秒 | 40 | |theme|Number|1|样式：1-合并，2-分离。见下图| 41 | |timeUnit|Array|\[\]|时间单位，显示在空隙之间的文字，比如：\['天','时','分','秒'\] 或 \[':',':',':'\]| 42 | 43 | #### :theme="1" 合并式 44 | ![img](public/1.gif) 45 | 46 | > 合并式的，每个不同的时间单位是合在一起的 47 | 48 | #### :theme="2" 分离式 49 | ![img](public/2.gif) 50 | 51 | > 分离式的，每个数字都是单独分开的 52 | 53 | ### 事件 54 | | 名称 | 返回值 | 描述 | 55 | | ------ | ------ | --------------------------------------- | 56 | | timeUp | null | 当倒计时走到0时会触发一次，表示时间到了 | 57 | 58 | 59 | ### 说明 60 | 61 | * 内部使用了setTimeout，当倒计时结束后，就会停止循环。但可以动态改变日期，倒计时又会被激活。 62 | * 基于本地时间做对比 63 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-flip-down", 3 | "version": "3.1.0", 4 | "files": [ 5 | "dist" 6 | ], 7 | "module": "./dist/vue-flip-down.es.js", 8 | "main": "./dist/vue-flip-down.umd.js", 9 | "typings": "./dist/main.d.ts", 10 | "exports": { 11 | ".": { 12 | "import": "./dist/vue-flip-down.es.js", 13 | "require": "./dist/vue-flip-down.umd.js" 14 | } 15 | }, 16 | "scripts": { 17 | "dev": "vite", 18 | "build": "vue-tsc --noEmit && vite build", 19 | "preview": "vite preview" 20 | }, 21 | "devDependencies": { 22 | "@types/node": "^17.0.31", 23 | "@vitejs/plugin-vue": "^2.3.3", 24 | "less": "^4.1.2", 25 | "typescript": "^4.5.4", 26 | "vite": "^2.9.9", 27 | "vite-plugin-dts": "^1.1.1", 28 | "vite-plugin-libcss": "^1.0.5", 29 | "vue": "^3.2.25", 30 | "vue-tsc": "^0.34.7" 31 | } 32 | } -------------------------------------------------------------------------------- /public/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaLuo/vue-flip-down/b7787206e5b0cf43a0bcdeeb577d7491961f30d4/public/1.gif -------------------------------------------------------------------------------- /public/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaLuo/vue-flip-down/b7787206e5b0cf43a0bcdeeb577d7491961f30d4/public/2.gif -------------------------------------------------------------------------------- /public/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaLuo/vue-flip-down/b7787206e5b0cf43a0bcdeeb577d7491961f30d4/public/demo.gif -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaLuo/vue-flip-down/b7787206e5b0cf43a0bcdeeb577d7491961f30d4/public/favicon.ico -------------------------------------------------------------------------------- /src/app.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 22 | 23 | 33 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaLuo/vue-flip-down/b7787206e5b0cf43a0bcdeeb577d7491961f30d4/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 35 | 36 | 53 | -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | -------------------------------------------------------------------------------- /src/lib/App.vue: -------------------------------------------------------------------------------- 1 | 2 | 33 | 34 | 215 | 216 | 366 | -------------------------------------------------------------------------------- /src/lib/main.ts: -------------------------------------------------------------------------------- 1 | import Component from "./App.vue"; 2 | 3 | export default Component; 4 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "isolatedModules": true, 12 | "esModuleInterop": true, 13 | "lib": ["esnext", "dom"], 14 | "skipLibCheck": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 17 | "references": [{ "path": "./tsconfig.node.json" }] 18 | } 19 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "esnext", 5 | "moduleResolution": "node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import {resolve} from 'path' 2 | import { defineConfig } from 'vite' 3 | import vue from '@vitejs/plugin-vue' 4 | import dts from 'vite-plugin-dts'; 5 | import libCss from 'vite-plugin-libcss'; 6 | 7 | // https://vitejs.dev/config/ 8 | module.exports = defineConfig({ 9 | plugins: [vue(), dts({insertTypesEntry: true, copyDtsFiles: false}), libCss()], 10 | resolve: { dedupe: ['vue'] }, 11 | build: { 12 | lib: { 13 | name: 'vue-flip-down', 14 | entry: resolve(__dirname, 'src/lib/main.ts'), 15 | fileName: (format) => `vue-flip-down.${format}.js` 16 | }, 17 | cssCodeSplit: true, 18 | 19 | rollupOptions: { 20 | external: ['vue'], 21 | output: { 22 | globals: { 23 | vue: 'Vue' 24 | } 25 | } 26 | } 27 | } 28 | }) --------------------------------------------------------------------------------