blackteay/vue-flip-down
1
0
Fork 0
mirror of https://github.com/javaLuo/vue-flip-down.git synced 2025-04-05 19:41:54 +08:00
Code Issues Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
L 2019-12-31 16:44:43 +08:00
parent d452becaae
commit 3551f3db48
7 changed files with 2686 additions and 1017 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

27
example/src/app.vue
View File

@ -1,35 +1,34 @@
<template> <template>
<div> <div>
<CountDown :endDate="endDate" <CountDown :endDate="endDate" :type="type" :theme="1" :timeUnit="['天', '时', '分', '秒']" @timeUp="onTimeUp" />
:type="type"
:theme="2"
:timeUnit="['天','时','分','秒']"
@timeUp="onTimeUp" />
<hr /> <hr />
<input v-model="type"> <input v-model="type" />
<input v-model="endDate"> <input v-model="endDate" />
<div>{{ timeUp }}</div>
</div> </div>
</template> </template>
<script> <script>
import CountDown from "../../dist/main.js"; // import CountDown from "../../dist/main.js";
import CountDown from "../../src/index.js";
export default { export default {
data() { data() {
return { return {
timeUp: false,
type: 2, type: 2,
endDate: new Date().getTime() + 30000 endDate: new Date().getTime() + 5000,
}; };
}, },
components: { components: {
CountDown CountDown,
}, },
methods: { methods: {
onTypeChange(t) { onTypeChange(t) {
this.type = t; this.type = t;
}, },
onTimeUp() { onTimeUp() {
console.log("时间到了"); this.timeUp = true;
} },
} },
}; };
</script> </script>

46
package.json
View File

@ -22,33 +22,35 @@
}, },
"homepage": "https://github.com/javaLuo/vue-flip-down#readme", "homepage": "https://github.com/javaLuo/vue-flip-down#readme",
"dependencies": { "dependencies": {
"vue": "^2.5.17" "optimize-css-assets-webpack-plugin": "^5.0.3",
"terser-webpack-plugin": "^2.3.1",
"vue": "^2.6.11"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.1.2", "@babel/core": "^7.7.7",
"@babel/plugin-proposal-class-properties": "^7.1.0", "@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0", "@babel/plugin-proposal-object-rest-spread": "^7.7.7",
"@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/plugin-syntax-dynamic-import": "^7.7.4",
"@babel/plugin-transform-runtime": "^7.1.0", "@babel/plugin-transform-runtime": "^7.7.6",
"@babel/polyfill": "^7.0.0", "@babel/polyfill": "^7.7.0",
"@babel/runtime": "^7.1.2", "@babel/runtime": "^7.7.7",
"autoprefixer": "^9.3.1", "autoprefixer": "^9.7.3",
"babel-loader": "^8.0.4", "babel-loader": "^8.0.6",
"babel-plugin-import": "^1.10.0", "babel-plugin-import": "^1.13.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5", "babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-vue-app": "^2.0.0", "babel-preset-vue-app": "^2.0.0",
"clean-webpack-plugin": "^0.1.19", "clean-webpack-plugin": "^3.0.0",
"css-loader": "^1.0.0", "css-loader": "^3.4.0",
"less": "^3.8.1", "less": "^3.10.3",
"less-loader": "^4.1.0", "less-loader": "^5.0.0",
"postcss-loader": "^3.0.0", "postcss-loader": "^3.0.0",
"style-loader": "^0.23.1", "style-loader": "^1.1.2",
"url-loader": "^1.1.2", "url-loader": "^3.0.0",
"vue-loader": "^15.4.2", "vue-loader": "^15.8.3",
"vue-template-compiler": "^2.5.17", "vue-template-compiler": "^2.6.11",
"webpack": "^4.23.0", "webpack": "^4.41.5",
"webpack-cli": "^3.1.2", "webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.1.10" "webpack-dev-server": "^3.10.1"
}, },
"browserslist": [ "browserslist": [
"iOS >= 8", "iOS >= 8",

102
src/app.vue
View File

@ -1,25 +1,21 @@
<!-- 翻页效果 倒计时组件 --> <!-- 翻页效果 倒计时组件 -->
<template> <template>
<div :class="['vue-countdown-component', {'theme2': theme !== 1}]"> <div :class="['vue-countdown-component', { theme2: theme !== 1 }]">
<template v-for="(item, index) in timeArray"> <template v-for="(item, index) in timeArray">
<div :class="['time-box']" <div :class="['time-box']" :style="`color:${color}`" :key="index">
:key="index"> {{ item }}
{{item}} <div :class="['b0', { anime: isAnimate[index] }]">
<div :class="['b0',{'anime': isAnimate[index]}]"> <div>{{ item }}</div>
<div>{{item}}</div>
</div> </div>
<div :class="['a0',{'anime': isAnimate[index]}]" <div :class="['a0', { anime: isAnimate[index] }]" @animationend="onAnimateEnd(index)">
@animationend="onAnimateEnd(index)"> <div>{{ timeArrayT[index] }}</div>
<div>{{timeArrayT[index]}}</div>
</div> </div>
<div class="a1"> <div class="a1">
<div>{{timeArrayT[index]}}</div> <div>{{ timeArrayT[index] }}</div>
</div> </div>
</div> </div>
<div class="time-unit" <div class="time-unit" :key="`unit-${index}`" v-if="isTimeUnitShow(index)">
:key="`unit-${index}`" {{ setTimeUnit(index) }}
v-if="isTimeUnitShow(index)">
{{setTimeUnit(index)}}
</div> </div>
</template> </template>
</div> </div>
@ -29,25 +25,17 @@
export default { export default {
data() { data() {
return { return {
timeArray: color: "#fffffe",
this.theme === 2 timeArray: this.theme === 2 ? new Array(this.type * 2).fill("0") : new Array(this.type).fill("00"),
? new Array(this.type * 2).fill("0") timeArrayT: this.theme === 2 ? new Array(this.type * 2).fill("0") : new Array(this.type).fill("00"),
: new Array(this.type).fill("00"), isAnimate: this.theme === 2 ? new Array(this.type * 2).fill(false) : new Array(this.type).fill(false),
timeArrayT:
this.theme === 2
? new Array(this.type * 2).fill("0")
: new Array(this.type).fill("00"),
isAnimate:
this.theme === 2
? new Array(this.type * 2).fill(false)
: new Array(this.type).fill(false)
}; };
}, },
props: { props: {
endDate: { type: [Date, Number, String], default: 0 }, // 截止时间 endDate: { type: [Date, Number, String], default: 0 }, // 截止时间
type: { type: [Number, String], default: 4 }, // 时间精度 4/3/2/1 type: { type: [Number, String], default: 4 }, // 时间精度 4/3/2/1
theme: { type: [Number, String], default: 1 }, theme: { type: [Number, String], default: 1 },
timeUnit: { type: Array, default: () => [] } timeUnit: { type: Array, default: () => [] },
}, },
computed: { computed: {
endTime() { endTime() {
@ -62,15 +50,10 @@ export default {
arr() { arr() {
const length = this.timeArray.length; const length = this.timeArray.length;
const step = this.step; const step = this.step;
const temp = [ const temp = [length - 1, length - step - 1, length - step * 2 - 1, length - step * 3 - 1];
length - 1,
length - step - 1,
length - step * 2 - 1,
length - step * 3 - 1
];
temp.length = this.type > 1 ? this.type : 1; temp.length = this.type > 1 ? this.type : 1;
return temp; return temp;
} },
}, },
watch: { watch: {
timeArray(newV, oldV) { timeArray(newV, oldV) {
@ -89,20 +72,24 @@ export default {
}, },
endTime(newV) { endTime(newV) {
if (newV > 0) { if (newV > 0) {
this.start(true); this.start();
} }
} },
}, },
mounted() { mounted() {
this.start(true); this.start(0);
// 这么做是为了浏览器细微渲染时错位的问题
setTimeout(() => {
this.color = "#ffffff";
}, 1000);
}, },
beforeDestroy() { beforeDestroy() {
clearTimeout(this.timer); clearTimeout(this.timer);
}, },
methods: { methods: {
// 开始倒计时 // 开始倒计时
start(isFirst) { start(step = 1000) {
clearTimeout(this.timer); clearTimeout(this.timer);
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
let t = this.endTime - new Date().getTime(); // 剩余的毫秒数 let t = this.endTime - new Date().getTime(); // 剩余的毫秒数
@ -141,43 +128,43 @@ export default {
arr.push( arr.push(
...String(day) ...String(day)
.padStart(2, "0") .padStart(2, "0")
.split("") .split(""),
); );
type >= 3 && type >= 3 &&
arr.push( arr.push(
...String(hour) ...String(hour)
.padStart(2, "0") .padStart(2, "0")
.split("") .split(""),
); );
type >= 2 && type >= 2 &&
arr.push( arr.push(
...String(min) ...String(min)
.padStart(2, "0") .padStart(2, "0")
.split("") .split(""),
); );
arr.push( arr.push(
...String(second) ...String(second)
.padStart(2, "0") .padStart(2, "0")
.split("") .split(""),
); );
} }
this.timeArray = arr; this.timeArray = arr;
if (isFirst) { // if (isFirst) {
this.timeArrayT = [...this.timeArray]; // this.timeArrayT = [...this.timeArray];
this.isAnimate = new Array(this.timeArray.length).fill(false); // this.isAnimate = new Array(this.timeArray.length).fill(false);
} // }
if (t > 0) { if (t > 0) {
this.start(); this.start();
} else { } else {
this.$emit("timeUp"); this.$emit("timeUp");
} }
}, 1000); }, step);
}, },
// 动画完毕后，去掉对应的class, 为下次动画做准备
onAnimateEnd(index) { onAnimateEnd(index) {
this.$set(this.isAnimate, index, false); this.$set(this.isAnimate, index, false);
}, },
isTimeUnitShow(index) { isTimeUnitShow(index) {
console.log("this.arr是什么：", this.arr);
if (this.arr.includes(index)) { if (this.arr.includes(index)) {
if (index === this.timeArray.length - 1 && !this.timeUnit[3]) { if (index === this.timeArray.length - 1 && !this.timeUnit[3]) {
return false; return false;
@ -197,8 +184,8 @@ export default {
default: default:
return this.timeUnit[0] || ""; // 天 return this.timeUnit[0] || ""; // 天
} }
} },
} },
}; };
</script> </script>
@ -234,6 +221,7 @@ export default {
color: #222; color: #222;
font-size: 14px; font-size: 14px;
line-height: 30px; line-height: 30px;
white-space: nowrap;
} }
.time-box { .time-box {
position: relative; position: relative;
@ -244,7 +232,6 @@ export default {
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
background-color: #6c96e8; background-color: #6c96e8;
color: #ffffff;
perspective: 50px; perspective: 50px;
border-radius: 3px; border-radius: 3px;
padding: 0 2px; padding: 0 2px;
@ -257,6 +244,7 @@ export default {
top: 50%; top: 50%;
left: -1px; left: -1px;
margin-top: -3px; margin-top: -3px;
z-index: -1;
} }
&:after { &:after {
content: ""; content: "";
@ -267,6 +255,7 @@ export default {
top: 50%; top: 50%;
right: -1px; right: -1px;
margin-top: -3px; margin-top: -3px;
z-index: -1;
} }
& + .time-box { & + .time-box {
margin-left: 8px; margin-left: 8px;
@ -277,6 +266,7 @@ export default {
width: 100%; width: 100%;
height: 50%; height: 50%;
overflow: hidden; overflow: hidden;
flex: none;
transform-style: preserve-3d; transform-style: preserve-3d;
& > div { & > div {
@ -285,13 +275,14 @@ export default {
width: 100%; width: 100%;
height: 30px; height: 30px;
} }
animation-timing-function: linear;
&.a0 { &.a0 {
top: 0; top: 0;
// opacity: 0; // opacity: 0;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
background-color: #6c96e8; background-color: #6c96e8;
transform-origin: 50% bottom; transform-origin: 50% bottom;
animation-duration: 500ms; animation-duration: 400ms;
// animation-fill-mode: none; // animation-fill-mode: none;
transform: rotateX(0); transform: rotateX(0);
backface-visibility: hidden; backface-visibility: hidden;
@ -308,10 +299,11 @@ export default {
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
background-color: #73a1f8; background-color: #73a1f8;
transform-origin: 50% top; transform-origin: 50% top;
animation-duration: 500ms; animation-duration: 400ms;
// animation-fill-mode: none; // animation-fill-mode: none;
transform: rotateX(180deg); transform: rotateX(180deg);
backface-visibility: hidden; backface-visibility: visible; // 这个需要是visible，因为背面不渲染的话，连里面的数据浏览器都不会更新
z-index: 2; z-index: 2;
& > div { & > div {
bottom: 0; bottom: 0;
@ -331,4 +323,4 @@ export default {
} }
} }
} }
</style> </style>

32
webpack.dev.config.js
View File

@ -1,28 +1,40 @@
var path = require('path'); var path = require("path");
const VueLoaderPlugin = require('vue-loader/lib/plugin'); const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = { module.exports = {
mode: 'development', mode: "development",
entry: path.join(__dirname, 'example', 'main.js'), entry: path.join(__dirname, "example", "main.js"),
output: { output: {
filename: 'bundle.js', filename: "bundle.js",
}, },
module: { module: {
rules: [ rules: [
{ {
test: /.vue$/, test: /.vue$/,
use: ['vue-loader'], use: ["vue-loader"],
include: [path.join(__dirname, 'example')], // include: [path.join(__dirname, "example")],
}, },
{ {
test: /\.js$/, test: /\.js$/,
use: ['babel-loader'], use: ["babel-loader"],
include: [path.join(__dirname, 'example')], // include: [path.join(__dirname, "example")],
},
{
// .css 解析
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"],
// include: path.resolve(__dirname, "src"),
},
{
// .less 解析
test: /\.less$/,
use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
// include: path.resolve(__dirname, "src"),
}, },
], ],
}, },
devServer: { devServer: {
contentBase: path.join(__dirname, 'example'), contentBase: path.join(__dirname, "example"),
}, },
plugins: [new VueLoaderPlugin()], plugins: [new VueLoaderPlugin()],
}; };

85
webpack.production.config.js
View File

@ -1,79 +1,88 @@
/** 这是用于开发环境的webpack配置文件 **/ /** 这是用于开发环境的webpack配置文件 **/
const path = require('path'); // 获取绝对路径用 const path = require("path"); // 获取绝对路径用
const webpack = require('webpack'); // webpack核心 const webpack = require("webpack"); // webpack核心
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 每次打包前清除旧的build文件夹 const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 每次打包前清除旧的build文件夹
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const VueLoaderPlugin = require("vue-loader/lib/plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin'); const TerserPlugin = require("terser-webpack-plugin"); // 优化js
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); // 压缩CSS
module.exports = { module.exports = {
mode: 'production', mode: "production",
entry: [ entry: [
'./src/index.js', // 项目入口 "./src/index.js", // 项目入口
], ],
output: { output: {
path: path.resolve(__dirname, 'dist'), // 将打包好的文件放在此路径下，dev模式中，只会在内存中存在，不会真正的打包到此路径 path: path.resolve(__dirname, "dist"), // 将打包好的文件放在此路径下，dev模式中，只会在内存中存在，不会真正的打包到此路径
filename: '[name].js', //编译后的文件名字 filename: "[name].js", //编译后的文件名字
library: ['vue-flip-down'], library: ["vue-flip-down"],
libraryTarget: 'umd', libraryTarget: "umd",
}, },
externals: { externals: {
vue: 'vue', vue: "vue",
},
optimization: {
minimizer: [
new TerserPlugin({
parallel: true, // 多线程并行构建
terserOptions: {
// https://github.com/terser/terser#minify-options
compress: {
warnings: false, // 删除无用代码时是否给出警告
drop_console: true, // 删除所有的console.*
drop_debugger: true, // 删除所有的debugger
},
},
}),
new OptimizeCSSAssetsPlugin({}),
],
splitChunks: {
chunks: "all",
},
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.vue$/, test: /\.vue$/,
use: ['vue-loader'], use: ["vue-loader"],
include: path.resolve(__dirname, 'src'), include: path.resolve(__dirname, "src"),
}, },
{ {
// .js .jsx用babel解析 // .js .jsx用babel解析
test: /\.js?$/, test: /\.js?$/,
use: ['babel-loader'], use: ["babel-loader"],
include: path.resolve(__dirname, 'src'), include: path.resolve(__dirname, "src"),
}, },
{ {
// .css 解析 // .css 解析
test: /\.css$/, test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'], use: ["style-loader", "css-loader", "postcss-loader"],
include: path.resolve(__dirname, 'src'), include: path.resolve(__dirname, "src"),
}, },
{ {
// .less 解析 // .less 解析
test: /\.less$/, test: /\.less$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'], use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
include: path.resolve(__dirname, 'src'), include: path.resolve(__dirname, "src"),
}, },
{ {
// 文件解析 // 文件解析
test: /\.(eot|woff|otf|svg|ttf|woff2|appcache|mp3|mp4|pdf)(\?|$)/, test: /\.(eot|woff|otf|svg|ttf|woff2|appcache|mp3|mp4|pdf)(\?|$)/,
include: path.resolve(__dirname, 'src'), include: path.resolve(__dirname, "src"),
use: ['file-loader?name=assets/[name].[ext]'], use: ["file-loader?name=assets/[name].[ext]"],
}, },
{ {
// 图片解析 // 图片解析
test: /\.(png|jpg|gif)(\?|$)/, test: /\.(png|jpg|gif)(\?|$)/,
include: path.resolve(__dirname, 'src'), include: path.resolve(__dirname, "src"),
use: ['url-loader?limit=8192&name=assets/[name].[ext]'], use: ["url-loader?limit=8192&name=assets/[name].[ext]"],
}, },
], ],
}, },
plugins: [ plugins: [new VueLoaderPlugin(), new CleanWebpackPlugin()],
new VueLoaderPlugin(),
new CleanWebpackPlugin(['dist']),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true, // 是否删除代码中所有的console
},
},
}),
],
resolve: { resolve: {
extensions: ['.js', '.vue', '.less', '.css'], //后缀名自动补全 extensions: [".js", ".vue", ".less", ".css"], //后缀名自动补全
alias: { alias: {
'@': path.resolve(__dirname, 'src'), "@": path.resolve(__dirname, "src"),
}, },
}, },
}; };

3409
yarn.lock
View File

File diff suppressed because it is too large Load Diff