- 博客(107)
- 收藏
- 关注
RSS订阅原创 vue中两个没有关系的页面如何通讯
A页面中的一个子组件 点击按钮跳转到B页面，B页面是在A页面窗口之上新开的窗口。B页面中是一个表单，提交后关闭B页面，同时A页面中要渲染B页面选择的数据。重写localStorage的setItem方法。，B页面监听vuex中的数据，失败。解决办法：使用原生js监听缓存。A页面mounted中监听。，window监听，失败。，依旧监听不到，失败。
2023-03-07 11:07:04
557
原创 基于element表格的二次封装
tableHeader数据：可以根据type类型去渲染列，formatter和render中的渲染逻辑按需修改~实现的功能：表格列渲染（formatter、render）、操作（插槽）、表格多选、筛选、排序，分页组件。
2022-11-11 14:46:41
359
原创 vue实时更新sessionStorage中的数据
若是将这个数量存储到vuex的话，刷新页面数据会丢失【可以使用vuex数据持久化插件解决这一问题，原理也是帮助我们存储在localStorage或者sessionStorage中】，所以我这里直接将数据存储在了sessionStorage中，但是当我修改数据时页面并没有及时更新，只有刷新页面后数据才会更新。最近在做一个需求是：页面右上角显示未读消息数量，当用户读过消息后，数量要时时更新。beforeDestroy： 在页面销毁的时候移除监听。mounted：页面创建的时候添加监听。
2022-09-23 11:22:52
2721
原创 vue、vscode格式规范prettier、eslint、git commit
6、为了避免有人将没有格式化的代码提交上去，我们可以在这时候就需要在 git commit 的阶段自动将提交的代码进行格式化。一般这样配置后，点击保存会按照prettier的规范来格式化我们的文件。假如我们的settting.json中配置过使用其他插件进行格式化的话可能会导致我们上面的操作未生效。执行命令对所有文件进行格式化【格式化后注意查看代码，避免格式代码带来问题】我的编辑器就是配置过下图中的注释掉的插件，就导致我的prettier未生效。5、假如我们的校验是在项目进行中途添加的。..........
2022-08-31 15:53:09
1299
1
原创 npm、cnpm、yarn、pnpm
修改了软链接或硬链接的文件，另外的硬链接或软链接以及源文件都会发生变化，这里感觉是需要小心的，特别是修改文件以调试的时候，记得还原回去，否则另外一个项目用到的时候，可能会出问题。，这里的设计，我理解是根据 node 的 require 机制，bar 中 require('foo') 的时候，就会先找到 [email protected]，而不会往上寻找，这样就避免依赖包版本不一致的问题。：每一个文件都有一个唯一的 inode，它包含文件的元信息，在访问文件时，对应的元信息会被 copy 到内存去实现文件的访问。...
2022-08-23 16:45:57
1795
原创 Vue项目打包优化
因为项目里用的element ui的组件较多，优化前后打包体积无太大明显变化，只是减小了一点。注：（官网提供的完整组件列表缺少Scrollbar，需要手动添加）优化后打包体积大概会减小0.5M。2、按需引入element ui。...
2022-08-16 11:17:27
509
原创 Vue3中动态渲染菜单栏（TS）
。需求：左侧的菜单栏渲染数据从路由文件中获取并组织成我们想要的数据格式。此代码只适用一级菜单，多级菜单也是这个思路组织好数据然后再渲染。路由：router》index.ts。
2022-08-09 10:01:50
4873
原创 Vue3中使用用户引导插件driver.js
Intro.js是AGPL许可和开源的。但是，如果您想在您的商业应用程序、网站或插件中使用Intro.js，则需要获得商业许可证。element对应的是元素id或class名称，若是给元素设置了class就用#，设置id就用.本文介绍在vue3setup语法糖中如何使用dirvre.js来实现用户引导。position引导卡片所在的位置，若不设置会自动计算放在合适的位置。description为展示的内容，可以是html元素。对比了用户引导插件intro.js和driver.js。............
2022-07-18 11:13:39
1872
原创 ssh: connect to host gitlab.xxx port 22: Connection timed outfatal: Could not read from re
git pull origin masterssh: connect to host gitlab. xxxx port 22: Connection timed outfatal: Could not read from remote repository.Please make sure you have the correct access rights
2022-07-15 16:20:25
7500
4
原创 Vue3中使用vue-i18n实现多语言切换
多语言切换1、安装插件【注意Vue3使用9版本，Vue2用的是8版本】2、在src在创建lang文件夹，并创建index.js、i18n.js、和 翻译的内容文件 3、写入翻译内容，举个例子：英文（en）、中文简体（zhCN）、中文繁体(zhTN)3、编写index.js文件，导出所有翻译内容4、编写i18n.js文件5、在main.js中挂载 至此，就可以使用按需显示语种了。那么，当我们去改变locale的值为对应的语种时就可以做到多语言切换了~插件官网：Getting st
2022-07-14 14:40:28
9556
12
原创 getActivePinia was called with no active Pinia. Did you forget to install pinia?
在Vue3中的路由里面使用Pinia报错： 代码如下：解决办法：Using a store outside of a component | Pinia
2022-07-12 09:48:36
678
原创 vue element 动态生成表单
场景：表单中的项是由后端返回的，不是前端提前定义好的。需要注意的点：1、因为表单上需要绑定v-model来获取此表单项的值，但是要绑的值名称是根据后端数据来的，所以请求回来后端的数据后再渲染整个表单，否则会报错【v-if="configLabelData"】，根据请求到的后端数据动态创建form中的属性2、渲染多个checkbox或者radio时，label绑定值，{{}}中渲染名称，这样v-model拿到的数据可以直接传到后端3、对动态生成的表单做校验，提前定义好各种数据类型的校验规则：在da
2022-06-27 15:28:58
3641
6
原创 element ui动态生成表格列
场景：表格中显示的列是由后端返回的，不是前端定义好的。其中columnData就是表格的列数据，是个数组，举个例子：这就是两列，其中label是列标题，name对应数据属性名，表格数据中需要有name/sex属性：......
2022-06-27 14:46:23
3814
原创 element ui 树形-懒加载-表格-多选 勾选问题
element ui 树形&懒加载 表格如下：默认是不请求子级数据的，当点击下拉icon时再发起请求数据：就是普通的数组，没有子级数据的概念懒加载事件：发现树形懒加载多选表格有两个问题：1、勾选父级时子级不会勾选上一般我们实现表格多选功能是这样的：这里不再使用这种方式 第一步：需要我们手动写个勾选表头和勾选列第二步： 定义数据第三步：编写handleCheckAllDetail、handleCheckDetail函数，每次勾选时要做的事:处理全选、半选
2022-06-21 11:31:31
3300
9
原创 TS中的类、接口、泛型
1、classclass Person { // 实例属性【通过对象的实例去访问】 name: string = "美少女"; // 类属性(静态属性) ，在属性前加static关键字【直接访问】 static age: number = 17; // 只读属性 readonly sex:string = "female" // 实例方法 sayHello(){ console.log('hello') } // 类方法 static sayB
2022-05-28 11:51:30
757
原创 TS基本类型
一、在编写ts代码之前要先搭建typescript环境1.安装node2.使用npm全局安装typescriptnpm i -g typescript3.准备工作做好就可以编写ts啦，但是ts最后还是要编译成js在浏览器里运行的创建ts文件：hello.ts进入 hello.ts文件所在目录编译成js文件：tsc hello.ts二、ts基本类型console.log('helo ts') let a : numbera = 10// a = '213' 如果定义变
2022-05-24 21:07:47
712
原创 vuex中使用vuex-persistedstate插件实现数据持久化
vuex是在中大型项目中必不可少的状态管理组件，刷新会重新更新状态，但是有时候我们并不希望如此。例如全局相关的，如登录状态、token、以及一些不常更新的状态等，我们更希望能够固化到本地，减少无用的接口访问，以及更佳的用户体验。那么我们可以采用存储到localStorage的方式来解决这一问题， 也可以监听页面刷新的时候重新处理数据 也可以用现在比较流行的插件vuex-persistedstate来解决让我们来看下使用插件是如何做到持久化的1.安装插件npm i vuex-persist
2022-05-18 14:47:53
1722
2
原创 ie10下绘制的echarts Tree图只显示树干未显示节点问题
绘制的tree类型的图在谷歌浏览器下显示正常：但是在ie下绘制出错：代码如下： series: [ { type: "tree", top: 0, bottom: 0, left: 150, right: 350, layout: "orthogonal", edgeShape: "..
2022-05-16 14:29:35
475
原创 ie10下input框的keyup.enter事件失效
自己写的分页组件中跳转到xx页功能，在谷歌浏览器功能正常，在ie下分页并没有跳转，代码如下：span中包裹的input标签 <span> 跳转到 <input type="text" v-model="pageNum" class="pageInput" @keyup.enter="jumpPage" /> 页 </span&
2022-05-16 14:21:29
375
原创 vue3中的一些其他变化
1.全局API的转移Vue 2.x 有许多全局 API 和配置。 例如：注册全局组件、注册全局指令等。 //注册全局组件Vue.component('MyButton', { data: () => ({ count: 0 }), template: '<button @click="count++">Clicked {{ count }} times.</button>'})//注册全局指令Vue.directive('focus',
2022-05-15 20:13:04
212
原创 vue3新增的一些组件
1.Fragment在Vue2中: 组件必须有一个根标签 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中 好处: 减少标签层级, 减小内存占用咱就是说，vue越来越react化了。。。。。2. Teleport什么是Teleport？——Teleport是一种能够将我们的组件html结构移动到指定位置的技术。 <teleport to="移动位置"> <div v-if="isShow" class="mask"...
2022-05-15 19:54:57
983
原创 谈谈vue3组合式api的优势
vue2: options API 配置式使用传统Options API（配置式API）中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。在修改时vue3: composition API 组合式我们使用Composition API后，虽然看起来烦琐了一些，但是带来了诸多好处:●所有API都是import引入的用到的 功能都import进来，对Tree- shaking很友好，没用到功能，打包的时候会被清理掉，减小包的大小。●不再上下反复横跳..
2022-05-15 19:02:03
3793
原创 vue3中一些不常见的属性
1. shallowReactive 与 shallowRef shallowReactive：只处理对象最外层（第一层）属性的响应式（浅响应式）。 shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。 应用场景： 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。 2. re
2022-05-14 22:42:39
208
原创 vue3---toRef&&toRefs
toRef: // 将person对象中的name属性单独对外提取出来const name = toRef(person,'name')作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。应用：要将响应式对象中的某个属性单独提供给外部使用时。toRefs：和toRef作用一样,但可以批量创建多个 ref 对象<template> <h4>{{person}}</h4> <h2>姓名：{{name}}</h
2022-05-14 22:00:55
294
原创 vue3---生命周期
Vue3.0中可以继续使用Vue2.x中的生命周期钩子，只有最后两个钩子名称有变更，其余名称不变beforeDestroy改名为beforeUnmount destroyed改名为unmounted可以直接已配置项的形式使用生命周期钩子（vue2的写法），也可以使用组合式API的形式使用（vue3的写法），尽量统一写法。一般来说，组合式API里的钩子会比配置项的钩子先执行，组合式API的钩子名字有变化（前面多了on）Vue3.0也提供了 Composition API 形式的生命..
2022-05-14 17:48:28
234
原创 vue3---watchEffect
回顾下watch的用法：既要指明监视的属性，也要指明监视的回调watch(sum,(newValue,oldValue)=>{ console.log('sum变化了',newValue,oldValue)},{immediate:true})回顾下computed的用法： //计算属性 —— 完整 let fullName = computed({ get(){ return person.firstName + '-' +
2022-05-14 16:15:29
266
原创 vue3---watch
情况一：监视ref定义的响应式数据watch(sum,(newValue,oldValue)=>{ console.log('sum变化了',newValue,oldValue)},{immediate:true})如果使用ref定义了一个对象：watch(person.value,(newValue,oldValue)=>{ console.log('person变化了',newValue,oldValue)}) 或者：watch(person,(newV
2022-05-11 21:49:00
116
原创 vue3---comouted
import {computed} from 'vue'setup(){ ... //计算属性 —— 简写【只读】 let fullName = computed(()=>{ return person.firstName + '-' + person.lastName }) //计算属性 —— 完整【读和写】 let fullName = computed({ get(){ return pers.
2022-05-11 20:45:23
263
原创 leetcode 36有效的数独
/** * @param {character[][]} board * @return {boolean} */var isValidSudoku = function(board) { // 三个方向判重 const [rows, columns, boxes] = [{}, {}, {}]; // 遍历数独 for (let i = 0; i < 9; i++) { for (let j = 0; j < 9; j++) { ...
2022-05-09 17:19:51
260
原创 vue3---reactive
作用: 定义一个对象类型的响应式数据（基本类型要用ref函数） 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象） reactive定义的响应式数据是“深层次的”。 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。<template> <h1>个人信息</h1> <h2>姓名：{{ name }}</h2>.
2022-05-08 18:07:38
1011
原创 vue3---ref函数
作用: 定义一个响应式的数据 语法: const xxx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。 JS中操作数据： xxx.value 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div> 备注： 接收的数据可以是：基本类型、也可以是对象类型。 基本类型的数据：响应式依靠的是类上的getter与setter完成的（object.defineProperty）..
2022-05-08 16:56:10
904
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人