![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端知识点
qq_夏阳
一个在程序猿道路上行进的小菜鸟。。。
展开
-
wangEditor富文本编辑器
今天看了下文档,记录下。。。html:<div id="editorBox"></div><button onclick="confirm()">确定</button><div id="content"></div>js内容: var E = window.wangEditor var editor = new E('#editorBox') //实例化文本编辑器//1)上传服务器获取网络链接 edi原创 2020-07-13 16:05:37 · 215 阅读 · 0 评论 -
(归纳整理) -常用的公共方法1-获取url传参
//传入参数名,获取值(用于已知参数名的情况)function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = decodeURI(window.location.search.substr(1)).match(reg); if (r != null){ return unescape(r[2]); }.原创 2020-07-09 10:06:24 · 346 阅读 · 0 评论 -
阻止事件穿透的多个方法,总有一个能解决你的问题
<div class="outBox" @click.stop="toDetail"> 最外层box <div class="middleBox"> 中间的box <div class="insetBox" @click.stop="toMes"> 最里面的box--点击跳转 </div> </div></div>在实际开发中,有时候在事件后面加stop修饰符,并不管用;那么我们可以通过给里面的box.原创 2020-06-11 15:57:00 · 4556 阅读 · 0 评论 -
最近遇到一个坑,swiper分页器不显示,swiper不能正常拖动切换
第一个坑:vue中用swiper,swiper数据需动态渲染,那么也会出现标题的情况,不能拖动附代码如下:<div id="app"> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item,index) in list"><img原创 2020-05-29 16:23:51 · 10378 阅读 · 4 评论 -
https域名的网页,报文件引入错误
经常会遇到,其实就是一个简单的常识;可能在开发的时候需要引入外部的js文件,例如在开发网页需要用到微信api,那么需要引入下面js 文件<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>微信提供了http 和 https 的地址可以引入;一般我们开发的时候,可能就直接引入了http的文件,开发调试过程中也一切正常;正式发布上线后,发现会莫名报错,提示"http://res2原创 2020-05-29 15:48:06 · 515 阅读 · 0 评论 -
H5页面实现微信分享功能及踩坑历程
看了官网,写的也挺简单的,也在网上搜索了一些demo,然后开始写;我理解的误区;我一直以为可以跟app分享一样,有个分享按钮点击触发分享;搜索了很多博客,得到结论,前几年好像是可以通过按钮引导分享,但是微信后来禁用了,只能在网页右上角点击分享;相信很多人看到这,跟我有一样的想法,那还要分享接口有什么用,微信网页本身自带了微信分享功能;还是有用的,可以自定义编辑分享内容(例如标题,内容,图片等)开始回归正题;第一步JSSDK引入,我用的最新sdk文件<script s..原创 2020-05-18 15:11:30 · 3163 阅读 · 3 评论 -
Vue实现在前端导出Excel
之前也看过导出订单项目,但是一直没有实现过,最近刚好有需求要做这个功能!也去网上看了一些博客,参考了2个比较详细的,最后实现了效果第一步:安装依赖(三个步骤缺一不可)npm install file-saver --savenpm install xlsx --savenpm install script-loader --save-devtips:之前少了第三步骤,后...原创 2019-11-26 11:33:35 · 498 阅读 · 0 评论 -
小程序 canvas绘制多行文字多余的省略号表示
下面这个方法是返回有几行:/** * canvas绘图相关,把文字转化成只能行数,多余显示省略号 * ctx: 当前的canvas * text: 文本 * contentWidth: 文本最大宽度 * lineNumber: 显示几行 */function transformContentToMultiLineText(ctx, text, contentWidth, lin...转载 2019-11-07 15:29:41 · 927 阅读 · 0 评论 -
禁止移动端设备默认缩放
我们写移动端网页开发的时候肯定会碰到这个问题,在网页端,页面是可以缩放的,这个是默认的行为。想要禁止这种默认行为在项目中添加如下代码:我的vue项目,在index.html添加一行meta标签<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-sc...原创 2019-07-19 10:18:05 · 492 阅读 · 2 评论 -
如何用JS判断页面在那个浏览器打开——微信、微博
//如何用JS判断页面在那个浏览器打开——微信、微博。var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE...转载 2019-06-26 18:50:30 · 965 阅读 · 0 评论 -
前端面试题篇之二
1、active-class是哪个组件的属性?嵌套路由怎么定义?答:vue-router模块的router-link组件。2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?答:在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id3、vue-router有哪几种导航钩子? 答:三种,一...转载 2019-06-19 10:34:42 · 100 阅读 · 0 评论 -
前端面试题篇之一
2019前端面试题汇总(主要为Vue)前端 面试 vue.js javascript23.2k 次阅读 · 读完需要 24 分钟433毕业之后就在一直合肥小公司工作,没有老司机、没有技术氛围,在技术的道路上我只能独自摸索。老板也只会画饼充饥,前途一片迷茫看不到任何希望。于是乎,我果断辞职,在新年开工之际来到杭州,这里的互联网公司应该是合肥的几十倍吧...转载 2019-06-19 10:32:14 · 118 阅读 · 0 评论 -
网页运行环境判断
5+环境下判断方法: 返回是否在5+基座中运行navigator.userAgent.indexOf("Html5Plus")>-1 返回是否为流应用navigator.userAgent.indexOf("StreamApp")>-1 Android环境下判断方法: 返回是否为安卓手机navigator.userAgent.in...原创 2019-04-17 16:52:47 · 857 阅读 · 0 评论 -
获取图片本身的宽高以及渲染网页后的宽高
有时候我们会碰到设置一个背景图片,但是又想完整的渲染,导致不同的屏幕宽度下,高度不一致;那么就需要知道背景图实际渲染的高度,然后在动态给容器设置高度;获取图片的本身的像素:var img = new Image();img.src = document.getElementById('bgImg').src ;alert('本身width:'+img.width+',本身height...原创 2019-04-08 15:27:59 · 676 阅读 · 0 评论 -
Sass中连体符(&)的运用
在CSS中,要想给一个元素赋予一定的样式,我们必须得先取到这个元素。那么就得需要选择器,通过选择器来选择指定元素,然后赋予所需的样式。而CSS选择器有很多种,比如层次选择器中的后代选择器、兄弟选择器、通用兄弟选择器等。而这些选择器都通过元素与元素之间的关系来确定的,比如:.parent .child {...}除了这些选择器,还有伪类选择器:.ele:after{...}有...转载 2018-12-01 11:47:12 · 19717 阅读 · 0 评论 -
sass中mixin常用的CSS3
sass中mixin常用的CSS3,点击链接查看写的很不错 ,教你怎么通过mixin写css3,代码管理更方便转载 2018-12-01 15:19:59 · 312 阅读 · 0 评论 -
sass/scss 和 less的区别
sass/scss 和 less的区别一. Sass/Scss、Less是什么?Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。Sass与Scss是什么关系?Sass的缩排语法,对于写惯css前端的web...转载 2018-12-01 15:23:50 · 507 阅读 · 0 评论 -
css3之线性渐变
css3渐变讲的很全的一篇文章,点击下面链接查看css3线性渐变详解转载 2018-12-01 16:18:04 · 101 阅读 · 0 评论 -
微信小程序开发——设置默认图片、错误加载图片
wxml:<image src='{{imgArr[index]==""?defaultImg:imgList[index]}}' binderror="errorFunction" data-errorimg="{{index}}" />说明: imgList: 图片数据源列表,需要在data中定义初始数据,或者从接口动态获取数据;errorFunction...转载 2019-01-05 11:39:51 · 9607 阅读 · 2 评论 -
微信小程序根据当前所在地址来获取城市名称
我的需求,页面一打开就获取当前的省份!!!app.json 配置"permission": { "scope.userLocation": { "desc": "你的位置信息将用于定位当前省份" } }index.jsonReady: function () { let _this = this; wx.getLoca...原创 2019-01-03 14:23:20 · 2132 阅读 · 0 评论 -
滚动条与元素尺寸距离顶部的高度
查看滚动条的滚动距离js中有两套方法可以查看当前滚动条的滚动距离。第一套是这样的:window.pageXOffset/window.pageYOffset这个方法可以查看滚动条的横轴和纵轴的滚动距离,但是很遗憾的是IE8以及以下的版本不兼容。因此针对于IE,我们就需要有第二套方法:document.body.scrollLeft/doucment.body.scrollT...转载 2019-01-14 18:16:20 · 2649 阅读 · 1 评论 -
git常用命令
第一次提交代码前,需从线上clone下来$ git clone 你的线上仓库地址看状态$ git status添加代码$ git add-A提交代码备注(根据你的实际情况备注)$ git commit -m"2018/11/6 第一次提交"如果未注册个人信息,需先注册,执行以下命令git config --global use...原创 2019-02-22 10:11:56 · 140 阅读 · 0 评论 -
前端常用的网址
BootCDN - 稳定、快速、免费的前端开源项目 CDN 加速服务17素材网 - 网页效果素材jquery插件库原创 2019-03-15 10:08:14 · 127 阅读 · 0 评论 -
Javascript 之 ES7 新特性详解
ES7+ES8前言本篇文章主要介绍ES7+ES8的一些新功能,并结合ES6的一些API做出了相应的比较。ES71.Array.prototype.includes()includes()作用,是查找一个值在不在数组里,若是存在则返回true,不存在返回false.1.基本用法:['a', 'b', 'c'].includes('a') // true['...转载 2019-04-11 15:05:52 · 558 阅读 · 0 评论 -
判断移动端手机类型
1.在很多时候我们需要判断当前是PC端还是移动端,根据不同的场景做出不同的反应;2.判断移动端是安卓还是ios等等;//获取当前浏览器代理var ua =navigator.userAgent.toLowerCase();1》if(ua.indexOf('windows')>=0){ console.log('pc端'); //处理逻辑}2》var age...原创 2019-04-08 15:22:00 · 259 阅读 · 0 评论 -
正则匹配 - 手机号 中间四位 显示 *
//手机号中间四位*替换let phone = 13421854152;phone = phone.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3");console.log(phone) //134****4152//手机号保留末4位let phone = 13421854152;phone = phone.replace(/(...原创 2018-11-19 10:00:36 · 2661 阅读 · 2 评论