.native修饰符 做了什么
估计也就只有我这个憨憨一直以为native会自动将事件传给组件的input那些元素,比如按键事件啊,点击事件啊。然后,我就一直很好奇,他是怎么做到准确绑定的?然而事实上,他就是一次事件的绑定而已。<base-input v-on:focus="onFocus"></base-input>base-input<template> <div class="input-item"> <input type="text"> </div> </t...
效果图思路分析tab切换在vue中,tab的切换只需要改动tab组件的active属性即可,所以,我们只需要对点击的元素,点击后能提供一个它奴属于哪个tab选中项即可。具体就看自己的代码怎么设计,比如html元素可以使用data属性。聚焦聚焦就很简单了,input元素有focus方法,运行就会聚焦。滑动定位利用scrollIntoView方法,可以达到定位的效果,配置属性,就会有动画。element.scrollIntoView({behavior:"smooth"})MDN:Element.scrollIntoView()点击这个元素,从data属性上获取要滚动的元...
前言js有一个31k多的star的开源复制库:clipboard.js;但是一些简单复制并不想安装一个库来解决,所以就想自己写一个。copy所需要的东西Selection 对象用于获取被用户选中的部分,通过toString()方法可以获取被选中的文本内容,以及js操作选中。MDN文档:SelectionexecCommand 对象用于以命令的形式来操作网页的内容,说白了就是用它来实现复制文本操作,复制的是选中的文本MDN文档:execCommand 需要注意的是,execCommand在未来将会被遗弃,因为这个api本身是从ie浏览器那边继承的,久而久之各大浏览器都对其做了兼容,虽然...
安装的插件Atom One Dark Theme 主题Auto Rename Tag 头尾标签自动修改,改一个改一双Beautify 格式化Bracket Pair Colorizer 对象括号选择有颜色表示范围Highlight Matching Tag 选择标签自动高亮对应的结尾标签Material Icon Theme 图标Path Intellisense 路径提示,只能相对路径Version Lens 版本提示,安装完可以在打开package.json文件,在右上角有一个v按钮,点击可以查看最新版本,更新狂魔必备Vetur 用了vue还有不装这个的?Color Hig...
前言后端返回给前端的数据,有时候会是一个多层级对象,但是我们前端使用的时候,for循环遍历渲染时,多层级对象往往需要进行单独处理,因为还需要判断这个key值是否存在,否则会报错。强行让后端改变数据结构又好像不现实,无奈,只有自己处理了。掘金看到一位大佬文章《【算法】JS 实现对象的扁平化》感觉很合适,逻辑清晰。要求将对象中的层级扁平化,改成如下格式:// 实现一个 flatten 函数,实现如下的转换功能 const obj = { a: 1, b: [1, 2, { c: true }], c: { e: 2, f: 3 }, g: null, }; // 转换为 l...
adb添加至环境变量首先需要adb连接手机,adb工具需要下载:adb下载完毕后解压到磁盘位置,比如:D:/adb解压完毕后,我们需要将其设为环境变量。windows我的电脑右键属性 -- 高级系统设置 -- 环境变量 --- 找到Path --- 双击进入设置 --- 选择新建 --- 将D:/adb路径名加入,保存。重启系统。连接手机手机的驱动记得装好。手机开启usb调试模式usb连接电脑电脑打开命令工具,比如:Terminal输入:adb devices如果手机提示允许usb调试吗?,勾选允许,确认。此时命令会出现:PS C:\Users\13219> adb devices...
意图就是想图片在加载时,能显示骨架动画,然后图片加载完成,骨架动画消失。这个可以用于一些小图的加载,比如:验证码、头像、logo啥的,如果是特别大的图,建议用懒加载效果图原理指令在bind阶段,判断绑定的数据是否为trun,并且class类名不存在,添加一个class用于骨架背景动画监听绑定值得变化,如果为false,那么移除class那么如何判断图片是否加载完毕,可以使用@load事件自定义指令import "./scss/index.scss"; export default { //首次 bind(el, binding) { if (!el....
前言侧边栏导航大多数情况可能会由后端返回导航内容,第一是方便修改,第二是可以做一些菜单鉴权操作,但是这也会产生一个问题:侧边栏api请求会非常频繁如何避免这个问题,我们就需要使用缓存方案,在web中,缓存有:local,session,cookie,还有一些更复杂的就不说了,用不到。local会永久存储,这样我们刷新页面,数据以缓存优先的话,就会无法及时更新了。passcookie,spa用cookie很少了,而且他有容量限制,直接pass。那么只有session了,session会在页面关闭后自动清理,这样下次重新打开页面数据依旧可以保持最新,并且新建页面,同域名,session也是可...
vue-router升级版本后,使用$router进行跳转时,将返回一个promise对象,这其实是好事,但是除了这个,官方对报错也做了调整。这里先看一下常见一个重定向错误:为什么产生这个错误,我在谷歌查了下,有这么一个解释:这是设计使然。为什么?阅读此评论。TL;DR:假设您在页面 A,然后单击一个按钮将您带到页面 B(有点像method: goToB() { router.push('/B'); }页面 A)。但是页面 B有一个导航守卫,将您发送到页面 C。此错误是让该goToB()功能知道路由器无法完成所需任务并且用户尚未登陆的一种方式/B。这很讨厌,但信息量很...
预览图前言在刻度尺和辅助线的基础上增加键盘方向键事件,方便微调,毕竟鼠标拖拽浮动太大了。[hide]教程我们的逻辑是,用户点击图形选中,然后移动,因为我的图形都支持变形操作,所以我把键盘事件的监听放在了Transformer完成后触发。stage可以监听到click事件,所以也省去给每个图形添加。import Konva from "konva/lib/Core"; import { Rect } from "konva/lib/shapes/Rect"; import { Text } from "konva/lib/shapes/Te...
继《vue 多模块集成,每个模块为一个项目,共用依赖且独立开发,自动引入模块,导航也独立于模块,自动引入》的续章。在处理vuex持久化时,由于之前知识储备不足,没有研究出它的模块化写法。今天来完善一下。[hide]前提vuex-persistedstate不用管你的store模块是否启用了命名空间,因为他本身就是按照你vuex模块的层级配置的,也就是默认就是命名空间层级,所以:plugins: [createPersistedState({ reducer(val) { return { user: { token: val.user.token ...
在默认初始化好的vue cli项目,public目录下的index.html文件,他的title使用的是一种ejs语法:<title><%= htmlWebpackPlugin.options.title %></title>接收的是htmlWebpackPlugin对象上,options的title。一般情况,省事一点,直接把这个title给改成静态就完事了!<title>静态标题</title>但是,好像少了点什么,能不能不改动这个就能改标题呢?当然是可以的,我们需要配置下vue.config.jsvue.config.js...
问题多页面打包后,生成的script.php中包含了所有页面的js文件引入多页面打包后,生成的css.php中包含了所有页面的css文件引入解决方案个人判断是再new HtmlWebpackPlugin进行处理的时候出现了问题,他无法分辨被打包的页面是谁的。那么在HtmlWebpackPlugin中唯一区分的属性,就是chunks。但是在官方文档中,并没有声明他的类型。然后百度的文章,有两种:chunks:"xxxx"chunks:["xxxx","xxxx"]根据以往的经验,第一种应该是用于唯一值得情况,如果有多个则使用数组,...
今天啃了下官方文档,加上之前也配置到webpack的,有一些经验,我觉得官方可能有对应的方式,毕竟在webpack中我们只需要在sass-loader配置中就可以加入全局scss了,都不用安装啥插件。于是乎,果然,官方有,但是文档很蛋疼,你能看懂引入单个全局,没有多个全局的示例,索性自己写个笔记了。vue.config.jsmodule.exports = { css: { loaderOptions: { scss: { prependData: ` @import "~@/base/assets/scss/glob...
前言作为一个前端菜鸡,理解上可能会有诸多不对的地方,望大家指正,本篇文章也是本人这几天苦思冥想的结果,也不能保证所说全对,也算是抛砖引玉了,期待大佬们的指正。简单了解Render饿了么的折叠动画源码位于:src/transitions目录下,gayhub地址:链接由于内容不多,我直接贴出来源码:import { addClass, removeClass } from 'element-ui/src/utils/dom'; class Transition { beforeEnter(el) { addClass(el, 'collapse-t...
我们有两种方式获取,一种是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...
最近评论