前端
左眼皮一直跳
所爱隔山海,山海不可平,海有舟可渡,山有路可行, 此爱翻山海,山海皆可平
展开
-
input 每输入一次都会失去焦点需要再次点击才能输入
input 每输入一次都会失去焦点需要再次点击才能输入1.情况描述,就是一个input框输入之后就会自动失去焦点,我需要再次点击获取焦点之后才可以进行下一次输入,并且还是只能输入一次就立马又失去焦点,当然这个input框是循环出来的,具体代码如下: <div class="input-area" v-for="item in inviteeInfoList" :key="item.phone" >原创 2021-08-17 10:05:16 · 4150 阅读 · 1 评论 -
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 · 524 阅读 · 0 评论 -
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 · 4529 阅读 · 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 · 2709 阅读 · 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 · 1748 阅读 · 0 评论 -
往对象里面添加自己想要的字段以及数组内容添加
1.往对象里面添加字段HouseList[i]['name'] = houseNameHouseList[i] 是一个对象,可以换成自己想要的对像就行 ,name是自己想要添加的字段的名字,自定义的,houseName是自己添加的对应字段的内容,也是自定义的。2.数组添加内容 this.actions.push(HouseList[i])this.actions是一个数组,可以换成自己想要的数组,HouseList[i]是自己添加的数组内容,可以换成自己想要的内容。...原创 2020-10-14 18:14:13 · 2791 阅读 · 0 评论 -
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 · 20588 阅读 · 1 评论 -
如何在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 · 2992 阅读 · 0 评论 -
vue-cli3 取消 eslint 校验代码
vue-cli3 取消 eslint 校验代码1.打开项目文件夹,找到里面的.eslintrc.js2.打开.eslintrc.js,里面有一句"@vue/prettier",将其注释或者删掉即可。原创 2020-06-10 19:04:03 · 1234 阅读 · 0 评论 -
如何使用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 · 4807 阅读 · 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 · 4051 阅读 · 0 评论 -
vue移动端头部和底部不动,中间自由滑动的设置
vue移动端头部header和底部footer不动,中间main自由滑动的设置<template> <div id="app"> <div class="header"></div> <div class="main"></div> <div class="footer"></div> </div></template> style中原创 2020-06-06 15:07:39 · 4904 阅读 · 2 评论 -
vue中返回上一页的方法
vue中返回上一页的方法在methods里添加方法,名字自定义,这里命名为back。 methods: { back () { window.history.back() } } 然后在需要的时候触发该事件即可。原创 2020-06-06 15:06:18 · 1563 阅读 · 0 评论 -
vue组件跳转并传参数
vue组件跳转并传参数假设组件A跳转到组件B时将组件A的参数imgsListsUrl传到组件B里使用,假设下面是A组件//利用$router.push进行跳转 this.$router.push({ //path后面跟跳转的路由地址 path: '/detils', //name后面跟跳转的路由名字(必须有亲测,不使用命名路由会传参失败) name: 'detils', params: {原创 2020-06-06 15:01:38 · 1135 阅读 · 1 评论 -
vue子组件调用
将多个vue小组件显示在一个大的vue组件内首先在大组件内导入小组件import Header from '../components/Header'import Footer from '../components/Footer' 然后注册export default { components: { Header: Header, Footer: Footer } } 最后再大组件的template里插入<template> <div原创 2020-06-06 14:57:11 · 211 阅读 · 0 评论 -
element-ui中message弹框提示的使用
element-ui中message弹框提示的使用按需导入的element-ui中的messageimport { Message } from 'element-ui'进行全局挂载:方便直接使用 this.$message进行弹窗提示Vue.prototype.$message = Message原创 2020-06-06 14:55:51 · 4613 阅读 · 0 评论 -
vue中axios的使用
导入axios以发起ajax请求打开main.jsimport axios from 'axios' 设置请求的根路径axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' 挂载axios,方便直接使用 this.$http 直接发起ajax请求Vue.prototype.$http = axios...原创 2020-06-06 14:53:43 · 140 阅读 · 1 评论 -
element-ui中使用第三方字体
element-ui中使用第三方字体 将素材fonts文件夹到assets中,在入口文件main.js中导入import './assets/fonts/iconfont.css' 然后直接在 需要使用的地方直接用,如下:<el-input prefix-icon="iconfont icon-3702mima"></el-input>...原创 2020-06-06 14:51:44 · 3527 阅读 · 0 评论 -
vue设置全局路由导航守卫
全局路由导航守卫 首先在 Login.vue 组件中,在登录事件触发时,保存token// 1. 将登录成功之后的 token,保存到客户端的 sessionStorage 中// 1.1 项目中出了登录之外的其他API接口,必须在登录之后才能访问// 1.2 token 只应在当前网站打开期间生效,所以将 token 保存在 sessionStorage 中 window.sessionStorage.setItem('token', res.data.token)//原创 2020-06-06 14:46:11 · 442 阅读 · 0 评论 -
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 · 4465 阅读 · 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 · 1964 阅读 · 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 · 1408 阅读 · 0 评论 -
微信小程序使用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 · 1651 阅读 · 0 评论 -
微信小程序电话号码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 · 4361 阅读 · 0 评论 -
微信小程序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 · 4956 阅读 · 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 · 2514 阅读 · 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 · 2053 阅读 · 0 评论 -
微信小程序实现标签栏横向滚动
微信小程序实现标签栏横向滚动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 · 634 阅读 · 0 评论 -
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 · 2182 阅读 · 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 · 2598 阅读 · 0 评论 -
H5页面如何调用weixin-js-sdk
1.安装 weixin-js-sdk。npm install weixin-js-sdk2.在使用页面引入,在对应的script标签引入。3.然后根据自己的需求在方法里面或者生命周期内进行调用,这里是调用微信的页面跳转功能,从h5页面跳转到一个微信小程序页面。...原创 2020-10-22 22:48:04 · 2163 阅读 · 0 评论 -
图片点击放大缩小功能实现
图片点击放大缩小功能-基于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 · 1238 阅读 · 0 评论 -
使用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 · 737 阅读 · 0 评论 -
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 · 8429 阅读 · 0 评论 -
Vuex的使用
1.Vuex概述Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享使用Vuex管理数据的好处:A.能够在vuex中集中管理共享的数据,便于开发和后期进行维护B.能够高效的实现组件之间的数据共享,提高开发效率C.存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新2.使用Vuex完成计数器案例打开刚刚创建的vuex项目,找到src目录中的App.vue组件,将代码重新编写如下:<template> <div>原创 2020-07-04 16:15:01 · 120 阅读 · 0 评论 -
Vetur自定义格式化代码
Vetur自定义格式化代码1.在src根目录创建prettirerrc文件2.在prettirerrc文件里写如下代码{ "semi": false, "singleQuote": true}即在格式化时不会加分号,同时双引号变单引号。原创 2020-07-03 20:22:17 · 3561 阅读 · 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 · 3210 阅读 · 0 评论 -
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 · 4164 阅读 · 0 评论 -
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 · 2029 阅读 · 0 评论 -
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 · 728 阅读 · 0 评论