![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端实践
文章平均质量分 55
前端学狗
这个作者很懒,什么都没留下…
展开
-
npm上传自己的包,更新自己发布的包
大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。前提:本文涉及的命令都是在要发布的包的根目录下执行的,在编辑器的终端或者cmd终端执行效果都是一样的。问题一:上传自己的包到npm1、注册npm账号,并且完成邮箱验证。已有的用户可以跳过这一步,点击npm进行注册2、进行包信息的初始化,输入npm init,根据提示输入对应的内容,此时,目录下会出现一个package.json文..原创 2022-05-23 16:54:02 · 2137 阅读 · 1 评论 -
谷歌浏览器调试打包后的Vue代码(谷歌浏览器调试,Chome调试js代码找出元素绑定的click事件)
开发时经常遇到本地无法复现但测试环境硬是有问题的bug。这个时候如果能够通过谷歌浏览器的调试快速定位到问题就好了原创 2022-05-20 17:47:09 · 3156 阅读 · 0 评论 -
ElementUI日期组件el-date-picker设置不能跨年/跨月/跨周
大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。直接上代码 <el-date-picker v-model="groupSearchTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-form原创 2021-12-21 18:17:44 · 4814 阅读 · 3 评论 -
Vue项目,通过数组下标更改数组的值不生效,页面没有重新渲染
大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。问题背景:今天在开发中遇到了一个需要,在列表里要通过按钮的点击控制手机号码列是显示正常的号码还是显示星号******。页面大致原型:id 手机号码 操作 1 13400003333 显示手机号(按钮) 2 *********** 显示手机号(按钮) 首先想到的实现方式就是给表格的每条数据增原创 2022-03-29 11:04:16 · 7013 阅读 · 0 评论 -
使用canvas生成水印watermark,有详细注释,简单易懂
大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。生成水印的js文件:// const watermark = {}// 定义设置水印的方法,const watermarkFun = () => { // 如果水印元素已经存在就先移走,重新生成, id要是全局独一无二的 const id = '3.14159261111' if (document.getEle..原创 2022-03-22 17:33:25 · 5132 阅读 · 1 评论 -
[Vue warn]: Error in render: “TypeError: data.reduce is not a function“报错详解
大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。一、问题定位:打开开发者工具,点开错误的那个小三角,便能看到详细信息,定位到错误发生在哪个文件的哪一行。我的项目使用Element-UI组件进行开发,clDetailList是用于给el-table的data属性赋值的。clDetailList按照预期得是Array类型的,问题就出在push函数执行完之后返回的是数组的长度.原创 2021-10-29 15:14:41 · 5084 阅读 · 0 评论 -
Vue开发工具dev-tools的安装与使用
为了避免要去官网下载源代码,进行编译打包,我将已经编译好可以直接使用的文件上传了,按照下面的步骤可以节省自己下载源代码,进行编译打包的时间。步骤一:下载我已经编译打包好的文件https://github.com/Redxym/dev-tools步骤二:解压文件,进入chrome目录步骤三:点击谷歌浏览器右上角的三个点-》更多工具-》扩展程序-》点击加载已解压的扩展程序,选择步骤二的chrome目录即可。至此,已经成功添加插件了,可以更方便开发Vue项目了...原创 2021-08-11 10:57:42 · 3993 阅读 · 0 评论 -
一文看懂JavaScript中的严格相等===、非严格相等、加法+等涉及的类型转换
大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到过相同的疑惑,希望本文对你有帮助。写文背景:最近在看《你不知道的JavaScript(中卷)》,其中第一部分的第4章谈到了强制类型转换。作者写得很好,只是这知识它不入脑子啊,我看完就忘了作者讲了些啥,讲了太多的toNumber(),toString(),我全没记住!读完之后,脑袋里只剩下大大的疑惑,连x < y这种比较大小的都不会比较了。为了解决这个迷惑,打开了我下载回来原创 2021-07-06 16:43:57 · 277 阅读 · 0 评论 -
Windows 7系统安装IE11 提示在安装前需要更新
大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。❤️欢迎素质三连[点赞 + 收藏 + 评论]我是小梅,有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知,一起沟通、学习成长呀。...原创 2021-06-08 11:47:14 · 10645 阅读 · 0 评论 -
CSS实现水平垂直居中的6种方式
大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。在开发中经常需要实现的一个页面效果是:元素的垂直居中。在此记录一下,经常适用的几种方法前提:元素之前的布局关系如下,需要实现class为son该元素的垂直居中<style>.son { width: 200px; height: 200px; background-color: p原创 2021-05-11 14:54:32 · 36758 阅读 · 2 评论 -
flex:1在IE与谷歌浏览器中效果不一样:在IE中文字被后面的的元素遮挡,变垂直,没有正常显示
大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。遇到的问题:今天在适用flex布局时,遇到了flex:1;在谷歌和IE浏览器中显示不一样的问题。谷歌浏览器的效果与预期相符合。预期效果:IE浏览器的效果图:完整的页面代码:<!DOCTYPE html><html lang="en"><head> <meta cha原创 2021-04-20 17:38:38 · 1048 阅读 · 0 评论 -
Element-UI中el-dialog使用遇到的坑:打开弹框再点击浏览器的上一个页面的按钮,弹框的遮罩层没有关闭
大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。重现步骤如下:打开使用el-dialog编写的弹框点击浏览器的回退按钮现象:弹框的遮罩层没有关闭解决办法:根据官网文档可知,在弹框中添加如下代码即可解决:modal-append-to-body = "false"原因分析:官方文档的说明入下图Element-ui中弹框的遮罩层由下面这行代码实现,具体的CSS在此就不写了。原创 2021-04-12 17:09:04 · 8263 阅读 · 11 评论 -
实现iframe中子页面的弹框遮罩层遮盖父页面等整个页面
大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。在维护一些项目时,时常会遇到使用iframe元素来实现页面的嵌套。子页面有弹框时,遮盖层往往只能遮住子页面所在的iframe窗口,不能遮住整个页面。想要实现最简单的子页面的弹框遮住整个页面只需要下面几个步骤:把遮罩层写在父页面中子页面点击按钮时,弹框显示,并且触发父页面的方法,将遮罩层显示点击子页面中的关闭弹框按钮,弹框关闭,并且调.原创 2021-03-02 15:34:23 · 6356 阅读 · 3 评论 -
if函数判定不正确?JS中返回false的情况
大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。遇到的问题:开发中想根据test对象是否有type属性来进行不同的逻辑的操作,type=0时,原本是想要输出is true的,可实际结果却是输出的is false。百思不得其解,当时真的是没想到这一层,用if进行判断,会对type进行转换。’’、0、undefined、null、NaN等五种值都会被转换为false,因此实际输出与设想的结果.原创 2021-02-22 11:12:26 · 1972 阅读 · 0 评论 -
JS实现深拷贝(包括日期类型的和正则类型)
JS如何实现深拷贝背景知识:基本数据类型:undefined、null、number、boolean、string、symbol引用数据类型:object(数组、函数等都属于引用数据类型)常用的实现深拷贝的方法:1、使用JSON.stringifyconst arr = [ { a: new Date(), aa: new RegExp('\\w+'), aaa: function() { console.log('aaa function') } }, { b: 'qwe' }, {原创 2021-02-18 17:26:35 · 4720 阅读 · 1 评论 -
el-tree文本内容过长显示不出来,给el-tree加滚动条
使用elment-ui中的el-tree组件,让el-tree有滚动条首先在网上搜索了,说使用以下代码就能生效,然而,我使用不生效,打开开发者工具发现这些样式根本没有加上去.el-tree { .el-tree-node { display: inline-block; min-width: 100%; }}于是乎,分析想要出现滚动条的原理,也就是想要在el-tree直接子级元素下面的el-tree-node添加属性,因此改用下面的写法,成功解决问题。.el-tree > :n原创 2021-02-05 18:01:09 · 2315 阅读 · 0 评论 -
VUE项目开发,使用开发者工具查看源文件
如何在浏览器看到.vue文件的源文件问题描述:今天在开发的时候,想要通过断点的方式看一下代码究竟是咋运行的,打开Chrome浏览器,F12,在开发者工具中选择Soruces,Ctrl + P进行文件查找,找到之后,发现明显不是源文件,调试困难。解决办法:在vue.config.js目录中添加如下内容:configureWebpack: { devtool: 'source-map' },可以看到,已经是能够方便调试的源文件了。更多详情可以查看阮一峰老师对 devtool: 's原创 2021-01-25 17:55:00 · 4445 阅读 · 0 评论 -
Vue中@click事件无效?@click.native中.native的含义和使用
记录@click绑定事件的一个坑问题描述:今天开发的时候,给组件绑定了@click事件,但是事件却没有执行。代码如下:<template><div> <span>父组件页面</span> <search @click="onSubmit"></search></div></template><script>methods: { onSubmit() { alert('sh原创 2021-01-25 17:29:01 · 9045 阅读 · 1 评论