时钟翻牌倒计时,参考兔子先生
[ 更新日志 ]
# npm 安装
npm install zj-vue-flip-clock -S
服务器渲染 nuxt
解决方案 设置为 ssr: false
module.exports = {
...
build: {
vendor: [
'zj-vue-flip-clock
...
plugins: [
{ src: '~/plugins/zj-vue-flip-clock', ssr: false }
]
}
}
Vue2
组件内引入
import { FlipClock } from 'zj-vue-flip-clock'
import 'zj-vue-flip-clock/dist/index.css'
components: {
FlipClock
}
Vue2
全局引入
import FlipClock from 'zj-vue-flip-clock'
import 'zj-vue-flip-clock/dist/index.css'
Vue.use(FlipClock)
nuxt
引入方式
import 'zj-vue-flip-clock/dist/index.css'
if(process.browser) {
flipClock = require('zj-vue-flip-clock')
Vue.use(flipClock.default)
}
<zj-vue-flip-clock
ref="cropper"
mode="time"
></zj-vue-flip-clock>
名称 | 功能 | 默认值 | 可选值 |
---|---|---|---|
mode | 模式 | time |
time {h}{i}{s} , {i}{s} , {s}
|
initValue | 默认的倒计时时间 | -- | 90i, 1h , 30s, 任意分钟,任意小时,任意秒 |
flipperClass | 翻牌器的自定义class可用于修改背景,字体颜色等 | -- | |
flipperContainerClass | 翻牌器容器的自定义class可用于修改字体颜色等 | -- | |
endTiming | 结束倒计时时传出的自定义事件 | -- |