ts 将某个类型转为可选的1234export interface ClientModel { idCardFront: string;}export interface NewInter extends Omit<ClientModel, 'idCardFront'> { idCardFront?: string;}
vue 权限控制的思考我们的项目一般来说分为三个部分 - 路由控制 - 组件控制 - 接口控制
但是公司的后端是只处理了接口。针对接口进行控制。
在这样的前提下, 对权限控制进行一下梳理
路由控制一般来说在 route 的 mate 里面添加权限。 然后 beforeEach的时候对权限进行判断。没有对应的权限就跳到404页面
组件控制在网络中搜索,一般都是用自定义指令进行处理。 但是这样有一个问题。他需要挂载后然后移除子元素
我认为可以用 v-if 来省略这个问题
伪代码
123456789101112131415161718192021222324<template> <template v-if="hasPermission"> <slot></slot> </template></template><script lang="ts">export default { prop: { perm ...
vue3 延迟显示 loading仓库地址 https://github.com/abigmiu/vue-delay-loading
用途: 在 x 秒后显示 loading
比如 x = 300
现在请求一个接口。 用时500ms
就会在 300 - 500 这个时间段显示 loading
如果用时 200ms, 就不会显示 loading
用法:
123456789101112<script setup lang="ts">import { ref } from 'vue'const loading = ref(true)setTimeout(() => { loading.value = false}, 5000);</script><template> <div> <div v-loading:2000="loading"></div> </div></tem ...
webpack5 多页面打包配置确定页面结构123456├── package-lock.json├── package.json├── postcss.config.js├── src 代码├── tsconfig.json└── webpack.config.js webpack配置文件
12345src├── assets 静态资源├── models ts 定义├── pages 页面└── scripts 一些工具函数
123456789src/pages├── course│ ├── index.html│ ├── index.ts│ └── style.scss├── course-intro│ ├── index.html│ ├── index.ts│ └── style.scss
步骤1. 安装 webpack1npm install webpack webpack-cli -D
配置package.json.
- ...
webstorm使用live-server最近从vscode切换到了webstorm,但是苦于webstorm没有live-server插件不太方便,下面说一说webstorm怎么使用live-server,主要原理就是下载live-server这个npm包
玩过前端开发的都应该知道有局部安装和全局安装两种方式吧。你可以自由选择
安装live-server很简单,我是用yarn全局安装yarn global add live-server
使用live-server如果你是全局安装的l, 然后直接在终端输入live-server显示命令行无效,那么就是没有添加到环境变量, 自行搜索npm 全局安装包在那,yarn的全局安装包位置是bin文件夹,也有可能你自定义了名字。哎呀,怎么都是自行搜索呢?🙃 因为我懒啊
使用npm脚本运行也是很简单,在package.json 里面自行添加一个scripts就行
1{ "scripts": { "dev": "live-server" }, ...
一次 vue 跨组件通信方法的选择
需求分析这是一个对话框页面。分为
对话列表
对话输入
角色选择
三个组件
对话列表(1)依赖对话输入(2)和角色选择(3)两个模块的内容。
在对话列表里面点击编辑的时候。 2 和 3 的内容也需要对应改变。
这样就形成了相互依赖
第一次尝试 - props使用 props 传值。1 是父组件,2和3是子组件。设计一个 editId用来表示是否在编辑某段话。如果editId为0就表示新增。看起来挺简单也是挺符合要求的,但是写着写着,要处理的边界条件太多。props一大堆。加上所有的状态都保存在1里面。导致代码十分长。不易于分辨。遂放弃这种方式
第二次尝试 - eventBus由于没有事先在脑海里理清哪里需要传值。一上来就写代码。导致后面越来越多的 on 和emit。无法辨别值究竟是从哪里传过来的。又又放弃。
最后一次 - pinia也就是用仓库的方式进行数据渲染。把状态, 事件什么的全丢 store里面去。 这样方便管理多了。
1234567891011121314151617181920212223242526272829import { ...
下载抖音表情包首先进入抖音的网站, 打开控制台, 找到表情包对应的请求。
1https://www.douyin.com/aweme/v1/web/emoji/list?device_platform=webapp 后面还有一大串不重要的信息
看到里面的emoji_list 字段,右键点击复制object,这样你就可以得到一个json串。
接下来我们就可以写代码下载, 一顿啪啪啪, 下载 request库(node的, 不是python的)
再一顿啪啪啪,
123456789101112const request = require('request')const dataFile = require('./data.json') // 在浏览器里面复制的json串放到了这个文件里面const data = dataFile.map((item) => { return { name: item.display_name.slice(1, -1), // 去除括号 url: ite ...
基于Element Tree 组件和vue-contextmenujs 实现文件夹树基于ElementTree 组件和vue-contextmenujs 实现文件夹树
插件版本号
1{ "vue-contextmenujs": "^1.4.9", "element-ui": "^2.4.5",}
实现效果
Screen-2023-08-18-151841
完整代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293<!-- 文件夹Tree --><template> <div v-loading="loading"> ...
开发一个 vue 的 eslint 插件需求vue template里面的事件名只能已on 开头
实现效果
image-20230528172725188
实现步骤创建调试程序和 eslint插件程序
创建调试程序
我创建的文件夹名称为eslint-demo
1pnpm create vue
创建eslint 插件程序
我创建的文件夹名称为v-on-name-sartwith-on
首先安装eslint 脚手架
123pnpm i -g yopnpm i -g generator-eslint
生成 Eslint 插件工程。
1yo eslint:plugin
为插件创建一条规则,执行如下命令:
1yo eslint:rule
文件目录参考
image-20230528173706552
link 插件在v-on-name-sartwith-on 这个项目里面执行
1pnpm link --global
在eslint-demo 这个项目里面执行(注意,这里的名称是package.json 里面的名称)
12pnpm link --global eslint-plugin- ...




