yangmy_Shy的博客

原创 BaiduMap插件运用

main.js引入百度插件//下载百度地图插件 npm i vue-baidu-map --save npm install vue-baidu-mapimport BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, { /* 申请的百度密钥，可以在百度地图官网申请 */ ak: 'dQzK8G22g7gFdQkrKvGr9G5vYVr7GQD8'})vue页面<baidu-map id="allmaps" @ready="ma.

原创 小程序引入echarts图表（异步请求图表显示）

第一步首先引入echarts下载echarts微信版 地址：https://github.com/ecomfe/echarts-for-weixin

原创 vant组件之van-popover气泡框结合list数组列表循环使用

<van-col span="6" class="dzmyBulk_xmCol" @click="stopUrlHref"> <p class="font14 color7BA">每吨利润(万)</p> <van-popover v-model="showPopoverFlag[index..

原创 js实现页面打印部分内容功能

<div class="scanCodeDiv" id="forPrint"> <img src="../../../assets/image/scanCodeDivBg.png"> <div class="scanCodeDivDes"> <h2>请下载车企智链APP</h2> <h2>扫码接单</h2> <div class="scanCo.

原创 vue网页特定部分转成pdf并下载

先安装支持将页面html转换成图片npm install --save html2canvas将图片生成pdfnpm install jspdf --save组件引用：import html2Canvas from 'html2canvas'import jsPDF from 'jspdf' goToDownload(name){ var _downDOM = document.querySelector('#forPrint'); // 导.

原创 Object.assign(）不兼容的解决方法

解决方案： 将上面代码复制到公共方法里直接调用if(typeof Object.assign != 'function') { (function() { Object.assign = function(target) { 'use strict'; if(target === undefined || target === null) { throw new TypeError('Canno..

原创 vue实现星级评估价（app）

html:<div class="evaStar"> <ul class="star"> <li v-for="(itemClass,index) in itemClasses" :class="itemClass" class="evaluateIcon" @click="stars(index)" track-by="index"></li><!--性能优化 track-by 数据不改变时不会重新渲染-->

原创 适配当前浏览器，js判断当前浏览器

var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isOpera = userAgent.indexOf("Opera") > -1;//判断是否Opera浏览器if (isOpera) { alert("Opera");};//判断是否Firefox浏览器if (userAgent.indexOf("Firefox") > -1) { alert("FF");} //判断是否Chrome浏.

原创 js String对象基础方法的用处

1.replace()方法replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。orgStr.replace(findStr, replaceStr) orgStr.replace(new RegExp(findStr, 'g'), replaceStr)string str =“12333”string end =str.replace(3,"2") //替换其中一个数 结果：12233string end =str.r...

原创 HTML页面加载loading

开源地址：https://github.com/joaopereirawd/fakeLoader.js使用教程：1.引入css和js备注：fakeLoader.min.js必须放在jq之后2.body结束标签之前加入<script> $(document).ready(function(){ $.fakeLoader({ timeToHide:1200, //关闭的时间 zIndex:999, // De

原创 单选框、复选框点击添加相应样式（自定义背景图片）

图片是雪碧图（未选中，选中，鼠标移上去的样式）css:.billSelectIpt { font-size:14px; color:rgba(51,51,51,1);}.billSelectIpt input[type='radio']+label { margin: 4px 5px -2px 0; background: url(../images/billRadioIcons.png) 0 0 no-repeat; cursor: pointer;

原创 Js实现将html页面自动截图下载

css:<style> * { margin: 0; } .test { width: 300px; height: 100px; text-align: center; line-height: 100px; background-color: #87CEEB; display: inline-block; vertical-alig

原创 自定义select 并修改默认颜色

css:.subLblSelect { position: relative; display: inline-block;}.subLblSelect select { padding-left: 16px; width: 372px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; border: 1px solid #E1E4E9; he

原创 重复点击,重复触发前端处理

1> 定义标志位：　点击触发请求后，标志位为false量；请求（或者包括请求后具体的业务流程处理）后，标志位为true量。通过标志位来判断用户点击是否具备应有的响应。2> 卸载及重载绑定事件： 点击触发请求后，卸载点击事件；请求（或者包括请求后具体的业务流程处理）后，重新载入绑定事件。3> 替换（移除）按钮DOM 点击触发请求后，将按钮DOM对象替换掉...

原创 checkbox默认样式换成指定图标

HTML:<div class="check-ipt"> <input id="squaredOne1" type="checkbox" name="check" class="none"> <label class="fl" for="squaredOne1"></label>选择1</div>CSS:(图形是雪...

原创 实用的url链接

SuperSlide(基本动态效果)http://www.superslide2.com/downLoad.html

原创 echarts legend图例换行及多条线并存

varthat=this;varmyChart=echarts.init(document.getElementById('discNav01ImgCon'));option={color:['#5962F...

转载 固定表头和第一列、内容可滚动的table表格

html：<div class="tab"> <div class="container"> <div id="left-div"> <div id="left-div1"> <table> <tr>...

原创 js校验字段的大集合

//笔数验证（包括0跟正整数）function checkParseInt(num) { var reg = /^([0]|[1-9][0-9]*)$/; if(reg.test(num)){ return true; }else { return false; }}//金额验证（包括0跟小数点后两位） function c...

原创 element-ui 日历组件(以记事本形式展现数据)

<!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- import Vue before Element --><script src="https://unpkg.com/vue/...

转载 js实现时间日期的相比较

function tab(date1,date2){ var oDate1 = new Date(date1); var oDate2 = new Date(date2); if(oDate1.getTime() > oDate2.getTime()){ console.log('第一个大'); } else { console...

转载 js脱敏处理

/*** 关键信息隐藏* @param str 字符串* @param frontLen 字符串前面保留位数* @param endLen 字符串后面保留位数* @returns {string}*/function hideCode(str, frontLen, endLen) { var len = str.length - frontLen - endLen...

原创 js动画特效 =====在页面滚动

html:<div id="news"> <ul> <li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li> <li><a href="#" title="bbbbbbbbbbbbbbb"&gt...

原创 vue+mint 前端分页加载

具体请看图片备注：不在加载数据if(that.orderBoList.length == o.data.count){ that.loading = true; that.loading1= true;}

原创 移动端长按事件

var timeOutEvent=0; $(function(){ $(".item-content").on({ touchstart: function(e){ // console.log(this); var that = this;...

原创 vue（cdn引入） 弹框的显示

MessageBox：Toast:

原创 用vue显示toggle

转载 JS点击事件的重叠处理（多个点击事件出现冲突）

最近开发遇见了一个这个样的情况，一个button在一个div中，点击buton是一个事件，点击大的div也是一个事件，但是由于button在div中，点击button会把两个事件都执行了，但是我们想点击button的时候不去执行大div的事件。层次如图解决方法 ：　　　　在button的点击事件执行的时候调使用 event.stopPropagation() 方法...

原创 vue+mintUI之分页

<div class="app"><ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10"> <li v-for="item in list">{{ item }}</li></...

转载 操作数组（基础篇）

1.给数组中所有对象加一个属性新数组：array;原数组：list;给原数组list的对象加一个名为indexNum的属性，属性值为strlet array = [];let list = [{name:'aa',age:11},{name:'bb',age:22},{name:'cc',age:33},];list.map((item,index)=>{...

原创 vue Radio自定义图片

css：.radioStyle { display:inline-block; width: .24rem; height: .24rem; background: url("img/radio_icon.png")0 -0.34rem no-repeat;background-size: 100%; margin-right: 0.2rem;}....

原创 前端移动框架

前端移动框架：1.SUI Mobile （基于 Framework7 开发的UI库） ======= 不考虑 url: http://m.sui.taobao.org/getting-started/ 优点：兼容性好，能兼到 iOS 6.0+ 和 Android 4.0+ 缺点：sui mobile会和jquery冲突2.MUI （最接近原生APP体验的高性能前端框架） u...

转载 图片懒加载的实现原理

<!DOCTYPE html><html><head><script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> <style...

转载 js 数组,字符串,json互相转换

数组转字符串：var arr = [1,2,3,4,'巴德','merge'];var str = arr.join(',');console.log(str); // 1,2,3,4,巴德,merge字符串转数组：var str = '1,2,3,4,巴德,merge';var arr = str.split(',');console.log(arr); /...

转载 js实现时间日期的相加

<script>functionDateAdd(interval,number,date){/**---------------DateAdd(interval,number,date)-----------------*DateAdd(interval,number,date)*功能:实现VBScript的DateAdd功能.*参数:interva...

转载 移动端日历控件 mobiscroll 的简单使用、参数设置

mobiscroll 在性能方面比较好，可选用多种效果，滑动效果也比较顺畅。提供样式文件和js文件，直接点击下载，该版本是mobiscroll2.13的官方地址 ：https://docs.mobiscroll.com/2-17-2下载地址：http://note.youdao.com/yws/public/redirect/share?id=95fd7bf95aa4f13...

转载 css3：box-shadow 用法

box-shadow:（默认是外阴影，内阴影：box-shadow: X轴 Y轴 Rpx color inset;）X轴 Y轴 Rpx color（顺序依次对应说明）阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色【此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 不是用来设置文字阴影...

转载 jQuery实现banner换背景图片（非图片轮播图）

html:<div id="My_supersilde"> <!-- banner --> <ul id="list-img"> <li data-image="images/nth1.jpg"><a href=""></a></li> <li data-...

原创 Time时间格式化当前时间

dateFormat:function() { var date=new Date(); var year=date.getFullYear(); /* 在日期格式中，月份是从0开始的，因此要加0 * 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05 * */ var month= date.getMonth()+1&...

转载 vue实现的轮播图

css:<style> *{ box-sizing: border-box; margin:0; padding:0; } ol,ul{ list-style: none; } #slider{ text-align: center; } .wi...