- 博客(48)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 input 每输入一次都会失去焦点需要再次点击才能输入
input 每输入一次都会失去焦点需要再次点击才能输入1.情况描述，就是一个input框输入之后就会自动失去焦点，我需要再次点击获取焦点之后才可以进行下一次输入，并且还是只能输入一次就立马又失去焦点，当然这个input框是循环出来的，具体代码如下： <div class="input-area" v-for="item in inviteeInfoList" :key="item.phone" >
2021-08-17 10:05:16
4134
1
原创 ＜img＞ 的 title 和 alt 有什么区别
< img> 的 title 和 alt 有什么区别通常当⿏标滑动到元素上的时候显示alt 是 < img> 的特有属性，是图⽚内容的等价描述，⽤于图⽚⽆法加载时显示、读屏器阅读图⽚。可提图⽚⾼可访问性，除了纯装饰图⽚外都必须设置有意义的值，搜索引擎会 重点分析。...
2020-12-09 15:17:53
207
原创 前端需要注意哪些SEO
前端需要注意哪些SEO合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减⼩， title值强调重点即可，重要关键词出现不要超过2次，⽽且要靠前，不同⻚⾯ title 要有所不 同； description把⻚⾯内容⾼度概括，⻓度合适，不可过分堆砌关键词，不同⻚⾯ description 有所不同； keywords 列举出重要关键词即可语义化的 HTML 代码，符合W3C规范：语义化代码让搜索引擎容易理解⽹⻚重要内容 HTML 代码放在最前：搜索引擎抓取
2020-12-09 15:15:43
198
原创 HTTP状态码及其含义
HTTP状态码及其含义1XX ：信息状态码100 Continue 继续，⼀般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息2XX ：成功状态码200 OK 正常返回信息201 Created 请求成功并且服务器创建了新的资源202 Accepted服务器已接受请求，但尚未处理3XX ：重定向301 Moved Permanently 请求的⽹⻚已永久移动到新位置。302 Found 临时性重定向。3
2020-12-09 15:04:11
111
原创 switch的用法
switch的用法1、项目中遇到需要同时一个数据的多个状态进行判断，使用 if 会导致代码重复量过大，这里使用switch来代替 if 语句。2、这是一个根据月份来判断该月有多少天的例子，使用代码如下：switch (mouth) { case 1: case 3: case 5: case 7: case 8: case 10: case 12:
2020-12-09 10:25:21
523
原创 vue使用v-for遍历本地图片不显示
vue使用v-for遍历本地图片不显示问题1、项目中本地有一组图片需要循环遍历展示，在使用v-for遍历之后发现无法展示图片，解决方法如下。2、首先，正常的图片路径如下，但是想要展示不能按正常的来。需要遍历的数据正常情况如下。 // 重点代办任务数据 toDoListDate: [ { id: 1, name: '即将响应超时', number: 20, imgSrc: '../common/img/group1.webp' }, { id: 2, na
2020-12-09 10:16:05
4492
3
原创 vue实现移动端H5页面截图
vue实现移动端H5页面截图1、vue使用html2canvas实现移动端H5页面截图并下载。2、html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。3、首先需要安装html2canvas：npm install html2canvas4、然后在对应的vue组件script标签里引入：<scr
2020-12-09 09:58:26
2700
4
原创 vue通过在线图片地址实现图片下载
vue通过在线图片地址实现图片下载1、定义对应的方法。 downloadIamge(imgsrc, name) { //下载图片地址和图片名 var image = new Image() // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anonymous') image.onload = function () { var canvas = document.cr
2020-12-09 09:46:35
1740
原创 js实现倒计时功能
js实现倒计时功能（天时分秒）1、定义对应的方法 getCountDown() { let that = this //调用的时候传入需要的结束时间（时间戳，毫秒级） let endTime = that.data.itemData.startTime var t1 = setInterval(function() { let nowTime = new Date(
2020-12-07 11:16:05
727
原创 js实现部分文本替换成*号
js实现部分文本替换成*号1、实现部分文本替换成*号2、定义一个方法。 /* 部分隐藏处理 ** str 需要处理的字符串 ** frontLen 保留的前几位 ** endLen 保留的后几位 ** cha 替换的字符串 */ plusXing(str, frontLen, endLen, cha) { let len = str.length - frontLen - endLen; let xing
2020-12-07 11:04:00
4442
1
原创 微信小程序实现锚点跳转
微信小程序实现锚点跳转1、先上效果图，看看是不是你想要的。2、主要用到的微信小程序的scroll-view 组件实现该效果。核心主要是使用scroll-into-view属性跳转对应的标签页和标签内容区域和bindscroll事件监听标签内容区域距离页面顶部的距离来判断顶部的标签应该处于哪个标签。3、wxml代码：<!-- start 标签区域 --><view class="text" style="height:{{height}}px " > <!--
2020-11-20 10:41:32
1959
1
原创 微信小程序使用movable-view实现拖动效果
微信小程序使用movable-view实现拖动效果1、movable-view组件，正如他的名字一样，是可以移动的容器，但是这个容器必须要放在movable-area中才能移动。因此实际上是这两个组件配合使用才能实现移动的效果的。看以下示例代码：wxml代码：<movable-area class="area" scale-area> <movable-view class='view' direction="all" inertia out-of-bounds damping=
2020-11-16 10:48:42
1400
原创 微信小程序使用scroll-view实现视图滚动
微信小程序使用scroll-view实现视图滚动1、设置横向滚动给scroll-view添加scroll-x="true"属性。给scroll-view添加white-space:nowrap;样式。给scroll-view中的子元素设置为display:inline-block;。示例代码如下：wxml代码：<scroll-view class='scroll-x-view' scroll-x='true'> <view class='scroll-view-ite
2020-11-16 10:35:15
1645
原创 微信小程序电话号码input框的正则校验
微信小程序电话号码input框的正则校验1、wxml <!-- start 联系电话 --> <view class="mobile"> <sapn class="title">联系电话</sapn><input value="{{registration.mobile}}" class="mobile-weui-input" type="number" bindblur="mobileInput" maxleng
2020-11-13 14:04:48
4350
原创 微信小程序input只允许输入数字
微信小程序input只允许输入数字1、wxml <!-- start 联系电话 --> <view class="mobile"> <sapn class="title">联系电话</sapn><input value="{{registration.mobile}}" class="mobile-weui-input" type="number" bindblur="mobileInput" maxlength=
2020-11-13 13:57:25
4943
2
原创 微信小程序input禁止输入特殊符号
微信小程序input禁止输入特殊符号1、wxml <!-- start 小孩人数 --> <view class="numOfChildren" wx:if="{{childrenAgeShow}}"> <sapn class="title">小孩人数</sapn> <input value="{{numOfChildrenREsult}}" bindblur="numOfChildrenInput" clas
2020-11-13 13:47:58
2506
2
原创 微信小程序input禁止输入特殊表情符号与空格
微信小程序禁止输入特殊表情符号与空格1、wxml <!-- start 小孩年龄 --> <view class="childrenAge" wx:if="{{childrenAgeShow}}"> <sapn class="title">小孩年龄</sapn> <input value="{{childrenAge}}" class="childrenAge-weui-input" bindblur="chil
2020-11-13 13:44:07
2038
原创 微信小程序实现标签栏横向滚动
微信小程序实现标签栏横向滚动1、效果如下2、wxml <!-- start 秒杀时间 --> <view class="seckillTime"> <!-- 秒杀时间 --> <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%"> <view class="seckillTimeDeta
2020-11-13 10:45:12
630
原创 element Select 选择器多选时获取对应的code和name
2、elemennt Select 选择器多选时获取对应的code和name2.1、在页面中使用el-select，此处是多选。道理都一样<el-select @change="cityChooseData" size="small" v-model="cityLimitData" multiple
2020-11-12 14:39:38
2167
1
原创 微信小程序如何接入百度统计并且自定义事件分析
微信小程序如何接入百度统计并且自定义事件分析1、首先官网查看接入的手册https://mtj.baidu.com/static/userguide/book/chapter1/tguide.html2、找到微信统计3、按照步骤接入4、下载微信小程序统计SDK，把解压缩得到的mtj-wx-sdk.js和mtj-wx-sdk.config.js拷贝到小程序项目的utils文件夹中。5、编辑 mtj-wx-sdk.config.js，填写 appKey 字段:6、编辑小程序项目的 app.j
2020-10-23 18:17:19
2590
原创 H5页面如何调用weixin-js-sdk
1.安装 weixin-js-sdk。npm install weixin-js-sdk2.在使用页面引入，在对应的script标签引入。3.然后根据自己的需求在方法里面或者生命周期内进行调用，这里是调用微信的页面跳转功能，从h5页面跳转到一个微信小程序页面。...
2020-10-22 22:48:04
2159
原创 图片点击放大缩小功能实现
图片点击放大缩小功能-基于vue1.图片标签要点：class="img"@click="handleChangeImg($event)" <img class="img" @click="handleChangeImg($event)" src=" https://img.yzcdn.cn/vant/leaf.jpg" alt="">2.添加方法在methods里面添加该方法，点击图片的时候会触发。本质其实就
2020-10-14 18:28:27
1222
原创 往对象里面添加自己想要的字段以及数组内容添加
1.往对象里面添加字段HouseList[i]['name'] = houseNameHouseList[i] 是一个对象，可以换成自己想要的对像就行 ，name是自己想要添加的字段的名字，自定义的，houseName是自己添加的对应字段的内容，也是自定义的。2.数组添加内容 this.actions.push(HouseList[i])this.actions是一个数组，可以换成自己想要的数组，HouseList[i]是自己添加的数组内容，可以换成自己想要的内容。...
2020-10-14 18:14:13
2778
原创 使用vant进行rem移动端屏幕适配
使用vant进行rem移动端屏幕适配下载所需工具npm i postcss-pxtorem -Dnpm i amfe-flexible2.修改根目录下的postcss.config.js 文件（如果没有这个文件，可以手动添加一份）3.修改根目录下的postcss.config.js 文件module.exports = { plugins: { 'autoprefixer': {}, 'postcss-pxtorem': { rootValue: 37.5
2020-08-03 16:12:05
735
原创 vetur配置
vetur配置设置-》扩展-》在settings.json中编辑{ // tab 大小为2个空格 "editor.tabSize": 2, // 编辑器换行 "editor.wordWrap": "off", // 保存时格式化 "editor.formatOnSave": true, // 开启 vscode 文件路径导航 "breadcrumbs.enabled": true, // prettier 设置语句末尾不加分号 "prettier
2020-07-30 10:10:03
8422
原创 Vuex的使用
1.Vuex概述Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享使用Vuex管理数据的好处：A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护B.能够高效的实现组件之间的数据共享，提高开发效率C.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新2.使用Vuex完成计数器案例打开刚刚创建的vuex项目，找到src目录中的App.vue组件，将代码重新编写如下：<template> <div>
2020-07-04 16:15:01
117
原创 Vetur自定义格式化代码
Vetur自定义格式化代码1.在src根目录创建prettirerrc文件2.在prettirerrc文件里写如下代码{ "semi": false, "singleQuote": true}即在格式化时不会加分号，同时双引号变单引号。
2020-07-03 20:22:17
3553
1
原创 React中怎么给input添加键盘事件。
React 中如何给 input 添加键盘事件。1.当前有一个组件，为了实现输入完成后点 enter键 与点击 提交按钮 达成同样的提交效果。import React, { Component } from 'react'import './ToDoIpnut.css'export default class ToDoIpnut extends Component { constructor(props) { super(props) this.s
2020-06-23 17:59:46
3206
原创 React中怎么通过id删除对应的数组元素。
React 中怎么通过 id 删除对应的数组元素1.此处有两个组件，父组件 App，子组件 ToDoList，通过子组件 ToDoList 中传过来的 id 删除组件 App 中的数组元素。1.1 父组件 App 有一个命名为 ToDoList 的数组，代码如下： this.state = { ToDoList:[ { id:1, title:'吃饭', completed:true
2020-06-23 17:21:52
4154
原创 React中怎么通过id更改对应的数组元素。
React 中怎么通过 id 更改对应的数组元素。1.此处有两个组件，父组件App，子组件ToDoList，通过子组件ToDoList中传过来的id更改父组件App中的数组元素内容。1.1 父组件App有一个命名为ToDoList的数组，代码如下： this.state = { ToDoList:[ { id:1, title:'吃饭', completed:true },
2020-06-23 17:02:05
2026
原创 React 中 map() 方法的使用，以及 key 值的绑定。
React中 map() 方法的使用，以及 key 值的绑定。1.这里以一个循环显示一个数组ToDoList的例子来展示。import React, { Component } from 'react'export default class App extends Component { constructor(props) { super(props) this.state = { ToDoList:[1,2] } } render(
2020-06-22 11:52:08
20514
1
原创 无法将 “node” 识别为 cmdlet, 函数，脚本文件或可运行程序名称。此问题的解决方法。
无法将 “node” 识别为 cmdlet, 函数，脚本文件或可运行程序名称。此问题的解决方法。1. 执行命令报错失败原因：Node安装目录写入环境变量失败解决方法：将Node安装目录添加到环境变量中2. 解决步骤，打开系统属性。3. 按步骤找到path4. 电击新建，将Node安装目录添加到环境变量中。然后点确定即可。...
2020-06-12 19:45:42
8303
1
原创 Node环境安装失败解决办法，错误代号2502、2503。
Node环境安装失败解决办法，错误代号2502、2503。1.失败原因.系统帐户权限不足。2.解决方法2.1 以管理员身份运行powershell命令行工具2.2 输入运行安装包命令 msiexec /package + node安装包位置，如下。2.3 回车，根据提示继续安装即可。...
2020-06-12 19:26:01
631
原创 如何在vue组件中添加全局样式及公共样式。
如何在vue组件中添加全局样式及公共样式。1.添加公共样式，在assets文件夹下面添加css文件夹，创建global.css文件,添加全局样式。2.在main.js中导入global.css，即import "./assets/css/global.css"使得全局样式生效。3.这样所有的vue组件都有了这个公共样式。...
2020-06-10 20:12:36
2986
原创 后台连接数据库失败，报1045的解决方法。
后台连接数据库失败，报1045的解决方法。1.打开phpstudy,开启数据库。2.启动后台代码，连接数据库。此时报错1045。3.找到配置文件 my.ini, 将其打开，可用记事本打开。这里推荐一个搜索软件，Everything,超好用，搜索超快。这里直接搜索my.ini。4.打开后，在 mysqld下面添加下面一行代码skip-grant-tables，并保存退出。5.然后在phpstudy里面重启数据库，然后再次运行后台代码，后台程序就可以成功连接数据库。...
2020-06-10 19:38:45
2798
2
转载 Git-如何在码云上关联本地仓库
Git-如何在码云上关联本地仓库1.已有项目初始化#进入到项目的路径cd project_name#创建本地仓库git init#将项目加载到本地仓库git add .#将项目加载到暂存区git commit -m "项目部署到远程仓库"2.创建码云远程仓库，获得ssh链接，将本地仓库链接到远程仓库。#复制上一步的ssh链接git remote add origin [email protected]:zhaowenyi/vue_learn.git#查看本地仓库和远程仓库关联g
2020-06-10 19:16:14
534
原创 vue-cli3 取消 eslint 校验代码
vue-cli3 取消 eslint 校验代码1.打开项目文件夹，找到里面的.eslintrc.js2.打开.eslintrc.js，里面有一句"@vue/prettier"，将其注释或者删掉即可。
2020-06-10 19:04:03
1228
原创 nodemon运行 提示错误：无法加载文件 C:\Users\gxf\AppData\Roaming\npm\nodemon.ps1，因为在此系统上禁止运行脚本。
nodemon运行 提示错误：无法加载文件 C:\Users\gxf\AppData\Roaming\npm\nodemon.ps1，因为在此系统上禁止运行脚本。1.解决方法：管理员身份打开powerShell2.输入set-ExecutionPolicy RemoteSigned3.选择Y 或者A ，就可以解决问题...
2020-06-10 17:34:52
427
原创 如何使用vue-table-with-tree-grid树形表格组件
如何使用vue-table-with-tree-grid树形表格组件1.假如遇到了一个需要搭建一个树形结构的表格页面，这时候vue-table-with-tree-grid便可以派上用场。示例如下。2.如果你是使用vue ui搭建的项目，使用时操作如下; 2.1: 在vue 控制台中点击依赖->安装依赖->运行依赖->输入vue-table-with-tree-gird->点击安装 2.2:打开main.js，导入vue-table-with-tree-grid
2020-06-10 15:57:09
4799
3
原创 input输入框添加键盘事件
input输入框添加键盘事件1.普通input输入框添加键盘事件，keyup/keydown,假设打算按下enter键。<el-input placeholder="请输入内容" @keyup.enter.native="methodsName"></el-input>除了那几个特殊键，其余的可以将enter换成对应键盘码即可。2.element-ui中input输入框添加键盘事件。<el-input placeholder="请输入内容"
2020-06-10 10:00:13
4036
前端面试资料第一部分基础篇
2020-12-09
基于vue+vant实现一个移动端的时间选择器？
2020-08-17
TA创建的收藏夹 TA关注的收藏夹
TA关注的人