- 博客(45)
- 收藏
- 关注
RSS订阅
原创 git 上传代码到码云（走过路过不要错过，绝对的应有尽有）
1.git下载安装 ????官网下载：https://git-scm.com/download安装好之后，右击任何目录下有以下即安装成功：最重要的一点：一切都ok后，需要进行全局配置，在任一文件夹下右键：git bash here，在git bash命令行输入如下：git config --global user.name “你的名字”在git bash命令行输入如下：git confi...
2020-04-30 17:33:50
411
原创 Vue3 + TS 使用 element-plus 的Icon组件（包括动态路由菜单图标）
Vue3 + TS 使用 element-plus 的Icon组件（包括动态路由菜单图标）
2022-02-18 17:21:21
2026
原创 ‘Switch‘ is not exported from ‘react-router-dom‘
当我想在 react-router-dom 导出 Switch 组件时，出现了这个一个错误：'Switch' is not exported from 'react-router-dom'，Switch 不是从 react-router-dom 导出的原因如下：在 react-router-dom 版本v5中是可以这样去写的，而我用的是版本 v6的， 它用 Routes 组件替换了 Switch。两者的写法差距如下：// 使用 Switchimport {Route, Switch} fro
2021-11-29 18:13:21
2477
原创 js 去除字符串空格
1. 正则表达式1.1 去除字符串内所有的空格：str = str.replace(/\s*/g,"");var str = " 6 6 ";console.log(str.replace(/\s*/g,"")); //661.2 去除字符串内两头的空格：str = str.replace(/^\s*|\s*$/g,"");var str = " 6 6 ";console.log(str.replace(/^\s*|\s*$/g,"")); //6 6//1.3 去除字符串内左侧
2021-07-09 17:28:47
138
原创 uniapp解决跨域问题(代理设置)
当你去使用第三方接口的时候，总会出现跨域问题，这时我们就需要去代理设置(proxy)。proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。开HbuilderX 找到 manifest.json 文件，点击源码视图，如下图:"devServer" : { "https" : false, "proxy": { "/api": { "target": "http://115.159.1
2021-05-26 18:21:15
4624
6
原创 CSS3 steps逐帧动画 —— 仿人人网动画案例
打开人人网的网页，当鼠标放上图标上和离开的时候都会有波浪形的动画，如图所示：看了源码可以发现，是用一张长图，由许多张小图组成。每张小图就是这个动画的一帧。鼠标经过时，添加一个active类，样式里面使用animation，改变这张长图的 translate 位移。先放上html 内容，重点讲的是css样式<body> <div class="recommend clearfix"> <div class="intro">
2021-03-19 11:16:17
278
原创 忽略Eslint文件校验
打开eslint的配置文件.eslintrc.js rules: { // 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' // allow async-await 'generator-star-spacing': 'off',
2021-03-01 15:56:08
1107
转载 JavaScript 一句代码实现字符串去重
代码如下：var str = "abcabcbb";var rs = [].filter.call(str,(s,i,o)=>o.indexOf(s)==i).join('');console.log(rs)以上为es6的函数写法，如浏览器不支持这种写法可替换为function形式：[].filter.call(str,function(s,i,o){return o.indexOf(s)==i;}).join('');思路分析：核心思想为使用数组的filter方法过滤掉除第一次
2021-02-24 08:59:03
254
原创 css 鼠标移入悬浮效果
效果图：/* 鼠标移入悬浮效果 */.kratos-hentry{ transition: all 0.2s ease-in;}.kratos-hentry:hover{ -webkit-box-shadow: 0 0 30px rgba(0,0,0,0.1); box-shadow: 0 0 30px rgba(0,0,0,0.15); -webkit-transform: translate3d(0, 0px, -2px); transform:
2021-01-18 10:09:22
878
原创 js正则表达式 0-100的数字
输入框可以输入大于0小于100的正整数，不能输入小数watch实时监听：'number':{ handler(oldNum,newNum){ var reg = new RegExp("^([1-9]|[1-9]\\d|100)$") if (!reg.test(oldNum)) { this.number = '' } else { this.number = oldNum }
2020-12-07 09:40:33
8304
1
原创 js 将url图片转换为base64
可以将这个封装为公共jsfunction getBase64(url, callback) { var Img = new Image(), dataURL = ''; Img.src = url + '?v=' + Math.random(); Img.setAttribute('crossOrigin', 'Anonymous'); Img.onload = function() { var canvas = document.createElement('canvas')
2020-12-03 16:32:26
2855
原创 vue element 上传图片限制大小，before-upload不生效的问题
原因以及解决方法：因为 before-upload 是指在文件上传之前、文件已被选中，但还没上传的时候触发，而设置了 :auto-upload=“false” 后，文件上传事件不被再次调用，所以 before-upload 不生效，所以，限制图片大小的时候，需绑定在 :on-change 里面template：<el-upload :limit="5" class="editpurchase_middle_avatar" action="#" :on-exceed="hand
2020-11-06 18:24:47
2346
原创 vue 实现点击复制功能（不使用插件）
在业务需求中，需要实现点击复制链接的功能话不多说，直接上代码// 这是在template中的代码<div class="profile_inner_middlelink"> <div class="profile_inner_middlelink_http"> {{httpLink}} </div> <el-button type="primary" @click="handleCopy()" plain>复制链接</
2020-10-26 15:14:11
529
3
原创 解决Vue-cli3中的Eslint报错
今天用vue-cli3搭建项目，写了几个页面，去编译的时候eslint都会抛出错误原因就是在项目搭建的时候选择的是standard（正常模式）所以每次启动项目的之后都会对代码进行检查，是否符合Eslint规范。解决方法：想要关闭Eslint语法检查只要在.eslintrc.js文件中找到’@vue/standard’配置将其注释或者删除即可。总结：ESLint 是一个语法规则和代码风格的检查工具，用来保证写出语法正确、风格统一的代码，这个比较适合团队开发和对代码已经轻车熟路的大神使用，我现在还不行
2020-10-15 10:04:52
1296
原创 Vue 最简单的实现input 输入框的模糊查询（不使用后端接口）
Vue 模糊查询功能原理：原生js的search() 方法，用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。1. input输入框<el-input placeholder="请您输入地址" v-model="value"></el-input><i class="el-icon-search" @click="searchAdress"></i>2. 循环的数据<ul>
2020-09-23 19:08:05
2732
原创 JS 分割地址省市区（含自治区，直辖市，县，自治县）
方法一：通过js进行处理var str = "湖北省武汉市江夏区文化大道110号";console.log(that.getArea(str));//省市区截取getArea: function(str) { let area = {} let index11 = 0 let index1 = str.indexOf("省") if (index1 == -1) { index11 = str.indexOf("自治区") if (index11 != -1) {
2020-09-15 18:01:31
6060
6
原创 JS 将数组里的图片转换成base64
将图片转换为Base64 公共js// ext 文件后缀名export function getUrlBase64(url, ext, callback) { var canvas = document.createElement("canvas"); //创建canvas DOM元素 var ctx = canvas.getContext("2d"); var img = new Image; img.crossOrigin = 'Anonymous'; img.src = url
2020-08-28 17:55:34
725
原创 Duplicate keys detected: ‘1‘. This may cause an update error.报错解决
错误信息：原因： key值不唯一解决: 仔细检查是否用了同一个数据循环且:key值相同，如果相同给第二个key随便加一个标记就可以，如下：:key=“index + ‘-only’”
2020-08-25 17:54:53
992
原创 JS 多个数组合并成一个数组
JavaScript concat() 方法concat() 方法用于连接两个或多个数组，该方法不会改变现有的数组。用法就是如下：一个数组合并var a = [1,2,3];var b = [1,2,3];console.log(b.concat(a))或者多个数组合并：arrayObject.concat(arrayX,arrayX,......,arrayX)参数也可以连接到数组：var a = [1,2,3];console.log(a.concat(4,5))...
2020-08-18 11:51:03
4434
原创 vue 动态增减表单以及动态增减表单的某一项 之优化（二）
之前写过一篇动态增减表单及表单的某一项的文章，发现页面的展示的话有点丑，而且数据处理起来比较复杂，这一篇就是在上一篇做的优化点击继续添加的时候，不是在下面又增加个表单，而是在原有的表单上进行编辑，展现的是这样比较之前的代码，我们把不需要的注释掉继续添加按钮的点击事件： addforms() { let json = { purchaseId: this.forms.purchaseId, name: this.forms.name,
2020-08-05 14:10:32
481
原创 js最简单的方法判断数组是否有重复值
老的方法可以通过循环解决，网上很多，这里说一个利用es6新增数据类型Set实现的方式var arr = [1,2,3,4,5,2,3];if((new Set(arr)).size != arr.length){ alert("数组有重复值")}具体Set的用法可以参考阮一峰大神的es6文档。传送门...
2020-07-31 13:53:53
770
原创 vue监听浏览器窗口大小变化
第一步先在 data 中去定义一个宽度属性data: { screenWidth: document.body.clientWidth // 这里是给到了一个默认值 （这个很重要）}第二步在 vue mounted 的时候 去挂载一下它的方法 mounted () { const that = this window.onresize = () => { return (() => { window
2020-07-13 16:26:15
1997
原创 限制input输入框输入的内容
1. 只能输入数字（小数点不可以输入）<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">2.只能输入字母和汉字<input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboar
2020-07-03 16:23:00
1432
原创 vue Dialog对话框滚动条自动定位到顶部或者底部
需要实现的效果是，在打开的时候，让对话框的滚动条自动定位到顶部解决：写在生命周期updated里面可以完美定位！updated(){ // 对话框定位到顶部 let ele = document.getElementById('chatRecord'); ele.scrollTop = 0; // 对话框定位到底部 let ele = document.getElementById('chatRecord');
2020-06-23 18:03:21
7053
3
原创 vue-element-admin之修改侧边栏的icon图标以及图标颜色
1.修改侧边栏的icon图标 ????如果在admin提供的icon库中没有你需要的图标，可以到https://www.iconfont.cn/上选择并生成自己的业务图标库在admin指南中可以看到这句话，我们来实际操作一波打开网址后，可以看到在图标库里可以搜索我们需要的图标搜索之后，点击下载，就下载到我们的文件夹中了，可以在文件中找到它，给它重命名打开我们的项目只要把它复制到icon中的svg下面，就有我们自己的图标了引入即可2.修改图标的颜色，随着点击的字体颜色改变
2020-06-11 09:24:28
13887
13
原创 vue 动态增减表单以及动态增减表单的某一项（一）
1.业务需求分析 ????一个业务的需求和一个功能的实现，先不要下手就开始，而要先去分析整理逻辑，这是我一个同行的小伙伴告诉我的，ok，进入正题：两个需求，一是点击增加采购人，就会增加一行input输入框，如图：二是，点击继续添加，增加一个form表单，form表单里也有新增联系人需求2.动态增减表单某一项 ????在element-ui组件 form表单 中可以看到有，下面是我的代码<!-- 显示的表单 --> <el-form class="pu
2020-06-05 11:33:23
3667
原创 vue 把全选单选的获得的数据添加到一个新的数组中，并把这个数组传递到另一个页面
1.效果显示 ????这里还有涉及到全选和单选功能，点击确定获取到单选全选的数据，保存到一个新的数组，同时跳转到另一个页面，这个新数组也将传递过去。这里没有用element的table表格组件<div class="personalinvoicing_all_top"> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ p
2020-05-18 10:41:50
4510
2
原创 vue使用Echarts图表
先贴个图：用的就是admin后台的Echarts图表，因为给的都是静态的数据，这里是调用的接口重新赋值的，我这里还多了一个功能，就是通过时间查询<template> <div class="app-container"> <!--表单--> <div> <el-form :inline="true" class="demo-form-inline"> <el-form-item>
2020-05-14 16:06:33
345
原创 vue后台管理系统—— 模糊查询和列表分页展示
1.效果显示 ????通过输入作品名称或者开始时间或者结束时间来显示数据列表，这里的三项选择可以输入其一，也可以都输入。2.分页代码????用的是element组件，包括表格上面的搜索：<div class="personalident_top"> <el-input class="personalident_topinput" v-model="realName" placeholder="请输入认证姓名"></el-input> &
2020-05-14 15:14:58
2331
1
原创 vue Element-ui中el-table拼接接口返回的数组的数据并展示
需要的效果显示 ????需要的效果就是展示成这样，这是从后台取出的数据：这是使用的table表格组件，一级菜单数据渲染没有问题，二级菜单就是两个列表（第一张图片标红的地方）渲染的时候不能实现解决方法 ????<el-table v-loading="listLoading" :data="list" element-loading-text="数据加载中"...
2020-05-07 17:28:43
5629
2
原创 vue 后台管理系统项目引入富文本编辑器vue-ueditor-wrap
因为业务需要，需要在项目里去做一个发布消息的富文本编辑器，能够实现传递给后台的编辑器内容能够自己编译（即html语义化标签）1. 安装依赖????首先在项目终端里执行以下命令：npm i vue-ueditor-wrap如果提示npm不是内部命令，就说明node.js未安装2.下载百度UEditor插件????可以选择去官网下载（下载地址：http://ueditor.baidu.com/web...
2020-04-29 14:00:04
2250
原创 Eslint 影响 element-admin在vscode中显示报错
在使用 vue-element-admin 开发项目时， vue-element-admin 默认是启用 Eslint 的，这样带来的影响就是在保存的时候，会显示错误，编辑器会报红，即：百度了之后找到了一个方法，用来忽略 Eslint 检查文件。在项目根目录有一个 .eslintignore 文件打开文件，直接在最后一行加入忽略略规则 * ，Eslint 就所有的文件都不会校验了.然后...
2020-04-26 11:51:54
616
2
原创 vue-element-admin 转换成中文
从admin官网上git下来的默认是英文，是修改不了语言的。如果需要转换成中文，在vscode里git checkout i18n，然后npm install，npm run dev之后就是中文的了，如图：...
2020-04-25 14:14:29
8226
11
原创 vue 实现图片上传单选功能
vue实现图片上传，点击选择图片，单选功能1.效果展示2.HTML部分这里用的是element的card组件展示的图片效果 <div class="activity_detail_diatan_zuopin"> <el-row class="activity_detail_diatan_zuopinsuch" :gutter="12"> <...
2020-04-22 11:07:50
571
原创 vue 的 this.$forceUpdate()
this.$forceUpdate()当视图层无法就行数据更新时，用 this.$forceUpdate()进行视图层重新渲染，也可以刷新浏览器进行数据更新...
2020-04-20 11:03:14
988
原创 vue---进行post和get请求
vue—进行post和get请求get请求：this.axios.get("/user?" + "ID=" + 12345) .then(res =>) { console.log(res); }) .catch(err =>) { console.log(err); this.$message({ message: "服务器错误" }); }); thi...
2020-04-09 16:12:08
536
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人