- 博客(55)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 vue 拖动改变布局
横向布局 需要拖动框选区域 改变两边元素宽度<template> <div> <div :style="setLeftStyle()" class="view"></div> <div id="line" class="line"></div> <div :style="setRightStyle()" class="view"></div> ..
2022-01-24 09:42:31
3407
1
原创 解决网页大数据卡顿
项目用的是 vue + elementUI项目是一个后台管理系统有大量数据展示 有些数据需要一次性查询出来 多达几千条当展示几千条时 用el-table 展示会有卡顿 使用插件pl-tablenpm i pl-tablemain.jsimport plTable from "pl-table"import 'pl-table/themes/index.css'import 'pl-table/themes/plTableStyle.css'Vue.use(plTable)...
2021-11-25 14:54:50
1811
原创 （小程序） 客户签名及签名后页面整体转图片后上传
先说明下项目需求： 1、销货清单 需要门店老板 签名 2、签名后 将签名以及铺货清单整体转为图片上传到服务器图片展示：图片说明：1：页面结构 上面为清单 下面为客户签名展示区域 2：点击图1 客户签名区域 弹出签名面板 3： 图2 签名完成后 页面展示签名；点击保存后 将整个页面转为图片上传到服务器 4： 上传到服务器后返...
2021-11-16 14:11:34
968
原创 小程序防抖
let debounce = { map:[], isValidClick:function(key, wait=1000){ let item = this.getItem(key); if(!item){ if(this.map.length >10){ this.map.shift() } this.map.push({key:key,tick:new Date().getTime()}); return .
2021-07-26 08:59:32
113
原创 在小程序中使用dayjs
为什么要是使用dayjs : a.小程序 在ios 和android有兼容性问题 ，使用dayjs可以不用考虑兼容性 b.使用dayjs真的真的 超级方便 可以少写很多代码 比如：//没有使用 dayjsformatDateTime: date => { if(!date){ return ''; } date = new Date(date); const year = date.getF...
2021-07-26 08:34:08
2157
原创 sql 学习笔记
sql基础知识点1.查询 select1.基本查询select * from table_name; //选取所有列select name from table_name; //选取name一列 name:列名 table_name 表名称select name,age from table_name;//选取name,age 两列 2.where条件查询SELECT 列名称 FROM 表名称 WHERE 列 运算符 值select * from table_name w
2021-07-17 15:09:48
220
原创 grid布局
CSS Grid布局1.基本布局[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b0OHqhJx-1626505727506)(C:\Users\2018-jsb\AppData\Roaming\Typora\typora-user-images\image-20200829140703793.png)]实现上面布局html<view class="dis-gird"> <view>1</view> <
2021-07-17 15:08:53
98
原创 Es6 笔记
Es6笔记1.Object.is()Object.is(a,b);两个值是否相等var a = 1;var b = 2;Object.is(a,b); //false严格比较运算符（===）的行为基本一致不同之处只有两个：一是+0不等于-0，二是NaN等于自身+0 === -0 //trueNaN === NaN // falseObject.is(+0, -0) // falseObject.is(NaN, NaN) // true2.Object.defineProperty
2021-07-17 15:07:36
80
原创 CSS备忘录
CSS 及CSS3 样式1.text-shadow 文本阴影 text-shadow: 5px 5px 5px #FF0000;2.box-shadow 盒子阴影box-shadow: 10px 10px 5px #888888; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 卡片效果 box-shadow 的顺序依次为: h-shadow v-shadow blur
2021-07-17 15:06:00
109
原创 vue 实现复制内容到剪贴板
复制内容至剪切板使用的是插件'vue-clipboard2'一、安装插件npm install vue-clipboard2 --save二、全局注入（main.js）import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)三、使用<div>{{message}}</div><i title="复制" v-clipboard:copy="me...
2021-04-02 15:46:53
273
原创 vue项目中使用cn打印组件
最近项目中要对接订单信息，打印快递面单。这里记录下开发流程。前端方面流程还是很简单的。1.电脑安装 连接好打印机 并安装对应打印机驱动 2.电脑安装 菜鸟打印组件 下载地址：http://cloudprint.cainiao.com/cloudprint/client/CNPrintSetup.exe?spm=a219a.7629140.0.0.YJQX7O&file=CNPrintSetup.exe3.在开始打印前 要注意你的快递面单尺寸，在打印组件中需要设置对...
2021-01-18 09:32:05
2987
原创 vue 项目中使用LodopFuncs （浏览器控制打印机）
1.电脑安装c-Lodop 下载地址http://www.lodop.net/download.html2. 在要控制打印页面引入 LodopFuncs.js3.template:<el-button @click="onStart">打印</el-button>script:onStart: function () { let LODOP=getLodop(); LODOP.PRINT_INIT(""); ...
2021-01-11 09:01:55
3263
原创 css / css3 基础知识
1.text-shadow 文本阴影 text-shadow: 5px 5px 5px #FF0000;2.box-shadow 盒子阴影box-shadow: 10px 10px 5px #888888; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 卡片效果 box-shadow 的顺序依次为: h-shadow v-shadow blur spre...
2020-08-21 11:00:36
397
原创 js 获取网络图片 压缩 裁剪 并上传
最近公司在做小程序直播，需要在公司后台添加直播商品，创建商品有要求 要求图片的尺寸是 1：1的。公司有上千种产品准备是让运营人员直接选择商品 将需要的资料自动添加进去 点击确定就行公司产品都是有商品图片的 但是图片的尺寸 不是1：1 而且图片都是大图，所以需要将图片进行压缩 后裁剪 再上传下面开始了 ：点击【选择】按钮后1.将当前商品图片的url 转base64 ; 为什么要转呢 因为直接用url,toDataURL() 和putImageData()会报跨域错误getBa...
2020-07-24 10:22:15
1004
原创 element UI el-table 实现单元格的合并
要实现上图的效果 第一例根据数据合并 是同一个店铺就合并1.请求数据 请求回来时解析数据formatData:function(list){ for(let i in list){ list[i].time = list[i].start_at +' - '+list[i].end_at; //忽略 //这里是关键******* if(i == 0){ this.rowspans.push(1); this.posi ...
2020-07-24 09:39:59
905
原创 element UI el-tree 自定义 （改变字体颜色）
1.<el-tree :data="data" :props="defaultProps" node-key="id" :default-expanded-keys="defaultExpanded" :render-content="renderContent" ///////////注意这里 @node-click="handleNodeCli...
2020-04-23 09:33:49
8513
2
原创 Chart.js 清除数据 和 line(曲线改为直线)
vue<canvas class="canvas" ref="popChart" :width="1000" height="400"></canvas>import "../../../js/Chart"if (this.el_chart) {//如果之前有数据 重新获取数据 鼠标移入canvas 会出现前后数据晃动 ************ t...
2020-03-25 08:32:35
1308
原创 ES6 模块化时出现错误
1. script 中 记得添加 type="module" 记得将编辑器的js版本设置为ES6a.jsimport {sex,echo} from "./b.js"console.log(sex);echo("adf")b.jsvar sex="boy";var echo=function(value){ console.log(value)...
2020-03-07 10:27:35
574
原创 js xlsx 的导出
1.安装依赖npm install -S file-saver xlsxnpm install -D script-loader2.项目中src下新建一个js文件夹放入两个文件Blob.js和 Export2Excel.js3.使用onExport:function(){ // console.log('导出EXCEL'); const list = t...
2020-01-10 11:00:12
579
原创 js 防抖
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <button onclick="aclick()">抖动测试1</but...
2019-12-19 14:15:28
93
原创 js 深拷贝
1.function deepClone(obj) { let result; if (typeof obj == 'object') { result = isArray(obj) ? [] : {} for (let i in obj) { result[i] = isObject(obj[i]) ? deepClone(...
2019-12-13 17:51:01
97
转载 element ui el-table 实现拖拽效果
https://www.cnblogs.com/jin-zhe/p/10181852.htmlhttps://www.cnblogs.com/e0yu/p/11163924.html引入三方插件 sortable.js1.引入sortable.js的包:npm install sortablejs --save2. 引用el-table 中 导入impor...
2019-12-10 10:45:02
550
1
原创 element ui el-table 将表格单元格改为可编辑
项目需求 要求表格展示数据 并且 在表格中可以随意修改数据 而且多处地方使用到这种可以编辑的表格效果图：思路：将表格改为可以编辑 ； 将表格封装在一个组件 然后在需要的地方调用这个组件（实现重复调用）先看下使用页面的调用template： <editTable ref="editTable" :tableData=...
2019-12-09 15:13:07
9761
1
原创 chart.js 的基本使用
https://www.chartjs.org/ //官网https://github.com/chartjs/Chart.js/releases/tag/v2.9.3 //下载<canvasid="c2" width="600"height="400"></canvas> <scriptsrc="js/Chart.js">&...
2019-12-03 16:39:30
457
原创 Js递归方法解决兔子问题 (斐波那契数列)
思路分析：月份 兔子数 说明1 1（对） 从开始有一对兔子2 13 1+1 原本有一对 从第三个月开始 生了一对 一共是两对兔子4 1+1+1 生了第二对5 1+1+1+1+1 生了第三对兔子 同...
2019-11-26 14:17:05
1709
原创 element ui el-table 动态改变 单元格 的颜色
将el-table 包在自定义组件（page_table）里面，可以重复使用。1.在组件中定义<el-table :cell-style="setCellColor"></el-table>methods:{setCellColor: function (e) { //{row,column,rowIndex,columnIndex} let o...
2019-11-11 13:57:58
7850
原创 小程序自定义TabBar
先说说遇到的问题当使用微信原生的tabBar时，tabBar是固定在最下面 ，并且层级最高。当我想做一个弹窗时 tabBar还是会显示在最上面，弹窗覆盖不了。当时想到了显示弹窗时 使用wx.hideTabBar();先隐藏tabbar 当弹窗关闭时在wx.showTabBar();显示；如果这样会遇到另外一个问题 显示tabbar 和隐藏tabbar 页面page 的高度是不同的 当你这...
2019-08-23 14:08:02
332
转载 微信小程序使用字体图标
原文链接：https://blog.csdn.net/nongweiyilady/article/details/74244362项目中常常需要使用到字体图标，微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。第一步：下载需要的字体图标进入阿里图标官网http://iconfont.cn/搜索自己想要的图标...
2019-08-15 11:13:54
878
原创 微信小程序 自定义组件
为什么要组件？ 将复杂页面拆分为多个组件 ，结构清晰 维护简单，能重复使用1.定义组件a.新建目录 components 项目所有的组件都将放在这个目录中b.在components 右键新建目录 w-tab-controlc.在w-tab-control 右键 新建components 会自动生成四个文件（js、json、wxml、wxss）// 1.w-...
2019-08-10 17:25:28
203
原创 表格拖拽改变列宽
<template> <div> <div> <table> <thead> <tr> <th v-for="item,index in heads" :id="'th_'+index" style="width:120px;"> ...
2019-06-01 08:53:55
1422
转载 免费API接口
http://www.bejson.com/knownjson/webInterface/电商接口淘宝商品搜索建议:http://suggest.taobao.com/sug?code=utf-8&q=商品关键字&callback=cb用例 ps:callback是回调函数设定 物流接口快递接口:http://www.kuaidi100.com/query?...
2019-05-18 10:42:18
9936
转载 display:flex 弹性布局
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效常用：{ display:flex; justify-content :center; //横向居中 align-items : center ； //纵向居中}一、flex-direction 容器内元素的排列方向(默认横向排列)1：...
2019-05-17 14:26:08
370
原创 js prototype 扩展
/** * 给字符串原型对象上添加 方法 可全局使用 * * var str = "13212345678"; * str.isMobile() // true * * **/String.prototype.isMobile = function () { let reg = /^1[3-9]\d{9}$/; //let bool = reg.test(this);...
2019-05-15 09:22:06
171
原创 隐藏H5 audio 的下载图标
<audiov-bind:src="content.audios[0].url"style="width:100%;"controls="controls"controlslist="nodownload"controlslist="nofullscreen">您的浏览器不支持audio标签</audio>controls="controls"cont...
2019-05-11 17:30:36
625
转载 web端插入百度地图
1. 获得百度动图的密钥http://lbsyun.baidu.com/apiconsole/key2.百度提供的地图生成器工具http://api.map.baidu.com/lbsapi/createmap/index.html;3.生成一个地图，并进行相关的配置4.点击获取代码，会跳出来一个框里显示你创建的地图的HTML代码，copy最核心的代码到你的页面中，然后把第一个...
2019-05-11 17:28:33
1328
转载 vue 拖拽元素的移动 ——自定义指令
/////////////// 私有指令directives: {drag: {//指令的定义inserted:function(el) {el.onmousedown=function(e) {//获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置letdivx = e.clientX - el.offsetLeft;letdivy = e.cli...
2019-05-11 17:27:44
1904
转载 js 复制到剪贴板
functioncopy() {varwxCopy=document.getElementById("weixin");wxCopy.select();// 选择对象document.execCommand("Copy");// 执行浏览器复制命令document.activeElement.blur(); //手机键盘}<div...
2019-05-11 17:24:36
107
转载 获取url参数
window.location.search //网页路径？ 及后面的内容；window.location.href // 网页整个路劲；var str = "?id=123456789&target=987654321&name=weixin"; 模拟window.location.search;function get(name){var reg =...
2019-05-11 17:23:40
88
原创 html移动端 meta 设置
允许用户缩放：head内声明viewport<head><meta name="viewport" content="width=device-width,intial-scale=1,user-scalable=no"></head>viewport：视口,属性：width/height=数值device-width/height...
2019-05-11 17:22:59
3100
原创 js 正则
. 查找单个字符 除了换行和结束符 \w查找单词字符。 \W查找非单词字符。 \d查找数字。 \D查找非数字字符。 \s查找空白字符。 \S查找非空白字符。 \b匹配单词边界。 \B匹配非单词边界。 \0查找 NUL 字符。 \n查找换行符。 \f查找换页符。 \r查找回车符。 ...
2019-05-11 17:22:04
498
element ui el-table 动态改变 单元格 的颜色.txt
2019-11-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人