使用vue2.6实现抖音【时间轮盘】屏保效果附源码(2)

li { position: absolute; height: 60px; width: 60px; color: #fff; text-align: center; font-size: 14px; line-height: 20px; // 高亮 &.hover { text-shadow: rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 20px, rgb(255, 0, 222) 0px 0px 30px, rgb(255, 0, 222) 0px 0px 40px, rgb(255, 0, 222) 0px 0px 70px, rgb(255, 0, 222) 0px 0px 80px, rgb(255, 0, 222) 0px 0px 100px; } }

:class="{ hover: index == rotates - 1 || index == rotates + 6 }"，实现当前星期高亮，其他秒、分、小时、上下午、星期、日期、月亦是如此。接下来就可以爱的魔力转圈圈了

到这里，基础效果我们已经开发完了

四、设置开发

4.1 全屏，这里直接用的是screenfull.js

4.2 切换语言,这里用了 i18n和js-cookie第三方插件，具体实现是模仿vue-element-admin的实现方式

import Vue from "vue"; import VueI18n from "vue-i18n"; import Cookies from "js-cookie"; import enLocale from "./en"; import zhLocale from "./zh"; import esLocale from "./zw"; Vue.use(VueI18n); const messages = { en: { ...enLocale }, zh: { ...zhLocale }, zw: { ...esLocale } }; export function getLanguage() { const chooseLanguage = Cookies.get("language"); if (chooseLanguage) return chooseLanguage; const language = ( navigator.language || navigator.browserLanguage ).toLowerCase(); const locales = Object.keys(messages); for (const locale of locales) { if (language.indexOf(locale) > -1) { return locale; } } return "en"; } const i18n = new VueI18n({ locale: getLanguage(), messages }); export default i18n;

值得注意的是我们把秒、分、小时、上下午、星期、日期、月统统都写在了多语言切换里，所以，我们要时刻计算语言的切换变化后的值。以星期为例，这里computed，weekList，实时计算它的变化，然后渲染页面

<script> export default { name: "week", props: ["week"], data() { return { rotates: "" }; }, computed: { weekList: { get() { return this.$t("week"); } } }, watch: { week(val) { this.rotates = val; } } }; </script>

看效果，为了美观简单加了一点设置的小效果，目前支持简体中文，繁体中文，英文

4.3其他设置功能待开发...

占坑

当然布局用画布写，肯定是更优雅，总的来说实现起来并不是很难，如果要实现其他设置功能的话，部分逻辑需要重构，其他设置功能近期会陆陆续续更新发布出来，本项目源码学习移步

项目源码地址

总结

以上所述是小编给大家介绍的使用vue2.6实现抖音【时间轮盘】屏保效果附源码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章: