- 博客(35)
- 收藏
- 关注
RSS订阅原创 vue3项目封装分页组件
效果基础布局<template> <div class="xtx-pagination"> <a href="javascript:;" class="disabled">上一页</a> <span>...</span> <a href="javascript:;" class="active">3</a> <a href="javascript:;"&g.
2021-07-30 08:45:14
470
原创 监听在元素之外点击
使用场景举例：1.接口返回一个数组对象，展示时每行固定显示n个，则可将返回的数组转成二维数组[[...n], [...n]...]的形式循环展示。
2021-07-30 08:44:21
912
原创 vue3项目封装Message组件
效果类似于elementUI中的$messageBox，给用户进行界面提示功能分析固定顶部显示，有三种类型：成功，错误，警告。显示消息提示时需要动画从上滑入。组件使用的方式不够便利，封装成工具函数方式。步骤1.定义组件<template> <div class="xtx-message" :style="style[type]"> <!-- 上面绑定的是样式 --> <!-- 不同提示图标会变 -->.
2021-07-30 08:43:59
1553
原创 学习使用useIntervalFn倒计时
效果步骤1.引入import { useIntervalFn } from '@vueuse/core'2.格式const {pause, resume } =useIntervalFn(() => {// 具体要做的事情 }, 间隔时间, { immediate: false|true })pause() // 暂停，停止resume()// 继续，开始3.使用export const useCountdown = () => { const..
2021-07-30 08:41:42
1228
3
原创 学习使用 vee-validate
1.安装npm i vee-validate@4.0.32.导入，注册为局部组件import { Form, Field } from 'vee-validate'components:{Form, Field}3.基本结构Form 就是表单， Field就是表单项<Form> <Field v-model="formData.mobile" name="mobile" type="text" placeholder="请输入手机号" />
2021-07-27 23:27:50
471
原创 如何解决路由组件的缓存问题
场景：页面中路由地址发生了变化，但是内容没有更新原因：两个地址都匹配同一个组件，这个组件在路由切换的过程中，并没有重新销毁生成解决方法：1.给router-view添加key属性 -类似于v-if：会销毁重建组件，有一定的性能损耗<router-view :key="$route.fullPath"/> 2.使用watch监听id变化重新拉取接口export default { name: 'TopCategory', components...
2021-07-23 17:33:03
633
原创 vue项目封装无限加载组件
1.整体说明2.定义组件2.1 创建组件<template> <div class="xtx-infinite-loading" ref="container"> <!-- 正在加载数据时显示 --> <div class="loading" v-if="isLoading"> <span class="img"></span> <span class="text"&.
2021-07-22 23:38:03
283
1
原创 关于RouterLink的to属性
to：必选类型：string | Location表示目标路由的链接，可以是一个字符串，也可以是动态绑定的描述目标位置的对象1.字符串形式<RouterLink to="/">首页</RouterLink>2.动态绑定<RouterLink :to="'/category/' + item.id"><a href="">XXX</a></RouterLink>...
2021-07-21 00:48:19
1018
1
原创 vue项目封装骨架屏组件
1.使用场景为了在加载的过程中等待效果更好，封装一个骨架屏组件。2.封装静态组件<template> <div class="xtx-skeleton shan" :style="{width:'60px',height:'30px'}"> <!-- 1 盒子--> <div class="block" :style="{backgroundColor:'#efefef'}"></div> <!--
2021-07-20 00:37:06
395
原创 vue项目头部组件吸顶效果实现
1.手写实现<template> <div class="app-header-sticky" :class="{show: y>78}"> <div class="container"> <RouterLink class="logo" to="/" /> <AppHeaderNav /> <div class="right"> <RouterLi.
2021-07-20 00:24:01
648
2
原创 如何在vue2和vue3中自定义全局指令
1.定义scr/directive/index.js// 定义全局指令export default { install (app) { // app是Vue实例。 e.g: app = createApp() app.directive('指令名', { // 省略其他生命周期钩子函数 // el： 使用了指令的dom // binding.value: v-指令名="binding.value就是这里表达式的值" moun
2021-07-19 23:46:35
500
3
原创 Vue3项目中如何实现数据懒加载
1.应用场景如果访问的页面数据过多，为减少并发量，减少系统资源的消耗，这时候就需要用到懒加载，实现当组件进入可视区后再去发请求加载数据。2.思路分析如何判断一个dom元素是否进入了可见区域？传统：获取dom位置 →getBoundingClientRect()现在：直接判断元素进入可视区域的比例 →IntersectionObserver()在本项目中，我们使用@vueuse/core中的 useIntersectionObserver()3.使用① 定义一个targ..
2021-07-19 21:25:14
2123
原创 Vue3基础学习
1.vue3基础介绍1.1 vue3带来的新变化性能提升（渲染更快，diff算法更快，内存占用更少，打包体积更小） 更好的Tyoescript支持 提供新的写代码的方式：Composition API1.2 移除的一些语法移除了$on方法 （eventBus现有实现模式不再支持，可以使用三方插件替代） 移除过滤器选项 （插值表达式里不能再使用过滤器filter， 可以使用methods替代） 移除 .sync语法（v-bind时不能使用.sync修饰符了，现在它v-model语法合并.
2021-07-13 23:20:42
1349
2
原创 vue - 如何实现导入excel功能
1.应用场景实际情况中有时候需要我们一次性添加多个员工信息，这个时候就需要我们开发一个批量导入的功能：将事先以excel格式保存的文件批量导入进来。2.思路思路1：前端主导（本文只对前端主导进行讲解）上传excel文件，把excel文件的内容读出来，还原成最基本的行列结构，按后端的接口要求回传过去。思路2：后端主导3.步骤...
2021-07-02 23:54:30
2809
3
原创 VSCode - 自定义用户代码片段
vscode 中可以通过自定义的关键字快速生成相应的代码片段。1.进入2.新建3.代码// Example: "try catch async wawit": { "scope": "javascript,typescript", "prefix": "tcaw", // 快捷键 "body": [ "async $1() {", // tab切换$1... "import {$2} from '@api/${4}'", "try {",..
2021-06-28 20:18:19
619
原创 ElementUI - form表单检验基础使用
前言我们在日常开发中，向后端发请求调用接口之前，需要对所要传递的参数进行验证，来把用户的错误扼杀在摇篮之中。场景 内容不能为空 密码长度必须多少位 手机号的格式要合规 邮箱的格式要合规 1.基本步骤1.1 data中定义验证规则data() { return { form: { 字段名1:'', 字段名2:'' }, rules: { // 字段名1：表示要验证的属.
2021-06-27 21:25:24
852
原创 简述vue中.sync修饰符的原理
作用.sync是一个语法糖，可以实现父子组件数据之间的双向绑定，与v-model类似，但是在写法上进行了简化。原理v-model原理<com1 v-model="num"></com1>等价于<com1 :value="num" @input="(val)=>this.num=val"></com1>.sync原理// 正常父传子： <com1 :a="num" :b="num2"></com1>.
2021-06-24 23:50:12
396
2
原创 vue- 实现不同权限动态生成功能菜单
1.场景我们在开发后台管理项目时，需要实现：根据登陆进来的用户，显示不同的功能菜单。这时候就需要将项目中的路由分成静态路由表和动态路由表，并在路由表中拆分。静态路由表：不需要做权限控制，每个用户都可以正常访问。 动态路由表：需要做权限控制，根据权限的不同显示不同的路由。2.思路分析用户登录后，根据后端给我们返回权限信息，从从项目中根据用户权限过滤出该用户可以访问的页面，再加上不需要权限就可以访问的路由（例如：‘/login’，‘/404’），生成最终的路由表。待续。。。...
2021-06-22 21:43:16
929
原创 通过环境变量配置基地址出现跨域问题的解决方案
1.认识环境变量1.1 环境变量的配置文件文件名称 对应环境 说明 .env.development 开发环境 当运行npm run dev 的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量 .env.production 生产环境 当运行npm run build:prod 的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量 .env.staging 模拟生产环境 可以理解为production环境的
2021-06-21 23:51:15
1318
原创 通过axios的响应拦截器解决不报错问题
问题：登陆时，输入错误的账号和密码，，没有错误提示分析原因：axios内部的报错机制：1. 如果本次请求得到的响应的状态码 不是2开头的（如：400，500），就会主动抛出错误。2. 如果本次请求出现网络错误，就会主动抛出错误当我们提供错误的用户名和密码时，本次请求的状态码是正常的（但是：success字段是false），也没有网络错误，所以axios并不会报错。...
2021-06-19 23:32:37
1856
原创 常见数组的api
1.改变原数组的方法① push/pop方法push：在数组尾部添加元素，会增加数组的长度pop：在数组尾部取出元素，会减少数组的长度
2021-06-09 22:45:02
117
原创 消除魔法字符串
魔法字符串：指的是，在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或数值。风格良好的代码，应该尽量消除魔法字符串，而由含义清晰的变量代替。
2021-06-09 21:56:28
289
原创 token持久化
1.问题页面刷新，token丢失。2.解决思路1.用户登录后，保存token到vuex，同时也保存一份到本地存储localStorage2.vuex容器初始化时（页面刷新时），使用本地存储中的值3.步骤3.1 封装localstorage存储模块// 封装localstorage对token(对象)的三个操作// 1. 保存 // 2. 获取 // 3. 删除// JSON// eslint-disable-next-line camelcase// 消除魔法字符
2021-06-09 21:40:41
680
1
原创 Vue2项目 - 项目起步的一些操作
1.技术介绍 vuejs： 核心vue vuex： 状态管理插件 vue-router： 路由插件 axios： ajax请求 json-bigint： 最大安全数值处理 socket.io-client： 即时通讯库 vant： 移动组件库 amfe-flexible： rem适配 vue-lazyload： 图片懒加载 打包App：DCLOUD 打包 ...
2021-06-04 21:18:35
338
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人