使用Vue Directive实现的Vue页面权限控制
\#0 权限控制? 前端?前端的权限控制不是为了阻止用户做什么, 而是为了告诉用户不能做什么, 实际阻止用户去做什么应该由后端完成, 把按钮藏起来并不能阻止用户触发那个按钮背后的实际后端逻辑. 前端的权限控制是为了告诉用户不能做什么, 把用户无权限操作的按钮隐藏起来, 可以降低用户无知点下按钮后权限不足造成的挫败感.接下来, 假设我们已经通过暴露到全局的 $perm.has: (permissionNode: string): boolean 实现了权限的判断, 来思考如何以一种开发友好的方式控制元素显示.\#1 v-if?这应该是最容易最直接想到的办法:<button v-if=...
Vue 3 中的服务端渲染(SSR)与异步数据获取
为了解决SEO问题, 我们通常会使用SSR.但是Vue的SSR对异步数据的渲染有不少门道, 故开一篇文章简单讲讲.以下内容基于完全使用setup script的情况下讲述.几个基本点:SSR渲染时, 生命周期钩子里只有beforeCreate和created会被触发. 意味着你不能在其他钩子里执行获取数据的逻辑.SSR渲染时, 响应式变量不会被触发更新, 渲染状态以逻辑执行时的数据为准. 意味着如果你使用空数据占位, 等到数据到达时更新数据的做法会在SSR时失效.几个建议:如果你在用响应式变量控制组件的加载状态(isLoading), 替换成Suspense和Async Setup. 因...
ref<T>() / ref(T) / ref() as Ref<T>? Vue3中的Ref类型体操
Ref的四种写法这是一个ref:const refA = ref();什么都没有, 所以是一个Ref<any>可以这样:refA.value = 123;
refA.value = "123";
refA.value = ["123", 123];这是另一个ref:const refB = ref(1);这时候, 他就是一个Ref<number>, 所以:refB.value = 2;
refB.value = -1;
refB.value = {}; // Error: Type '{}' is not assignabl...
50行实现一个简单的点击涟漪动画
\#0 你看,这漂亮的动画!Click Me!点击涟漪动画太棒啦!为了练手,我突然就想自己用原生方法实现一个简单的.来,让我们一起开始动手写一个.\#1 先来一个按钮先创建一个按钮:Click Me<button id="clickme" class="my-btn">Click Me</button>写一些样式:Click Meclickme-2.my-btn{background-color: #e91e63;border: none;color: white;padding: 10px 14px 8px 14px;b...