设计软件网站定制开发,天津平台网站建设制作,宜宾营销型网站建设,优秀的个人网站设计批量给元素添加进场动画
api及参数参考#xff1a;https://juejin.cn/post/7310977323484971071
简单实现#xff1a;
addAnimationClass(){//交叉观察器if (window?.IntersectionObserver) {//获取所有需要添加进场动画的元素#xff0c;放到一个数组let items [...do…批量给元素添加进场动画
api及参数参考https://juejin.cn/post/7310977323484971071
简单实现
addAnimationClass(){//交叉观察器if (window?.IntersectionObserver) {//获取所有需要添加进场动画的元素放到一个数组let items [...document.getElementsByClassName(need-fide-in)]let io new IntersectionObserver(entries {entries.forEach(item {if (item.isIntersecting) {//给元素加上进场动画的类名item.target.classList.add(fade-in-animation)//取消对元素的观察添加已完成io.unobserve(item.target)}})}, {root: null,//根元素根据这个元素的范围来监听默认是视口rootMargin: 0px 0px 0px 0px, //监听的扩大范围上右下左必须要设置root才生效threshold: 0 // 阀值出现程度为多少[0, 1]})//观察数组里的所有元素items.forEach(item io.observe(item))//可以移除对所有元素的监听// observe.disconnect();//可以返回所有被观察的对象返回值是数组// observer.takeRecords();}
},.fade-in-animation{animation: fidein 0.7s linear;
}
keyframes fidein{from {opacity: 0;transform: translate3d(0px, 90px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);transform-style: preserve-3d;}to {opacity: 1;transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);transform-style: preserve-3d;}
}使用scrollIntoView时页面底部会出现空白
原本的实现是用了scrollIntoView但是发现block设置为top或者center的时候页面底部会出现空白只有nearst不会但是目标内容在视线最底部效果又不太好
document.getElementById(block).scrollIntoView({behavior: auto,block: center,
})换成了vue-scroll并将ref属性设置为scroll, srcoll.value就是获取到vueScroll元素
scroll.value.setScrollTop(element.getBoundingClientRect().top - 容器高度 / 2 元素element本身高度)获取/设置问本中光标位置
获取
function getCursorPosition (element: any) {try {let caretOffset 0;const doc element.ownerDocument || element.document;const win doc.defaultView || doc.parentWindow;let sel;if (typeof win.getSelection ! undefined) {//谷歌、火狐sel win.getSelection();if (sel.rangeCount 0) {//选中的区域const range win.getSelection().getRangeAt(0);const preCaretRange range.cloneRange();//克隆一个选中区域preCaretRange.selectNodeContents(element);//设置选中区域的节点内容为当前节点preCaretRange.setEnd(range.endContainer, range.endOffset); //重置选中区域的结束位置caretOffset preCaretRange.toString().length;}} else if ((sel doc.selection) sel.type ! Control) {//IEconst textRange sel.createRange();const preCaretTextRange doc.body.createTextRange();preCaretTextRange.moveToElementText(element);preCaretTextRange.setEndPoint(EndToEnd, textRange);caretOffset preCaretTextRange.text.length;}return caretOffset;} catch (e) {return 0;}
}设置
function setCaretPosition(element, pos) {let range, selection;range document.createRange();//创建一个选中区域// range.selectNodeContents(element);//选中节点的内容if(element.innerHTML.length 0) {range.setStart(element.childNodes[0], pos); //设置光标起始为指定位置range.setEnd(element.childNodes[0], pos); //设置光标起始为指定位置}range.collapse(true); //设置选中区域为一个点selection window.getSelection();//获取当前选中区域selection.removeAllRanges();//移出所有的选中范围selection.addRange(range);//添加新建的范围// 设置最后光标对象isPosition.value selection.getRangeAt(0);
}Vue项目国际化
文档地址https://vue-i18n.intlify.dev/guide/ 配置locales文件夹里的内容一个index.js的入口文件和各语言的json文件 index文件内容 import { createI18n } from vue-i18n;
import en from ./en.json;
import cn from ./zh.json;const i18n createI18n({legacy: false,locale: process.env.VUE_APP_LANG, // set localemessages: {en,cn,},
});export default i18n;项目引用main.ts中 import i18n from ./locales;
const app createApp(App);app.use(i18n);
app.mount(#app);配置打包脚本 build.sh # 创建 dist 文件夹如果存在 dist 文件夹则先删除再创建
if [ -e dist ]; thenrm -rf distmkdir dist
elsemkdir dist
fi# 每种语言都打包一次。ubuntu系统可能对此行报括号错误规避处理在终端执行 dpkg-reconfigure dash选择no。
# dash选择no之后系统的shell会使用bashbash会降低ubuntu系统性能。所以可以应优先通过 bash build.sh执行脚本。
# dash for debian。bash则支持更多语法。
langList(en cn)
for item in ${langList[*]}; doecho build for $item in (${langList[*]})export VUE_APP_LANG$itemnpm run build
done按需设置网站语言seo等 link relalternate hrefhttps://xx.com hrefLangx-default/
link relalternate hrefhttps://xx.com/cn hrefLangzh-Hans///获取国际化选择语言用于项目跳转。优先级localStorage中的语言信息 url地址语言信息 浏览器语言
utils.getWebLanguage function () {let lang: string | null en;//预渲染只看地址中的参数if (!(!window.__PRERENDER_INJECTED || window.__PRERENDER_INJECTED.isPrerender ! true)) {if (window.location.pathname window.location.pathname ! /) {//地址栏中携带了语言参数const pathArray window.location.pathname.split(/);for (let i 0; i webLangList.length; i) {if (webLangList[i].langCode.toLowerCase() pathArray[1]) {lang pathArray[1];break;}}}return lang}const LangList webLangList;let isExist true;//本地有存储的语言if (localStorage.getItem(constants.WEB_CHOOSE_LANGUAGE)) {lang localStorage.getItem(constants.WEB_CHOOSE_LANGUAGE);isExist false;} else if (window.location.pathname window.location.pathname ! /) {//地址栏中携带了语言参数const pathArray window.location.pathname.split(/);for (let i 0; i webLangList.length; i) {if (webLangList[i].langCode.toLowerCase() pathArray[1]) {lang pathArray[1];isExist false;break;}}}if (isExist) {//浏览器默认语言参数for (let i 0; i LangList.length; i) {let flag ;if (navigator.language zh-TW || navigator.language zh-HK) {flag tw;} else if (navigator.language zh-CN || navigator.language zh) {flag cn;} else {flag navigator.language.substring(0, 2).toLowerCase();}if (LangList[i].langCode.toLowerCase() flag) {lang LangList[i].langCode.toLowerCase();break;}}}return lang;
};//获取挂载时的语言参数
utils.getMountLanguage function () {const chosenLang utils.getWebLanguage();const url window.location.href;const routePath window.location.pathname / ? : window.location.pathname;const searchParams window.location.search;const pathArray routePath.split(/);let path routePath;let isExist -1;if (pathArray.length 1) {isExist webLangList.findIndex(item {return pathArray[1] item.langCode;});}if (isExist ! -1) {const langCode webLangList[isExist].langCode;path routePath.substring(langCode.length 1, routePath.length 1);}if (chosenLang ! en) {if (!url.includes(/${chosenLang})) {window.location.href ${window.location.origin}/${chosenLang}${path}${searchParams};}} else if (chosenLang en){if (isExist ! -1) {window.location.href ${window.location.origin}${path};}}
};nginx网站配置新增location /语种
