ELNino_Thomas.Liang-优快云博客

原创【React】react-redux+redux-toolkit实现状态管理

创建要管理的数据模块 store/module/counter.tscounter: 0, // 初始值},// 修改值的方法state.counter = payload // 使传入的参数赋值到counter},})export const { changeCounter } = counterSlice.actions // 导出修改的方法创建store/index.ts用于管理和导出项目所含的状态数据。

2025-02-13 17:24:37 519

原创 vant的dialog触发了其他overlay

因为调整overlay内容样式的时候直接把样式写在了overlay的style里面造成了样式污染，把样式写在自定义类名。之后，dialog的遮罩层消失了，但是触发了overlay，并检查。

2024-06-28 17:51:20 391

原创【Vue】前端解决外部图片防盗链问题

解决站外图片防盗链403跨域问题

2024-06-17 17:43:30 548 1

原创遍历数组生成promise队列并获得返回数据的方法

记录一下最近项目写的函数，遍历请求参数的数组发起请求并获取返回数据。代码还有优化的地方，欢迎指出。

2023-10-13 11:16:23 323

原创【Electron】vue项目携带cookie完成第三方网站免登跳转

const partition = Date.now().toString() // session隔离要设定唯一的string 否则窗口多开的话// nodeIntegration: true, // 设置开启nodejs环境enableRemoteModule: true, // enableRemoteModule保证renderer.js可以可以正常require('electron').remote，此选项默认关闭partition,},});// 等待cookie初始化完成。

2023-08-22 18:42:28 3115 2

原创 vue--websocket封装&使用

websocket封装和使用

2022-09-01 13:39:06 1761

原创 Vue3.0父组件通知子组件调用方法

vue3.0父组件通知子组件调用方法

2022-09-01 10:46:28 1910

原创 sortablejs+vue2+antdv 实现表格简单拖拽排序

安装$ npm install sortablejs --save使用//html<a-table ref="dragTable" :data-source="newData"></a-table>// scriptimport Sortable from "sortablejs";mounted() { //调用 this.$nextTick(() => this.setDrag());},// newData为表格数据method

2022-05-11 14:31:55 909

原创 Vue3入门 ----- Vite、Vetur、Vue-router@4、Pinia的使用

打包 – Vite极速的服务启动，使用原生 ESM 文件，无需打包轻量快速的热重载，始终极快的模块热重载（HMR）丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用传统打包方式基于打包器的方式启动，必须优先抓取并构建你的整个应用，然后才能提供服务。vite 方式Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。PS:webpack 的入口是一个 js 文件，先根据入口 js 文件，构建打包项目，在运

2022-04-03 01:03:05 6564

原创 Vue3入门 ----- script setup、computed、watch、组件通讯、ref

前言:因为公司的一个后台新项目决定用Vue3, 然而同事包括自己使用Vue3时, 除了一些语法例setup, defineComponent等与Vue2有区别外, 并没有其他特别的地方, 反而增添了开发的工作量. 觉得Vue3和Vue2最大的不同不该是语法上的不同, 故决定系统性地开展Vue3的学习.初使用和Vue2使用的optionsAPI(例如: 数据放 data 中, 方法放 methods中)不同的是, Vue3是用了composition API, 提升了代码的可读性和可维护性, 同时也保

2022-03-13 02:17:19 6885

原创 Vue导入Excel表格并获取数据【适用于不同框架】

背景:需要导入excel，并获取Excel文件中的内容最后需要的数据格式:[ { name:'tom', age:18, gender:'男' }, { name:'candy', age:18, gender:'女' }]代码如下:// template// 需要使用input type="file"标签,如果想要改变样式,可以设置为透明,再定位到自定义样式的按钮上<input title="" type="file"

2021-09-27 15:10:08 969

原创 ant组件radio换切导致表单校验失效

场景:通过单选radio配合v-if来换切form-model-item，会可能触发rules的校验条件失效，如数据要求是必填项但没有值校验依然通过解决方法：每个form-model-item都绑定一个唯一的key值即可例// 通过radio来切换<a-radio-group v-model="type" > <a-radio :value="1"> 文字 </a-radio> <a-radio :value="2"> 图片 </a-

2021-08-04 15:13:15 1122

原创 VUE3.0+TS用ref获取元素

<div ref="element" @click="handleClick">div元素</div>//在setup中无法使用thissetup(){ //新建一个ref对象,对象命名必须与ref命名相同 //在setup的中还不是一个DOM节点类型,在DOM挂载后才会是ELEMENT类型,所以要设置泛型 const eleRef = ref<null | HTMLElement>(null) const handleClick = () => {

2021-06-06 22:29:11 3507 1

原创 Vue使用antd日历DatePicker指定日期可选范围

// 日期组件 <a-date-picker format="YYYY-MM-DD" :disabled-date="disabledDate" />组件接收的disabled-date为格式"YYYY-MM-DD"的数组所以把指定的可选范围放入avaiableDateList，类型为数组如：[“2021-05-26”, “2021-05-25”, “2021-05-24”]//method中设定传入的disabled-date方法disabl

2021-05-26 14:19:50 1675 2

原创 TS个人学习笔记3---泛型 generics

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。//应用场景定义一个方法,返回传入的参数function echo(arg){ return arg}//如果此时不定义参数的类型,那么参数arg的类型为any,丧失了typescript的意义,但如果定义特定类型,那么只能传入指定类型的值const str = echo('str') //anyconst num = echo(123) //any此时,可以使用泛型,用表

2021-04-13 00:27:09 203

原创 TS个人学习笔记2---Typescript中的类、枚举

Typescript中的类Public:修饰的属性或方法是共有的Private:修饰的属性或方法是私有的Protected:修饰的属性或方法是受保护的TS提供了一个只读属性readonly,在变量前面声明,则变量只读而不能修改//定义一个类class Animal { readonly name:string; constructor(name:string){ this.name = name } protected eat(){ //保护方法,在实例中不能使用,子类中可用

2021-04-11 17:20:40 392

原创 TS个人学习笔记1---变量类型、数组和元祖、interface接口、函数

全局安装typescriptnpm install -g typescript 查看版本tsc -v把ts类型文件编译成js文件,在Git Bash中输入 tsc+文件名tsc test.ts定义变量1. ts中所有的变量都需要定义类型//输入的形参要定义类型const hello = (name: string) => { return `hello ${name}`}hello('Typescript')hello(123) // 传入其他类型会报错,

2021-04-11 15:18:02 1505

原创 Ant Design of Vue表单元素因为v-if换切导致rules校验失败

解决方法:在item标签绑定key<a-form-model-item key="switchVif" prop="switchVif"><input v-model="switchVif" /></a-form-model-item>在data中定义data(){ return{ switchVif:"" }}

2021-04-07 20:07:57 852

原创 Git分支合并时显示输入合并备注

提示:Please enter a commit message to explain why this merge is necessary解决方法:按 i 进入insert模式填入合并备注(可不写,跳过)按Esc输入’:wq’,然后回车

2021-04-06 10:22:18 985

原创如何在vue-cli中使用postcss-px-to-viewport(px自动转为vw)

1.安装插件npm i postcss-px-to-viewportnpm i autoprefixer@8.0.0autoprefixer作用是在样式中添加浏览器厂商前缀,避免手动处理样式兼容问题,安装的时候需要注意版本问题2.在配置文件中引入以及进行配置//vue.config.jsconst autoprefixer = require('autoprefixer') // 自动添加浏览器前缀const pxtoviewport = require('postcss-px-to-vie

2021-03-05 15:20:41 417

原创 Vue2.x --SPA单页应用hash和history路由模式、vue-cli打包时采用CDN模式、instanceof()和typeof()的区别

SPA单页应用两种路由模式–hash模式、history模式hash模式:(默认模式)url中会有#,#后面是路径. 特点是前端访问,#后面的变化不会经过服务器( 不会向服务器发请求history模式:正常的访问模式,特点是后端访问,任意地址的变化都会访问服务器配置history模式路由//router/index.jsconst createRouter = () => new Router({ mode:'history', //不写的话默认为hash模式 base:'base'

2021-02-03 22:32:49 458

原创 Vue2.x -- 自定义指令componentUpdated作用、子组件主动修改父组件传值、父组件使用子组件方法、统一注册全局组件

vue自定义指令配置中componentUpdated作用Vue.directive('name', { // 组件插入指令时执行 inserted(el,options){ el.value = option }, //指令所在组件的 VNode 及其子 VNode 全部更新后调用 componentUpdated(el,option){ el.value = option }})子组件发出事件主动修改父组件props传值语法:this.$emit('update:值的名称

2021-01-27 23:20:10 1699 1

原创个人笔记 -- Axios封装原理、console.log()和console.dir()的区别、开发环境解决跨域问题、Vue设置全局自定义指令、cookies和localstorage区别

Axios封装原理// 配置axios 返回Promise结果const axios = (option)=>{ return new Promise((resolve,rejuect)=>{ const xhr = new XMLHttpRequest() // 失败判断回调 if (!options.url){ return reject('url 为必填参数') } xhr.open xhr.send // 成功回调 xhr.onload = (

2021-01-15 21:46:56 440

原创 Vue2.x -- 解决vue2editor文本框报错、作用域插槽、对象解构赋值、VsCode支持Vue文件配置

解决vue2editor文本框报错报错提示: [Violation] Added synchronous DOM mutation listener to a 'DOMNodeInsertedIntoDocument' event.原因:vue-editor无法编译div标签解决方法:replace()方法,可以尝试把数据中的 div 标签换成 p 标签语法: 例如vue-editor标签中绑定的内容为content, content.replace(/div/g,'p')replace()

2021-01-10 21:03:50 5014 1

原创 Vue2.x --element-ui表单验证、$nextTick()

element-ui表单验证表单基本结构el-form 包含 el-form-item//template//el-form要动态绑定model,如果需要验证规则,还要动态绑定rules<el-form :model="user" :rules="loginRules" ref="loginForm"> //el-form-item 如果要验证,需要用prop来绑定 <el-form-item prop="mobile"> <e

2021-01-05 22:17:08 281

原创 Vuex基础使用(state、mutations、actions、getters、module、nameSpaced)

为什么会有VuexVuex是转为vue应用程序开发的状态管理模式,采用集中式存储管理应用的所有组件的状态作用:采用集中式管理组件依赖的共享数据,解决不同组件数据共享主要组成state:共享状态数据mutations:修改状态数据,且只执行同步代码操作actions:执行异步操作,提交给mutations修改状态数据getters:处理state中的数据module:实现Vuex模块化state/mutations/actions/组件间的关系初始使用Vuex//在脚手架的m

2021-01-04 01:24:13 726

原创 Vue2.x -- 相对时间、登录成功后跳转地址判断、组件递归、页面滚动

把时间转换为相对时间用dayjs插件实现npm安装npm install dayjs --save引入import dayjs from 'dayjs'如果是求相对时间,需要用到dayjs里面的relativeTime组件import relativeTime from 'dayjs/plugin/relativeTime'例子:实现封装相对时间的过滤器import dayjs from 'dayjs'import relativeTime from 'dayjs/p

2021-01-02 20:50:56 196

原创 Vue2 -- Vue挂载全局属性prototype

挂载全局属性prototype可以把常用的函数和数据挂载到全局属性中,以便使用//把baseURL挂载到全局//main.jsimport Vue from 'vue'export const baseURL = 'http://127.0.0.1:3000'//用$来表示是全局函数,使代码更有语义化Vue.prototype.$baseURL = baseURL//在SPA中使用userBaseURL(){ let baseURL = this.$baseURL cons

2020-12-26 21:01:25 654

原创 Vue2.x --导航守卫、axios请求响应拦截器、对象解构

导航守卫用来通过跳转或取消的方式守卫导航参数或查询的改变并不会触发进入/离开的导航守卫- 前置守卫 —router.beforeEach路由跳转前做相应处理//判断跳转至用户页前是否有token//to是目的路由,from是触发路由,next是下一步的函数//PS:一定调用next作为导航守卫的出口,否则一直在等待router.beforeEach((to, from, next) => { const hasToken = localStorage.getItem('token'

2020-12-25 23:12:39 236

原创 Vue2 -- 上传File格式文件、Object.keys/values用法、for...of获取对象/数组、解决图片变形

把File格式文件上传到服务器,并发送请求POST文件上传请求,参数为file1.用formdata处理文件格式2.把File格式的文档加进FormData,键名称可以自定义3.把FormData加入参数发送请求(注意:如果接口文档写明参数为file,则自定义键必须要匹配)const handleFile = new FormData()handleFile.append('file',File) //要留意接口文档的参数名axios({url:"/upload",data:hand

2020-12-24 22:10:40 820

原创 Vue2 -- axios不同的发送请求方式

axios不同的发送请求方式原生方法//axios会返回一个promise对象axios({ baseURL:'',//基地址 url:'',//请求地址 method:'',//请求方法 GET或者POST GET为默认值 params:{},//参数 GET为params POST则需要改为data //请求头 headers:{}}).then(res=>{}).catch(err=>{})//-------------------axios可以提前封装base

2020-12-22 23:12:25 154

原创 Vue2 --响应式样式vw、自定义代码片段、引入公共图标库

移动端响应式样式 – vw/vhvw:即view width–视口宽度的意思,把视口分成了100份,1vw 相当于 1% 的视口宽度(vh同理)为什么用vw而不用% ?因为 % 是相对于父级元素，而不是屏幕,如果是百分号作为单位, 那么宽和高各自会用不同的标准来取值使用方法vw是动态的,计算方法为设计稿中量取素材到的像素/设计稿的款的像素 = 素材的vw/100vw即素材的vw = 设计稿中量取素材到的像素*100vw/设计稿的款的像素假设一个文本框在宽为540px的设计稿量取到高为

2020-12-21 23:09:43 361

原创 Vue2 -- WebPack基础

什么是Webpack简而言之webpack 是一个Js 应用程序的模块打包器，分析项目结构找到Js模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript，vue等），并将其转换和打包为合适的格式供浏览器使用。如果html文件引入的js文件中有浏览器不能识别的代码,将会报以下错误: Uncaught ReferenceError: require is not defined解决方式:使用webpack打包,将浏览器不能识别的代码转换为浏览器可识别的,同时引出下面的话题–

2020-12-20 21:34:06 385

原创 Vue2 --文本框组件封装、路由封装、路由跳转

文本框封装实现子父组件值双向绑定子组件通过$emit把input框监听到的值发送给父组件//子组件 <div> <input @input="handleInput" class="myInput" type="text" placeholder="请输入用户名/手机号" :value="value" /> </div><script>export default {

2020-12-18 21:31:35 396 1

原创 Vue2 -- axios、过渡动画、兄弟组件传值

axiosaxios是一个基于promise的http库,目的是实现异步请求,返回promise对象,可用.then和.catch来处理结果使用前要先在js文件引入axios1.发送get请求的原生写法不带参数 axios.get('请求地址').then((res)=>{ //请求成功回调函数 }).catch((err)=>{ //请求失败回调函数})带参数//url传参 axios.get('请求地址?参数名=参数').then((res)=>{

2020-12-17 21:47:38 135

原创 Vue2 -- query和params传参、为什么要绑定key

Vue中使用query传参和params传参的区别params取值需要用this.route.params来取值,query需要用this.route.params来取值,query需要用this.route.params来取值,query需要用this.route.queryparams只能通过name来引入路由,query可以用path和name引入params参数不会在url中显示,会更加安全,query参数会在url中显示params传值页面刷新后会清空,所以必须配置路由时要先设置para

2020-12-16 21:33:55 470

空空如也

空空如也