- 博客(45)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue3+TS中使用WangEditor 5 使用记录
可以使用Boot.registerModule() 方法，在实际使用时，需要判断一下是否已经注册过某项自定义工具，注册过不再重复注册。可用getAllMenuKeys判断。例如需要判断Rewrite，可以打印以下代码查看结果文字和图标二选一，当需要的时图标+文字时，考虑把文字和图标做成一个图标，然后再去调样式可使用官方文档提供的两个通过 type 获取编辑器的 element 列表的API，getElemsByTypePrefix和getElemsByType来实现。
2024-03-07 09:58:58
640
原创 在axios中获取文件上传进度
1.在axios 全局配置的文件中加入一个postFile 方法在上传文件时调用。2.选择文件符合上传格式要求后，调用 uploadFile 上传。
2023-08-23 18:02:18
1565
原创 用fingerprintjs2.js 生成浏览器标识
fingerprintjs2.js是一个生成浏览器指纹标识的库。可以预先新建一个文件，将获取标识的方法写成公共的，方便在任何地方调用。新建名为myFingerprintjs2的js，js中引入fingerprintjs2.jsimport Fingerprint2 from 'fingerprintjs2'开始封装公共方法export function requestIdleCallback2() { return new Promise((resolve) => {
2022-01-28 10:09:21
3694
原创 使用canvas 绘制象棋棋盘
先看效果图吧O(∩_∩)O哈哈~代码在这里<!dOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>绘制象棋</
2021-04-27 18:07:34
733
原创 在vue中使用echarts,实现代码复用
开发中一般都会选择echarts来绘制图表，使用也很方便。安装echartsnpm install echarts --save// 或者cnpm install echarts --save引入 ECharts在main.js中引入import echarts from 'echarts'Vue.prototype.$echarts = echarts渲染器的使用默认使用 Canvas 渲染，Canvas 更适合绘制图形元素数量非常大。如果想使用 SVG 渲染，代码中须包括有 S
2021-04-26 11:47:56
368
原创 前端使用ali-oss实现文件上传到oss
ali-oss安装依赖 npm/cnpm install ali-oss --save创建自己的ossClient.jsconst OSS = require('ali-oss');export default function Client(data='custom-data') { // console.log('bucket',data) return new OSS({ region: "custom-region", accessKeyId: "cus
2021-04-21 17:05:54
6104
5
原创 敲好用的图片压缩工具image-conversion
image-conversionimage-conversion下载依赖npm/cnpm i image-conversion --save封装成单独的文件img-util.js const imageConversion = require("image-conversion") /** * file:文件 * config:{ //压缩配置 * size Number 指定压缩大小 * scale Number 相对于原始图像的缩放比例，范围0-10
2021-04-20 18:09:02
2257
原创 微信开发标签-wx-open-launch-app
写在前面的话开发标签说明引入jsdk在vue中使用今天，你的小伙伴找你帮忙砍价了吗？人生不如意之事十有八九，踩坑记文又增加了。在微信浏览器中打开打一个H5页面后，要能打开指定App。因微信限制问题，可以采取其他办法。比如在H5中引导用户在浏览器中打开链接，或者才有微信官方提供的方法。还是进入正题吧。。。。。开发标签说明wx-open-launch-app是用于页面中提供一个可跳转指定App的按钮。属性名称必填默认值备注appid是所需跳转的AppID
2021-04-14 17:06:23
894
原创 vconsole的使用
vconsole用于移动网页的轻量级，可扩展的前端开发人员工具。特别在移动端调试的时，能够更方便的查看控制台日志、查看网络请求、查看文件元素 …在.html 中使用，需在<head></head> 加入以下代码<script src='https://cdn.bootcss.com/vConsole/3.2.2/vconsole.min.js' type="text/javascript" charset="utf-8"></script><
2021-04-14 17:03:25
3015
原创 前端理论合集2
1.vue 中MVVM的理解？答： MVVM就是Model-View-ViewModel 。 Model就是数据模型（亦指数据层）可以是我们固定死的数据，也可以是来自服务器请求来的数据。View就是页面DOM（亦指视图层）主要就是向用户展示信息的。ViewModel 在vue中就是指vue实例（亦指数据模型层）充当View与Model之间通信的桥梁 。2.vue生命周期的作用是什么？答...
2020-06-10 15:41:15
262
原创 在vue中以组件的方式写一个自定义加载框
加载框基本样式和逻辑<template><div class="my_loading_box" v-if="loading_show"> <div class="l-wrapper"> <!-- viewBox 可调整加载样式大小 --> <svg viewBox="0 0 120 120"> &l...
2020-04-28 10:39:40
435
原创 Element 之DatePicker 时间选择器
简单记录日期选择器， 日期间隔60天的时间选择器逻辑处理html<el-form-item label="开票时间"> <el-col :span="11"> <el-form-item prop="SatrtTime"> <el-date-picker t...
2020-04-28 10:27:59
686
原创 前端理论知识合集1
1. 浏览器渲染机制浏览器采用流式布局模型（Flow Based Layout） 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了渲染树（Render Tree）。 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。 由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一...
2020-04-20 16:16:32
500
原创 记一次使用css 实现斜线表头
相关代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>斜线表头</title> <style type="text/css"> * { padding: 0; margin: 0; } ...
2020-01-08 10:18:53
1077
原创 记录个人 css 不常用样式
1.filter 滤镜属性filter:blur(px) 给图像设置高斯模糊 filter: grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0 brightness(%) 给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100...
2019-11-28 12:02:08
184
原创 css 动画学习
animation: name duration timing-function delay iteration-count direction fill-mode play-state;参数说明：name要绑定到选择器的关键帧的名称duration :动画在多少时间内完成timing-function：动画播放速度animation-timing使用的数学函数，称为三次贝塞尔曲线，速...
2019-09-29 17:04:28
184
原创 echarts柱形图内置样式修改
var myChart1 = echarts.init(document.getElementById('id')); var option = { grid: { containLabel: true, left: '5%', right: '10%', ...
2019-09-17 15:09:43
1378
原创 echarts 折线统计图置样式修改
var myChart = echarts.init(document.getElementById('id')); setEchart4(); /*租赁图*/ function setEchart4(){ // 指定图表的配置项和数据 var option = { grid: { //图表绘制与上下左右的距离...
2019-09-17 11:10:57
930
原创 jquery的常用方法
val() - 设置或返回表单字段的值$('XX').val() 获取值$('XX').val(XX)设置值addClass() - 向被选元素添加一个或多个类$("#div1").addClass("important blue");$("div").addClass("important");removeClass() - 从被选元素删除一个或多个类$("p").rem...
2019-09-04 10:24:33
175
原创 父页面与子页面之间的操作以及对iframe的操作
在开发过程中，有时会遇到父页面的内容需要在子页面做更改，父页面也同时能够改变。那如何做到父页面与子页面的交互？子页面调用父页面的方法：window.parent.方法;或window.opener.方法;子页面调用父页面的变量：window.opener.变量名;或window.opener.变量获取iframe的对象：document.getElementById(iframeID)...
2019-09-04 09:56:30
527
原创 viewerjs图片查看的使用
viewerjs是一个可以快速实现图片预览的插件。官网demo地址：https://fengyuanchen.github.io/viewerjs/准备需要的文件：viewer.min.js jquery-viewer.min.js viewer.min.css jquery.min.js 引入文件 使用方法：$(document).ready(fun...
2019-08-22 16:08:50
1217
翻译 关于vue-cli工程
用于构建vue的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？1、vue.js：vue-cli工程的核心，主要特点是双向数据绑定和组件系统。2、vue-router：vue官方推荐使用的路由框架。3、vuex：专为 Vue.js 应用项目开发的状态管理器，主要用于维护vue组件间共用的一些 变量 和 方法。4、axios（ 或者 fetch 、ajax ）：用于...
2019-07-03 16:07:42
521
原创 javascript的setTimeout运行机制
console.log(1);setTimeout(function() { console.log(2);},0);new Promise(function(resolve, reject) { console.log(3); for(let i = 1; i <= 100000; i++) { if(i === 100000) { resolve(); ...
2019-07-03 14:07:41
1093
1
翻译 dom 事件机制
addEventListener() 方法用于向指定元素添加事件。语法element.addEventListener(event,function,useCapture)参数值参数 描述 event 必须。字符串，指定事件名。注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。提示：所有 HTML DOM 事件...
2019-06-19 15:41:15
158
原创 js日期相关统计
在开发时有时会有按时间显示页面信息之类的要求，这篇博客记录的时，本人用到过的日期相关功能。1.获取当前月第一天getCurrentMonthFirst() { //获取当前月第一天 var date = new Date(); date.setDate(1); var month = parseInt(date.getMonth() + 1); var ...
2019-06-19 09:33:14
427
翻译 vee-validate表单验证
VeeValidate是Vue.js的验证库。功能基于模板的验证。 开箱即用的许多验证规则。 一流的本地化支持。 验证HTML5输入和自定义Vue组件。 自定义规则和错误消息。验证表达式是由管道分隔的一系列验证器的字符串|。如下：必填email字段。<input placeholder="必填" type='email' v-validate="'required...
2019-06-18 10:58:54
984
翻译 vue-awesome-swiper 轮播--动态数据 循环失败解决办法
问题描述:在开发过程中可以选择各种轮播插件来实现轮播功能。在使用vue-awesome-swiper 这个轮播插件时，动态绑定的数据后不可循环。轮播功能描述：1.在界面中显示3张图片2.选中的图片在中间其放大显示3.循环轮播、不自动轮播4.默认选中第一张图片5.切换图片时，获取对应图片的下标list: [], //页面所有数据//轮播设置swipe...
2019-06-18 10:01:10
675
原创 js 实现复制粘贴功能
var result = "";var textarea = document.createElement('textarea');//textarea.style.position = 'absolute';//textarea.style.left = '-1000px';//textarea.style.top = '-1000px';textarea.value ...
2019-06-06 09:37:48
158
翻译 vue-router之页面跳转
除了使用<router-link>创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。router-link的用法： <router-link to="/foo">Go to Foo</router-link>代码实现router.push(location,onComplete?,onAbort...
2019-05-31 11:47:35
1457
翻译 vue-awesome-swiper 轮播
1.安装 npminstallvue-awesome-swiper 或者 cnpm inatall vue-awesome-swiper 2.引入全局引入main.js import vueSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' //引入样式组件引入方式...
2019-05-25 16:10:13
327
原创 vue 判断多个input 是否为空
vue 判断页面所有input的值不等于空，提交的时候并给出提示，1.html<input placeholder="必填" alt="开户支行" v-model="bank_branch" :value='bank_branch' />2.js//获取页面所有的inputvar els = document.getElementsByTagName("input"...
2019-05-18 18:46:42
9385
1
原创 vue 实现评价功能
html 代码<div class="star-48" id="deliveryStar"> <span class="on" :id="'deliveryStar'+index" @click="setPF('deliveryStar',index)" v-for="(deliveryStar,index) in starCount" :key="'deliverySt...
2019-05-18 18:39:09
1693
翻译 mui之返回上一页并刷新页面
1.在子页面加入以下代码：mui.init({ beforeback: function() { var list = plus.webview.currentWebview().opener(); //触发列表界面的自定义事件（refresh）,从而进行数据刷新 ...
2019-04-12 18:11:11
3157
原创 iframe里弹出的层显示在整个网页上
1.在子页面中做好弹窗布局以及css，备用.showPopup{ position: fixed;top: 0;background-color:rgba(0,0,0,0.3) ;width: 100%;height: 100%;}.showPopup>.Popupcotent{ position: fixed; top: 47%;width:500px;left:20%;he...
2019-04-03 13:44:03
1949
原创 取消input 获得焦点时的边框
input:focus { outline: none;}outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。注释：轮廓线不会占据空间，也不一定是矩形。outline 简写属性在一个声明中设置所有的轮廓属性。...
2019-04-03 13:12:18
1436
原创 前端js（vue）实现国际化
1.创建自己的语言包(Language.js)，并引入界面。2.语言种类定义json格式，如中文(zh)，英文(en)，韩语(ko)。var zh={button:{lg:"XX",}page:{index:{lg:"",}}}3.为语言定义一个初始值。var languague = zh;4.定义一个函数获取语言。var getLangu...
2019-03-29 14:28:23
1141
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人