广告
广告
广告
我们有两种方式获取,一种是new Date()得到时间对象,一种是Date函数对象静态方法获取。new Date()与Date的区别就是,前者是构造函数,后者是函数对象,函数对象返回的,只是我们需要的值,他不会有Date对象的内置方法(prototype),所以,它的使用更简洁明确,但是如果我们想要获取时间的年份,月份,星期几,那么new Date()才是最好的选择。new Date() 获取const date = new Date(); //没有传入参数获取当前本地时间 date.getTime(); //1626746413673 date.valueOf(); //1...
图形的加载在konva中,有两种方式加载图片,其原理都是需要加载图片dom,等图片完全加载完成再置入canvas中,官方的例子是这样的:var imageObj = new Image(); imageObj.onload = function() { var yoda = new Konva.Image({ x: 50, y: 50, image: imageObj, width: 106, height: 118 }); // add the shape to the layer layer.add(yoda); laye...
预览图前言之前出了刻度尺的教程,刻度尺有了,但是单一的存在功能并不直观,我们还需要辅助线功能,不多说,开搞[hide]教程添加辅助线逻辑稍微辅助一些,我们需要监听拖拽事件,但是如果监听每个图形的拖拽事件,那是非常不靠谱的想法,300个图形就有300个事件监听,显然不合理,好在konva的layer对象,是可以监听到所有可拖拽对象的拖拽事件的,我们不需要给每个图形添加,只需要监听layer即可。拖拽事件:dragstart 拖拽开始事件dragmove 拖拽中dragend 拖拽结束拖拽事件,我们可以通过event对象获取到被拖拽的目标图形:this.$layer.on("d...
预览图前言在使用konva库做图形拖拽的时候,你会发现konva没有提供刻度尺和辅助线的功能,导致你不知道你拖拽的实际坐标,这就很难受了,在谷歌百度查教程的时候,看见官方之前就给予过类似问题的回应。问题issues:How to add a ruler for konva官方回应(翻译):如果你需要这样的形状,就画画。作为文本 + 多行,或自定义形状(以获得更好的性能)既然搜索引擎和官方都没有类似的答案,我们就自己来。先搞定刻度尺问题。[hide]教程既然要画尺子,我们就要想怎么画,如果按照生活中的尺子,1cm一个竖线,我们1px一个竖线肯定是不行的,我的做法是,反正宽高很大,就5px一...
一般出现这个问题,肯定大部分人都是使用default-passive-events插件。但是随着项目的扩大,default-passive-events难免会和其他插件产生冲突,比如canvas库konvajs。在使用konvajs和default-passive-events后,肯定会报:拖拽时Unable to preventDefault inside passive event listener invocation.没办法,我们只能禁用default-passive-events插件我们新建一个polyfill.js文件polyfill.js/* * @Author: mul...
高亮问题由于侧边栏可能不会把所有的路由name都丢上去展示,常常是展示一个父级菜单名,子路由菜单作为页面内的导航啥的。常见的场景: 详情页为此,我们路由名与侧边栏导航菜单的name相对应的处理就不太行了。常见的做法就是在路由的meta里面添加一个activeRoute配置,里面标明需要高亮的侧边栏name那么这个activeRoute怎么配置呢?我个人觉得应该遵循父级优先的概念,如果子路由设置了,但是父级路由也设置了,那么以父级为准,也就是最上层路由为准,这样子集直接可以随便切换,不会影响侧边栏高亮,因为他有父级。那么如果没有父级,就使用自己遵循这个原则,我们对el-menu的defau...
由于最近ios收税政策的影响,ios的h5支付已经不行了,所以,这里讲的是我对接安卓端h5支付的那些事情。[hide]当我们给后端提交一个订单请求的时候,这个请求的内容具体要看后端是怎么设置的,这个和h5支付对接没有直接关系。提交订单后,后端回返回一个用于支付的链接,这个链接对应于微信h5支付文档中这里:文档链接:微信h5支付开发文档可以看到,这个链接是一个http开头的,实际测试中,通过a元素,然后打开这个链接,是可以直接调用微信的付款的,所以,这其实就是一个普通的超链接而已。(当然,坑也在这里)在这个链接的末尾,他是有一个参数的:redirect_url这个参数用于,用户支付成功或者...
正常情况下,如果想让左侧黄色20px的元素右侧与父元素齐平,父元素100px,我们的算法是这样://100px - 20px transform: translateX(80px);x轴移动80px即可达到效果,但是如果我们同时使用scale放大,那么80px就不对了。transform:scale(2) translateX(80px);放大两倍后,你会发现平移的距离不对了。为什么?平移的距离明明就是70px啊!不着急,我们先看看不使用translateX平移,使用margin-left移动到与父元素右侧齐平再放大是什么样的。transform: scale(2); margin-le...
图片处理yarn add url-loader file-loader --dev很多人教程都莫名其妙,一张嘴就说推荐使用url-loader解析器,但是闭嘴不提url-loader是基于file-loader的,所以用url就必须两个都装,否则一旦你设置了url的limit限制文件大小,文件超出设置得大小后,就会报file-loader不存在的错误。webpack.config.jsmodule.exports = (env, argv) => ({ //模块-解析器loader module: { rules: [ //图片文件 { ...
初始化安装yarn init yarn add webpack webpack-cli --devwebpack建议全局安装,省事yarn global add webpack webpack-cli如果不适用全局安装,直接在终端运行本项目的webpack需要使用npx命令npx webpack -v还有一个种办法就是在package.json创建快捷npm脚本,这样就不用加npx前缀了{ "scripts": { "build": "webpack" }, }使用scssyarn add style-loade...
原理也没啥好藏着掖着的,就是为了保证密码难度,开头的字符一定是满足安全需要的,比如要求大小写数字加特殊字符,那么开头四位就一定是:大写一位、小写一位、数字一位、特殊字符一位;然后剩下的随机。/** * @description: 随机密码 * @param {*} len 密码位数 * @param {*} mode 密码难度:hide(大小写数字特殊字符)、medium(大小写数字)、low(小写数字) * @Date: 2021-07-02 15:52:32 * @Author: mulingyuer */ export const randomPass = functi...
简单说下使用场景,你使用一个dialog组件,弹窗时要加载数据,关闭后要清理数据,以防下次使用报错或者数据残留,如果在data中写了过多的属性,或者层级很深的引用对象啥的,为了方便还原,你可能会一个个的写。onClose() { this.xxx = xxx; this.xxx.xxx = xxx; this.xxx.xxx = xxx; this.xxx.xxx = xxx; }对多个值进行赋值操作。但是,这样实在是太难了,有没有一种简单的方法,就像表单重置一样。答案当然是有的:onClose() { Object.assign(this.$data, this.$...
使用canvas操作内容后,如果想保存图片之类的操作,就无可避免的要处理这一步,因为canvas导出的是base64格式的文件,如果你只做预览还好,存储的话,就要想办法了。我的想法是转成上传文件的那种file格式。方法如下:/** * @description: 将base64转换为文件对象 * @param {*} dataUrl base64 * @param {*} fileName 文件名 * @Date: 2021-06-30 14:33:47 * @Author: mulingyuer */ export function dataURLtoFile(dataUr...
按需加载,在gzip面前根本不值一提,当然,该优化还是要优化,所以在使用了lodash-webpack-plugin插件后,在使用个别方法后就会出现问题,比如:unionBy;原因按需加载的插件,它的按需就是将你调用的方法单独提取出来,但是,如果提取的方法里面还用了其他方法,他可能无法识别,导致方法缺失,所以就会报错。报错代码<script> import _ from "lodash"; export default { methods: { test(arr){ return _.unionBy(arr, "key&...
nuxt嘴上说很快,但是其实热编译是很慢的,很墨迹,和vue cli这种对比起来,差了很多,经常改动一点东西想要看效果,编译要等一段时间。今天无聊去看了下nuxt模块库,看到这么一个插件:nuxt-build-optimisations有点牛皮,使用后,热编译速度肉眼可见的提升,官方的介绍说可以提升2-5倍的速度,实际测试中,冷启动速度没太大感觉,但是热编译速度确实是很满意。特此推荐!用法yarn add nuxt-build-optimisations安装完毕去nuxt.config.js里面激活模块export default { buildModules: ['nux...
预览图类源码/* * @Author: mulingyuer * @Date: 2021-06-21 11:29:12 * @LastEditTime: 2021-06-21 18:39:31 * @LastEditors: mulingyuer * @Description: canvas * @FilePath: \form-create\src\utils\canvas.js * 怎么可能会有bug!!! */ class Chart { constructor(options) { const defaultOptions = { el:...
问题当通过Tooltip组件,click事件触发抽屉或者弹窗功能时,Tooltip的hover效果,会在抽屉和弹窗功能关闭后又再次触发显示。bug图解决思路我估计是因为遮罩层的问题,导致元素的事件监听不到鼠标离开,导致关闭弹窗后,浏览器又自动选中了。所以我的解决办法很简单,找到那个触发hover效果的dom元素,对他进行离开事件触发即可。<el-tooltip effect="dark" content="通知" placement="bottom"> <a href="javascr...
主要问题还是因为样式的问题,实际上嵌套的el-form如果正确配置了数据,如:model、rules、prop,那么如果rules里面没有配置必填,那么是不会有必填的效果的,只是因为受到父组件必填的样式影响。我们先看下官方的选择器:.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:befor...
在nuxt中,有一个专门的axios版本:@nuxtjs/axios;但是由于nuxt的文档,或者说是资料不是很齐全(零散),初步了解后觉得这个插件并不是很方便,很多时候,我们都是模块化的axios写法,在使用@nuxtjs/axios时,会发现有点束手束脚,于是转而放弃使用,而是单独引入axios,然后一顿操作。当我们单独封装axios的时候,有没有这种想法:报错了能不能跳转到nuxt的错误页面?;但是实现时发现,除了在asyncData这些方法里面可以解构到error对象然后利用它跳转,好像在单独的一个js文件里面,没办法直接跳转。但是,如果我们使用@nuxtjs/axios,那么我...
最近遇到这么一个需求,就是内容一行显示,滚轮滚动的时候,进行横向滚动。本来想尝试下css能不能做到,最后发现,即便改变了流的布局,并不能改变滚动条的方向,最后还是只能用js做了。滚动兼容性滚轮只存在pc的时候,所以触摸事件是不考虑的,触摸的话可以直接用better-scroll插件。滚动事件需要兼容火狐和谷歌:火狐滚动事件:DOMMouseScroll谷歌滚动事件:mousewheel其中DOMMouseScroll的event对象,他有一个detail字段,向下滚动是3,往上滚动是-3mousewheel的event对象是deltaY,往下滚动是125,往上是-125,具体数值记不清了...
莫名其妙就提示css冲突和顺序问题,而且组件里面的样式和class类名完全不相干,不知道怎么就给你冲突了。顺序都有点莫名其妙,这玩意谁先谁后都无所谓啊。看了好半天github上的issues也没有谁说出个所以然,反正就是大量的警告,18年就有人提出这个问题了,唉,头疼issues目前普遍的解决办法就是忽略这个警告,因为不是真的影响代码的运行。忽略警告打开vue.config.js文件夹,插入以下代码:module.exports = { css: { extract: { ignoreOrder: true }, }, }保存,然后重新打包,不会再提示 冲突和顺序问题了
本来是一个很简单的需求:const a = { b:1 }本来我的需求是判断,这个a对象里面b是否存在,但是b的值不确定,他可能是布尔值false,也可能是数字0,或者是空字符。那么if(a.b)就不太行了,一般来说,老前端一般都是用in 操作符。"b" in a; //true但是es6后,一般来说,不建议这样使用的,同时不建议的还有delete操作符。于是问了下群友,因为我记得es6有那么一个方法,可以判断一个对象的属性是否存在,并且不会去查prototype上的内容。但是我忘了啥名字来着!const a = { b:1 } a.hasOwnPrope...
这个奇葩的问题,搞得我人都傻了,怎么软件内置的浏览器不能上传文件呢???就离谱!一开始我以为是软件的安全限制,后来发现不对,为什么别人的网页可以上传??[hide]解决方法把input的accept属性去了就行了<input type="file">去掉了accept,就没办法限制文件类型了,只能前端js做判断,我就顺带提供一个vue中使用的限制方法。前端限制文件类型方法假设我们data中有一个accept属性,他是一个数组,表示允许上传的文件类型<script> export default { data(){ return { ...
以前写过一个关于自定义评论的文章,时至如今来看,还是有很多不足的,昨晚再新写主题的时候,也重新写了一次自定义评论,嗯,有了新的理解,因为其实真的很简单,仔细阅读本篇文章,相信你会有收获的。[hide]自定义评论模板到底要怎么做很简单,可以理解为两步:编写自定义评论的模板通过php渲染出自定义模板评论而为什么大多数人不会,其实就是因为官方的文档真的是,如果懂php的人,可能看了一两遍后明白了怎么回事,但是如果是小白入门,纯前端的童鞋,可能看的一脸蒙蔽。就算是原封不动的copy官方的示例代码也还是会报错,心累...因为,你不知道他要做什么,我编写了自定义模板函数threadedComment...
最近评论