前端技巧
文章平均质量分 50
theOtherSky
这个作者很懒,什么都没留下…
展开
-
@vueup/vue-quill使用quill-better-table报moduleClass is not a constructor
问题:moduleClass is not a constructor,说明vueup/vue-quill没找到quill-better-table依赖,原因是虽然你的quill是2.0.0以上,但是vueup/vue-quill版本还是在2.0.0一下。,这导致了版本冲突。Quill 的多个版本会引起模块注册和使用时的各种问题,例如模块找不到或无法正确初始化。1.检查你的vueup/vue-quill版本(查看 Quill 版本)要解决这个问题,你需要确保整个项目只使用一个版本的 Quill。原创 2024-09-06 09:58:37 · 775 阅读 · 0 评论 -
module.exports和exports
由于 module.exports 单词写起来比较复杂,为了简化向外共享成员的代码,Node 提供了 exports 对象。默认情况下,exports 和 module.exports 指向同一个对象。在自定义模块中,可以使用 module.exports 对象,将模块内的成员共享出去,供外界使用外界用 require0方法导入自定义模块时,得到的就是module.exports 所指向的对象。ps:使用require()模块时,得到的永远是module.exports指向的对象。exports 对象。原创 2023-11-15 16:11:47 · 102 阅读 · 0 评论 -
前端模拟列表的数组数据进行筛选
前端模拟列表的数组数据进行筛选原创 2023-06-08 17:10:45 · 345 阅读 · 0 评论 -
arcGis在vue里事件操作
vue安装esri-loadernpm install --save esri-loader或者yarn add esri-loadernpm地址:https://www.npmjs.com/package/esri-loaderesri的api地址:https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.htmlnpm地址:esri-loader - npm介绍教程和api均在npm地址里有原创 2022-03-16 15:03:49 · 1894 阅读 · 0 评论 -
nvm安装爬坑
1.nvm use (node版本号):返回显示status1和status5解决办法:nvm的1.1.9版本降级为1.1.7版本即可解决nvm下载地址https://github.com/coreybutler/nvm-windows/releases2.nvm切换了node版本号,显示Now using node v16.14.0 (64-bit),但是其实没切换成功解决办法:首先删除原本下载安装的nodejs(官网下载的那个),然后卸载nvm,重装nvm。重新用nvm安装no原创 2022-03-15 10:39:46 · 1613 阅读 · 0 评论 -
css display:flex 弹性布局 子标签设置宽度无效的问题
表面原因:一个父标签中嵌入了两个子标签,当父标签设置display:flex之后。即使子标签设置了宽度都是50%,但是如果左边子标签内容多,则左边子标签会挤掉右边子标签的一部分,所以导致了右边的宽度显示有问题。根本原因:父元素设置了display:flex,那么所有的子标签都会默认加上flex:0 1 auto;其中1 就是 flex中的 flex-shrink 属性,表示开启了元素的收缩功能,所以才会有左边子标签会挤掉右边子标签的一部分的问题。因此其中一种做法是:我们可以让该标签的自动收缩关原创 2022-02-14 14:17:48 · 7001 阅读 · 1 评论 -
前端一些好用的轮子
动画库如果想页面制作的好看,动画效果一定是少不了的。所以必须推荐动画插件。 Animate.css 纯css的动画库,所以无论你前端使用什么框架,都可以非常方便的使用它,内置了超多的动画效果,并且预览起来也非常方便。 网址:Animate.css | A cross-browser library of CSS animations. 常用效果组件所有介绍了一些UI组件库,组件库的组件大而全,但精细程度有时候是不够的,所以有时候我们还需要一些小而精的专属组件。 轮播图组件:swi原创 2022-02-09 10:47:29 · 225 阅读 · 0 评论 -
在阿里矢量库下载了字体图标在项目引入无法显示时
问题:如果你在阿里矢量库下载了字体图标在项目引入无法显示时,可以把图标转成base64处理方法:具体操作: 1.打开‘我的项目’ 2.修改unicode为base64 (1)打开项目设置 (2)在字体格式选项勾选‘TTF’和‘base64’就可以了 ...原创 2021-08-31 11:13:25 · 1306 阅读 · 0 评论 -
组件中传值(复杂情况下)
全局定义方法: putExtra: function(obj){ return encodeURIComponent(JSON.stringify(obj)); }, getExtra: function(obj){ return JSON.parse(decodeURIComponent(obj)); }使用方法:url: `/pages/product/detail?goods=${this.$utils.putExtra(item)}`//数据发送方this.原创 2020-12-15 17:48:51 · 102 阅读 · 0 评论 -
正则表达式去除img标签
废话不多说,直接上代码(用表达式拿到img标签及img标签内容,然后剔除出去)var a='fsfsd<img src="images/01.gif">fsfsdf<img src="images/02.gif">fsfsdf<P><A href=\'~abc/ccg/ab.jpg\' width="3">文字</A><A width="4" style="color:#ddd; font-weight:bold;" mm_href="原创 2020-12-03 15:17:42 · 3438 阅读 · 2 评论 -
封装ajax方法:cb回调,promise,async/await
1.使用回调function getUrls(url,data,cb) { $.ajax({ url: url, type: "get", data: data, success: function(res) { console.log('cb回调传入方法获取值', res) cb(res) }, });}getUrls('这里是接口地址','这里是需要原创 2020-10-30 10:32:19 · 443 阅读 · 0 评论 -
当JSON.stringify(json)和JSON.parse(json)相互转换报错
报错的返回:Error in onLoad hook: "SyntaxError: Unexpected end of JSON input"原因:使用JSON.stringify(json)把json转换为字符串的时候,然后通过链接带到另一个页面的时候,由于字段太长,导致字符串丢失,JSON.parse(json)无法转换回来而报错解决方法:1、在传值页面,转换成字符串之后,也就是JSON.stringify(json)之后,要再进行一步用encodeURIComponent 编码bg_bt原创 2020-09-18 16:07:50 · 2545 阅读 · 0 评论 -
CSS 8种让人眼前一亮的hover效果
1.发送效果<div id="send-btn"> <button> // 这里是一个svg的占位 Send </button></div>#send-btn{ display: flex; align-items: center; justify-content: center; height: 100vh;}button { background: #5f55af; border: 0原创 2020-08-27 16:18:04 · 238 阅读 · 1 评论 -
jQuery.inArray返回数组中指定元素的索引值的使用方法(简单数组和数组中包含JSON)
1.只是单纯的数组的时候,这个很简单 var arr = [ 4, "Pete", 8, "John" ]; jQuery.inArray( "John", arr );//"John" 在索引值为 3 的位置被找到 jQuery.inArray( 4, arr ) );//4 在索引值为 0 的位置被找到 jQuery.inArray( "Karl", arr );//"Karl" 未被找到,所以返回 -1 jQuery.inArray( "Pete", arr原创 2020-08-11 17:00:51 · 494 阅读 · 0 评论 -
移动端H5页面适配
废话不多说,直接上代码1.rem加js适配(用原生方法获取用户设置的浏览器的字体大小(兼容ie))<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0原创 2020-06-23 10:42:59 · 537 阅读 · 0 评论 -
混合开发对通过各种途径点击进入移动端页面的路径进行判断(安卓,IOS,微信),及调用安卓,IOS内部方法
html页面//这个是头部,a标签的作用是返回上一层,也就是说从哪里来回哪里去(安卓,IOS)<header class="header"><a onclick="outUrl()"></a>用药指导</header>js页面(安卓,IOS) //调用IOS或者安卓内部方法 function outUrl() { if (isIOS()) { // IOS设备 wind原创 2020-06-23 10:29:24 · 279 阅读 · 0 评论 -
对循环进行筛选
有时候数组中会混有null,undefined和不存在的元素,所以在数组使用前把他们筛选出来//排除null,undefined和不存在的元素for(let i = 0;i<a.length;i++){ if(!a[i]){ continue; //跳过null,undefined和不存在的元素 }}//如果只想跳过undefined和不存在的元素for(let i = 0;i<a.length;i++){ if(a[i] === u原创 2020-06-05 14:32:27 · 301 阅读 · 0 评论 -
Object.keys几种使用方法
介绍:Object.keys(obj)参数:要返回其枚举自身属性的对象返回值:一个表示给定对象的所有可枚举属性的字符串数组使用:一、处理对象,返回可枚举的属性数组let person = {name:"张三",age:26,address:"广州",getPhone:function(){}}Object.keys(person) //["name", "age", "address","getPhone"]二、处理数组,返回索引值数组let arr = [1,2,.原创 2020-05-12 15:01:15 · 7897 阅读 · 0 评论 -
layer使用
1.去官网下载jayer2.加载jq注意:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="css/layer.css&qu原创 2020-05-11 10:49:54 · 331 阅读 · 0 评论 -
验证手机号码(提交的时候验证)
这个方法是提交手机号的时候进行手机号验证,通过返回true,不通过返回falsefunction isMobile(s) { var regu = /^1[3,4,5,6,7,8,9][\d]{9}$/; if (regu.test(s)) { return true; } else { return false; }}...原创 2020-04-24 10:33:33 · 385 阅读 · 0 评论 -
百度地图的一些地址
1.百度地图api地址http://lbsyun.baidu.com/jsdemo.htm#a1_22.//自定义地图样式 调试样式http://wiki.lbsyun.baidu.com/custom/JavaScript API v3.0 -->个性化地图-->个性化编辑方式...原创 2020-04-01 15:18:14 · 350 阅读 · 0 评论 -
前端实现搜索历史的实现(单个和全部)
html:<input type="search" placeholder="搜索内容" id="searchInput"><p class="history_btn"> <span onclick="deleteAll()">清除全部</span> <span onclick="deleteOk()">...原创 2019-11-26 15:49:21 · 2083 阅读 · 2 评论 -
模拟动态排版页面
因为一些需求原因,如在后台管理系统上可以排版前端的展示页面的需求,所以有以下代码(需要加载jq).box { width: 200px; padding: 6px 10px; background: rgba(0, 0, 0, 0.3); text-align: center; color: #fff; ...原创 2019-11-21 15:00:06 · 401 阅读 · 0 评论 -
【vue scoped 样式修改 】框架或插件组件样式更改及/deep/ 警告
在做vue项目的时候,很多人应该已经碰到在vue 组件中,style 局部修改样式更改不了<!-- 这个是 B 组件 --><template> <div> <h1 class="my">我是B组件</h1> </div></template><!-- A组件 --><tem......原创 2019-11-20 18:45:25 · 976 阅读 · 0 评论 -
js快捷获取超链接参数和修改超链接(新增URLSearchParams方法获取参数)
//https://www.baidu.com?sjry=111function GetRequest() { var url = location.search; var theRequest = new Object(); if (url.indexOf("?") != -1) { v...原创 2019-10-18 17:18:58 · 796 阅读 · 0 评论 -
JS实现的数字千位符格式化(金额每3个数字加一逗号)
function toThousands(num) { var result = '', counter = 0; var dot = String(num).indexOf("."); if(dot != -1){ // alert("有小数点"); // 获取小数点后面的数字(indexOf和substring都不支持数字,所以...原创 2019-03-13 10:40:36 · 2684 阅读 · 1 评论 -
Echarts一些知识
ps:一些事件清理 charts = echarts.init(document.getElementById("echarts")); // 1、清除画布 charts.clear() // 2、为echarts对象加载数据 charts.setOption(option); ///3、在渲染点击事件之前先清除点击事件 char...原创 2019-02-25 11:48:02 · 314 阅读 · 0 评论 -
css一点小知识
1.样式加载display: inline-block;后顶部对齐 在样式中加入vertical-align:top;就可以解决问题2.input,select,option,textarea点击后出现蓝边input,select,option,textarea{outline: none;}3.div内显示两行或三行,超出部分用省略号显示word-break: b...原创 2018-12-19 10:33:38 · 222 阅读 · 0 评论 -
JQ的一些小知识
1.多个相同标签时获取当前点击标签的下标值 $('.jycwzb div').click(function(){console.log($(".jycwzb div").index($(this)))})2.在一个数组中删除指定值var arr = ['a','b','c','d'];arr.splice($.inArray('c',arr),1);ale...原创 2018-12-14 17:32:17 · 145 阅读 · 0 评论 -
js和jq搜索关键字高亮
js关键字高亮<style> .highlight{ background:green; font-weight:bold; color:white; }</style><p><input id="input"/><button onclick="highlight()"&...原创 2018-12-20 11:15:13 · 977 阅读 · 0 评论 -
发ajax的各种方式及小知识
1.JQ发ajax请求://第一种请求方式(post发jason请求)var data= { "fd_project_name": "", "fd_total_size": "", "ip_phase": ""}$.ajax({ type: "POST", url: "http://172.16.7.156:8080...原创 2018-12-19 19:42:39 · 113 阅读 · 0 评论 -
angular.js双层(多层)ng-repeat循环
1.双层(多层)ng-repeat循环 在angular写程序中我们经常会用到ng-repeat,正常情况下我们想要使用坐标时直接使用$index即可。可是当双层或是多层ng-repeat循环时应该怎么办呢? (1)双层ng-repeat循环<div class="parent" ng-repeat="parent in parentList track b...原创 2020-05-11 10:57:28 · 1011 阅读 · 0 评论 -
input单选框改变选择
html页面:<input type="radio" name="numerical" value="price" /> 值<input type="radio" name="numerical" value="scope" /> 范围js页面:$('input[type=radio][name=numerical]'原创 2018-08-08 11:21:33 · 3233 阅读 · 0 评论 -
jq滚动条事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...原创 2019-03-19 11:55:42 · 931 阅读 · 0 评论 -
特殊图表实现代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...原创 2019-03-19 14:23:28 · 264 阅读 · 0 评论 -
js数组操作
附:数组操作apihttps://www.runoob.com/jsref/jsref-obj-array.htmljs数组中的find、filter、forEach、map四个方法的详解和应用实例https://blog.csdn.net/lhjuejiang/article/details/801125471.判断数组里是否有某个字段,有就删除,没有就添加 va...原创 2019-08-09 11:25:18 · 136 阅读 · 0 评论 -
用jq实现调用ajax方法并返回使用
设置同步请求ajax,但是发的请求多就会出现排队问题,请谨慎使用let useData = {}useData.userId=1,console.log('调用ajax结束',ajaxUse("aaa.aaa",useData))//由于是同步ajax,所以返回值是ajax请求回来的值function ajaxUse(toUrl,useData){ let getRes...原创 2019-07-17 11:24:18 · 653 阅读 · 0 评论 -
可折叠table框treegrid插件固定左边,右边可滑动
效果如图所示:代码如下:<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/e...原创 2019-06-28 16:57:22 · 559 阅读 · 0 评论 -
jq阻止事件冒泡(点击子级不触发父级)的两种方法
方法1function addFocus() { var e=window.event || arguments.callee.caller.arguments[0]; e.preventDefault(); e.stopPropagation() ;}方法2$("#addFocus").click(function(event){ event.stop...原创 2019-06-19 19:39:42 · 5320 阅读 · 0 评论 -
MUI一些心得
//---------------关闭等待框,一般用于发ajax获取到数据后,但还一直显示正在加载的时候使用,放在最末尾-----------------plus.nativeUI.closeWaiting();//---------------------------------------微信分享例子,文字复制粘贴-----------------------------------...原创 2018-04-27 10:25:53 · 945 阅读 · 0 评论