![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
yj小耳朵
明天又是写bug的一天,真开心!!!
展开
-
在axios中获取文件上传进度
1.在axios 全局配置的文件中加入一个postFile 方法在上传文件时调用。2.选择文件符合上传格式要求后,调用 uploadFile 上传。原创 2023-08-23 18:02:18 · 1549 阅读 · 0 评论 -
在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 · 366 阅读 · 0 评论 -
前端使用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 · 6094 阅读 · 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 · 2251 阅读 · 0 评论 -
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 · 3012 阅读 · 0 评论 -
前端理论合集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 阅读 · 0 评论 -
微信小程序之input组件setData修改值触发bindinput事件
事件原创 2020-04-20 15:35:56 · 2943 阅读 · 0 评论 -
记录个人 css 不常用样式
1.filter 滤镜属性filter:blur(px) 给图像设置高斯模糊 filter: grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0 brightness(%) 给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100...原创 2019-11-28 12:02:08 · 184 阅读 · 0 评论 -
前端理论知识合集1
1. 浏览器渲染机制浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tree)。 有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。 由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一...原创 2020-04-20 16:16:32 · 500 阅读 · 0 评论 -
父页面与子页面之间的操作以及对iframe的操作
在开发过程中,有时会遇到父页面的内容需要在子页面做更改,父页面也同时能够改变。那如何做到父页面与子页面的交互?子页面调用父页面的方法:window.parent.方法;或window.opener.方法;子页面调用父页面的变量:window.opener.变量名;或window.opener.变量获取iframe的对象:document.getElementById(iframeID)...原创 2019-09-04 09:56:30 · 527 阅读 · 0 评论 -
jquery的常用方法
val() - 设置或返回表单字段的值$('XX').val() 获取值$('XX').val(XX)设置值addClass() - 向被选元素添加一个或多个类$("#div1").addClass("important blue");$("div").addClass("important");removeClass() - 从被选元素删除一个或多个类$("p").rem...原创 2019-09-04 10:24:33 · 174 阅读 · 0 评论 -
echarts 折线统计图置样式修改
var myChart = echarts.init(document.getElementById('id')); setEchart4(); /*租赁图*/ function setEchart4(){ // 指定图表的配置项和数据 var option = { grid: { //图表绘制与上下左右的距离...原创 2019-09-17 11:10:57 · 930 阅读 · 0 评论 -
echarts柱形图内置样式修改
var myChart1 = echarts.init(document.getElementById('id')); var option = { grid: { containLabel: true, left: '5%', right: '10%', ...原创 2019-09-17 15:09:43 · 1376 阅读 · 0 评论 -
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 · 182 阅读 · 0 评论 -
关于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 阅读 · 0 评论 -
vee-validate表单验证
VeeValidate是Vue.js的验证库。功能基于模板的验证。 开箱即用的许多验证规则。 一流的本地化支持。 验证HTML5输入和自定义Vue组件。 自定义规则和错误消息。验证表达式是由管道分隔的一系列验证器的字符串|。如下:必填email字段。<input placeholder="必填" type='email' v-validate="'required...翻译 2019-06-18 10:58:54 · 984 阅读 · 0 评论 -
mui——popover 弹出菜单
第一种利用锚点弹出:html代码输入下<a href="#middlePopover"></a><div id="middlePopover" class="mui-popover"> <div class="mui-popover-arrow"></div> &...原创 2019-03-06 20:44:54 · 4612 阅读 · 0 评论 -
js控制mui-popover弹出与关闭
弹出与关闭代码相同mui('mui-popover的id').popover('toggle'); mui('mui-popover的id').popover('toggle',document.getElementById(‘指定位置’));原创 2019-03-06 20:52:35 · 4236 阅读 · 0 评论 -
阻止冒泡事件
阻止冒泡事件,点击的时候多个事件的div中,先执行子事件→父事件,可以在子事件执行完后加:return false;html:<div class="contendiv box-shadow-bottom"> <div class="flex"> <div class=...原创 2019-03-20 17:09:38 · 246 阅读 · 0 评论 -
前端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 阅读 · 0 评论 -
取消input 获得焦点时的边框
input:focus { outline: none;}outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。注释:轮廓线不会占据空间,也不一定是矩形。outline 简写属性在一个声明中设置所有的轮廓属性。...原创 2019-04-03 13:12:18 · 1436 阅读 · 0 评论 -
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 · 1948 阅读 · 0 评论 -
mui之返回上一页并刷新页面
1.在子页面加入以下代码:mui.init({ beforeback: function() { var list = plus.webview.currentWebview().opener(); //触发列表界面的自定义事件(refresh),从而进行数据刷新 ...翻译 2019-04-12 18:11:11 · 3155 阅读 · 0 评论 -
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 · 324 阅读 · 0 评论 -
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 · 1690 阅读 · 0 评论 -
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 · 9381 阅读 · 1 评论 -
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 · 1455 阅读 · 0 评论 -
js日期相关统计
在开发时有时会有按时间显示页面信息之类的要求,这篇博客记录的时,本人用到过的日期相关功能。1.获取当前月第一天getCurrentMonthFirst() { //获取当前月第一天 var date = new Date(); date.setDate(1); var month = parseInt(date.getMonth() + 1); var ...原创 2019-06-19 09:33:14 · 421 阅读 · 0 评论 -
dom 事件机制
addEventListener() 方法用于向指定元素添加事件。语法element.addEventListener(event,function,useCapture)参数值参数 描述 event 必须。字符串,指定事件名。注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。提示:所有 HTML DOM 事件...翻译 2019-06-19 15:41:15 · 158 阅读 · 0 评论 -
前端之实现页面分页
分页的样式: <ul class="pagination pagination-lg"> 上一页 1 2 3 4原创 2018-01-26 15:50:34 · 1017 阅读 · 0 评论