- 博客(41)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 在vue3项目中如何使用echarts
vue3项目在做一个图表需求时发现项目之前引入的第三方echarts因确实文档使用时不能满足需求,顾去echarts官网查看文档,引入原生echarts.要实现的如下原型效果,用此文档记录.
2022-10-14 10:04:59
5094
原创 啥,要我前端去对接外部?我也不会呀
一般来说，现在公司的业务都是后端去对接外部官方接口。但是现在加个紧急需求，往我这丢了几个对接文档，让前端去对接，我内心也是打咩。
2022-10-09 17:25:58
3531
10
原创 vue使用 Object.assign()重置data数据配合keep-alive使用失效问题
vue使用 Object.assign()重置data数据配合keep-alive使用失效问题
2022-07-28 15:22:19
1491
原创 vue项目增加单元测试
单元测试的作用毋庸置疑能带来很多好处，但是如何去写好单元测试.TDD 的思想是根据需求先写测试用例，依照测试用例再去写功能代码。当增加或者修改某一项需求的时候，需要先修改测试用例，再依照测试用例去修改代码逻辑。基本步骤：与 TDD 相反，BDD 是根据需求先进行开发，等到该功能开发完毕后，再开始编写测试代码进行测试。基本步骤：了解到vue-cli构建的项目，在初始化时会询问是否使用单元测试，只需按步骤选择jest即可，会自动安装Vue Test Utils，它是 Vue.js 官方的单元测试实用工具库，为
2022-07-08 11:07:23
743
3
原创 React+TS学习和使用（三）：React Redux和项目的路由配置
开启学习react+ts，本篇主要是学习使用React Redux和项目的路由配置
2022-06-24 19:00:13
2460
2
原创 TypeScript学习笔记（四）
开启ts学习之路，本篇学习ts常用语法(Omit、Pick、Partial、Required)。TS中常用的工具映射类型,让写TS时效率大大提升,避免无意义的重复性定义。
2022-06-14 20:13:55
1204
原创 踩坑 - Vue 使用 v-show 失效和element表单验证失效
使用element的form表单了，通过v-if控制表单元素的显示隐藏，发现点提交时表单校验失效，打印发现会直接通过校验。明明是空数据怎么会通过呢？？!然后排查原因发现是 v-if显示会导致表单验证失效。那好，那我就改成v-show。改成v-show之后又发现判断条件没有生效，页面显示所有的元素，这又是为啥。然后又排查发现 本质上应该是因为 v-show 不支持 template标签，ok，改成div。最好解决了使用 v-show 失效和element表单验证失效。...
2022-06-07 18:47:36
1566
原创 TypeScript学习笔记
TypeScript（下称TS） 是 JavaScript 的超集，TS其实就是类型化的 JavaScript（下称JS），它不仅支持 JS的所有特性，还在 JS的基础上添加了静态类型注解扩展。
2022-06-01 09:29:26
357
原创 vscode 启动项目报错“C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run serve”
问题今天启动新项目，使用npm run serve时，vscode报错，如下：> Executing task: npm run serve <npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置 行:1 字符: 1+ npm run ser
2022-05-26 16:24:17
3039
5
原创 vue+element select组件结合vue-virtual-scroll-list插件解决数据量太大，导致渲染过慢
因为项目中数据量有时候过于庞大，使用elementui的select组件时，会导致下拉框加载数据蛮并且卡顿甚至于卡死，为解决这个问题，发现vue-virtual-scroll-list这个插件，用来模拟虚拟滚动，从而解决问题。
2022-05-24 01:16:54
4883
8
原创 elementui el-select修改单个样式或去掉滚动条
场景使用elementui的select组件时，有时候需要去修改下拉框的样式，可是当去修改时才发现问题： （下拉框el-select-dropdow和app是同级），如下图：解决方案那这种情况下我们在单个组件里面写scoped样式就无法生效，在全局写又会影响大所有的下拉框。翻阅文档发现为了不全局污染，select组件中，提供了一个popper-class属性（element-select），所以给select组件加上这个属性，就可以通过这个类下修改样式了。// template popper-c
2022-05-23 20:17:31
1496
原创 vue使用vuedraggable插件拖拽排序
Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。所以一般要实现拖拽功能的时候我都会想到使用这个插件。
2022-05-22 23:55:43
5365
4
原创 js some方法和every方法的使用
前言: 在以外的开发中，接触过some这个方法，但是只限于在代码里看见过，还没有自己去了解并且写过，今天碰到个需求时发现使用some这个方法真香，写此文章加深印象。定义和用法some() 方法检查数组中的任何元素是否通过测试（作为函数提供）。some() 方法对数组中存在的每个元素执行一次函数：如果找到函数返回真值的数组元素，some() 返回真（并且不检查剩余值）否则返回 false注释：some() 对没有值的数组元素不执行函数。some() 不改变原始数组。使用场.
2022-05-16 16:23:10
1669
原创 vue2.x项目报错 vuex.esm.js sub is not function
场景项目今天突然出现bug，调用vuex的dispatch方法时突然出现报错，如下：sub is not function排查原因发现是使用Vue DevTools，因为我的浏览器现在安装了Vue DevTools2.x和3.x的版本，这次出问题主要是Vue.js devtools 6.0.0 beta 15（3.x）版本引起的。解决方法：关闭或者重启Vue.js devtools 6.0.0 beta 15（3.x）版本在Vue 2内置插件中添加了开启设置 Legacy Actions
2022-05-12 18:48:59
2543
5
原创 js模块化，理解AMD,CommonJS和es6
1. CommonJS：同步模块加载 ,Commonjs主要应用的环境是nodejs，也就是服务器端广泛使用的一种模块化机制，模块一般都存在于本地，所以不需要考虑网络加载因素，所以是 同步加载。CommonJS 模块语法不能在浏览器中直接运行。CommonJS 模块定义需要使用 require()指定依赖，而使用 exports 对象定义自己的公共 API。每个模块都有自己独立的作用域，module变量代表当前模块。模块是值的“浅”拷贝// 输出模块 moduleA.jsvar x = 1
2022-05-11 11:43:17
905
原创 vue2.x项目中使用$once清除定时器，理解$once
一、$once的概述使用$once是一个函数，可以为Vue组件实例绑定一个自定义事件，但该事件只能被触发一次，触发之后随即被移除。$once有两个参数，第一个参数为字符串类型，用来指定绑定的事件名称，第二个参数设置事件的回调函数。$once可以多次为同一个事件绑定多个回调，触发时，回调函数按照绑定顺序依次执行。还可以作为修饰符使用1.$once的简单使用+绑定多个回调<template> <div> <button @click="$emit('
2022-05-05 10:26:55
1649
原创 使用vue实现注册一个全局的Toast
最近碰到一个实现全局toast的面试题，然后翻阅资料发现Vue提供了Vue.extend()可以实现这个功能，后续封装其他业务组件时也可使用此方法。以此文章以作笔记。题目大概如下： Toast支持string/object两种类型的调用，其基本的样式为垂直/水平居中于屏幕中央，图片文字上下混排首先我先准备好一个vue2.x的项目，然后写好一个组件Toast。一般我会放在components目录下。// toast.vue文件<template> <div c.
2022-04-14 22:11:54
1700
4
原创 nuxt中使用elementui,表格和分页都显示英文版本,怎么解决
1、首先在找到plugins目录下element-ui.js文件，内容如下：import Vue from 'vue'import Element from 'element-ui'import locale from 'element-ui/lib/locale/lang/zh-CN' // 修改为中文Vue.use(Element, { locale })2、在nuxt.config.js的plugins中引入该js文件：3、大功告成...
2022-03-07 18:58:14
972
原创 React Hooks+Typescript 中 父组件调用子组件方法.
父组件import React, { useRef } from 'react';import MyModl from './MyModl';const Editor = () => { let ChildRef:any = useRef(); const sumbitArticle = () => { // 调用子组件方法 ChildRef.current.formResetFields(); } return ( <div> /
2022-02-24 17:43:02
1114
原创 基于vue开发一个组件库
基于vue开发一个组件库如果团队存在多个不同的项目都会使用一致的组件设计规范,那么搭建组件库无疑是不二选择.接下来我们直接开始实现组件库的搭建.1.首先安装vue-cli3并创建一个项目// 创建项目vue create tset关于vue的组件库目录结构,首先我们看看原来的目录结构如下:我们做一下调整:将src重命名为examples, 并添加packages目录,用来存放我们的自定义组件. 但是cli默认会启动src下的服务,如果目录名变了,我们需要手动修改配置,vue-cli3中提
2022-01-24 18:27:36
2463
3
原创 Vue 限制input输入 保留两位小数或者多位
Vue 限制input输入 保留两位小数或者多位在就是实际业务需求开发中，经常需要用户输入输入框的值要进行保留小数操作，利用失焦事件可以在用户失焦的时候对输入的值进行格式化，保留固定的小数点后几位。// html<el-input v-model="row.settlementRatio" @blur="handleInput1" type="number" size="small" placeholder="请输入"></el-input><el-input
2022-01-13 09:37:43
7281
2
原创 vue watch怎么监听vuex的变化
使用wtach监听vuex数据的变化，在进行具体的业务操作 watch: { '$store.state.recordTimer'(newVal, oldVal) { // 根据新旧值再去做业务需求 } }
2021-11-03 16:02:58
396
原创 vue 修改input占位文字样式
通过::-webkit-input-placeholder修改样式input::-webkit-input-placeholder { /* 修改placeholder颜色 */ color: #aab2bd;}
2021-10-26 18:08:26
892
原创 vue H5 长按图片保存分享
h5端长按图片分享功能 在移动h5开发中，经常会遇到需要长按图片可以保存的本地的需求。在标签中写入触摸事件<div class="codeBox" @touchstart="touchStart()" @touchend="touchEnd()"></div>然后在methods里面定义方法 touchEnd(){ //手指离开 clearTimeout(this.Loop); },
2021-10-19 09:55:49
4496
4
原创 html css修改滚动条的样式
html css修改滚动条的样式下面展示一些 内联代码片。.infoBox .item .body::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px;}.infoBox .item .body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 5px; box-shadow: inset 0 0 5px rgb
2021-08-31 17:53:12
168
原创 vue 让input输入框主动失去焦点的办法
在开发中发现输入框输入数据直接隐藏，在同位置显示别的输入框的时候，会自动聚焦。解决这种情况可以让输入框主动失焦。 complete(e) { if(this.verification.length>=6) { e.srcElement.blur(); // 让输入框主动失焦 } },...
2021-07-08 14:30:17
23964
3
原创 vue 阻止浏览器的默认返回事件，自定义返回行为
首先阻止浏览器返回的事件 mounted() { if (window.history && window.history.pushState) { // 向历史记录中插入了当前页 history.pushState(null, null, document.URL); window.addEventListener('popstate', this.goBack, false); } }, destroyed() { //离开
2021-06-29 17:18:45
1445
原创 vue监听滚动条位置，并且使滚动条到指定位置
首先向页面添加滚动事件，可以实时获取到滚动条的位置 methods: { //滚动事件 handleScroll() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; var offsetTop = document.querySelector('#tabbarBox').offsetTop // 获取所需元素到
2021-06-29 17:03:25
13995
原创 vue中使用 vue-clipboard2实现复制粘贴功能
首先安装第三方库vue-clipboard2npm install --save vue-clipboard2在main.js进行全局引入注册import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard)在单个页面使用// 此时复制的内容是拼接的变量 'row.domain+' / '+row.hash' <el-button size="mini" v-clipboard:copy="row.domain+' /
2021-06-16 13:58:58
1843
1
原创 把后端返回带T的时间转为正常的时间格式
把后端返回带T的时间转为正常的时间格式 yyyy-mm-dd hh:mm:ss/** * 把带T的时间转为正常的时间格式 yyyy-mm-dd hh:mm:ss * @param {String} time 带T时间 */ timeFormatter(time) { if(!time) return time; var date = time.substr(0, 10); //年月日 var hours = time.substring(11, 13);
2021-06-01 10:35:12
3108
2
原创 vue中使用element-ui的el-select单选远程搜索功能，文本输入不能及时发送请求
@[TOC]vue中使用element-ui的el-select单选远程搜索功能，文本输入不能及时发送请求在element-ui中使用el-select远程搜索时，输入文本搜索无法及时发送网络请求获取数据，需要按下删除或者回车才能刷新选择框，但是选择一个值后会发现无法在去请求新的数据了。加入可多选属性时就没有这个问题。引入组件 用ref绑定节点<el-form-item label="产品名称：" prop="productName"> <el-select ref="
2021-05-28 11:57:19
3367
原创 js写的可以发送弹幕的小案例
代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
2020-01-04 21:11:00
360
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人