blackteay/vue-flip-down
1
0
Fork 0
mirror of https://github.com/javaLuo/vue-flip-down.git synced 2025-04-06 03:58:09 +08:00
Code Issues Projects Releases Wiki Activity

3.1.0 - 使用vite构建

Browse Source
This commit is contained in:
javaLuo 2022-06-02 12:06:25 +08:00
parent eed5df2b78
commit b99784ffd7
21 changed files with 559 additions and 9323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
.gitignore vendored
View File

@ -1,21 +1,22 @@
.DS_Store # Logs
node_modules logs
/dist *.log
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
pnpm-debug.log* pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files # Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea .idea
.vscode .DS_Store
*.suo *.suo
*.ntvs* *.ntvs*
*.njsproj *.njsproj

3
babel.config.js
View File

@ -1,3 +0,0 @@
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
};

4
example/main.js
View File

@ -1,4 +0,0 @@
import { createApp } from "vue";
import App from "./src/app.vue";
createApp(App).mount("#app");

12
example/public/index.html
View File

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<title>Example</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

47
example/src/app.vue
View File

@ -1,47 +0,0 @@
<template>
<div>
<AuthModelMy :show="isShow"
@close="onClose" @success="onSuccess" @fail="onFail"/>
<hr />
<button @click="onShow">开始验证</button>
</div>
</template>
<script>
import { ref } from "vue";
import AuthModelMy from "../../dist/vue3-puzzle-vcode.umd.min.js";
// import AuthModelMy from "../../src/app.vue";
import Img1 from "./assets/1.jpg";
export default {
components: {
AuthModelMy
},
setup(){
const isShow = ref(false);
const onShow = () => {
isShow.value = true;
}
const onClose = () => {
isShow.value = false;
}
const onSuccess = (e) => {
console.log('验证成功:', e);
onClose();
}
const onFail = (e) => {
console.log('验证失败:', e);
onClose();
}
return {
isShow,
onShow,
onClose,
onSuccess,
onFail
}
}
};
</script>

BIN
example/src/assets/1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

13
index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

70
package.json
View File

@ -1,50 +1,32 @@
{ {
"name": "vue-flip-down", "name": "vue-flip-down",
"version": "3.0.0", "version": "3.1.0",
"scripts": { "files": [
"serve": "vue-cli-service serve", "dist"
"build": "vue-cli-service build --target lib", ],
"lint": "vue-cli-service lint", "module": "./dist/vue-flip-down.es.js",
"prettier": "prettier --write \"{src,mock}/**/*.{js,css,less,vue}\"" "main": "./dist/vue-flip-down.umd.js",
"typings": "./dist/main.d.ts",
"exports": {
".": {
"import": "./dist/vue-flip-down.es.js",
"require": "./dist/vue-flip-down.umd.js"
}
}, },
"files": ["dist"], "scripts": {
"main": "./dist/vue-flip-down.umd.min.js", "dev": "vite",
"dependencies": { "build": "vue-tsc --noEmit && vite build",
"core-js": "^3.6.5", "preview": "vite preview"
"vue": "^3.0.0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0", "@types/node": "^17.0.31",
"@vue/cli-plugin-eslint": "~4.5.0", "@vitejs/plugin-vue": "^2.3.3",
"@vue/cli-service": "~4.5.0", "less": "^4.1.2",
"@vue/compiler-sfc": "^3.0.0", "typescript": "^4.5.4",
"@vue/eslint-config-prettier": "^6.0.0", "vite": "^2.9.9",
"babel-eslint": "^10.1.0", "vite-plugin-dts": "^1.1.1",
"eslint": "^6.7.2", "vite-plugin-libcss": "^1.0.5",
"eslint-plugin-prettier": "^3.3.1", "vue": "^3.2.25",
"eslint-plugin-vue": "^7.0.0", "vue-tsc": "^0.34.7"
"less": "^3.0.4", }
"less-loader": "^5.0.0",
"prettier": "^2.2.1"
},
"eslintConfig": {
"root": false,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
} }

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

380
src/app.vue
View File

@ -1,366 +1,32 @@
<!-- 翻页效果 倒计时组件 -->
<template> <template>
<div <img alt="Vue logo" src="./assets/logo.png" />
:class="['vue-countdown-component', { theme2: theme !== 1 }, { ie: isIE }]" <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
> <!-- <Flip :endDate="endDate" @time-up="timeUp" /> -->
<template v-for="(item, index) in timeArray" :key="index">
<div :class="['time-box']">
<!-- 底层基础div -->
<div class="base">
{{ item }}
<div class="base-b">{{ timeArrayT[index] }}</div>
</div>
<!-- 翻页动画div -->
<div
:class="['face', { anime: isAnimate[index] }]"
@animationend="onAnimateEnd(index)"
>
{{ timeArrayT[index] }}
</div>
<div :class="['back', { anime: isAnimate[index] }]">{{ item }}</div>
</div>
<!-- 文字 -->
<div
class="time-unit"
:key="`unit-${index}`"
v-if="isTimeUnitShow(index)"
>
{{ setTimeUnit(index) }}
</div>
</template>
</div>
</template> </template>
<script> <script setup lang="ts">
import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue"; import { ref } from "vue";
export default { // This starter template is using Vue 3 <script setup> SFCs
emits: ["timeUp"], // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
props: { // import HelloWorld from "./components/HelloWorld.vue";
endDate: { type: [Date, Number, String], default: 0 }, // 截止时间 // import Flip from "../dist/vue-flip-down.es";
type: { type: [Number, String], default: 4 }, // 时间精度 4/3/2/1 // import Flip from "./lib/App.vue";
theme: { type: [Number, String], default: 1 }, const endDate = ref(Date.now() + 10 * 1000);
timeUnit: { type: Array, default: () => [] },
},
setup(props, context) {
const isIE = ref(false);
const timeArray = ref(
props.theme === 2
? new Array(props.type * 2).fill("0")
: new Array(props.type).fill("00")
);
const timeArrayT = ref(
props.theme === 2
? new Array(props.type * 2).fill("0")
: new Array(props.type).fill("00")
);
const isAnimate = ref(
props.theme === 2
? new Array(props.type * 2).fill(false)
: new Array(props.type).fill(false)
);
const timer = ref(null);
const endTime = computed(() => { function timeUp() {
if (props.endDate instanceof Date) { console.log("时间到了");
return props.endDate.getTime(); }
}
return Number(props.endDate) > 0 ? Number(props.endDate) : 0;
});
const step = computed(() => (props.theme === 1 ? 1 : 2));
const arr = computed(() => {
const length = timeArray.value.length;
const temp = [
length - 1,
length - step.value - 1,
length - step.value * 2 - 1,
length - step.value * 3 - 1,
];
temp.length = props.type > 1 ? props.type : 1;
return temp;
});
watch(timeArray, (newV, oldV) => {
const diff = [];
newV.forEach((value, index) => {
if (value !== oldV[index]) {
diff.push({ value, index });
isAnimate.value[index] = true;
}
});
setTimeout(() => {
diff.forEach((item) => {
timeArrayT.value[item.index] = item.value;
});
}, 350);
});
watch(endTime, (newV) => {
if (newV > 0) {
start();
}
});
onMounted(() => {
if (
window.ActiveXObject ||
"ActiveXObject" in window ||
window.navigator.userAgent.indexOf("Edge") > -1
) {
isIE.value = true;
}
start(0);
});
onBeforeUnmount(() => {
clearTimeout(timer.value);
});
/**
* 开始倒计时
* @param st 重复执行的间隔时间
*/
const start = (st = 1000) => {
clearTimeout(timer.value);
timer.value = setTimeout(() => {
let t = endTime.value - new Date().getTime(); // 剩余的毫秒数
t = t < 0 ? 0 : t;
let day = 0; // 剩余的天
let hour = 0; // 剩余的小时
let min = 0; // 剩余的分钟
let second = 0; // 剩余的秒
const type = Number(props.type);
if (type >= 4) {
day = Math.floor(t / 86400000); // 剩余的天
hour = Math.floor(t / 3600000 - day * 24); // 剩余的小时 已排除天
min = Math.floor(t / 60000 - day * 1440 - hour * 60); // 剩余的分钟 已排除天和小时
second = Math.floor(t / 1000 - day * 86400 - hour * 3600 - min * 60); // 剩余的秒
} else if (type >= 3) {
hour = Math.floor(t / 3600000); // 剩余的小时
min = Math.floor(t / 60000 - hour * 60); // 剩余的分钟 已排小时
second = Math.floor(t / 1000 - hour * 3600 - min * 60); // 剩余的秒
} else if (type >= 2) {
min = Math.floor(t / 60000); // 剩余的分钟
second = Math.floor(t / 1000 - min * 60); // 剩余的秒
} else {
second = Math.floor(t / 1000); // 剩余的秒
}
let ar = [];
if (Number(props.theme) === 1) {
// 不分开
type >= 4 && ar.push(String(day).padStart(2, "0"));
type >= 3 && ar.push(String(hour).padStart(2, "0"));
type >= 2 && ar.push(String(min).padStart(2, "0"));
ar.push(String(second).padStart(2, "0"));
} else {
// 分开
type >= 4 && ar.push(...String(day).padStart(2, "0").split(""));
type >= 3 && ar.push(...String(hour).padStart(2, "0").split(""));
type >= 2 && ar.push(...String(min).padStart(2, "0").split(""));
ar.push(...String(second).padStart(2, "0").split(""));
}
timeArray.value = ar;
if (t > 0) {
start();
} else {
context.emit("timeUp");
}
}, st);
};
// 动画完毕后，去掉对应的class, 为下次动画做准备
const onAnimateEnd = (index) => {
isAnimate.value[index] = false;
};
const isTimeUnitShow = (index) => {
if (arr.value.includes(index)) {
if (index === timeArray.value.length - 1 && !props.timeUnit[3]) {
return false;
}
return true;
}
return false;
};
const setTimeUnit = (index) => {
switch (index) {
case timeArray.value.length - 1:
return props.timeUnit[3] || ""; // 秒
case timeArray.value.length - step.value - 1:
return props.timeUnit[2] || ""; // 分
case timeArray.value.length - step.value * 2 - 1:
return props.timeUnit[1] || ""; // 时
default:
return props.timeUnit[0] || ""; // 天
}
};
return {
isIE,
timeArray,
timeArrayT,
isAnimate,
endTime,
step,
arr,
onAnimateEnd,
isTimeUnitShow,
setTimeUnit,
};
},
};
</script> </script>
<style lang="less"> <style>
.vue-countdown-component { #app {
display: flex; font-family: Avenir, Helvetica, Arial, sans-serif;
@keyframes animate-filp-face { -webkit-font-smoothing: antialiased;
0% { -moz-osx-font-smoothing: grayscale;
transform: rotateX(-0.01deg);
opacity: 1; // 改变opacity 为了QQ浏览器和safari(不支持z-index animate)
}
50% {
opacity: 1;
}
51% {
opacity: 0;
}
100% {
transform: rotateX(-180deg);
opacity: 0;
}
}
@keyframes animate-filp-back {
0% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(-0.01deg);
}
}
&.ie {
// 为了ie和老版edge（不支持clip-path）
.base {
.base-b {
clip: rect(15px, auto, auto, auto);
}
}
.face {
clip: rect(auto, auto, 15px, auto);
}
.back {
clip: rect(15px, auto, auto, auto);
}
}
&.theme2 {
.time-box {
min-width: 20px;
& + .time-box {
margin-left: 1px;
}
}
}
.time-unit {
padding: 0 4px;
color: #222;
font-size: 14px;
line-height: 30px;
white-space: nowrap;
}
.time-box {
position: relative;
box-sizing: border-box;
height: 30px;
min-width: 28px;
font-size: 14px;
text-align: center; text-align: center;
background-color: #6c96e8; color: #2c3e50;
perspective: 60px; margin-top: 60px;
border-radius: 3px;
padding: 0 2px;
color: #fff;
line-height: 30px;
&:before {
content: "";
position: absolute;
background: #a7c7ff;
width: 1px;
height: 6px;
top: 50%;
left: -1px;
margin-top: -3px;
z-index: -1;
}
&:after {
content: "";
position: absolute;
background: #a7c7ff;
width: 1px;
height: 6px;
top: 50%;
right: -1px;
margin-top: -3px;
z-index: -1;
}
& + .time-box {
margin-left: 8px;
}
& > div {
overflow: hidden;
animation-timing-function: linear;
animation-duration: 400ms;
// 为了chrome，需要一个小的角度，否则字体渲染错位
transform: rotateX(-0.01deg);
border-radius: 3px;
&.base {
position: relative;
.base-b {
position: absolute;
left: 0;
bottom: 0;
border-radius: 0 0 3px 3px;
width: 100%;
height: 100%;
background-color: #709bf1; // a1比base浅一点点，为了模拟翻页的阴影效果
// background-color: #0ff;
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
}
&.face {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #6c96e8;
// background-color: #f00;
backface-visibility: visible;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
z-index: 2;
&.anime {
animation-name: animate-filp-face;
}
}
&.back {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #709bf1; // b0和a1一致
// background-color: #aa0;
transform: rotateX(-180deg);
backface-visibility: visible;
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
&.anime {
animation-name: animate-filp-back;
}
}
}
}
} }
</style> </style>

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

52
src/components/HelloWorld.vue Normal file
View File

@ -0,0 +1,52 @@
<script setup lang="ts">
import { ref } from 'vue'
defineProps<{ msg: string }>()
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<p>
Recommended IDE setup:
<a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
</p>
<p>See <code>README.md</code> for more information.</p>
<p>
<a href="https://vitejs.dev/guide/features.html" target="_blank">
Vite Docs
</a>
|
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
</p>
<button type="button" @click="count++">count is: {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test hot module replacement.
</p>
</template>
<style scoped>
a {
color: #42b983;
}
label {
margin: 0 0.5em;
font-weight: bold;
}
code {
background-color: #eee;
padding: 2px 4px;
border-radius: 4px;
color: #304455;
}
</style>

8
src/env.d.ts vendored Normal file
View File

@ -0,0 +1,8 @@
/// <reference types="vite/client" />
declare module '*.vue' {
import type { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}

365
src/lib/App.vue Normal file
View File

@ -0,0 +1,365 @@
<!-- 翻页效果 倒计时组件 -->
<template>
<div
:class="['vue-countdown-component', { theme2: theme !== 1 }, { ie: isIE }]"
>
<template v-for="(item, index) in timeArray" :key="index">
<div :class="['time-box']">
<!-- 底层基础div -->
<div class="base">
{{ item }}
<div class="base-b">{{ timeArrayT[index] }}</div>
</div>
<!-- 翻页动画div -->
<div
:class="['face', { anime: isAnimate[index] }]"
@animationend="onAnimateEnd(index)"
>
{{ timeArrayT[index] }}
</div>
<div :class="['back', { anime: isAnimate[index] }]">{{ item }}</div>
</div>
<!-- 文字 -->
<div
class="time-unit"
:key="`unit-${index}`"
v-if="isTimeUnitShow(index)"
>
{{ setTimeUnit(index) }}
</div>
</template>
</div>
</template>
<script setup lang="ts">
import { ref, computed, watch, onMounted, onBeforeUnmount, Ref } from "vue";
import { defineProps, defineEmits } from "vue";
const emit = defineEmits(["timeUp"]);
const props = defineProps({
endDate: { type: [Date, Number, String], default: 0 }, // 截止时间
type: { type: Number, default: 4 }, // 时间精度 4/3/2/1
theme: { type: Number, default: 1 },
timeUnit: { type: Array, default: () => [] },
});
const isIE = ref(false);
const timeArray: Ref<string[]> = ref(
props.theme === 2
? new Array(props.type * 2).fill("0")
: new Array(props.type).fill("00")
);
const timeArrayT: Ref<string[]> = ref(
props.theme === 2
? new Array(props.type * 2).fill("0")
: new Array(props.type).fill("00")
);
const isAnimate: Ref<boolean[]> = ref(
props.theme === 2
? new Array(props.type * 2).fill(false)
: new Array(props.type).fill(false)
);
const timer = ref<NodeJS.Timeout>();
const endTime = computed(() => {
if (props.endDate instanceof Date) {
return props.endDate.getTime();
}
return Number(props.endDate) > 0 ? Number(props.endDate) : 0;
});
const step = computed(() => (props.theme === 1 ? 1 : 2));
const arr = computed(() => {
const length = timeArray.value.length;
const temp = [
length - 1,
length - step.value - 1,
length - step.value * 2 - 1,
length - step.value * 3 - 1,
];
temp.length = props.type > 1 ? props.type : 1;
return temp;
});
watch(timeArray, (newV, oldV) => {
const diff: { value: string; index: number }[] = [];
newV.forEach((value, index) => {
if (value !== oldV[index]) {
diff.push({ value, index });
isAnimate.value[index] = true;
}
});
setTimeout(() => {
diff.forEach((item) => {
timeArrayT.value[item.index] = item.value;
});
}, 350);
});
watch(endTime, (newV) => {
if (newV > 0) {
start();
}
});
onMounted(() => {
if (
(window as any).ActiveXObject ||
"ActiveXObject" in window ||
window.navigator.userAgent.indexOf("Edge") > -1
) {
isIE.value = true;
}
start(0);
});
onBeforeUnmount(() => {
clearTimeout(timer.value);
});
/**
* 开始倒计时
* @param st 重复执行的间隔时间
*/
const start = (st = 1000) => {
clearTimeout(timer.value);
timer.value = setTimeout(() => {
let t = endTime.value - new Date().getTime(); // 剩余的毫秒数
t = t < 0 ? 0 : t;
let day = 0; // 剩余的天
let hour = 0; // 剩余的小时
let min = 0; // 剩余的分钟
let second = 0; // 剩余的秒
const type = Number(props.type);
if (type >= 4) {
day = Math.floor(t / 86400000); // 剩余的天
hour = Math.floor(t / 3600000 - day * 24); // 剩余的小时 已排除天
min = Math.floor(t / 60000 - day * 1440 - hour * 60); // 剩余的分钟 已排除天和小时
second = Math.floor(t / 1000 - day * 86400 - hour * 3600 - min * 60); // 剩余的秒
} else if (type >= 3) {
hour = Math.floor(t / 3600000); // 剩余的小时
min = Math.floor(t / 60000 - hour * 60); // 剩余的分钟 已排小时
second = Math.floor(t / 1000 - hour * 3600 - min * 60); // 剩余的秒
} else if (type >= 2) {
min = Math.floor(t / 60000); // 剩余的分钟
second = Math.floor(t / 1000 - min * 60); // 剩余的秒
} else {
second = Math.floor(t / 1000); // 剩余的秒
}
let ar = [];
if (Number(props.theme) === 1) {
// 不分开
type >= 4 && ar.push(String(day).padStart(2, "0"));
type >= 3 && ar.push(String(hour).padStart(2, "0"));
type >= 2 && ar.push(String(min).padStart(2, "0"));
ar.push(String(second).padStart(2, "0"));
} else {
// 分开
type >= 4 && ar.push(...String(day).padStart(2, "0").split(""));
type >= 3 && ar.push(...String(hour).padStart(2, "0").split(""));
type >= 2 && ar.push(...String(min).padStart(2, "0").split(""));
ar.push(...String(second).padStart(2, "0").split(""));
}
timeArray.value = ar;
if (t > 0) {
start();
} else {
emit("timeUp");
}
}, st);
};
// 动画完毕后，去掉对应的class, 为下次动画做准备
const onAnimateEnd = (index: number) => {
isAnimate.value[index] = false;
};
const isTimeUnitShow = (index: number) => {
if (arr.value.includes(index)) {
if (index === timeArray.value.length - 1 && !props.timeUnit[3]) {
return false;
}
return true;
}
return false;
};
const setTimeUnit = (index: number) => {
switch (index) {
case timeArray.value.length - 1:
return props.timeUnit[3] || ""; // 秒
case timeArray.value.length - step.value - 1:
return props.timeUnit[2] || ""; // 分
case timeArray.value.length - step.value * 2 - 1:
return props.timeUnit[1] || ""; // 时
default:
return props.timeUnit[0] || ""; // 天
}
};
// return {
// isIE,
// timeArray,
// timeArrayT,
// isAnimate,
// endTime,
// step,
// arr,
// onAnimateEnd,
// isTimeUnitShow,
// setTimeUnit,
// };
</script>
<style lang="less">
.vue-countdown-component {
display: flex;
@keyframes animate-flip-face {
0% {
transform: rotateX(-0.01deg);
opacity: 1; // 改变opacity 为了QQ浏览器和safari(不支持z-index animate)
}
50% {
opacity: 1;
}
51% {
opacity: 0;
}
100% {
transform: rotateX(-180deg);
opacity: 0;
}
}
@keyframes animate-flip-back {
0% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(-0.01deg);
}
}
&.ie {
// 为了ie和老版edge（不支持clip-path）
.base {
.base-b {
clip: rect(15px, auto, auto, auto);
}
}
.face {
clip: rect(auto, auto, 15px, auto);
}
.back {
clip: rect(15px, auto, auto, auto);
}
}
&.theme2 {
.time-box {
min-width: 20px;
& + .time-box {
margin-left: 1px;
}
}
}
.time-unit {
padding: 0 4px;
color: #222;
font-size: 14px;
line-height: 30px;
white-space: nowrap;
}
.time-box {
position: relative;
box-sizing: border-box;
height: 30px;
min-width: 28px;
font-size: 14px;
text-align: center;
background-color: #6c96e8;
perspective: 60px;
border-radius: 3px;
padding: 0 2px;
color: #fff;
line-height: 30px;
&:before {
content: "";
position: absolute;
background: #a7c7ff;
width: 1px;
height: 6px;
top: 50%;
left: -1px;
margin-top: -3px;
z-index: -1;
}
&:after {
content: "";
position: absolute;
background: #a7c7ff;
width: 1px;
height: 6px;
top: 50%;
right: -1px;
margin-top: -3px;
z-index: -1;
}
& + .time-box {
margin-left: 8px;
}
& > div {
overflow: hidden;
animation-timing-function: linear;
animation-duration: 400ms;
// 为了chrome，需要一个小的角度，否则字体渲染错位
transform: rotateX(-0.01deg);
border-radius: 3px;
&.base {
position: relative;
.base-b {
position: absolute;
left: 0;
bottom: 0;
border-radius: 0 0 3px 3px;
width: 100%;
height: 100%;
background-color: #709bf1; // a1比base浅一点点，为了模拟翻页的阴影效果
// background-color: #0ff;
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
}
&.face {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #6c96e8;
// background-color: #f00;
backface-visibility: visible;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
z-index: 2;
&.anime {
animation-name: animate-flip-face;
}
}
&.back {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #709bf1; // b0和a1一致
// background-color: #aa0;
transform: rotateX(-180deg);
backface-visibility: visible;
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
&.anime {
animation-name: animate-flip-back;
}
}
}
}
}
</style>

0
src/main.js → src/lib/main.ts
View File

4
src/main.ts Normal file
View File

@ -0,0 +1,4 @@
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

18
tsconfig.json Normal file
View File

@ -0,0 +1,18 @@
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"skipLibCheck": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}

8
tsconfig.node.json Normal file
View File

@ -0,0 +1,8 @@
{
"compilerOptions": {
"composite": true,
"module": "esnext",
"moduleResolution": "node"
},
"include": ["vite.config.ts"]
}

28
vite.config.ts Normal file
View File

@ -0,0 +1,28 @@
import {resolve} from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from 'vite-plugin-dts';
import libCss from 'vite-plugin-libcss';
// https://vitejs.dev/config/
module.exports = defineConfig({
plugins: [vue(), dts({insertTypesEntry: true, copyDtsFiles: false}), libCss()],
resolve: { dedupe: ['vue'] },
build: {
lib: {
name: 'vue-flip-down',
entry: resolve(__dirname, 'src/lib/main.ts'),
fileName: (format) => `vue-flip-down.${format}.js`
},
cssCodeSplit: true,
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue'
}
}
}
}
})

12
vue.config.js
View File

@ -1,12 +0,0 @@
const path = require("path");
module.exports = {
css: {
extract: process.env.NODE_ENV === "production" ? false : true,
},
outputDir: process.env.NODE_ENV === "production" ? path.resolve(__dirname, "dist") : path.resolve(__dirname, "example-dist"),
// publicPath: process.env.NODE_ENV === "production" ? "/" : "/example/",
// configureWebpack: config => {
// return {};
// },
};

8831
yarn.lock
View File

File diff suppressed because it is too large Load Diff