Anabel Chen-CSDN博客

原创【Vue】3.屏幕自适应加滚动条

【代码】【Vue】3.屏幕自适应加滚动条。

2023-02-27 17:05:10 1064 1

原创【Vue】2.ElementUI中el-select多选情况下获取label和value

el-select选中只能获取到value的值，获取不到label的值，所以要循环匹配筛选获取label的值。

2023-02-27 16:19:39 2654

原创【Vue】1.ElementUI中el-switch开关切换改变值遇到的问题

这样遇到的问题是：切换开关，el-switch会立即改变值，不会根据传入的值改变，因为v-model是双向绑定的。需求：在切换开关的时候给个提示，确定切换开关就改变值，取消就不改变开关值。解决办法：把v-model换成:value。

2023-02-27 15:41:41 2882 1

前端本地mock数据，下载了Charles，遇到了一些问题，特别记录了一下下载地址提取码：gsvx注册码：用户名：xxmac 许可密钥：EDA00D575B46C70E5F下载后直接拖入应用程序中，打开软件，打开菜单栏上【帮助】，点【注册charles】,输入注册码即可，打开后如果遇到以下提示，如下图：打开终端，分别复制以下命令回车就可以解决，第一段命令回车后需要输入电脑密码；sudo chown -R root “/Applications/Charles.app/C...

2021-07-11 16:28:19 784

【React】1.React生命周期函数

一.React生命周期函数概述生命周期函数指在某一时刻组件会自动调用执行的函数，如下是React生命周期图解（1）Initialization对React组件来说，它会经历一些过程，Initialization指的是初始化过程，这个时候组件会初始化一些自己的数据，比如说props，state，在我们的组件里面在哪里做的初始化呢，constructor就是我们初始化的位置，在这个函数里面会接收props，定义state（2）Mounting接着呢，初始化以后一个组件要被渲染挂载到页面之

2020-08-12 17:15:29 792

原创【web前端】23.解决内部div的margin影响外部div的margin

有一个内部的div里面包含div..html<div id="container"> <div id="inner"></div></div>.css#container { width: 100px; height: 100px; background-color: red;}#inner {...

2020-04-08 13:17:45 4240 5

原创【Angular】7.Angular8 如何用angular cli工具创建工程

前提条件：在创建angular8项目之前，首先要先确认一下电脑有没有装node.js和npm包管理器。Node.jsAngular需要Node.js版本10.9.0或更高版本。（1）要检查你的版本，在终端或控制台窗口运行node -v（2）要获取Node.js，请转到nodejs.orgnpm包管理Angular，Angular CLI和Angular应用都依赖于npm...

2020-04-02 17:40:15 2702 2

原创【LeetCode】1313. Decompress Run-Length Encoded List（javascript版）

1313.Decompress Run-Length Encoded ListWe are given a list nums of integers representing a list compressed with run-length encoding.Consider each adjacent pair of elements [freq, val] = [nums[2*...

2020-03-25 17:12:41 299

原创【LeetCode】905. Sort Array By Parity (javascript版）

905.Sort Array By ParityGiven an array A of non-negative integers, return an array consistingof all the even elements of A, followed by all the odd elements of A.You may return any answer array ...

2020-03-25 17:04:06 163

原创【LeetCode】561. Array Partition 1（javascript版）

561.Array Partition 1Given an array of 2n integers, your task is to group these integers into n pairs of integer, say (a1, b1), (a2, b2), ..., (an, bn) which makes sum of min(ai, bi) for all i fr...

2020-03-25 16:13:10 220

原创【LeetCode】26. Remove Duplicates from Sorted Array（javascript版）

26.Remove Duplicates from Sorted ArrayGiven a sorted array nums, remove the duplicates in-place such that each element appear only once and return the new length.Do not allocate extra space for ...

2020-03-13 17:30:18 188

翻译【web前端】22.解决-webkit-overflow-scrolling:touch的bug

-webkit-overflow-scrolling:touch用来控制元素在移动设备上是否使用滚动回弹的效果，兼容Android和Ios的写法如下：overflow:auto;/* winphone8和android4+ */-webkit-overflow-scrolling: touch; /* ios5+ */取值auto：使用普通滚动，当手指从触摸屏上移开，滚动会立即停止...

2019-11-14 13:08:06 2840

原创【Vue】26.Vue中引入Echarts图表tab切换时遇到的坑

最近在做Echarts图表切换的时候遇到了一个坑，产品设计的需求是这样，两个tab，一个是疾病风险图表，一个是意外风险图表，tab切换时显示不同的图表，而且要根据不同角色的年龄动态的在图表上打个坐标点，页面里面用的是v-show，没有用v-if，当时是这样考虑的，页面初始化进来加载的数据就直接都渲染了，因为v-show不会隐藏dom结构，点击tab切换就行了，但实际证明是我的想法太天真，这样写就会...

2019-11-14 10:33:59 7574 3

原创【web前端】21.解决Android端垂直不居中的问题

对一个元素设置了line-height等于height垂直居中，但是在android浏览器上总会偏一点，这个问题可以使用flex布局，字体大小设置为偶数，如果字体大小一定要奇数的话，可以利用js判断当前是android机型还是ios机型。垂直可以flex布局： display:flex; align-items:center;/*垂直居中*/ justify-content: ...

2019-10-08 15:08:17 4017

翻译【杂谈】5 .git忽略 .idea文件

多人开发中，会出现明明.gitignore忽略文件里面，但是提交时仍然会出现.idea内文件变动的问题原因：.idea已经被git追踪，之后再加入到.gitignore后是没有作用的解决办法：清除.idea的git缓存git rm -f --cached .idea.gitignore中添加 .idea...

2019-08-16 10:09:53 267

原创【杂谈】4 .git跟踪不了新增文件

最近git遇到一个问题，我用的sourceTree，修改文件可以跟踪到文件，新增文件就检测不到了，自己也是很郁闷，于是就在网上搜了各种方法，试了都不行，最后没办法了就用git命令行git add <file>结果提示文件已经被忽略了，监测不到，看了一下自己的.gitignore文件，里面也没有被忽略的文件，于是就开始想，是不是有隐藏的忽略文件，工程目录里看不到，结果真的被我猜...

2019-08-16 09:59:07 5403

翻译【杂谈】3.Mac系统如何显示隐藏文件解决办法

苹果Mac OS操作系统下，隐藏文件默认为隐藏状态，隐藏文件是否显示有多种方式可以设置。打开终端，输入命令行显示Mac隐藏文件的命令：defaults write com.apple.finder AppleShowAllFiles -bool true隐藏Mac隐藏文件的命令：defaults write com.apple.finder AppleShowAllFiles ...

2019-08-16 09:41:10 464

翻译【Vue】25.Vue 三元判断绑定class

v-bind:class="index==searchIndex ? 'classOne' : 'classTwo'"

2019-07-16 10:51:33 10628

翻译【微信_小程序】4.小程序Android web-view内嵌网页字体加粗不显示的问题

最近做项目遇到一个问题，公司的小程序内部要嵌入H5页面，结果这个字体加粗在网页里面显示是正常的，在ios里面显示也是正常的，就是在Android上显示是不正常的，字体显示不加粗，网上搜了一圈，找到了答案。（1）字体加粗属性<style type="text/css"> .类名{ font-weight: 700;//加粗 font-w...

2019-07-16 10:35:54 2490

原创【web前端】20.手机端网页禁止长按图片保存图片

最近做项目遇到一个问题，就是img图片长按会从底部弹出来保存图片的弹框，因为页面上不需要这个功能，所以产品要求去掉，解决这个问题，有两种方法：1. 利用css img属性img {pointer-event:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;}2. 设置背景图片用div层的ba...

2019-07-15 11:10:22 7347

原创【Vue】24.遮罩层阻止默认滚动事件

在写移动端页面的时候，弹出遮罩层后，我们仍然可以滚动页面。vue中提供@touchmove.prevent.stop，@mousewheel.prevent方法可以完美解决这个问题。<div class="dialog" @touchmove.prevent.stop @mousewheel.prevent></div>如果不使用vue的话，可以给body添加ov...

2019-07-15 10:58:10 1362

原创【Vue】23.vue项目中子组件接收不到父组件传值的问题

项目背景：使用vue-cli3搭建的项目框架问题描述：父组件里面有一个轮播图，这个轮播图我封装了一下，封装成了一个组件引到了这个页面里面，我们产品的需求是，根据页面获取到的婚姻状态做判断，第二张图片的链接点进去显示不同的文章，意思就是根据婚姻状态给第二张图片赋不同的链接值，所以我需要传给这个轮播图组件一个婚姻状态，这个婚姻状态呢，又是从接口里面动态获取到的，这个轮播图呢，又是在页面加载的时候就...

2019-06-14 19:06:29 13550

翻译【web前端】19.手机分享网页链接的描述，标题，图片的控制

（1）微信微信中可以通过微信提供的jssdk进行配置，详细文档参考微信JS-SDK说明文档（2）QQ在手机qq中可以直接配置meta标签进行配置我们在qq聊天中有时候给朋友发一个链接，我们看到的是卡片类型，在meta标签里面设置，就可以自定义卡片的文字及图片信息，如下图所示，QQ获取分享信息的规则在QQ开放平台里面里面有具体说明：腾讯移动WEB开发平台，文档说可以通过js配置，但是...

2019-06-13 17:30:20 2157 1

翻译【web前端】18.web网页中实现点击下载功能

JS实现html页面点击下载文件有两种方式：（1）使用<a>标签来完成<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>（2）使用按钮进行监听 goDownload() { // 判断用户入口的平台类型 const cl...

2019-06-13 10:38:35 3660

翻译【web前端】17.实现点击跳转锚点部分(vue)

<div class="big-data-content-bottom"> <section class="content-bottom-one" id="one"> <p class="content-bottom-one-title">平台技术框架</p> <p c...

2019-06-13 10:26:34 2700

翻译【web前端】16.实现点击回到页面底部/顶部

2019-06-13 10:12:37 2637

原创【VUE微信_服务号】5.解决H5页面IOS下横向滚动条无法隐藏的问题

最近做项目需要实现一个横向滚动卡片的效果，因为项目是用vue搭建的，想着找一个vue的第三方插件，也没有合适的，于是仔细想了想，其实简单的css也能实现这个效果，而且效果也很好。大致实现这个功能的方法，就是隐藏横向滚动条，按照以往的做法添加伪类，如下代码::webkit-scrollbar { display: none;}这一种方式在微信Android上是没有问题的...

2019-05-08 17:44:47 1779

原创【微信_小程序】3.小程序IOS web-view内嵌二维码页面长按出现两个保存提示框

最近做项目遇到这样一个需求，实现一个长按保存二维码的功能，其实是个很简单的问题，说白了其实不需要我们程序员做什么的，这是微信自带的功能，但是呢，这里实现的时候确实有点问题，因为这里实现的时候是把二维码做到了H5页面里面，通过web-view嵌套到小程序里面，结果问题就出来了。后来在网上查了一下，找到了一个解决方案，这是因为网页有保存图片的功能，小程序也有保存图片的功能，安卓上是没有问题的，...

2019-05-07 16:45:19 1126

原创【Vue】22.vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)

一.beforeRouteEnter(to, from, next)beforeRouteEnter函数内部this是undefined，这是因为在执行路由钩子函数beforeRouteEnter时候，组件还没有创建出来；先执行beforeRouteEnter，再执行组件周期钩子函数beforeCreate。我们可以通过next获取组件实例对象，如：next((vm) => {});参数...

2019-04-29 15:28:10 3909

翻译【Vue】21.vue项目中ECharts图表双Y轴

安装ECharts图表插件npm install echarts --save实例效果：代码：<template> <div class="chart-swapper"> <div id="myChat"></div> </div></template><scri...

2019-04-29 14:35:10 3279 2

翻译【微信_小程序】2.微信小程序web-view内嵌公众号网页

需求：要做一个微信小程序，由于小程序里面图表实现有困难，需要h5实现(vue框架搭建的)嵌套到小程序里面，所以就涉及到相互通信的问题。一.web-view内嵌的h5页面添加代码1.安装js-sdknpm install weixin-js-sdk --save2.引入js import wx from 'weixin-js-sdk';3.跳转到小程序页面 ...

2019-04-28 10:56:19 3305

原创【Vue】20.vue项目中引入echarts图表遇到的问题

最近做一个公众号有需求是要添加一个图表，自己调查了一下，决定使用ECharts，在vue项目中引入ECharts，由于第一次做图表，还要跟UI设计图保持一致，也是遇到了好多样式问题，在这里做一下总结。效果图如下：ECharts官方DocsECharts官方ExampleECharts附录一按需引入ECharts图表和组件一.安装插件npm install echart...

2019-04-26 15:10:25 4926

翻译【Vue】19.vue中router-link的一些问题

一.router-link切换路由不存入history记录的方法在做tab切换子路由需求的时候，点击后退键，就会返回上一个子路由，不是很符合实际需求。可以在router-link后面加上关键词replace，就可以实现切换子路由，路径不存入history。点击后退按钮，会直接返回父路由的上一个页面。如果是编程式路由，可以吧$router.push()换成$router.replace()...

2019-04-26 11:26:41 778

翻译【web前端】15.input输入框的一些问题

一.input输入框怎么禁止粘贴<input type="text" value="" onpaste="return false;" /> 二.IOS上input只读模式下点击有反应的解决方法 <input class="authentication-id-input" type="text" v-model="authent...

2019-04-26 11:13:59 996

翻译【Vue】18.vue中使用Base64和md5

1.在项目根目录下安装npm install js-base64 --savenpm install js-md5 --save2.在项目文件中引入 import {Base64} from 'js-base64'; import md5 from 'js-md5';3.在项目中文件中引入Base64:// 编码Base64.encode('');Bas...

2019-03-04 14:01:10 420

原创【Vue】17.vue-router history模式下的微信分享遇到的坑

最近用vue-cli3做微信公众号，使用了hiatory模式，其中也是波折不断，自己也是郁闷了好几天才把问题解决掉。首先先安装微信js-sdknpm install weixin-js-sdk --save然后在哪个页面里面用到微信的js api就把包导入进去import wx from 'weixin-js-sdk'基本的配置都好了以后，我们就来说说微信分享过程中遇到的...

2019-03-04 13:44:38 2123

翻译【web前端】14.手机页面不允许缩放

手机页面不允许缩放要在meta标签里面添加user-scalable=no<meta content="width=device-width,user-scalable=no,initial-scale=1" name="viewport">

2019-01-27 20:20:43 1062

翻译【JavaScript】12.String字符串类型转换成Number数字类型

string字符串类型转换为number数字类型有5种方法Number()，parseInt()，parseFloat()，new Number()，*/1.第一个函数Number()，即强制类型函数Number()可以用于任何数据类型，而另外两个函数则专门用于把字符串转化成数值 console.log(Number(false)); // 0 cons...

2019-01-27 20:15:50 7829

原创【Vue】16.vue项目里引入百度统计

参考官网：百度统计开放平台百度统计最近往项目里面引入百度统计，也是在网上查了各种资料，把百度统计的官网api又好好的看了一下，顺着文档的步骤，一步一步走下来，其实还蛮简单的，首先先在百度统计注册一个账号，在管理页面填写好自己要监控的网站域名，网站的首页，填写完成以后，会自动生成一段代码，如下图所示，我这里已经填写过了，点击获取代码，就可以取到百度自动生成的代码。但是在vue单...

2019-01-27 19:00:04 4045 3

原创【Vue】15.vue-cli3项目配置webpack自动删除生产环境的console.log调试信息

我们都知道，项目在编译打包上生产环境的时候是不能有console.log()信息打印输出的，但是我们在开发环境有时候调试代码又需要打印输出一些信息，我们也不可能在编译上线的时候把代码里面的console.log()一个一个的全部删除掉，这个时候就需要我们在配置文件里面配置一下，生产环境编译的时候自动去掉console.log()。vue-cli2的时候是在build文件下面的webpack.p...

2019-01-26 21:38:27 11481 4