- 博客(43)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 tailwindcss:flex布局解决高度不固定的需求
体验了一把tailwindcss，写在页面上的确实简化了大量css的编写，简洁美观一些。
2022-07-06 15:33:08
1699
原创 vue动态引入子组件,初始数据却是前页面的
父组件：Collection.vue子组件：List.vue引入方式：动态引入项目中有这样一个场景，从客户列表点入查看详情，将数据缓存进入了store中；从详情页退回到列表，再点入另一个查看详情，导致页面最先渲染前一个页面详情的数据。凶手就是从computed中求取store中的数据，因为有缓存所以先进行了渲染。然后才会执行mounted中的新的请求再进行替换。这样就会造成两个现象：第一，页面中使用了指令，会导致先报一轮错误；第二，一旦请求回来的太慢，会导致先看到原来的数据；谜底揭开了，咋改
2022-05-18 17:57:05
1140
原创 vue2.x使用jsoneditor编辑器
目录依赖项安装使用前提：vue项目，需要能方便的管理和编辑json格式的数据。目前我的设计是，有一个名为“配置json”的按钮，点击后打开一个el-dialog的弹框，包含着这个json编辑框。点击“提交”时把数据传出，点击“取消”关闭弹框并销毁弹框。依赖项JSON Editor GitHub 英文文档：https://github.com/jdorn/json-editor2022年4月19日，安装的依赖包是9.7.4的版本安装cnpm install jsoneditor -S使用in
2022-04-20 09:28:06
1907
原创 异常: setImmediate is not defined
Vue打包完的项目报这种错，抓不抓瞎？原因：setInmediate的兼容问题，而代码正好跑在了谷歌浏览器。详见mdn截图解决：可以用setTimeout来代替
2020-12-29 13:29:43
2079
原创 promise 实现多个文件上传的表单项，每一项可上传多个文件
翻了翻以前的文章，感觉不是自己写的~前提用户需要提交一个表单，里面有许多需要填写的项（以下简称“题”），可以理解吧？最近有这么个需求：一个表单需要支持多个上传文件的题，比如一道题叫做“上传身份证正反面”，一道题叫做“上传毕业证和学位证”，也就是题目数量不确定，每个需要的文件数量不确定基本思路1、用el-upload的组件，基本设置是autoUpload:false, action:''2、表单提交前，才提交文件，而不是一选择文件后就让它上传；文件出错就不允许提交表单3、等文件服务器将name
2020-05-18 12:10:09
1027
1
原创 间断更新~项目中常用的小逻辑
目录项目中常用的小逻辑按序请求接口根据接口返回的结果再循环发送请求项目中常用的小逻辑前提还是要打好js基础啊，回调，递归，promise，各种循环，各种数组方法按序请求接口前提：一共有1000个号码，用户可以按照自定义的规则，进行捞取号码（也就是1000个号码迁移到用户的数据库里），并依序告知每一条规则的匹配结果；页面：代码：async function batch(rules) ...
2020-02-03 12:58:17
169
原创 微信浏览器下document.execCommand(“insertHTML“, false/true, 自己传递过来的值)不生效
前言功能：用户往一个多行文本控件（textarea）中粘贴内容，但粘贴时会进行一些判断，比如去掉内容中的html，或者去掉空字符，或者不处理直接粘贴。处理流程：监听paste事件，并阻止其默认行为，然后获取剪切板中的内容（e.clipboardData.getData(‘text/plain’)）弹框，让用户选择哪种处理方式将处理后的内容放到多行文本中bug谷歌（76.0）、360安全浏览器（63.0.**）可以正常运行微信pc端内置的浏览器以及苹果手机中的微信浏览器，粘贴后，文本
2019-09-18 10:45:45
2675
原创 Vue-router：二级路由跳转另一条路由下的子级
前提实验项目中，在一个 /list/user 列表中，当点击某一条时，需要跳转到 /detail/userId/user 详情下，展示详情信息。router.jsconst routes = [ { path: '/ue/matter/list', name: 'list', component: List, children: [ { path: 'user', name: 'list-user', co
2019-09-12 14:11:02
17922
1
原创 Less编译calc()出错
问题在日常开发中，经常采用less语法写样式。但也会遇到一些兼容性的问题，比如下面的例子：width: calc(100vh - 50px);// 编译后width: calc(50vh);解决width: calc(~"100vh - 50px");
2019-08-15 20:40:11
566
原创 背景图片如何正确显示？
用less语法写背景图片地址，总是遇到这个报错；原因：利用webpack打包文件时，未使用图片加载器；解决：1、加上了file-loader或者url-loader;2、正确配置路径，否则会导致404；在 webpack 中会将图片当做模块来用，比如：[{img:require(‘./src.jpg’)}]因为是动态加载的，所以 url-loader 将无法解析图片地址。常见的解决办法有两种：a、用 require 蒋图片作为模块加载，这时候 webpack 打包时，会将 require 打
2019-04-28 13:51:01
297
原创 ssm框架搭建的配置文件以及单元测试中遇到的问题
自己不懂后台还硬要跟着视频做ssm，当然就是一步一个坑bug，但bug永远要靠自己去解决。我是根据网易云课堂-雷老师的《SSM高级整合视频》做出来，具体的类之类的自己去写，我只把坑和配置文件(我只做到了13课时单元测试)列一下。1、eclipse为什么会出现maven依赖包的图标颜色变暗的这种情况，且引入类时报错；原因：在pom-xml中，<dependency> <groupId>junit</groupId> &
2019-03-28 23:36:10
930
3
原创 当li的宽度超出ul时,隐藏不换行
突然发现不会写样式需要实现的效果：在ul中，当所有li超过ul的总宽时，隐藏。类似这样：代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ul中的li不换行</title> <link rel="
2019-03-12 11:15:15
5606
原创 经过$sce.trustAsResourceUrl处理初次绑定后又跳回该视图（不做刷新），该如何渲染？
模型：在同一个页面，用ng-include的方式做A、B两个视图切换。在A页面有一个tms-data的指令，通过$sce处理并绑定后台传递过来的数据。为什么使用$sce?因为angularJS里好些地方，比如路径默认是个字符串，不会认为是路径，从而访问不到我们需要的东西，那么我们就可以通过$sce告诉angualrJS这个路径，这样是很安全滴。比如，当处理文件地址时，代码是这样写的： case 'file': case 'voice': repos.forEach(function
2019-01-31 15:19:00
2359
原创 css实现上面div根据内容自动高度，下面的div自动铺满剩余高度
“加载更多”的功能，如果是监听某个dom元素来实现，你会怎么做？我的设想是：1、此dom元素要可滚动；2、判断合适应该做“加载更多”的逻辑；在我所做的项目中，引用了bootstrap框架，并且这个dom元素隐藏的还比较深。<body class='enroll-repos'> <nav class='navbar site-navbar-default'></nav> <div class='app container'>
2019-01-10 13:50:26
15850
6
原创 scrollingElement：在微信内置浏览器中的坑
最近在做页面保存状态时，由详情页跳转回列表页，恢复状态时，有很明显的等待时间。当初以为是恢复数据时，由于又去请求的数据造成的，结果是一个由“加载更多”的功能带来的坑。“加载更多”的实现效果为：当页面滑动时，元素视口高度+元素滚动高度+70（只是为了多一部分空间）>=元素滚动高度时，就加载下一页的数据。在PC端一切表现的那么完美，后面测试手机自带浏览器也很快，就唯独在微信内置浏览器中打开有...
2019-01-10 13:24:27
1169
原创 总结：PC/移动端web应用字体的大小以及使用
标题链接pc端web、移动端web的字体大小、颜色、字体样式使用https://www.jianshu.com/p/625b197f099a移动端应该如何动态设置字体大小？https://segmentfault.com/a/1190000004189237移动端应该如何动态设置字体大小？https://segmentfault.com/a/119000000...
2019-01-07 17:11:08
8857
转载 js scrollTop到达指定位置！
很早之前就想分享这篇心得， 幸之今天能在这里完成， 好了， 话不多说， 进入正题 ：方法主要利用scrolltop值做运动， 用于到达用户指定的位置（如返回顶部把参数target设置为0即可），处理了多种情况如 scrolltop > 目标值 向上运动 ，等4种情况 ， 代码及用法贴上，goTo = function(target){ var scrollT = documen...
2018-12-27 10:27:32
16650
原创 原生js实现移动端的按钮拖动
html<button id="btnFS" class="btn btn-success" >开始体验</button>jsvar flag, btnEle, cur, nx, ny, dx, dy, x, y; flag = false;btnEle = document.getElementById("btnFS"); cur = {x: 0,y: 0 };function down() { var touch = event.touches[0];
2018-12-19 14:38:17
2720
1
原创 仿大众点评的筛选：directive中，用uibootstrap-tab+uibootstrap-dropdown遇到的问题
问题：tabs组件中的active无法选中第一个回答：在这里插入代码片
2018-12-03 16:33:31
149
原创 angularjs中，ng-hide隐藏的元素，设置不了style
做一个搜索历史框，input获得焦点就显示搜索历史框，框宽度与input框同宽（因为input后还有一个搜索按钮呢）否则不显示。在获得焦点的函数中，已经把flag赋值为true了，却还是不能执行下面的宽度设置值；<input class='form-control' ng-model='criteria.keyword' placeholder='输入搜索关键字' ng-focu...
2018-09-15 21:36:35
1417
原创 【结构可用，只可用于展示】如何在angularjs的directive指令的template中使用ng-repeat?
因为自己再写一个类似苹果finder文件管理器的效果，所以用到了这个功能，我被这个问题搞了一天左右。 上一篇的问题在这里：我还没有解决 我写的代码：&amp;lt;div linkedlist listcolumns=&quot;{{cashAccountsColumns}}&quot;&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;!DOCTYPE html
2018-09-11 14:51:16
1034
原创 未解决的问题：ngRepeat如何在拼接字符串模板中使用?
这是我写的一个例子，但是报错<!DOCTYPE html><html ng-app="app"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
2018-09-11 14:41:20
375
原创 虚拟化、虚拟机等概念理解
虚拟化定义：是指通过虚拟化技术将一台计算机虚拟为多台逻辑计算机。在一台计算机上同时运行多个逻辑计算机，每个逻辑计算机可运行不同的操作系统，并且应用程序都可以在相互独立的空间内运行而不受影响，从而显著提高计算机的工作效率。软件：完全虚拟：VMware和微软的VirtualPC是代表该方法的两个商用产品，而基于核心的虚拟机(KVM)是面向Linux系统的开源产品准虚拟：Xen系统虚拟：...
2018-08-29 10:11:25
3571
原创 js：获取时间
获取当前计算机时间：var day = new Date().getDay(); 0:表示周日，6表示周六获取服务器时间，利用jquery:$.ajax({type:'OPTIONS',url:'/',complete:function(x){alert(x.getResponseHeader('Date'))}});...
2018-08-10 15:18:40
143
原创 仿微信朋友圈图册浏览及其扩展
书到用时方恨少我很笨，历时3天半，才把这个图册浏览的插件搞定了。很感谢前辈写完的插件，不然我弄一个月也弄不出来。功能点： 1、PC端的图片要类似ppt，有放大但不失真功能（放大有了，图片太小肯定会失真），可点击图片和键盘控制翻页； 2、移动端支持缩放、滑动，左右控制翻页； 领导说，以后还可以做自动控制播放。。。。。感觉我的小命要没了呢，哈哈~效果图： （图片来自网络）代码 ...
2018-05-24 16:09:54
539
原创 clipboardData：在编辑框中支持复制粘贴图片
这个版本目前不支持移动和ie10及其以下，避免浪费浏览者时间在编辑框里支持粘贴图片，可省去用户截图保存、再删除的麻烦。查阅了许多资料都是两三年前的了，现在clipboardData的支持程度也比较高了，所以可以很方便的使用了，好大的福音啊。但我并没有具体测试支持的浏览器都是什么版本，目前我们常用的应该是没问题的了。没那么强大的逻辑，还喜欢用现成的，所以就想着怎么把代码节省一些。也就造成...
2018-05-11 10:24:05
7601
转载 Error: $parse:ueoe Unexpected End of Expression
我需要从 javascript 代码创建一些 dom 并绑定它在 angular 范围。 示例 ︰'<button ng-click="someFunction("123abc")">CLICK</button>'当没有参数如 someFunction() ，一切工作正常。但当我添加参数时出现错误 ︰"Error: [$parse:ueoe]....n...
2018-04-24 17:03:30
4645
原创 angular-ui-bootstrap中，setTriggers无效
皆大欢喜，研究了一天的bug，楼主终于解决了。与angular相对应的ui插件，angular-ui-bootstrap，使用非常顺手，代码简洁且异动，但一些拓展功能，有时很让人费解。比如，楼主遇到的想设置冒泡片段可以自行控制其关闭。官方例子：<h4>Triggers</h4> <p> <button uib-popov...
2018-03-01 15:17:03
343
原创 angularjs ng-style background-image的用法及坑
html：<div class="test" ng-style="{'background-image':'url('+ img.url +')'}"></div>js：$scope.img = { url:'http://developer.189.cn/kcfinder/upload/1f309dfe5706ddfbe6fbeaaf45299b43/%E5%9B%BE%E7%89%87/
2017-11-29 17:31:40
4699
原创 应对不同情况的多行文本溢出
第一种：纯css控制overflow: hidden;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;text-overflow: ellipsis; 移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端； -webkit-line-clamp 用来限制在一个块元素显示
2017-09-05 10:31:58
248
原创 360极速浏览器中的极速模式下，报错：eWrap.forEach is not a function
var eSpread, eWrap;eWrap = document.querySelectorAll('.list-group-item[ng-repeat]');eWrap.forEach(function(item) { eSpread = document.createElement('i'); eSpread.classList.add('cus-glyphicon'
2017-08-10 11:17:38
1546
转载 跨浏览器复制神器 ZeroClipboard 2.x快速入门详解
有些时候，我们希望让用户在网页上完成某个操作就能自动将指定的内容复制到用户计算机的剪贴板中。但是出于安全原因，大多数现代浏览器都未提供通用的剪贴板复制接口(或即便有，也默认被禁用)。只有IE浏览器可以通过如下方式来进行复制。window.clipboardData.setData("Text", "这里是需要复制的文本内容")想要实现跨浏览器的复制功能，我们就可以使用 ZeroClipboard。Z
2016-11-04 16:16:20
485
原创 各种度量单位的用处
我最常见的几种：px：html中长度属性的度量单位统一使用像素；坐标点：包含两个长度值，分别表示该点距离某个元素的左边框和上边框的像素值；百分比：应用于水平、垂直空间的长度值；em：一个相对的大小。是相对于元素父元素的font-size。在现代浏览器中，其默认的字体大小是16px，而0.75em=16*0.75；具体链接请戳这vh：相对于视口的高度，视口被均分为100单位的vh。h1 { f
2016-11-02 14:48:24
431
转载 设置text-overflow: ellipsis后引起的文本对齐问题
<p> <span class="left">Hello Hello Hello</span> <span class="right">xhaha</span></p>p{ width: 40%; margin: 20px auto; font-size: 50px;}span{ display: inline-block;}.left{ width:40%;
2016-10-26 16:41:52
2661
1
SSM框架搭建
2019-03-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人