- 博客(69)
- 收藏
- 关注
RSS订阅
原创 Vue3.0 快速搭建和手把手搭建vue +Router+vuex项目
一、Vue 3需要将Vue CLI升级到最新版本，全局安装：cmd下npm install -g @vue/cli二、搭建方案一、模板快速构建,集成了router+vuex可直接开发1.安装模板vue create '项目名称'2.将模板vue更新到3.0，vuex、router更新到4xvue add vue-next方案二、运用官网教程Vite，一步步构建vue项目$ npm init vite-app <你的项目名称>$ c...
2020-10-22 15:41:22
3490
原创 vue-admin elementUI 开发踩坑收集（border混乱）
一、table 右边操作栏定位后笔记本上发生border消失、样式混乱、错行.table ::v-deep.el-table--medium th,.table ::v-deep.el-table--medium td { padding: 8px 0;}.table ::v-deep.el-table__fixed-right{ transform: translateX(1px);}原理：使用很多方案都处理不了这个问题，改小padding ，定位左边多了1像素。原则.
2021-03-19 17:10:31
567
1
原创 elementUi Cascader 级联选择器(省市区) 动态加载（懒加载）编辑时回显(默认值回显)问题
问题回顾：编辑页面有个城市联动器，懒加载形式获取数据。再编辑初始化时，城市默认值不见了选中时：编辑初始化时：查阅相关文档及百度 没有发现好的借鉴方案，领导在催着要，功夫不负有心人查阅到一篇相关问题的文章，思路描述很棒：https://zhuanlan.zhihu.com/p/269162598?utm_source=wechat_session1、初始化备选项的一级下拉选。2、遍历一级下拉选判断是否需要加载子类目。3、递归遍历下拉选。html：<el-cascader
2021-03-05 14:22:06
8225
14
原创 vue 页面第一次载入或者刷新会出现一两秒的空白[vue启动秒白屏解决方案]
之前做过好几个项目vue都是pc端或者移动端网页上的，网站第一次打开都会出现白屏闪才进入应用，当然本身浏览器默认白色我们并不会在意这些细节，最近做到一个项目关于套壳app，把咋的vue项目套用的webview里，每次打开应用都会白屏下，那酸爽。次日老板在群里公开点名批评...有问题找前端是各岗位一致的共识.... 认真观察了下白屏产生的原理：原来是因为第一次进入时只有...
2020-04-09 15:08:49
7131
7
原创 vue 关于那些所谓的按需加载
一、路由按需加载1.按需加载对比①.路由未按需加载前vebdor.js和app.js都异常大，超过vue理想大小，如下图：②.路由按需加载后体积明显控制在1MB内，如下图：路由按需加载后，会把原来的js，切分-分开成小的js文件，一但你需要访问该模块或者页面时才会加载对应的资源，一定程度上对首次访问起了很多的优化加速左右2.按需加载方法①：直接写入 { ...
2020-04-09 14:53:53
526
原创 公网环境（如何外网访问内网ip地址）
1. 搭建公网环境; a. 网址: https://natapp.cn/ b. 免费注册 c. 进入用户后台, 右侧菜单选择购买隧道; 选择免费（需要支付宝实名认证） d. 点击免费购买即可 (选择 WEB 类型) e. 等待生效;2. 下载 natapp.exe 在 natapp.exe 目录位置 创建 config.ini 文件...
2020-02-11 16:34:22
3344
原创 vue 滚动指定位置(高度)
滚动代码千万万，我只取一瓢...深受原生js影响的我以为直接scrollTop=指定高度就可以滚动let diff=1000;//这里是要滚动到的位置高度var container = _this.$el.querySelector('.chat-content');//需要滚动的目标container.scrollTop = diff;好了美滋滋，发完消息执行滚动事件...
2019-10-24 18:15:24
5917
原创 微信小程序 二级联动（多级联动）
这阵子公司突然需要开发小程序，于是乎恶补下，想必时间已过两年，小程序应该相当成熟了，未曾料到一个二级联动就各种模糊不清。官方给出案例，但是写的太乱，可读性差，还会写些多余的东西进去，容易误导我们这些小白...于是开启了百度之路，看到网友写的博客深感痛心，竟然有直接copy官案，大家都是拿来主义，多余的也copy...算了还是自己动手吧。上代码：html:<picker mode...
2019-10-16 11:56:20
6725
原创 微信小程序之保存图片之相册：saveImageToPhotosAlbum、downloadFile、授权问题
看过很多文档，解决方案都是高度的一致，但是代码贴上去就是不行....好吧，只能一步步解析代码看哪里出了问题。解决思路：1.wx.downloadFile下载图片2.wx.openSetting授权3.wx.saveImageToPhotosAlbum图片保存到本地问题点：1.wx.saveImageToPhotosAlbum的报错信息，真机跟调试机上会出现不一致....
2019-08-24 16:49:59
19642
8
原创 vue input 输入金额尾部接.00 与千位符
最近可爱的产品提了点要求，金额尾部需要.00 而且还要带千位符。html:<el-input v-model="form.projectAmount" type="txet" placeholder="请输入项目金额" @blur="projectAmounts" clearable :maxlength="32"></el-input>js:toT...
2019-05-07 17:32:56
5172
1
原创 HTML5 History 模式 去除# （vue路由去除#、常见配置、Tomcat配置）
前言：vue使用vue-router时，路径中会有#的字段，是应为打包完成之后，项目为单页面项目，所有的url都指向单个页面，#号之后的路径是指该页面的锚定位置，所以router中的路径是无法加载的。若想去除#，就需要使用router的history模式， 且在服务器端进行配置核心：const router = new VueRouter({ mode: 'histor...
2019-04-12 16:58:25
2489
原创 小程序 部分安卓机里输入框input被输入法遮挡问题
关于小程序输入法跟输入框官方文档有给出过解决办法 cursor-spacingcursor-spacing="0"时，输入框会浮在输入法上面，但是有一部分安卓机型会出现不兼容问题Orz....解决方案：实现理念：先去除键盘弹起上推页面adjust-position="{{false}}"，绑定输入时事件bindfocus="bindfocusDialog"，获取当前键盘的高度赋值给...
2019-03-04 17:21:29
3331
1
原创 关于bootstrap验证插件bootstrapValidator的使用已经自定义使用及提示
一、源码及API地址bootstrapvalidator源码：https://github.com/nghuuphuoc/bootstrapvalidator大部分案例在源码里都能找到二、引入库此插件式基于bootstrap去扩展的。<script type="text/javascript" src="js/modules/bootstrap/bootstra...
2018-11-27 17:50:04
2491
原创 Sublime Text3：搭配LiveReload实现保存后在（chrome，360，qq，火狐）等浏览器下自动刷新
配置步骤如下：1.在chrome浏览器（360，qq浏览器均可）中安装LiveReload插件。（如果打不开chrome网上商店的话，去网上下载一个谷歌助手）安装后可以看下浏览器右上角的LiveReload插件的图标，它中间的小方块是空心的，表示未在这个页面上启用热更新。2、添加完后在扩展程序页面，将LiveReload设置为【允许访问文件网址】3.由于sublime te...
2018-10-30 18:15:39
489
原创 微信小程序基于高德api地理/逆地理编码获取地址
1.先使用微信自带方法wx.getLocation去获取经纬度。wx.getLocation({ type: 'wgs84', //默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标 success: function (res) { // success var longi...
2018-10-24 16:06:59
6689
3
原创 使用nginx反向代理解决前端跨域问题
项目前后端分离后，前后端项目分开开发，尤其是单页面应用，前端代码会开启单独的服务器，若直接在前端项目中访问后端API，肯定会遇到因跨域不能访问的问题.于是我们用到了nginx俩解决这个问题。nginx配置：server { listen 80; # nginx访问端口 server_name...
2018-10-15 20:06:29
1216
2
原创 Nodejs搭建一个的本地静态文件服务器的方法
方法一:第一步：在Nodejs安装目录安装：npm install connect第二步：在Nodejs安装目录安装：npm install serve-static第三步：新建server.js (可以放在项目里去运行也可以放在Nodejs安装目录下运行)：var connect = require("connect");var serveStatic = req...
2018-10-09 14:50:00
1856
转载 让Sublime Text3支持Less
1、安装Sublime 插件 （1）安装LESS插件：因为Sublime不支持Less语法高亮，所以，先安装这个插件，方法： ctrl+shift+p>install Package>输入less按Enter （2）安装LESS2CSS插件：这个插件的作用是 当保存less文件的时候自动生成同名的css文件； 当保存less文件的时候提示编译错误信息；...
2018-10-08 17:38:50
138
原创 让低版本ie兼容h5，以及兼容h5 video播放器
最近做项目因为面向学校，所以兼容刻不容缓。什么css3啊用着都是提心吊胆，为了让内心平静下来，能不用css3的尽量全干掉，一些动画都做成gif....当然还有一些必须要h5，然后就 脑瓜疼.....1.首页引入html5shiv.min.js，这个可以让恶心的低版本ie去支持h5，解决ie9以下浏览器对html5新增标签的不识别。<!--[if lt IE 9]>&...
2018-09-18 17:48:15
2396
原创 仿【数字】无限上下滚动增加数值-计数器-仿直播人数统计
css:.sdvm_num{! font-size: 14px;color:red;display:inline-block;vertical-align:middle;margin-left:8px;}.sdvm_num i{width:70px;height:52px;display:inline-block;background:url(../images/number1.png) ...
2018-09-18 17:14:21
2678
转载 各种浏览器的Hack写法(chrome firefox ie等)
Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。然后将Hack放在浏览器特定的CSS文件中，让其符合条件的浏览器解析这些代码，就如前面所说的条件样式，我们将CSS Hack代码放入条件样式文件中，符合条件的浏览器就解析，不符合的将不解析，从面达到您所需要的页面渲...
2018-08-17 13:52:40
223
原创 vue v-for循环打印不出数组里的JSON 字符串 如：[{a:{'b':'1','c':'2'}}]
最近在开发vue项目中遇到一些处理数据的小问题，说大也不大说小也不小，反正一搞就是半天，后台问了半天就回了一句转化一下就行了，好吧踩坑吧....接下来百度一堆vue数组问题，没有找到一个类似的问题...硬着头皮找大牛资讯了一下，终于找到了解决方案：json.parse转化一下JSON.parse() 方法用于将一个 JSON 字符串转换为对象。把 {} 对象传化成数组 [{}]html:<r...
2018-05-25 14:43:47
4298
转载 Bootstrap之Form表单验证神器： BootstrapValidator
前言：做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证，搜到的结果大部分都是文中的主题：bootstrapvalidator。今天就来看看它如何使用吧。一、源码及API地址介绍它之前，还是给出它的源码以及API的地址吧。bootstrapvalidator源码：https://github.com/nghuuphuoc/bootst...
2018-05-16 00:21:16
3052
原创 vue之安装nodejs安装npm安装cpnm安装vue-cli脚手架
搭建vue开发环境。 选择对应版本，https://nodejs.org/en/download/ 安装过程：下一步 路径：（我的D:\Develop\nodejs）下一步就好安装好之后，对npm安装的全局模块所在路径以及缓存所在路径，进行环境配置。是因为以后在执行类似：npm install express [-g]（后面的可选参数-g，g代表global全局安装的意...
2018-05-11 22:50:34
14089
3
原创 将远程image图片转base64编码
最近在开发微信网页项目上遇到一个小问题，canvas生成海报需要用到一张图片，而这张图片刚好是别的域名。为此function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; ...
2018-05-04 17:03:38
4544
原创 如何让网页head里的title标题文字滚动起来
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf...
2018-04-08 16:05:18
6144
2
原创 关于a标签‘’禁止事件触发‘无效问题
最近在测试项目注册用户获取验证码的时候发现一个关于a标签的小bug目标：点击获取验证码，时间为60s，到0时提示重新获取。问题：重复点击时显示的时间会随点击次数而改变。js：function settime(obj) {if (countdown == 0) {$('#res_code_hit').removeAttr("disabled");$('#res_code_hit').text(...
2018-03-29 11:38:58
1652
原创 删除所有cookie或者清空所有cookie值
前面有转载过一篇关于设置获取删除cookie的文章，文章虽好但是还是有一点美中不足的，比如今天要讲的删除所以cookie；在实际开发删除所有cookie中昌子遇无论使用网上的各种删除办法就是没有办法删除cookie，本人的项目cookie是从请求接口传下来的cookie 上图本人在网上找了各种大神的清除办法，理论上都是没有问题的，方法确实都可以删除，只是在实际项目中缺少点东西 所以导致
2017-12-18 15:41:29
31107
转载 JS设置cookie，删除cookie
js设置cookie有很多种方法。第一种：（这个是w3c官网的代码）//设置cookiefunction setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expire
2017-12-15 16:38:00
364
原创 iframe如何触发父元素事件以及父页面控制iframe子页面元素
最近在开发登入窗口中运用到iframe，其中遇到一些小问题拿出来分享一下。问题：用jquery的$('parent.document').find('#id')来取父框架的元素，取出来的DOM元素也是正确的，在控制台打印出来了，但调用click()方法就是触发不了绑定的函数1.父页面有一个打开注册事件：$('#regis').click(function(){
2017-12-14 15:51:04
17039
6
转载 JS异步加载的三种方式
一：同步加载我们平时使用的最多的一种方式。同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把标签放在结尾处，这样尽可能减少页面阻塞。二：异步加载异步加载又叫非阻塞加载，浏览器在
2017-12-04 17:07:14
358
原创 怎样个性化你的U盘，更改图标和背景
准备好一张图片（一般的jpg格式的就行）还有一个图标（必须是ico格式）,放在U盘根目录下。卷标大家都会改的，就是在u盘盘符上点右键，选择“重名名”，然后输入你的名字之类的字符即可。先改一下背景吧。在u盘根目录新建一个文本文档，改名称为“desktop.ini”（别忘记改扩展名），双击打开，内容输入下面分割线之间的内容----
2017-09-12 17:38:28
1501
1
原创 关于获取图片在网页加载后的高度
最近在做一个带有轮播的项目，轮播思想是根据获取图片宽度高度再赋值给轮播的div。看代码$(function(){var slidesImgWidth=$('.slides_img').width();var slidesImgHeight=$('.slides_img').height();$('#slider1_container ,#slides_items').width(sli
2017-08-25 16:35:26
1211
原创 两种表单提交验证方法
1.直接绑定id进行判断 Appid： AppSecret： pid： js：$('#submitform').on('click',function(){ var appid=$('input[name="Appid"]').val(); var AppSecret=$('input[name="AppSecret"]').val
2017-08-14 01:06:58
399
原创 js滚动分页加载数据
实现理念：1.判断滚动条到底部触发加载函数2.请求数据3.追加数据html: 5条 无痕内裤女冰丝一片式中腰性感纯棉裆女士三角内裤大码薄款夏 ￥21.90 淘宝价：24.90元 努力加载中
2017-07-08 17:35:57
4672
原创 5种常见ajax请求数据
1.$.ajax()返回其创建的 XMLHttpRequest 对象。$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。一．原始的方法 function load(){ var xmlhtt
2017-07-08 17:14:55
7501
1
原创 微信小程序之一键复制到剪切板
最近在开发小程序项目里遇到一个小难题-----一键复制在网页开发里 我们可以引用大牛封装好的复制插件，比如无flash插件clipboard.js适用移动端，pc端-------言归正装，打开微信开发文档打开-APi即可查询到：第一个是设置要复制的内容到剪切板，第二个是获取剪切板的内容，我们要用到的是第一个设置剪切板内容：1. {{detail.taokou
2017-07-06 10:55:19
61899
6
原创 懒加载之jQuery图片延迟加载插件jQuery.lazyload
今天给大家介绍一个懒加载插件lazyload.js使用方法1.引用jquery和jquery.lazyload.js到你的页面2.html图片调用方法为图片加入样式lazy 图片路径引用方法用data-original...3.js $(function() { $("img.lazy").lazyload({
2017-07-06 10:34:52
878
原创 微信小程序 懒加载
今天给大家带来小程序懒加载的办法，来提高页面的体验性。理念：加入滚动，当页面滚动的时候计算列表数据的高度来判断该区域数据图片是否加载显示1.首先我们要在wxml要显示的列表里加入滚动条然后。。。wxml: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="
2017-07-03 11:13:34
22097
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人