mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-03 13:44:47 +08:00
fix: fix some bug
This commit is contained in:
xiaoxian521
parent
1d1663e4ba
commit
e027fec6dc
10
README.md
10
README.md
@ -16,11 +16,11 @@ vue-pure-admin is a free and open source middle and back-end template. Using the
|
||||
Click to log in without password
|
||||
|
||||
<p align="center">
|
||||
<img alt="VbenAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31d4e268a9554389abb2b691a165f983~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="VbenAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c81c5348fb2476097dd847e3b050168~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="VbenAdmin Logo" width="100%" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13749b799727449cbdcb2383f6ea1eb4~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="VbenAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6745a79321cc40aba4de02aaf11ba4f2~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="VbenAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cab5f2aa2b58483f8a2cf40fb3aafdb7~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="PureAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31d4e268a9554389abb2b691a165f983~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="PureAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c81c5348fb2476097dd847e3b050168~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="PureAdmin Logo" width="100%" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13749b799727449cbdcb2383f6ea1eb4~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="PureAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6745a79321cc40aba4de02aaf11ba4f2~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="PureAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cab5f2aa2b58483f8a2cf40fb3aafdb7~tplv-k3u1fbpfcp-watermark.image">
|
||||
</p>
|
||||
|
||||
### Use Gitpod
|
||||
|
||||
@ -16,11 +16,11 @@ vue-pure-admin 是一个免费开源的中后台模版。使用了最新的`vue3
|
||||
点击免密登录
|
||||
|
||||
<p align="center">
|
||||
<img alt="VbenAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31d4e268a9554389abb2b691a165f983~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="VbenAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c81c5348fb2476097dd847e3b050168~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="VbenAdmin Logo" width="100%" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13749b799727449cbdcb2383f6ea1eb4~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="VbenAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6745a79321cc40aba4de02aaf11ba4f2~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="VbenAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cab5f2aa2b58483f8a2cf40fb3aafdb7~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="PureAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31d4e268a9554389abb2b691a165f983~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="PureAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c81c5348fb2476097dd847e3b050168~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="PureAdmin Logo" width="100%" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13749b799727449cbdcb2383f6ea1eb4~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="PureAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6745a79321cc40aba4de02aaf11ba4f2~tplv-k3u1fbpfcp-watermark.image">
|
||||
<img alt="PureAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cab5f2aa2b58483f8a2cf40fb3aafdb7~tplv-k3u1fbpfcp-watermark.image">
|
||||
</p>
|
||||
|
||||
### 使用 Gitpod
|
||||
|
||||
10
src/components/countTo/index.ts
Normal file
10
src/components/countTo/index.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { App } from "vue"
|
||||
import countTo from "./src/countTo"
|
||||
|
||||
export const CountTo = Object.assign(countTo, {
|
||||
install(app: App) {
|
||||
app.component(countTo.name, countTo)
|
||||
}
|
||||
})
|
||||
|
||||
export default CountTo
|
||||
173
src/components/countTo/src/countTo.tsx
Normal file
173
src/components/countTo/src/countTo.tsx
Normal file
@ -0,0 +1,173 @@
|
||||
import {
|
||||
defineComponent,
|
||||
reactive,
|
||||
computed,
|
||||
watch,
|
||||
onMounted,
|
||||
unref,
|
||||
toRef
|
||||
} from "vue"
|
||||
import { countToProps } from "./props"
|
||||
import { isNumber } from "/@/utils/is"
|
||||
|
||||
export default defineComponent({
|
||||
name: "CountTo",
|
||||
props: countToProps,
|
||||
emits: ["mounted", "callback"],
|
||||
setup(props, { emit }) {
|
||||
const state = reactive<{
|
||||
localStartVal: number
|
||||
printVal: number | null
|
||||
displayValue: string
|
||||
paused: boolean
|
||||
localDuration: number | null
|
||||
startTime: number | null
|
||||
timestamp: number | null
|
||||
rAF: any
|
||||
remaining: number | null
|
||||
color: any
|
||||
fontSize: string
|
||||
}>({
|
||||
localStartVal: props.startVal,
|
||||
displayValue: formatNumber(props.startVal),
|
||||
printVal: null,
|
||||
paused: false,
|
||||
localDuration: props.duration,
|
||||
startTime: null,
|
||||
timestamp: null,
|
||||
remaining: null,
|
||||
rAF: null,
|
||||
color: null,
|
||||
fontSize: "16px"
|
||||
})
|
||||
|
||||
const getCountDown = computed(() => {
|
||||
return props.startVal > props.endVal
|
||||
})
|
||||
|
||||
watch([() => props.startVal, () => props.endVal], () => {
|
||||
if (props.autoplay) {
|
||||
start()
|
||||
}
|
||||
})
|
||||
|
||||
function start() {
|
||||
const { startVal, duration, color, fontSize } = props
|
||||
state.localStartVal = startVal
|
||||
state.startTime = null
|
||||
state.localDuration = duration
|
||||
state.paused = false
|
||||
state.color = color
|
||||
state.fontSize = fontSize
|
||||
state.rAF = requestAnimationFrame(count)
|
||||
}
|
||||
|
||||
function pauseResume() {
|
||||
if (state.paused) {
|
||||
resume()
|
||||
state.paused = false
|
||||
} else {
|
||||
pause()
|
||||
state.paused = true
|
||||
}
|
||||
}
|
||||
|
||||
function pause() {
|
||||
cancelAnimationFrame(state.rAF)
|
||||
}
|
||||
|
||||
function resume() {
|
||||
state.startTime = null
|
||||
state.localDuration = +(state.remaining as number)
|
||||
state.localStartVal = +(state.printVal as number)
|
||||
requestAnimationFrame(count)
|
||||
}
|
||||
|
||||
function reset() {
|
||||
state.startTime = null
|
||||
cancelAnimationFrame(state.rAF)
|
||||
state.displayValue = formatNumber(props.startVal)
|
||||
}
|
||||
|
||||
function count(timestamp: number) {
|
||||
const { useEasing, easingFn, endVal } = props
|
||||
if (!state.startTime) state.startTime = timestamp
|
||||
state.timestamp = timestamp
|
||||
const progress = timestamp - state.startTime
|
||||
state.remaining = (state.localDuration as number) - progress
|
||||
if (useEasing) {
|
||||
if (unref(getCountDown)) {
|
||||
state.printVal =
|
||||
state.localStartVal -
|
||||
easingFn(
|
||||
progress,
|
||||
0,
|
||||
state.localStartVal - endVal,
|
||||
state.localDuration as number
|
||||
)
|
||||
} else {
|
||||
state.printVal = easingFn(
|
||||
progress,
|
||||
state.localStartVal,
|
||||
endVal - state.localStartVal,
|
||||
state.localDuration as number
|
||||
)
|
||||
}
|
||||
} else {
|
||||
if (unref(getCountDown)) {
|
||||
state.printVal =
|
||||
state.localStartVal -
|
||||
(state.localStartVal - endVal) *
|
||||
(progress / (state.localDuration as number))
|
||||
} else {
|
||||
state.printVal =
|
||||
state.localStartVal +
|
||||
(endVal - state.localStartVal) *
|
||||
(progress / (state.localDuration as number))
|
||||
}
|
||||
}
|
||||
if (unref(getCountDown)) {
|
||||
state.printVal = state.printVal < endVal ? endVal : state.printVal
|
||||
} else {
|
||||
state.printVal = state.printVal > endVal ? endVal : state.printVal
|
||||
}
|
||||
state.displayValue = formatNumber(state.printVal)
|
||||
if (progress < (state.localDuration as number)) {
|
||||
state.rAF = requestAnimationFrame(count)
|
||||
} else {
|
||||
emit("callback")
|
||||
}
|
||||
}
|
||||
|
||||
function formatNumber(num: number | string) {
|
||||
const { decimals, decimal, separator, suffix, prefix } = props
|
||||
num = Number(num).toFixed(decimals)
|
||||
num += ""
|
||||
const x = num.split(".")
|
||||
let x1 = x[0]
|
||||
const x2 = x.length > 1 ? decimal + x[1] : ""
|
||||
const rgx = /(\d+)(\d{3})/
|
||||
if (separator && !isNumber(separator)) {
|
||||
while (rgx.test(x1)) {
|
||||
x1 = x1.replace(rgx, "$1" + separator + "$2")
|
||||
}
|
||||
}
|
||||
return prefix + x1 + x2 + suffix
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.autoplay) {
|
||||
start()
|
||||
}
|
||||
emit("mounted")
|
||||
})
|
||||
|
||||
return () => (
|
||||
<>
|
||||
<span style={{
|
||||
color: props.color, fontSize: props.fontSize
|
||||
}}>{state.displayValue}</span>
|
||||
</>
|
||||
)
|
||||
}
|
||||
})
|
||||
@ -1,5 +1,6 @@
|
||||
/**
|
||||
<template>
|
||||
<span :style="{color: color}">{{ displayValue }}</span>
|
||||
<span :style="{color: color,fontSize: fontSize}">{{ displayValue }}</span>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import {
|
||||
@ -29,6 +30,7 @@ export default defineComponent({
|
||||
rAF: any;
|
||||
remaining: number | null;
|
||||
color: any;
|
||||
fontSize: string;
|
||||
}>({
|
||||
localStartVal: props.startVal,
|
||||
displayValue: formatNumber(props.startVal),
|
||||
@ -39,7 +41,8 @@ export default defineComponent({
|
||||
timestamp: null,
|
||||
remaining: null,
|
||||
rAF: null,
|
||||
color: null
|
||||
color: null,
|
||||
fontSize: "16px"
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
@ -60,12 +63,13 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
function start() {
|
||||
const { startVal, duration, color } = props;
|
||||
const { startVal, duration, color, fontSize } = props;
|
||||
state.localStartVal = startVal;
|
||||
state.startTime = null;
|
||||
state.localDuration = duration;
|
||||
state.paused = false;
|
||||
state.color = color;
|
||||
state.fontSize = fontSize;
|
||||
state.rAF = requestAnimationFrame(count);
|
||||
}
|
||||
|
||||
@ -173,3 +177,4 @@ export default defineComponent({
|
||||
}
|
||||
});
|
||||
</script>
|
||||
*/
|
||||
@ -1,4 +1,3 @@
|
||||
import { strict } from 'assert'
|
||||
import { PropType } from 'vue'
|
||||
import { propTypes } from '/@/utils/propTypes'
|
||||
export const countToProps = {
|
||||
@ -18,6 +17,10 @@ export const countToProps = {
|
||||
type: String as PropType<string>,
|
||||
require: false
|
||||
},
|
||||
fontSize: {
|
||||
type: String as PropType<string>,
|
||||
require: false
|
||||
},
|
||||
decimal: propTypes.string.def('.'),
|
||||
separator: propTypes.string.def(','),
|
||||
prefix: propTypes.string.def(''),
|
||||
|
||||
@ -282,22 +282,22 @@ export default defineComponent({
|
||||
<tr>
|
||||
{
|
||||
props.max.map((item, key) => {
|
||||
return <td
|
||||
data-index={props.HsKey}
|
||||
ref={`hstd${props.HsKey}${key}`}
|
||||
class={`hs-select__item${key}`}
|
||||
onMousemove={() => setCurrentValue(key)}
|
||||
onMouseleave={() => resetCurrentValue(key)}
|
||||
onClick={() => selectValue(key, item)}
|
||||
style={{
|
||||
cursor: unref(rateDisabled) ? 'auto' : 'pointer', textAlign: 'center'
|
||||
}}
|
||||
key={key}
|
||||
>
|
||||
<div ref={`hsdiv${props.HsKey}${key}`} class={`hs-item ${[unref(classes)[key] + key]}`}>
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
</td>
|
||||
return <td
|
||||
data-index={props.HsKey}
|
||||
ref={`hstd${props.HsKey}${key}`}
|
||||
class={`hs-select__item${key}`}
|
||||
onMousemove={() => setCurrentValue(key)}
|
||||
onMouseleave={() => resetCurrentValue(key)}
|
||||
onClick={() => selectValue(key, item)}
|
||||
style={{
|
||||
cursor: unref(rateDisabled) ? 'auto' : 'pointer', textAlign: 'center'
|
||||
}}
|
||||
key={key}
|
||||
>
|
||||
<div ref={`hsdiv${props.HsKey}${key}`} class={`hs-item ${[unref(classes)[key] + key]}`}>
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
</td>
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
@ -305,5 +305,5 @@ export default defineComponent({
|
||||
</table>
|
||||
</>
|
||||
)
|
||||
},
|
||||
}
|
||||
})
|
||||
@ -3,12 +3,26 @@
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="10">
|
||||
<el-card shadow="always">
|
||||
<CountTo prefix="$" :color="'#409EFF'" :startVal="1" :endVal="1000" />
|
||||
<CountTo
|
||||
prefix="$"
|
||||
:duration="1000"
|
||||
:color="'#409EFF'"
|
||||
:fontSize="'60px'"
|
||||
:startVal="1"
|
||||
:endVal="1000"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-card shadow="always">
|
||||
<CountTo prefix="$" :color="'green'" :startVal="1" :endVal="1500" />
|
||||
<CountTo
|
||||
prefix="$"
|
||||
:duration="2000"
|
||||
:color="'green'"
|
||||
:fontSize="'60px'"
|
||||
:startVal="1"
|
||||
:endVal="2000"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -16,7 +30,7 @@
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import CountTo from "../../../components/countTo/src/index.vue";
|
||||
import CountTo from "/@/components/countTo";
|
||||
export default {
|
||||
components: {
|
||||
CountTo
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user