![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
漠河愁
这个作者很懒,什么都没留下…
展开
-
vue h5项目预览pdf文件+电子签名
vue h5项目预览pdf文件+电子签名。1、vue安装pdfh5。签字板canvas.js。原创 2024-05-13 15:15:45 · 406 阅读 · 1 评论 -
JavaScript 正则表达式详解
正则表达式属于字符串范畴,由两部分组成:原义字符、元字符。1、原义字符:书写在正则表达式中表示为字面意思的字符。2、元字符:书写在正则表达式中表示为特定含义的字符。基本元字符、范围元字符、重复元字符、转义字符、贪婪匹配符、后向引用。1、. 匹配任意字符。2、* 匹配前一个字符出现的次数为0次或多次。3、? 匹配前一个字符出现的次数为0次或1次。4、+ 匹配前一个字符出现的次数为1次或多次。5、^ 匹配以后面的字符开头。6、$ 匹配以前面的字符结尾。7、| 匹配|两端出现的字符中的任意一个,原创 2022-10-29 14:59:41 · 329 阅读 · 0 评论 -
vue项目数字滚动效果(支持整数、浮点数、金额带千分号)
数字翻牌器原创 2022-07-06 09:04:49 · 1083 阅读 · 0 评论 -
原生js省市区三级联动
原生三级联动原创 2021-04-12 10:19:17 · 559 阅读 · 0 评论 -
vue项目防止按钮重复点击调取接口
场景1.保存提交按钮不小心点击了多次。2.由于服务器请求时间过长等原因点击事件没有及时响应又点击了一次,造成数据的重复提交和保存,数据的异常。3.resize、scroll,输入框内容校验等频繁操作。原因由于axios提交数据为异步提交,点击提交按钮是通过xmlhttprequest向后端发送异步请求,发送请求后后端返回数据需要时间处理,如果第一次点击的请求尚未完成,又接二连三地提交了几次,同时后面发送的请求都被后台处理了,这种情况如果是读取数据不会有太大影响,但是涉及到数据提交保存或者提交之后多原创 2022-04-12 10:57:51 · 1569 阅读 · 1 评论 -
vue-router的实现原理
官网文档,…, 下面这种路由表的写法比较优雅,我把路由单独写在一个文件routes.js .router/routes.js 文件代码const routes = [ { path: '/', redirect: '/recommend' }, { path: '/recommend', component: () => import('../components/recommend/view.vue') }, { path: '/sin转载 2021-12-21 09:43:02 · 110 阅读 · 0 评论 -
uniapp根据经纬度逆解析详细位置
uniapp根据经纬度逆解析详细位置原创 2021-12-03 10:36:01 · 661 阅读 · 0 评论 -
uniapp上传图片转base64
pathToBase64(path).then(base64 => { console.log('类型',typeof(base64.slice(23, base64.length))) this.formImgData.base64Str = base64.slice(23, base64.length); let base64Str = base64.slice(23, base64.length)})js文件/* 处理文件路径 */function getLocalFile原创 2021-11-20 14:52:27 · 1179 阅读 · 0 评论 -
uniapp点击图片可以多张预览
照片多张预览 全选 多选 删除 长按删除<template> <view> <view class="module-images-box"> <image @click="naviga" v-if="type == 1" class="images-upload-box" src="../../static/images/agrarian/upload_photograph.png" mode=""></image>原创 2021-11-16 14:19:08 · 1404 阅读 · 0 评论 -
vue滑块验证登录
滑块样式<template> <div> <el-form :model="form" ref="form" :rules="codeRules"> <el-form-item prop="phone"> <el-input type="tel" :maxlength="11" v-model.trim="form.phone" placeholder="请输入手机号"></el-input>原创 2020-11-05 20:47:00 · 719 阅读 · 0 评论 -
虚拟DOM技术(Virtual DOM,VDOM)
VDOM的第一个目的:完成在Vue下实现DOM操作的功能。VDOM的第二个目的:实现比原生的DOM操作还要快的页面渲染机制。VDOM的本质:利用js对象模拟DOM节点。一、利用render函数代替组件中的template:1、render函数的功能:在创建组件是实现DOM结构的生产,和template完全一致。2、格式:Vue.component(‘my-com’,{render:function(createElement){return createElement(‘div’);}/原创 2020-08-25 11:07:28 · 728 阅读 · 0 评论 -
vue项目配置生产环境和发布环境的接口地址的跨域问题
config>index.js文件夹'use strict'// Template version: 1.3.1// see http://vuejs-templates.github.io/webpack for documentation.const path = require('path');module.exports = {//生产环境 dev: { // Paths assetsSubDirectory: 'static', assetsPub转载 2020-08-24 17:07:08 · 688 阅读 · 0 评论 -
uni-APP项目H5页面scroll-view在苹果浏览器里显示问题
因为苹果浏览器会忽略掉css中的层级关系,所以导致在苹果浏览器上显示会有问题.topArea { position: fixed; overflow: hidden; background: #FFFFFF; z-index: 999; height: 160upx; box-shadow: 0 0 10px #cdcdcd; }原创 2020-08-08 19:13:15 · 1537 阅读 · 0 评论 -
小程序选择城市,以及实时获取当前城市位置
点击的时候可选择,代码:其中样式是自己写的一个css,你们可以自己写样式,用到了阿里图标index.wxml<!--定位和搜索--> <view class="indexTop display-flex align-center"> <view class="display-flex align-center"> <text class="textColor city" catchtap="switchcity">{{ci.转载 2020-08-07 09:50:43 · 628 阅读 · 0 评论 -
原生H5页面适配问题
首页meta先加上<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-原创 2020-07-30 17:37:06 · 381 阅读 · 0 评论 -
JavaScript 正则表达式讲解
正则表达式属于字符串范畴,由两部分组成:原义字符、元字符。1、原义字符:书写在正则表达式中表示为字面意思的字符。2、元字符:书写在正则表达式中表示为特定含义的字符。基本元字符、范围元字符、重复元字符、转义字符、贪婪匹配符、后向引用。一、基本原字符1、**.匹配任意字符2、*匹配前一个字符出现的次数为0次或多次3、?**匹配前一个字符出现的次数为0次或1次4、+匹配亲一个字符出现的次数为1次或多次5、^匹配以后面的字符开头6、$匹配以前面的字符结尾7、| 匹配|两端出现的字符中的任意一个原创 2020-07-13 14:35:50 · 263 阅读 · 0 评论 -
小程序中本地图片转换成base64地址
我在解决这个转换格式问题时大部分的都是选择手机照片时的转换方法,其中有一种将本地图片转成base64地址的方法,在网站里选择本地图片地址,就可以直接转换base64地址了网站地址http://tool.chinaz.com/tools/imgtobase转载于:https://www.cnblogs.com/Guhongying/p/10801809.html...转载 2020-07-11 10:16:19 · 1314 阅读 · 0 评论 -
uni-app项目中H5跨域小程序不跨域怎么解决方法(兼容H5、小程序)
解决这个问题的时候还是用到了之前的文章中提到的“条件编译”,当然这只是其中一部分,下面我们来看一下这种问题的解决方法,①H5端配置首先在项目中找到一个名为“manifest.json”的文件,找到该文件下的H5配置将端口配置好然后在左侧菜单栏中再找到“源码视图”将以下代码配置好,至此我们的H5端就配置完成了,需要配置的还有我们的小程序端因为我的项目是兼容H5跟小程序的所以调取接口时还需要分开写也就是“条件编译”②小程序端配置首先我们需要配置一下安全域名打开微信公众平台登录在左侧菜单中原创 2020-07-08 09:07:13 · 3852 阅读 · 0 评论 -
uni-APP中的三级联动(省市区)
先看一下效果图因为我在做这个的时候数据不需要更改所以就用了一个js文件下面可以看一下代码template部分<view class="input" type="text" placeholder="请选择地区"> <picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" :value="multiIndex" @change="pickerCha原创 2020-07-06 10:15:25 · 15760 阅读 · 12 评论 -
开发uni-app项目(兼容H5跟小程序)是需要的配置
编辑器(HBulider X)一、首先新建项目(uni-app项目)二、找到项目里的manifest.json文件三、因为运行的时候需要运行到微信开发者工具里查看,所以需要配置一下,配置时需要输入自己的AppID在此我们配置的最后一项 “位置端口” 无需打勾,勾选之后运行到微信开发者工时会报错可能有些新手不知道Appid 在哪儿,APPID去哪儿找呢,打开微信公众平台,登录之后在左侧菜单栏找到 开发 | 开发设置 选项到此我们编辑器中的配置就完成了下面配置我们微信开发者工具原创 2020-07-06 09:48:16 · 2260 阅读 · 0 评论 -
uni-app跨端兼容开发(条件编译)
我的项目是一套基于uni-app开发的兼容H5跟微信小程序的项目所以在开发时难免有不一样的地方,这就需要区分平台进行开发了因为我也是第一次遇到这种问题,所以一开始也不知道该用什么方法解决,在uni-app的官方文档中有这么一篇文档 条件编译 | 跨端兼容 文档连接跨端兼容uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足。但每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。因为在开发时我用的编辑器是H原创 2020-07-03 08:55:28 · 1016 阅读 · 0 评论 -
uni-app编译成微信小程序点真机预览报错 desc of scope.userLocation is empty
用HbuilderX去运行微信小程序,真机调试时报错desc of scope.userLocation is empty可以通过如下方法解决:1.去掉勾选位置接口,再去运行即可2. 保持勾选的话,添加位置接口描述即可本文链接:https://blog.csdn.net/weixin_36270908/article/details/106815386...转载 2020-07-02 17:07:01 · 941 阅读 · 1 评论 -
vue中省市区三级联动
对于vue中这个功能我也是第一次做,差了好多文档其中最简单且实用的就是下边这种方法使用详情:https://www.awesomes.cn/repo/jcc/v-distpicker原创 2020-06-19 10:31:27 · 364 阅读 · 0 评论 -
vue-cli 3.0 脚手架
vue-cli 3.0的使用1、vue-cli 2.0和vue-cli 3.0不能在一台设备上同时存在:卸载vue-cli 2.0:npm uninstall vue-cli -g2、安装vue-cli 3.0:@vue/clinpm install @vue/cli -g3、查看vue-cli的版本:vue - -versionvue -V4、创建项目:vue create 项目名称vue-cli2.0与vue-cli 3.0的对比...原创 2020-06-03 15:57:03 · 146 阅读 · 0 评论 -
文件上传 Java 后台
一、Java后台使用的上传功能:SmartUpload:上传文件的大小限制在约为40MB左右。FileUpload:上传文件的大小可以比较大。二、原生表单的上传功能:1、准备工作:(1)准备一个没有头像的图片。(2)在后台需要设置一个放置图片的路径。2、表单的特点:(1)表单的method必须为post。(2)表单的enctype属性必须为multiplart/form-data。表单的enctype属性的默认值为:application/x-www-form-urlencoded(原创 2020-06-03 15:54:49 · 243 阅读 · 0 评论 -
CSS3实现水波纹扩散效果
效果代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-casle=1.0,user-scalable=no" /> <title>圆点扩散</title> <style type="text/css"> body原创 2020-07-06 09:49:52 · 2221 阅读 · 0 评论 -
css3实现点击扩散效果
效果图效果介绍:点击省份所在的六边形时,以当前点击的六边形为中心,边框高亮显示并且实现向外扩散的效果思路解析:点击之后它六个边儿,然后每一个边儿的话,它往上走,一点点的这个描边儿,然后是周围的图片是没有高亮的,这样的话,直接用这个图片儿去实现就可以了,比如说把整张这个高亮的这个图就是以这个为中心,然后往右边儿扩散的,这个图儿整个扣下来,当你点击某一个的时候。你把他这个背景图直接替换成你这个高亮显示的这个描边儿图,然后他最好加一个过渡效果,那你这个时候可以用CSS给他加一个从中间往外扩散的一个,比如原创 2020-07-06 09:49:36 · 1892 阅读 · 0 评论 -
Element-UI中的Form 表单组件
v-model:用来为表单元素双向绑定数据。disabled:表单元素禁用。readOnly:表单元素只读。hidden:表单元素隐藏。一、输入框:1、clearable:输入框是否具备可清除功能。2、show-password:输入框是否表现为密码输入。3、prefix-icon:设置输入框左侧的图标。suffix-icon:设置输入框右侧的图标。4、type=“textar...原创 2020-05-04 17:45:37 · 5585 阅读 · 0 评论 -
Vue.js的PC端响应式框架 — Element UI基础组件
安装Element UI框架:1、在项目中执行下列代码:npm install element-ui --save-dev2、在src\main.js文件中引入:import ElementUI from ‘element-ui’;import ‘element-ui/lib/theme-chalk/index.css’;Vue.use(ElementUI);(一)Basic 基础组件...原创 2020-05-04 17:43:03 · 1658 阅读 · 0 评论 -
vuex状态管理与百度图表
vuex:状态管理。vuex由几部分组成: state mutations getters actions modules 状态量 操作数据源 计算属性 分发mutations vuex模块化 数据源 1、项目中有哪些地方会用到vuex 若只有一个地方用到vuex(用户登录信息),则无需使用modules。 若有多个...原创 2020-05-04 14:22:20 · 135 阅读 · 0 评论 -
uni-app的基础知识
uni-app的基础知识uni-appVue.js框架下的移动端(H5移动端页面、App手机应用程序、小程序)开发框架。开发工具:HbuilderX。一、利用HbuilderX创建uni-app项目:“文件”菜单 | 新建 | 项目 | 默认模板1、[pages]:存放页面的目录,里面的每一个文件夹就是一个页面。2、[static]:存放静态文件的目录,里面可以放置图片、字体等。...原创 2020-04-23 21:36:56 · 2229 阅读 · 0 评论 -
(二)认识webpack 4
webpack的功能:打包工具(将浏览器无法识别的文件类型转换为浏览器可以识别的文件类型)。一、安装webpack 4:()npm install webpack --save-dev()npm install webpack-cli --save-devnpm install webpack-dev-server --save-devwebpack的配置文件:webpack.confi...原创 2020-04-23 21:02:23 · 171 阅读 · 0 评论 -
Vue工程化的准备工作
一、前端开发的模式:1、原生开发模式:主语言是HTML,核心语言JS是无法自行执行的。2、工程化开发模式(全栈开发):Node.js的诞生打破了原有的开发模式。最底层是Node.js:使得JS可以自行执行。核心框架:Vue.js、AngularJS、React.js。二、常用的DOS命令:DOS(磁盘操作系统)1、如何打开DOS操作界面:开始 | cmd。2、DOS的提示符:>...原创 2020-04-23 17:41:45 · 91 阅读 · 0 评论 -
微信小程序(触控事件)
事件简介①本质:事件是视图层到逻辑层的通讯方式②作用:事件可以将用户的行为反馈到逻辑层进行处理③应用:事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数④参数:事件对象可以携带额外信息,如 id, dataset, touches在编写代码中,使用频率高的事件方式是事件绑定事件绑定的写法同组件的属性,以 key、value 的形式①key 以bind或ca...原创 2019-11-29 10:14:57 · 524 阅读 · 0 评论 -
微信小程序(组件跳转、规范、层级准备)&&(路由及组件跳页传参)
首先简单回顾下路由API跳转:wx.navigateTowx.navigateBackwx.redirectTowx.switchTabwx.reLaunch除了使用路由API进行页面跳转外,小程序宿主环境也提供了导航组件navigator进行页面跳转。hover样式对比其他小程序列表项会发现,目前为止,点击跳页时,点击栏没有背景样式,类似于css的hover事件,小程序如果想给元...原创 2019-11-29 10:14:01 · 552 阅读 · 0 评论 -
微信小程序(页面栈和API跳转)
页面栈和API跳转数据操作限制针对上节所讲的程序注册器与页面注册器,简单做下补充,即页面数据data的操作限制(1)直接修改Page实例的this.data而不调用this.setData是无法改变页面的状态的,还会造成数据不一致。(2)由于setData是需要两个线程的一些通信消耗,为了提高性能,每次设置的数据不应超过1024KB;(3)不要把data中任意一项的value设为unde...原创 2019-11-29 10:08:59 · 244 阅读 · 0 评论 -
微信小程序(页面生命周期)
注册页面:对于小程序中的每个页面,在页面对应的 page.js 文件中调用 Page 方法注册页面示例作用:指定页面的初始数据、生命周期回调、事件处理函数等。页面的用户行为:小程序宿主环境提供了四个和页面相关的用户行为回调页面构造/注册器Page()宿主环境提供了 Page() 构造器用来注册小程序页面Page()在页面脚本page.js中调用,Page() 的调用方式如下所示P...原创 2019-11-27 18:53:17 · 6788 阅读 · 0 评论 -
微信小程序(小程序模型与宿主环境、跳页之tabBar导航跳转)
小程序模型与宿主环境小程序可以调用宿主环境/微信提供的微信客户端的能力,这就使得小程序比普通网页拥有更多的能力(扫一扫、摇一摇)。小程序的运行环境分成渲染层和逻辑层, WXML 模板文件和 WXSS 样式文件工作在渲染层,JS 逻辑文件工作在逻辑层。渲染案例渲染“Hello World”案例WXML模板使用 view 标签,其子节点用 {{ }} 的语法绑定一个 msg 的变量JS ...原创 2019-11-25 15:05:07 · 230 阅读 · 0 评论 -
AJAX之模板引擎&&字符串模板x-template
AJAX之模板引擎&&字符串模板x-template在js里面,经常需要使用js往页面中插入html内容写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况。一般的写法都是使用+号以字符串的形式拼接,如果html很短还好说,但是遇到描述里面的这么大段,直接用字符串存储会很困难,因为不光要处理单引号,还需要很多「+」号把字符串一个个连接起...原创 2019-11-23 15:53:31 · 185 阅读 · 0 评论 -
微信小程序(适配小结、移动端1px与选择器权重)
微信小程序(适配小结、移动端1px与选择器权重)WXSS选择器权重与优先级WXSS优先级与CSS类似,权重如下图所示权重越高越优先。在优先级相同的情况下,后设置的样式优先级高于先设置的样式适配小结针对上节介绍的物理像素与逻辑像素相关概念,本节再来做个小结,简单做下回顾关键词:物理像素dp(1)物理像素(physical pixel)物理像素又被称为设备像素(device p...原创 2019-11-21 18:56:23 · 641 阅读 · 0 评论