舞动的灵魂

问题描述

在 ios 系统下，若在一个网络请求的回调函数中调用 uni.chooseFile、uni.chooseImage 等 API，那么浏览器将不会弹出文件选择框。

本文主要讲一下 axios 响应拦截器对错误的处理。

先来看一下响应拦截器的格式：

1
2
3
4
5
6
7
8
9

const request = axios.create();

request.interceptors.response.use(res => {
    // 2xx 范围内的状态码都会触发该函数
    // 对响应数据做点什么
}, error => {
    // 超出 2xx 范围的状态码都会触发该函数
    // 对响应错误做点什么
})

需求场景

我们知道，token 用于保持会话和用户身份认证，它具有时效性。之前的策略是，一旦 token 过期，就强制用户重新登录，如果此时用户正在操作表单，提交时突然被强制登录，那用户体验实在太差了。

正确的策略是，如果该用户是活跃用户的话，当 token 过期时，动态地刷新 token，延长时效。若该用户不是活跃用户，则强制重新登录。

vue-router 动态修改路由的 api 有两个：addRoute 和 removeRoute。

具体用法请见 (API 参考 | Vue Router)。

注意：

（1）通过 addRoute 和 removeRoute 添加或删除路由后，不会改变 getRoutes 的结果。

（2）由于是通过函数动态添加的，那么当 vue 实例重新加载时，这些路由就没有了。因此，刷新页面或者通过 url 访问的时候就会出现白屏。

GSAP（GreenSock Animation Platform）是一个从flash时代一直发展到今天的专业动画库。

GSAP提供4个库文件供用户使用：

• TweenLite

• TimelineLite

• TimelineMax

• TweenMax

TweenMax 是 GSAP 平台中功能最全的动画工具，可用来构建补间动画(tween)。补间是flash时代的专业词汇，意思是在起始状态和终点状态之间补全中间过程。

它是纯 js 动画。

Grow Shadow

1
2
3
4
5
6
7
8
9
10
11
12
13

<h3 class="hover-1">Hover Me</h3>

<style>
.hover-1 {
  background-color: #1095c1;
  color: #ffffff;
  transition: .4s;
}
.hover-1:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .5);
}
</style>

本文将专注于使用 CSS text-shadow 属性来实现有趣的鼠标悬停效果，但是实际上并不会为这些文本制作任何文本阴影效果。

text-shadow 语法

1

text-shadow: h-shadow v-shadow blur color;

text-shadow 为文字添加阴影，而且可以添加多个阴影，用逗号分隔。若我们将 blur 属性设置为 0 或不设置，那么就可以得到清晰的文本，然后可以通过 h-shadow，v-shadow 调整位置，color 调整颜色。

background-clip

1

background-clip: text|border-box|padding-box|content-box;

background-clip: text 其核心就在于以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

简单而言，就是运用了 background-clip: text 的元素，其背景内容只保留文字所在区域部分。

但是目前 background-clip 只在 chrome 上得到很好的支持。

本文将专注于使用 CSS background 属性来实现炫酷的鼠标悬停效果。

background 语法

1

background:bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment

各值之间用空格分隔，不分先后顺序。

background-position 与 background-size 之间用”/“分隔。

一个元素可以有多个背景效果，通过”,“分隔。

background-position 与 background-size 的关系

1. 当 background-size 为 100% 时，background-position 百分比无效；

2. 当 background-size 小于容器大小时，背景图片随着 background-position 百分比的增大向右/下移动；

3. 当 background-size 大于容器大小时，背景图片随着 background-position 百分比的增大向左/上移动；

4. 当 background-position 为具体值时，无论 background-size 为多大，背景图都随着 background-position 的增大向右/下移动，反之向左/上移动。

创建项目

1

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。通过该手脚架创建的项目以 vite 为打包工具，同时还支持 ts，状态管理使用的是 pinia（已取代 vuex）。

相关文档

vue：https://cn.vuejs.org/。

vite：https://cn.vitejs.dev/。

pinia：https://pinia.web3doc.top/。