- 博客(43)
- 收藏
- 关注
RSS订阅原创 grid布局兼容IE浏览器踩坑
grid布局其实对于浏览器的兼容性支持不是很好，支持IE时需要加前缀-ms-普通写法display: grid;grid-template-rows: 50% 50%;grid-template-columns: 50% 50%;IE兼容写法display: -ms-grid;-ms-grid-rows: 50% 50%;-ms-grid-columns: 50% 50%;用css写是没有问题的，但在vue中用v-bind:style绑定样式不生效了，后来发现vue会自动添加前缀，标准
2022-02-22 10:52:38
1864
原创 vue实现吸壁悬浮球
最近接到一个需求，需要一个客服悬浮按钮，可以拖拽并吸壁到页面周边，我们一起看看吧1.创建一个template，定义客服按钮，自定义v-drag指令<template> <div class="container"> <div class="btn" id="btn" :style="{ visibility: dialogVisible ? 'hidden' : 'visible' }" v-drag="{ set
2021-10-18 10:59:44
1681
原创 js获取当前周区间
var timeStamp = new Date().getTime();var currentDay = new Date().getDay();this.monday = new Date(timeStamp - (currentDay - 1) * 60 * 60 * 24 * 1000) .toLocaleDateString() .replace("/", "-");this.sunday = new Date(timeStamp + (7 - currentDay) * 60 * 60
2021-09-16 10:25:52
359
原创 vue实现左右滑动tab
1.两个div，一个outer，一个inner，inner设置absolute，滑动时改变inner的left值<div class="system-tabs"> <i class="el-icon-arrow-left" style="left: 13%" @click="arrowClick('pre')" ></i> <i class="el-icon-arr
2021-09-14 17:58:30
2637
原创 vue全局管理自定义组件
参考官方API https://cn.vuejs.org/v2/api/#Vue-component创建baseComponents.js// 基础组件全局管理import ChooseModal from "_c/choose-modal";import Editor from "_c/editor";import GroupUpload from "_c/group-upload";import ICascader from "_c/i-cascader";import ICheck
2021-05-18 09:49:04
229
原创 vue路由动态加载vue文件时，找不到跳404页面
项目菜单需要动态生成，vue文件是配置的，当文件不存在时，直接用import会报错终止程序，一番研究后发现可以特殊处理一下。component = () => { return new Promise((resolve, reject) => { var RemoteComponent = import ('@/view/' + menu.menuUrl + '.vue') RemoteComponent.then(res => {
2021-05-17 11:27:10
669
原创 vue实现tree-select组件(树选择器)
基于iview的树选择器组件效果思路实现组件效果思路主要用iview的Dropdown、Input和Tree组件实现，Dropdown作为外层组件，实现下拉收缩效果，Input实现数据回显，Tree加载数据选项。重点是Tree作为Dropdown的list插槽实现下拉选项的效果实现模板部分trigger为custom，手动控制下拉框的显示，Input设为只读<Dropdown ref="dropdownRef" style="width:100%" trigger="c
2021-05-07 18:17:05
7060
原创 vue项目配置请求加载中效果
1.main.vue引入iview Spin组件<Content class="content-wrapper"> <Spin fix v-show="loading"> <Icon type="ios-loading" size="18" class="spin-load"></Icon> <div>加载中...</div> </Spin> <keep-al
2021-04-21 15:50:24
1244
原创 vue项目刷新页面（provide、inject方式）
开发vue项目时，框架需要一个刷新按钮，手动刷新页面渲染，我们知道window.reload()，或者router.go(0)可以路由刷新，重新进入当前页面，但是这种方法的问题在于会导致页面白屏，用户体验不是很好。provide、inject方式我们在需要刷新的路由层级，<router-view>渲染的地方用v-if去控制页面刷新。在这里用App.vue举例<template> <div id="app"> <router-view v-if="
2021-04-21 15:26:22
404
原创 微信小程序实现走马灯式抽奖
先来看下效果设置奖项awardList是从后台拿到的奖项数组，list不够八位时填充谢谢参与奖项，超过八位时截取数组，然后随机打乱数组，保证奖项随机布局，第四位固定填充立即抽奖按钮// 设置奖项 settingAward(awardList) { const len = awardList.length; const award = { awardName: '谢谢参与', awardMoney: 0, awardType: '00', awardCode
2021-01-15 10:45:06
1809
7
转载 vue组件间通信六种方式（完整版）
前言组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：image如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、emit/emit/emit/on、vuex、$parent / children、childr
2021-01-15 10:09:02
373
原创 微信小程序打印实时日志
最近遇到了一个蜜汁bug，项目上线了但是定位不出问题，于是引入了微信的实时日志管理器对象来帮助定位，一起看下吧。API地址首先创建一个log.js文件// 从基础库2.7.1开始支持const log = wx.getRealtimeLogManager? wx.getRealtimeLogManager() : null;module.exports = { info() { if (!log) return log.info.apply(log, arguments)
2020-12-30 14:11:55
5309
1
原创 CSS3实现红包抖动效果
有个需求是要实现红包的抖动效果，之前没做过，记录一下嘻嘻~~这里用到了transform: rotate()属性，加上animation实现动画效果，不多说上代码.red_packet { width: 180rpx; height: 220rpx; position: fixed; top: 10rpx; right: 20rpx; color: #D60E19; animation: shake .5s linear infinite;}@keyframes shak
2020-12-22 10:10:11
1275
1
原创 小程序实现锚点效果
效果1.点击tab页跳转至当前锚点内容2.滚动页面时tab标签自动切换至当前tab实现1.wxml使用scroll-view组件，顶部和内容都设成可滚动的区域extraHeight是接下来要计算的额外高度，使点击到最后一个tab页时，内容可以在顶部<view style="height :{{extraHeight}}px"></view><view class="container"> <scroll-view scroll-x class
2020-12-08 15:42:45
3290
原创 小程序AES、RSA加密
微信小程序RSA加密加密流程：获取到后台传来的公钥，调用小程序登录接口获取到tokenId和userId，通过公钥使用RSA加密参数，再次请求时传给后台这是开发的第三个小程序，基于一个物流系统，简化功能开发下单流程。登录的时候，系统是使用RSA进行加解密的。创建RSA加密JS文件wx_rsa.js，放到utils文件夹下面可在网上下载js文件，参考https://github.com/zhangzhaopds/WeixinApp_RSA_Signature/blob/master/utils/wx
2020-10-31 17:54:21
1825
1
原创 获取flowable流程图资源
@PostMapping(value = "/flow/resource") public FlowResultVO getFlowResource(@RequestBody HashMap<String, String> map) throws IOException { String pId = map.get("pId"); String ...
2019-12-16 14:18:30
916
原创 Flowable的常用数据表
SELECT * FROM ACT_GE_BYTEARRAY; /*通用的流程定义和流程资源*/SELECT * FROM ACT_GE_PROPERTY; /*系统相关属性*/SELECT * FROM ACT_HI_ACTINST; /*历史的流程实例*/SELECT * FROM ACT_HI_ATTACHMENT; /*历史的流程附件*/SELECT * FROM ACT_H...
2019-12-16 09:25:23
976
原创 前端项目实现Markdown编辑器
接触Markdown是写博客时，发现Markdown的语法简洁又很全面，在写文章时可以专注于文字内容而不是排版效果，因此自己实现了将Markdown引入到前端中一、引入showdownshowdown是markdown的开源库，内置markdown的转换机制，我们直接引入到项目中即可方式1： github上下载github地址 https://github.com/showdownjs/s...
2019-10-30 09:41:33
4160
3
原创 ajax请求
一、原生ajax1.ajax请求步骤(1). 创建XMLHttpRequest对象所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象低版本IE中没有XMLHttpRequest对象，我们需要创建AtiveXObject对象let xhr;if (window.XMLHttpRequest) { x...
2019-09-06 08:57:26
139
原创 canvas实现绘画板
历时一周开发了一个简单的canvas实现的画板功能，这是在vue+elementui项目里开发的，支持画笔、橡皮擦、回退、清除、保存图片、切换颜色、设置宽度等。先看最终效果：1.我们先创建创建一个canvas元素<div class="canvas"> <canvas ref="canvas" id="canvas"></canvas></d...
2019-09-02 16:33:02
2862
9
原创 ORACLE逗号分割的字符串转多行
分割单行数据我们需要使用REGEXP_SUBSTR和REGEXP_COUNT两个ORACLE函数function REGEXP_SUBSTR(string, pattern, position, occurrence, modifier)string：需要进行正则处理的字符串pattern：进行匹配的正则表达式position：起始位置，从第几个字符开始正则表达式匹配（默认为1）occ...
2019-08-19 15:46:03
9303
2
原创 ORACLE lag和lead函数用法
一、定义lag和lead函数是用来查询当前行的某一字段的前N行和后N行的数据作为独立的列。二、用法lag(field, num, default) field为要查询的字段，num表示查询前N行数据，default表示查询数据为空时的默认值。lead(field, num, default) field为要查询的字段，num表示查询后N行数据，default表示查询数据为空时的默认值。三...
2019-07-29 18:06:29
1490
原创 前端布局之圣杯布局和双飞翼布局
圣杯布局和双飞翼布局功能相同，都是为了实现一种两侧宽度固定，中间部分宽度自适应的三栏布局，并且中间部分在DOM结构上优先，以便先行渲染。圣杯布局首先我们创建DOM结构如下<div class="container"> <div class="center">This is center</div> <div class="left"...
2019-07-29 14:42:07
259
原创 使用正则去掉字符串中的空格
首先，我们要了解正则中的这些基本规则：^匹配输入字符串的开始位置$匹配输入字符串的结束位置\s匹配任何空白字符，包括空格、制表符、换页符等等*匹配前面的子表达式零次或多次g全局匹配|替换，"或"操作// 创建一个带空格的字符串let str = ' abcde fgh ijk ';console.log(" 原字符串：" +...
2019-07-27 17:01:07
2698
原创 引入CSS的方式
1.外部样式表 将css样式封装成样式文件，并在需要的地方引入。可集中管理，便于维护（1）link标签引入 将link标签写在网页的<head></head>之间<head> <meta charset="UTF-8"> <meta name="viewport" content="width=de...
2019-07-27 11:04:58
96
原创 ORACLE统计计算
最近遇到了对一组数据进行统计计算的需求，包括平均值、总和、最大值、最小值、标准差等，代码如下：SELECT T.BUSIDATE "dimen", SUM(T.BUSI_OCCURRENCE) "sum", TRUNC(AVG(T.BUSI_OCCURRENCE), 1) "avg", /*平均值*/ TRUNC(STDDEV(T.BUSI_OCCU...
2019-07-26 11:10:39
1111
原创 Oracle使用foreach批量操作数据
1.批量新增INSERT INTO TABLENAME(FIELD1, FIELD2 FIELD3) <foreach collection="list" item="item" separator="UNION ALL" > SELECT #{item.FIELD1}, #{item.FIELD...
2019-07-09 08:47:29
8226
4
原创 Sortable.js实现可拖拽Table组件
目标vue项目中实现一个可拖拽的Table组件，并保存拖拽后的顺序安装Sortable$ npminstallsortablejs--save代码实现创建DragableTable.vue文件，定义template和props<template> <div> <Table ref="table" :columns...
2019-03-01 09:55:26
3163
2
原创 h5的draggable属性实现拖拽Tree组件
1.通过在render中给每个树节点添加domProps属性，使节点支持拖拽效果，也可以选择在父组件传入draggable属性控制树是否可拖拽domProps: { draggable: this.draggable },2.dragstart方法获取到原节点和它的父节点，drop方法获取目标节点，将原节点从父节点删除并添加到目标节点childr...
2019-03-01 09:51:56
2516
转载 理解 JavaScript 的 async/await（转载）
本文转载自SegmentFault，原作者边城https://segmentfault.com/a/1190000007535316?utm_source=tag-newest#articleHeader0随着Node 7的发布，越来越多的人开始研究据说是异步编程终级解决方案的 async/await。我第一次看到这组关键字并不是在 JavaScript 语言里，而是在 c# ...
2019-03-01 09:38:00
106
原创 使用iView的步骤条实现简易流程图
主要还是用了v-model双向绑定的概念和render函数，遗憾的是自己不怎么会改step的样式和结构，所以不能自定义流程图的样子，以后再完善吧。效果是这样滴：主要的代码部分：<Table>是图1的表格，<common-dialog>定义了一个对话框，<flow-chart>定义了对话框的内容，也就是流程图啦 <Table width="700" b...
2018-04-27 15:03:37
13080
7
原创 mybatis初体验
今天开始学习mybatis，主要对一个简单的表实现增删改查1.先在数据库中创建一个category表，包含两个字段，id和name2.定义实体类Category3.定义mybatis-config.xml<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configuration PUBLIC "-//mybati...
2018-04-27 14:34:28
151
原创 使用AJAX向服务器发送请求
1.使用xmlHTTP.responseText属性<!DOCTYPE html><html><head><meta charset="utf-8"><script> function loadXMLDoc(){ var xmlHttp; if(window.XMLHttpRequest){ //创建XMLHttp...
2018-03-29 15:24:32
575
原创 JSON和JavaScript对象的转换
最近要接触到JSON，之前只学习过xml，把练习的代码贴上来记录一下 1.获取JSON对象的属性<script type="text/javascript"> function fun1(){ var person = {"name":"laobai","age":18} var person2 = {"nam
2018-03-22 11:47:39
2145
原创 vue作用域插槽例子
前端小白捣腾了半天，官网的例子很精简但是对新手不友好啊，命名看的我云里雾里，自己简单改了一下1.App.vue<template> <div> <child :propName="items"> <!--作用域插槽也可以具名！--> <li slot="slotName" slot-s
2018-03-14 16:07:43
1156
原创 用vue.js简单实现todo-list
<template> <div> <h1 v-text="title"></h1> <!--newItem为新加入的计划，将它与输入的文本双向绑定 回车时调用addNew方法！--> <input v-model="newItem" v-on:keyup.enter="a
2018-03-14 10:14:48
320
原创 vue中使用props传值
1.静态传值（在父组件中赋值好props中属性的值传递给子组件）父组件<template> <div> <input v-model="message"> <child message="hello"></child> </div></template&g
2018-03-14 10:01:52
11340
1
原创 Linux命令之常用用户管理命令
1.useradd 命令所在路径：/user/bin/useradd 执行权限：root 语法：useradd 用户名 功能描述：添加新用户 例：useradd yangdada2.passwd 命令所在路径：/user/bin/passwd 执行权限：所有用户 语法：passwd 用户名 功能描述：
2017-05-20 16:21:07
202
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人