- 博客(39)
- 收藏
- 关注
RSS订阅原创 打开dialog会把table选中项清除，已解决
打开dialog会把table选中项清除表格部分代码：<el-table ref="multipleTable" :data=" tableList.slice((currentPage - 1) * pageSize, currentPage * pageSize) " tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChang
2020-12-09 19:19:34
1600
5
原创 监听路由，同一个页面切换路由展示不同状态
业务后台开发中，比如商品管理模块中，新增商品和商品详情页面的内容基本一致，这种情况下，我们就不需要多写一个页面啦。写一个页面，通过路由来控制显示的内容watch: { //监听商品列表数据 tableList: { handler(a) { this.tableList = a; this.timeStamp = new Date(); console.log("监听监听======", a); },
2020-12-08 16:39:56
583
转载 element-ui销毁子组件的方法
原文地址：https://blog.youkuaiyun.com/lisongyue123/article/details/104059406方法一：在子组件中加v-if=“dialogCreateVisible”，添加完信息关闭弹出框之后，再次添加信息时弹出框中各组件的内容为空。<el-dialog title="添加员工信息" :visible.sync="dialogCreateVisible"> <Add ref="addInformation" v-if="dialog
2020-12-08 16:17:34
1348
原创 Vue + ElementUI表格状态区分，row-class-name属性
通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。1.在表格组件上绑定row-class-name属性 <el-table ref="multipleTable" :data="tableList" tooltip-effect="dark" style="width: 100%" @selec
2020-12-07 11:48:16
4500
1
转载 ElementUi rules表单验证
ElementUi rules表单验证可以在pattern中书写正则，并且配合elementUI进行表单验证。 pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式。rules: { name:[{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 2, max: 5, message: ...
2020-12-01 15:45:36
654
原创 swiper动态渲染情况下，loop属性无效
1.一个页面引用多个swiper插件，出现混乱问题； 解决方法： 1.实例化swiper时加上其父元素加以区分 2.Swiper加上ID或Class区分，要保留默认的类名swiper-container 如下：<script> var swiper = new Swiper('.course_banner2 .swiper-container', { pagination: '.course_banner2 .swi..
2020-11-06 17:21:11
4073
原创 本地引入vue、element-ui引入fonts，icon图标不生效问题
按官方文档，提供了cdn引入和npm安装的方式，但是呢，在网络很差，或没网的的情况下就加载不出来，直接报错啦我们在本地下载需要的版本文件，直接引入js和css，但是icon图标不显示修改css中字体图标的路径，发现icon图标还是无法加载网上资料中的各种办法都不奏效呢，这时候你需要npm安装一下element-ui，然后从他的目录里面把fonts复制出来替换你当前的，就OK啦...
2020-07-14 12:05:18
5331
3
转载 CSS实现div内文字显示两行，超出两行部分省略号显示
在搭建前台文章列表中，需要实现div内文字显示两行，超出的则省略号显示。找了很多，都貌似只能一行显示。最后在百度知道找到答案。答案转自百度知道，题主的自答。用的是-webkit-私有属性。text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertic
2020-07-13 19:02:41
2141
原创 _utils_three__WEBPACK_IMPORTED_MODULE_0__.default.PerspectiveCamera is not a constructor
Vue项目中引入three.js下载three.js文件，在文件尾部加上导出THREE，如图文件在src目录下，在需要的组件中引入，如图启动项目报错_utils_three__WEBPACK_IMPORTED_MODULE_0__.default.PerspectiveCamera is not a constructor原因：webpack会编译src目录下的文件，导...
2020-03-06 16:43:50
7659
原创 element-ui 点击行如何获取table的行索引
文档中有一个tableRowClassName方法，可以获取到当前行的indextableRowClassName({ row, rowIndex }) { //把每一行的索引放进row row.index = rowIndex; }, onRowClick(row) { //点击行获取索引 this.uploadImage...
2020-03-03 13:55:54
265
转载 Moment.js常见用法总结
Moment.js常见用法总结Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。 日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。接下来，我将按照这些操作对Moment.js中的Doc进行整理分类，方便学习和日后的查阅。获取时间 Start of Time mome...
2019-12-30 11:11:20
486
转载 无法加载文件D:\XXX\XX.ps1，因为在此系统中禁止直行脚本
参考引用https://www.cnblogs.com/shanyou/archive/2011/09/03/2165371.html问题说明执行PowerShell脚本时提示无法加载文件 D:\Workshop\Powershell\Sprinkler\src\Scripts\SPRINKLE.ps1，因为在此系统-中禁止执行脚本。+ D:\XXX\XX.ps1 <...
2019-12-19 18:11:09
481
转载 vue自定义指令，比onerror更优雅的方式实现当图片加载失败时使用默认图，提供三种方法
首先，来看下效果图（演示一下图片正常加载与加载失败时的效果）在线体验地址：https://hxkj.vip/demo/vueImgOnerror/一、常规方法解决我们都知道，img标签支持onerror事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。例如这样使用：<img src="image...
2019-12-18 16:43:27
180
原创 饿了么组件el-image使用本地图片
使用require引入本地文件<el-image fit="contain" :src="require('@/assets/imgs/logo.png')"></el-image>
2019-12-18 16:40:57
2525
原创 element-ui之el-image-viewer(图片查看器)及单击，双击事件冲突解决
有时候我们的需求和组件提供的不一致，就需要自己封装组件，有的功能实现起来很麻烦，产品要做一个双击图片打开预览的功能，原生js实现有点费劲。我们看一下Image的源码，发现大图预览是一个小组件image-viewer，打开看看它的props，如下props: { urlList: { type: Array, default: () => [] }...
2019-12-17 19:33:20
8912
转载 Vue-cli 3.0 构建项目（一）构建初始项目
Vue-cli 3.0 构建项目（一）构建初始项目原创凝弧发布于2018-06-30 22:29:42阅读数 6433收藏展开1. 环境配置 2. 初始化项目 默认配置 自定义配置 自定义细节配置 官方文档https://cli.vuejs.org/1. 环境配置安装 Vue-cli3.0脚手架工具 终端输入运行npm insta...
2019-12-13 10:51:30
147
转载 页面中使用多个element-ui upload上传组件时绑定对应元素
elemet-ui里提供的upload文件上传组件,功能很强大,能满足单独使用的需求,但是有时候会存在多次复用上传组件的需求,如下图的样子,这时候就出现了问题,页面上有多个上传组件时,要怎么操作呢?之前在网上找到了一位大神的方法,修改源码,在回调函数中多加一个参数,但是这种方法在多人开发时不太适用,因为这要求所有人都要修改源码,这里附上大神的方法,大家可以酌情使用首先在你下个包里面找到...
2019-12-12 20:15:30
1680
原创 vue使用nprogress页面加载进度条
1.下载 nprogress npm install --save nprogress2.main.js引入 nprogressimport App from './App'import VueRouter from 'vue-router'import router from './router' //你的路由文件//引入nprogressimport NProgress...
2019-12-11 18:46:21
289
原创 vue项目中使用window的onresize事件
vue项目中使用vue-echars绘制图表时，需要实时根据窗口大小调整图表的大小，我使用的auto-resize属性，没有作用，没有找出错误在哪里，使用window.onresize事件，必须销毁才不会报错哦，代码如下：<template> <chart ref="chart1" :options="orgOptions"></chart>&l...
2019-12-11 18:36:44
6229
原创 vue项目使用echars的两种方法
vue项目使用echars的两种方法一、直接引入echarts1.使用命令行安装echarsnpminstallecharts--save2.main.js中引入import myCharts from './comm/js/myCharts.js'Vue.use(myCharts)3.Echarts.vue中<template> &l...
2019-12-11 18:21:05
303
原创 Vue报错TypeError: Cannot read property '_wrapper' of undefined
vue项目调试一直提示如下错误最后才发现是注册的clik事件并没有全部放在methods中
2019-10-28 17:29:52
2130
原创 微信公众号获取openid报错41008，可能是请求参数有误？
微信公众号授权登录获取openid时请求成功，返回错误码41008，提示“missing code”；我们在获取openid时需要将微信重定向地址返回的code参数拿到，传给openid请求，vue使用axios请求数据，默认post请求参数是json格式，但后台需要formData格式的，这时候后台拿不到我们的参数，故报‘missing code’。解决方案：1.引用node中的qs...
2019-10-22 19:41:20
17192
原创 vue3项目中如何做rem适配
配置flexible1.在命令行中运行如下命令安装npm install lib-flexible --save-dev2.在main.js中引入lib-flexibleimport"lib-flexible"; //rem适配3.在项目根目录的 index.html 中添加如下 meta添加 meta 标签<metaname="viewport"...
2019-10-21 15:18:21
876
原创 Vue-cli3.0如何将打包出来的文件放到统一目录下
vue.config.js文件中export defaults = {outputDir:'dist', 所有文件打包到dist目录下，包括index.htmlassetsDir:'weixin', //所有静态资源放到指定目录微信下}结果如图：...
2019-10-21 14:49:58
1281
1
转载 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
本文转自：https://segmentfault.com/a/1190000012925872前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。----------超长文+多图预警，需要花费不少时间。----------如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我，一定是我写的还不够...
2019-08-01 12:54:29
119
原创 事件冒泡和事件捕获的顺序
给同一个元素注册点击事件，测试事件冒泡和事件捕获的顺序，代码如下：<div class='container'> <div class='wapper'> <div class='context'> 点击你试试 </div> </div></div><script>...
2019-08-01 12:42:22
865
转载 实现多个标签页之间通信的几种方法
效果图.gif示例地址prologue之前在网上看到一个面试题：如何实现浏览器中多个标签页之间的通信。我目前想到的方法有三种：使用websocket协议、通过localstorage、以及使用html5浏览器的新特性SharedWorker。 websocket这里先不介绍了,全双工(full-duplex)通信自然可以实现多个标签页之间的通信，相信网上通过websocke...
2019-07-22 15:03:11
632
转载 JavaScript 高性能数组去重
一、测试模版数组去重是一个老生常谈的问题，网上流传着有各种各样的解法为了测试这些解法的性能，我写了一个测试模版，用来计算数组去重的耗时// distinct.jslet arr1 = Array.from(new Array(100000), (x, index)=>{ return index})let arr2 = Array.from(new Arr...
2019-07-19 10:39:54
141
原创 Vue组件的传值问题
组件传值-父传子父结构<template> 父组件 <com-a :message="msg"></com-a></template><script> export default { data () { return { msg...
2019-07-16 15:17:04
121
原创 Vue的原理
Vue的原理input和change事件的区别input触发条件：输入框字符发生变化 change触发条件：输入框失去焦点 v-model的原理 本质上是语法糖 属性绑定和事件绑定 默认事件是input 可以使用lazy修饰符转化change事件 <input type="text" v-model='uname'><input typ...
2019-07-15 21:28:08
130
转载 浏览器渲染原理
随着技术的革新，我们有了越来越多的方案去提升页面性能，因此在2019年进行了本篇文章的更新。更新内容包括：1、网络通信部分的细节化，包括：网络时延、tcp简述HTTP个协议间差别及如何对应优化HTTP2将对原有优化方案存在那些影响等2、性能优化方案的增加与说明，包括：资源预取通用优化方案针对页面渲染规则的优化方案（js、css）如何借助chrome进行性能分析与优化附录3...
2019-07-15 21:25:37
199
转载 cookie、 sessionStorage 、localStorage之间的区别和使用
1.cookie:存储在用户本地终端上的数据。有时也用cookies，指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站。2.HTML5 提供了两种在客户端存储数据的新方法：(http://www.w3school.com.cn/html5/html_5_webstorage.asp)...两者都是仅...
2019-06-19 19:19:06
113
转载 Token ，Cookie和Session的区别
Token ，Cookie和Session的区别在做接口测试时，经常会碰到请求参数为token的类型，但是可能大部分测试人员对token，cookie，session的区别还是一知半解。Cookiecookie 是一个非常具体的东西，指的就是浏览器里面能永久存储的一种数据，仅仅是浏览器实现的一种数据存储功能。cookie由服务器生成，发送给浏览器，浏览器把cookie以kv形...
2019-06-19 19:14:09
140
原创 nodejs和jsonp跨域问题
jsonp跨域问题核心思想:浏览器虽然有同源策略，但是 src 和 href 两个属性却可以跨域访问。 可以利用这一“漏洞”来请求另一个网站的页面。$.post、 $.get 、$.ajax都能发送跨域请求，但是，$.post和$.get是要依靠cors方式的，只有$.ajax能使用jsonp方式 。$ajax凡是发送跨域请求，核心有一下3点：1.请求类型必须设置为：‘get’...
2019-05-16 20:21:04
261
转载 汇总 onchange onpropertychange 和 oninput 事件的区别
1、onchange 事件与 onpropertychange 事件的区别： onchange 事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发。 onpropertychange 事件却是实时触发，即每增加或删除一个字符就会触发，通过 js 改变也会触发该事件，但是该事件 IE 专有。2、oninput 事件与 onpropertychange 事件的区别： oninput 事件是 I...
2018-05-31 18:30:41
135
转载 jQuery对象与DOM对象之间的转换方法
jQuery对象是包装DOM对象后产生的，但是两者却不能混用，DOM对象才能使用DOM方法，jQuery对象才能使用jQuery方法，以下介绍两者转换的方法：jQuery对象转成DOM对象：（1）jQuery对象实际上是一个数据对象，可以通过[index]方法获得相应的DOM对象。如：var $v=$("#v"); //得到jQuery对象var v=$("v")[0];//转换成DOM对象（2）...
2018-05-30 20:43:27
376
转载 JS原型、原型链深入理解
原型是JavaScript中一个比较难理解的概念，原型相关的属性也比较多，对象有”prototype”属性，函数对象有”prototype”属性，原型对象有”constructor”属性。一、初识原型在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个”[[Prototype]]”内部属性，这个属性所对应的就是该对象的原型。“[[Pr...
2018-05-30 20:25:16
138
转载 前端必会的js知识总结整理
前端必会的js知识总结整理 1、晨曦。2、js是一门什么样的语言及特点？ js是一种基于对象和事件驱动的并具有相对安全性的客户端脚本语言。也是一种广泛用于web客户端开发的脚本语言，常用来给html网页添加动态功能，如响应用户的各种操作。 主要的目的是为了解决服务器端语言遗留的速度问题，为客户提供更流畅的浏览效果。 （详细拓展：http://www.360...
2018-05-30 20:20:44
240
原创 windows命令行窗口中执行npm命令就闪退
环境：Windows8现象：在windows命令行下执行npm命令时会出现打开node.exe的程序，然后node.exe打开的命令行窗口就会闪退.问题分析：这是由于node.exe有管理员权限制所造成的.解决方法：1.找到node.exe程序所在目录:2.在node.exe程序图标上右键鼠标选择属性，然后在属性窗口中点击兼容性，在将以管理员运行此程序前面的勾选取消掉，点击应用后确认后，重新打开命...
2018-04-27 12:49:23
13806
9
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人