- 博客(43)
- 收藏
- 关注
RSS订阅原创 在uni中使用vue3写h5的pdf导出
把dom转canvas，屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。components/pdf 创建pdf文件夹。在需要的页面绑定id 事件。在main文件中引入。
2023-07-17 09:52:56
1285
原创 nvm 及pnpm管理工具指令
nvm uninstall [node版本号]nvm install [node版本号]nvm use [node版本号]显示可下载的node版本部分列表。可查看当前版本的node安装路径。安装最新版本的node。安装指定版本的node。删除指定版本的node。
2023-07-06 15:11:05
1041
原创 解决vue3中使用个别form表单校验失灵
注意的是 如果要对reactive重新赋值 会丢失原来响应式对象的引用地址 变成一个新的引用地址 这个新的引用地址指向的对象是没有经过 reactive 方法处理的 可以选择包裹一个对象。也可以使用 Object.assign(from, res.data) 来进行处理。当我把form通过ref或者reactive定义在外面的时候 表单校验就可以成功了。
2023-07-06 10:54:47
1482
原创 文件导入以及在线编辑-xml案例
然后 在下面创建一个js文件 叫 data_format_utils。然后在 editor目录下创建一个组件 我这里叫 index.vue。data_format_utils.js 参考代码如下 用来格式化。在components下创建一个文件 叫 editor。然后在main.js全局引入依赖 参考代码如下。
2023-07-03 14:49:28
1402
原创 vue3 使用全局svg
vite-plugin-svg-icos -D 包 不行就再安装 fast-glob -D。src 同级目录新建vite文件夹下的 plugins 文件夹 建一个svg-icon.js。如果有elementplus icon 再同目录下新建一个 js文件。使用。svg图片都放在 assets下的icons下的svg文件夹中。component文件新建文件夹 SvgIcon文件夹。在vite.config.js文件里。和index.js 文件。
2023-06-09 11:30:02
669
原创 vue3中使用element-plus 分页修改英文goto
在使用element-plus 的 Pagination 分页的时候 他默认是英文的。我的解决办法是到app.vue 页面 给他包上一层由plus官方提供的全局配置标签。把goto 更换成 到 且在跳转后面加入 页 字。可以看到警告 里面拿到el里面各种组件 其中就有分页。就可以完成 再解决一下警告 完整的代码如下。然后再layout最后放入slot插槽。我们就可以通过设置更改他。
2023-06-08 17:28:13
1318
1
原创 React新版本路由6.x 及路由懒加载
Routes>和一样，如果匹配上了，往下就不会再匹配了，相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 组件来渲染其子路由。属性，当你点击NavLink标签时，加哪个样式的类名, 在v6版本中，想要实现自定义的类名，需要把。 和 要配合使用，且必须要用包裹。
2023-03-23 16:34:44
1094
原创 get两个新属性 css固定宽高比
css相关的 关于宽高比 写在css样式中aspect-ratio：2/1 （宽与高的比是2:1）盒子上面写contenteditable=true 盒子内可编辑或者 js中 document.designMode = “on” 在document中可编辑
2022-07-20 02:23:47
161
原创 git指令
常用指令分支管理 git branch 查看本地分支 git branch -r 查看远程分支 git branch -a 查看本地和远程分支 git checkout <branch-name> 从当前分支，切换到其他分支 git checkout -b <branch-name> 创建并切换到新建分支 git branch -d <...
2022-02-18 10:20:22
185
原创 antd-vue中v-model不能和 v-decorator同时使用
<a-input v-decorator="['name', validatorRules.name]" placeholder="请输入"></a-input>获取v-decorator的值methods: { changeMe(Value) { //Value就是当前触发字段的值，也可以用下getFieldValue获取 this.form.getFieldValue('name') } }..
2022-01-19 10:26:41
1621
原创 在vue项目中使用svg
1.安装svg依赖npm i svg-sprite-loader2.配置 vue.config.js 补充如下代码const path = require('path')function resolve (dir) { return path.join(__dirname, dir)},chainWebpack (config) { // set svg-sprite-loader config.module .rule('svg') .
2022-01-05 19:26:38
562
原创 ant design vue中，表格的自定义scopedSlots渲染
比如 当我们需要格式化时间的时候 直接写在column中 可以传参数到slot中。也可以在template中写模板中对应的slot-scope可以用来传递参数，其中第一个参数是当前字段对应的值progress，第二个参数是当前字段对应的所有值对象,即整个data...
2021-12-31 16:12:41
2085
原创 vue项目启动提示Error: No ESLint configuration found.
npm init -ynpm install eslint --save-dev手动添加.eslintrc.js文件 配置如下代码module.exports = { root: true, parserOptions: { parser: 'babel-eslint' }, env: { browser: true, }, extends: [ // https://github.com/vuejs/eslint-plugin-vue#...
2021-12-23 14:59:46
1210
原创 移动端实现返回之前浏览过页面 滚动条还在上次浏览的位置
移动端在滚动列表的时候 切换列表 会相互影响 原本我在这个列表滚动到这个位置 切换到一个列表滚动到最底部 再切换回来 这边的列表也变成最底部了 其实 无论是在第一个频道 还是再另一个频道 他其实都是滚动的都是body元素 别问我是怎么知道的可以定义一个方法，监听他的onscroll事件， 递归这个元素的子节点 再去调用这个方法 对这个页面的所有节点 都监听，滚动的时候 只有真正触发的那个元素 才能打印出来把这个打在控制台 可以查看是哪个元素在滚动function find...
2021-12-02 14:41:52
741
原创 Vue3与Vue2 新增了哪写
vue3相比于vue2 性能提升了不少 首次渲染更快 占用内存更少 打包体积也会更小 而且很好的支持了ts的使用vue2 中的 template 标签内只能有一个根元素, 将 template 中的根元素直接替换到 #app 处vue3 中没有该限制, 可以放任意多个根元素, 将 template 中的根元素全部以 appendChild 方式加入 #app, 不是替换Vue2 实现响应式的原理: Object.definePro...
2021-11-28 20:03:26
851
原创 体验TypeScript 两分钟入门
格式let 变量名: 类型 = 初始值let str: string = 'ts'const age: number = 18str = 'dddd'console.log(str)console.log(age)作用 为变量添加类型约束 变量后的：就是类型注解 JS 已有类型 原始类型：number/string/boolean/null/undefined/symbol 对象类型：object（包括，数组、对象、函数等对象） TS 新增类型 联.
2021-11-24 12:00:44
497
原创 React中在非组件的状态下使用history
在react-router-dom中有Router这个包 但是Router没有history属性Router + HashHistroy = HashRouterRouter + BrowerHistroy = BrowerRouter安装react-router-dom时，默认会安装history包，我们可以通过这个包来自己创建history对象具体步骤import { createBrowserHistory } from 'history'export const histo.
2021-11-18 20:40:45
1093
1
原创 浅谈Event loop事件循环机制
Eventloop 是指浏览器或node的一种解决javaScript单线程运行时,不会阻塞的一种机制 也就是我们经常使用异步的原理在js中 任务被分为两种一种是宏任务(MacroTask)：setTimeout,setInterval一种是微任务(MicroTask)： process.nextTick,Promise.then 同步任务在栈中先执行,进入主线程,异步任务进入任务队列,根据异步事件类型,进入对应的宏任务队列或者微任务队列中, 当执行栈为空的时候 ...
2021-11-14 22:22:31
621
原创 React手写逻辑复用--倒计时
将组件状态逻辑提取到可重用的函数中，实现状态逻辑复用。自定义hooks 约定函数名必须是use开头 React会通过函数名是否以use开头来判断是不是hooks用户 可以设置倒数的时长 initNum可以设置倒数结束后执行动作 calBack回调函数可以设置倒数开始 startimport { useState, useRef, useEffect } from 'react'export defau...
2021-11-13 15:48:17
1120
1
原创 React 全局状态useContext
基本步骤和类组件类似1.根组件导入并调用createContext方法 得到一个对象并导出import { createContext } from 'react'export const Context = createContext()2.使用Provider组件包裹根组件，通过value属性提供要共享的数据return ( <Context.Provider value={ 这里放要传递的数据 }> <根组件的内容/> </Contex
2021-11-12 19:30:30
554
原创 React 中的useRef
useRef的作用主要有两种1.操作DOM或者获取其他组件的引用操作步骤import { useRef } from 'react'const xxxx = useRef(null) <input ref={xxxx} />xxxx.current2.多次渲染之间共享数据import React, { useEffect, useState } from 'react'import ReactDom from 'react-dom'expo...
2021-11-12 19:13:56
2628
原创 React中hooks
hooks 是一些可以让你在函数组件里 钩入 react state及生命周期的特点 hooks 只能在函数组件内使用我们可以使用class提供给状态也可以使用hooks提供状态 但是在16.8之前 只能使用class提供状态 函数组件展示内容react组件时用来构建用户界面的 函数式组件本身比较简单 可以很好的胜任根据状态渲染ui而我之前说过 函数式组件没有状态 但是结合hooks后 可以让函数组件内具有维护状态的能力 并且带来了组建的逻辑复用 是一种不一样的复用useState为函数组件提.
2021-11-11 19:54:52
1051
原创 React中的setState
当我们按下按钮 打印n的时候 视图层的n变成了3 而输出却并没有变 setState的对象 是异步的setState调用之后，并不会立即去修改state的值，也不会立即去更新dom 他的执行顺序是在钩子函数componentDidUpdate前的当我们给setState添加第二个参数 一个回调函数之后再打印n此时获得的n是最新状态的他还有另一种写法this.setState((上一状态) => { return 新状态}[,回调函数])...
2021-11-10 22:19:40
994
原创 React中类组件的生命周期
组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程只有类组件才有生命周期react类组件的生命周期钩子函数-整体说明上图为常用的生命周期 分三个阶段 五个钩子函数下面我也主要是讲常用的生命周期图来自http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/挂载阶段constructor 最先执行，创建组件时 初始化state，创建ref等 render ...
2021-11-09 19:58:13
458
原创 React中组件传值讲解
父传子<子组件 自定义名1={要传给子组件的值1} 自定义名2...../>函数式组件中-子组件通过添加形参接受 我们就起props父组件内<HelloFunc age={19} name={'张三'}/>子组件内function 子组件(props) { return (<div>子组件的内容{props.name}---{props.age}</div>)}类组件中 通过this.props来获取父组件内<
2021-11-08 19:26:49
457
原创 React组件介绍
用过vue的小伙伴都知道组件的作用 react中的组件也是差不多的作用 接下来我给大家介绍介绍在react中我们应该怎么使用组件react的组件主要分四类基础组件：指input、button这种基础标签，以及antd封装过的通用UI组件业务组件：由基础组件组合成的业务抽象化UI。例如: 包含了A公司所有部门信息的下拉框区块组件：由基础组件组件和业务组件组合成的UI块页面组件：展示给用户的最终页面，一般就是对应一个路由规则...
2021-11-06 21:40:49
753
原创 react修改状态小案例
import { Component } from 'react'import ReactDOM from 'react-dom'class HelloReact extends Component { state = { name: 'jack', assets: [{ id: 1, name: '手机' }, { id: 2, name: '耳机' }], skill: ['vue', 'react'], // angular info: { ag.
2021-11-06 21:16:28
188
原创 React初始用介绍
第一步当然是创建了 用过vue的小伙伴都知道要建脚手架在使用react的时候 我们也有创建方式第一种npm i -g create-react-appcreate-react-app 项目名字第二种npx create-react-app 项目名字npx是调用最新的create-react-app 直接创建 React 项目1.导入包2.创建react元素 格式React.createElement('标签名...
2021-11-05 19:47:11
142
原创 tab栏切换结合搜索渲染 防止重新切换分页导致数据混乱
当我们点击搜索时 tab栏可以进行搜索过后的数据tab切换筛选数据 当我们再次改变搜索框内的内容 不点击搜索 而切换tab栏 会默认去搜索搜索框内的内容进行渲染 分页原因一样原因是 当我们点击tab栏切换和分页按钮时 都会触发获取数据的请求 而请求内携带参数 有页码以及输入框内关键字信息 虽然我们没有点击搜索 但是在获取数据时 他会自己将参数传送过去解决思路 我们应该在发送请求时 如果未点击搜索 就不应该传入关键字信息搜索按钮list中有搜索相关的学科和...
2021-11-03 10:25:30
988
原创 element-ui分页的使用所有使用情况
background 使分页有框框效果:current-page="pageParams.page" 当前第几页:page-sizes="[1, 5, 10, 20, 50]" 每页可以选择显示多少条:page-size="pageParams.pagesize" 当前一面几条:total="total" 总条数切换重新渲染页面以及之前所写的博客新增或者删除 页面的变化不同分页 table的序号连续...
2021-11-01 20:47:17
215
原创 Vue+element-ui实现tab栏数据筛选切换
拿同一数据 不同状态下渲染表格封装一个实现表格数据的组件当我们点击tab栏切换时 饿了么关于tab栏有一个事件 @tab-click 并给子组件绑定ref三种状态分别是0,1,2 我们可以修改所点击的tab栏的name使所点击的tab栏和状态对应传给子组件拿数据要传的值 使初始的审核状态未知 显示全部数据根据点击不同的tab绑定不同状态 得到相对应的数据需要向后端传值拿数据...
2021-11-01 20:20:09
1260
原创 gitee团队合作操作流程 依次输入即可
项目经理(组长)git clone 项目 (二次开发)rm -rf .git 删除项目中的.git文件夹git add . 添加暂存区git commit -m xxxx 项目初始化创建远程仓库并绑定gitee有教程或看我之前发过的教程git branch release分支创建 release 分支，测试分支git branch develop分支创建 develop 分支，开发分支...
2021-10-30 20:29:54
342
原创 css伪类 :empty 如何用css找出多个相同标签没有内容的那一个
:empty CSS伪类代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）
2021-10-28 21:52:12
206
原创 vue中打包优化瘦身
打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.js中配置路由懒加载 只有在路由进入到这个页面的时候 才会去加载这个组件的资源路由懒加载中的魔法注释可以人为设置这个文件的名字 （在注释中指定webpackChunkName）components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue")打包去除console....
2021-10-28 19:00:33
376
1
原创 vue中上传图片到腾讯云 (再也不怕占内存啦)
在vue中像上传照片到云对象储存cos中 我们可以在element-ui中找到一个上传文件的组件其中上传图片到腾讯云需要安装一个依赖包npm i cos-js-sdk-v5 --save在使用的组件中 实例化一个cos对象 固定写法const COS = require('cos-js-sdk-v5')// 填写自己腾讯云cos中的key和id (密钥)const cos = new COS({ SecretId: 'xxx', // 云端储存桶的id SecretKey:
2021-10-25 19:15:00
524
原创 Vue中多个子组件更新同一数据覆盖前一数据问题
当我们在一个组件中 有多个子组件对同一接口 不同数据进行更改时 我遇到了 再更新最后一个组件 会把之前跟新的数据覆盖的情况首先 是打开这一父组件时 三个子组件同时发送ajax请求当我们在更新第一个子组件内容后 想切换到另一个子组件更新另外的内容时第一个子组件修改后数据样子修改第二个子组件的时候 我们修改了入职时间 但是我们跟改的名字又变回去了这是因为我们在打开父组件时 他们同时发送请求获取数据 当我们...
2021-10-25 15:59:24
2611
原创 Vue中语法糖 v-model在组件上的使用
v-model是input中value属性 监听input事件的语法糖它也可以在组件上使用 在父组件中写v-model所以在子组件中的props中有一个 value 接受子组件传父组件也可以使用 this.$emit('input')进行传递...
2021-10-24 23:40:29
242
原创 如何让element-ui中不同分页的序号连续
table组件中有一个type可以设置index其中我们还可以自定义索引 使用 :index在methods中定义方法当前页面的前面一面乘以他页面的条数再加上1就为后来的索引 再加上原本他的索引 形参index从0开始...
2021-10-20 18:31:04
442
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人