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

25
example/src/app.vue
View File

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

46
package.json
View File

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

90
src/app.vue
View File

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

32
webpack.dev.config.js
View File

@ -1,28 +1,40 @@
var path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
var path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
mode: 'development',
entry: path.join(__dirname, 'example', 'main.js'),
mode: "development",
entry: path.join(__dirname, "example", "main.js"),
output: {
filename: 'bundle.js',
filename: "bundle.js",
},
module: {
rules: [
{
test: /.vue$/,
use: ['vue-loader'],
include: [path.join(__dirname, 'example')],
use: ["vue-loader"],
// include: [path.join(__dirname, "example")],
},
{
test: /\.js$/,
use: ['babel-loader'],
include: [path.join(__dirname, 'example')],
use: ["babel-loader"],
// 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: {
contentBase: path.join(__dirname, 'example'),
contentBase: path.join(__dirname, "example"),
},
plugins: [new VueLoaderPlugin()],
};

85
webpack.production.config.js
View File

@ -1,79 +1,88 @@
/** 这是用于开发环境的webpack配置文件 **/
const path = require('path'); // 获取绝对路径用
const webpack = require('webpack'); // webpack核心
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 每次打包前清除旧的build文件夹
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require("path"); // 获取绝对路径用
const webpack = require("webpack"); // webpack核心
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 每次打包前清除旧的build文件夹
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 = {
mode: 'production',
mode: "production",
entry: [
'./src/index.js', // 项目入口
"./src/index.js", // 项目入口
],
output: {
path: path.resolve(__dirname, 'dist'), // 将打包好的文件放在此路径下，dev模式中，只会在内存中存在，不会真正的打包到此路径
filename: '[name].js', //编译后的文件名字
library: ['vue-flip-down'],
libraryTarget: 'umd',
path: path.resolve(__dirname, "dist"), // 将打包好的文件放在此路径下，dev模式中，只会在内存中存在，不会真正的打包到此路径
filename: "[name].js", //编译后的文件名字
library: ["vue-flip-down"],
libraryTarget: "umd",
},
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: {
rules: [
{
test: /\.vue$/,
use: ['vue-loader'],
include: path.resolve(__dirname, 'src'),
use: ["vue-loader"],
include: path.resolve(__dirname, "src"),
},
{
// .js .jsx用babel解析
test: /\.js?$/,
use: ['babel-loader'],
include: path.resolve(__dirname, 'src'),
use: ["babel-loader"],
include: path.resolve(__dirname, "src"),
},
{
// .css 解析
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
include: path.resolve(__dirname, 'src'),
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'),
use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
include: path.resolve(__dirname, "src"),
},
{
// 文件解析
test: /\.(eot|woff|otf|svg|ttf|woff2|appcache|mp3|mp4|pdf)(\?|$)/,
include: path.resolve(__dirname, 'src'),
use: ['file-loader?name=assets/[name].[ext]'],
include: path.resolve(__dirname, "src"),
use: ["file-loader?name=assets/[name].[ext]"],
},
{
// 图片解析
test: /\.(png|jpg|gif)(\?|$)/,
include: path.resolve(__dirname, 'src'),
use: ['url-loader?limit=8192&name=assets/[name].[ext]'],
include: path.resolve(__dirname, "src"),
use: ["url-loader?limit=8192&name=assets/[name].[ext]"],
},
],
},
plugins: [
new VueLoaderPlugin(),
new CleanWebpackPlugin(['dist']),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true, // 是否删除代码中所有的console
},
},
}),
],
plugins: [new VueLoaderPlugin(), new CleanWebpackPlugin()],
resolve: {
extensions: ['.js', '.vue', '.less', '.css'], //后缀名自动补全
extensions: [".js", ".vue", ".less", ".css"], //后缀名自动补全
alias: {
'@': path.resolve(__dirname, 'src'),
"@": path.resolve(__dirname, "src"),
},
},
};

3409
yarn.lock
View File

File diff suppressed because it is too large Load Diff