VUE.JS
玫瑰花开一片一片
这个作者很懒,什么都没留下…
展开
-
吸管工具,canvas模拟吸管工具,吸取图片中的颜色值 vue.js 颜色值 转换
【代码】吸管工具,canvas模拟吸管工具,吸取图片中的颜色值 vue.js 颜色值 转换。原创 2023-02-14 15:39:25 · 836 阅读 · 1 评论 -
如何在点击外部按钮时让输入框不失去焦点不失去选择焦点
一.点击其他区域,input输入框不失去焦点。原创 2022-10-07 16:58:17 · 2483 阅读 · 0 评论 -
handsontable 给单元格设置下拉 菜单
handsontable 可以扩展 render 和编辑功能,当然自己扩展还是很麻烦的。按照官方的例子会出现 一列都有同样的下拉菜单数据。并且右键菜单也不可以向右/左添加列。我们可以通过 加个右键菜单,动态给某个单元格添加 上述的各种类型 包括 下拉菜单。例子都是以 hotSettings -> columns 进行展示的。这样就可以 进行扩展了 ,例如增加个弹窗动态增加 下拉菜单内容。而我们的需求是 针对某个单元格进行 单独单独设置下拉菜单。默认给了这么几种单元格类型。原创 2022-09-29 16:07:10 · 1908 阅读 · 0 评论 -
前端JS 图片裁剪,Canvas,原生方法
【代码】前端JS 图片裁剪,Canvas,原生方法。原创 2022-09-23 15:21:04 · 346 阅读 · 0 评论 -
js 取两个数字的中间数
var s = 21;var t = 8;var m = (s & t) + ((s ^ t) >> 1);console.log("num",m); //输出:m=14原创 2022-04-25 16:42:27 · 1521 阅读 · 0 评论 -
如何发布自己的npm 包
npm 包发布原创 2021-11-26 09:17:39 · 535 阅读 · 0 评论 -
vue-render 使用方法
目的:Vue 推荐在绝大多数情况下使用模板(template)来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。render函数是什么:简单的说,在vue中我们使用模板 (template)语法组建页面的,也可以使用 Render函数利用js语言来构建DOM因为Vue是虚拟DOM,所以在拿到(template)模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程..原创 2021-04-20 12:53:46 · 3160 阅读 · 0 评论 -
移动端UI
小伙伴们平时开发vue,react或是angular项目,都喜欢使用的什么UI组件库呢?今天,就来盘点下,几个热门优质的Vue.js移动端UI组件库。1、Mint UI饿了么开源的移动端UI组件库,基于vue.js的移动端UI框架,包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需求。http://mint-ui.github.io/https://github.com/ElemeFE/mint-ui特性Mint UI 包含丰富的 CS...转载 2021-03-09 15:25:10 · 619 阅读 · 0 评论 -
过滤 区域间数据
data: testList: [ { line: 0, len: 15, from: 1, to: 15 }, { line: 1, len: 16, from: 16, to: 31 }, { line: 2, len: 6, from: 32, to: 37 }, { line: 3, len: 24, from: 38, to: 61 }, { line: 4, len: 72, from: 62, to: 13.原创 2021-01-31 16:54:09 · 117 阅读 · 0 评论 -
自适应浏览器宽度陈列 组件 - vue 可配置不同分辨率 显示列数
组件使用预览:<template> <display-content :column="{ '500': 3, '1000': 5, '1400': 8 }"> <display-item v-for="item in 20" :key="item" class="loops"> 自定义内容区域 {{item}} </display-item> </display-content>&l原创 2021-01-26 16:37:20 · 679 阅读 · 0 评论 -
vue - codemirror 点击对应标签查找 结束标签 位置
template :<codemirror :value="code" @cursorActivity="cursorActivity"></codemirror>import:import CodeMirror from 'codemirror/lib/codemirror'methods: cursorActivity (cm) { let cur = cm.getCursor() let range = cm.ge...原创 2021-01-26 16:12:29 · 806 阅读 · 0 评论 -
用js 设置网页快捷键
document.onkeydown = onKeyDown let that = this // 快捷键 function onKeyDown () { if ('router-path' === optionName) { if (window.event.ctrlKey && window.event.shiftKey && (window.event.keyCode == 71)) { that.原创 2020-08-05 16:20:10 · 761 阅读 · 0 评论 -
vue-cli3 创建 使用iview定制主题 javascriptEnabled 找不到该配置项 问题
vue.config.js 配置javascriptEnabled 后依然报错css: { loaderOptions: { less: { javascriptEnabled: true } } }ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match th.原创 2020-05-21 15:09:53 · 1784 阅读 · 1 评论 -
vue 在 任意方法中 自定义 创建一个render 方法
示例:<template> <div> <div v-html="customRender()"></div> <!-- <div>自定义</div> --> </div></template>methods: { customRender (...原创 2020-04-28 16:36:40 · 1241 阅读 · 1 评论 -
Vue 过滤方法 数字补零
Vue.filter('allFilter', (value = '') => { if (!['[object Number]', '[object String]'].includes(Object.prototype.toString.call(value))) { return value } let num = value.toString().replace...原创 2020-04-07 16:52:43 · 4095 阅读 · 0 评论 -
vue 指令 保留两位小数 正数 不能为负数
directives: { num: { update: function (el) { let oinput = el.children[0].lastElementChild console.dir(oinput) if (oinput) { oinput.value = oinput.value.re...原创 2020-03-27 16:38:13 · 930 阅读 · 0 评论 -
JS兼容所有浏览器获取浏览器高度和宽度/ 各种宽高代表意思/ 监听窗口变化
监听窗口变化// 监听窗口变化 window.addEventListener('resize', () => { this.clientHeight = document.documentElement.clientHeight || document.body.clientHeight; })获取浏览器宽高(兼容)var w = wi...原创 2020-03-26 16:10:17 · 362 阅读 · 0 评论 -
数组 filter、some、map、foreach 方法的作用
ECMAScript5为数组定义了5个迭代方法。every()、filter()、forEach()、map()、some()。这5个方法都接收两个参数:运行的函数和运行该函数的作用域对象this的值。循环(loop),指的是在满足条件的情况下,重复执行同一段代码。比如,while语句。迭代(iterate),指的是按照某种顺序逐个访问列表中的每一项。比如,for语句。遍历(trave...原创 2020-03-24 15:49:28 · 159 阅读 · 0 评论 -
JS 判断数组里的 数据 | 内容 是否相同 相等
1. 遍历 方法let arr = ['success', 'success', 'success', 'error', 'success' ]isEqual (arr = []) { let flag = true arr.forEach((element, index) => { let nextIndex = index + 1 let next...原创 2020-03-24 15:08:21 · 6160 阅读 · 1 评论 -
js 数组去重 以及 数组中得对象去重方法
1.数组去重let arr = [1, 1, 1, 2, 2, 4, 4, 5]let endArr = [...new Set(arr)]endArr // [1, 2, 4, 5]2. 数组中的对象去重let removeDuplicateObject = (arr) => { let temp = arr.map(item => JSON.stri...原创 2020-03-24 13:01:37 · 157 阅读 · 0 评论 -
js 中 拷贝对象原生方法 Object.assign({}, this.data)
(以下场景 vue开发)js中 对象复制 并不是拷贝新对象 而是 把同一个内存地址 指向不同的变量!这样在日常开发中提供了 很大的便利! 但在某些场景下 就变成了 BUG目前我 常用方法 有两种1. 用以下方法 转一次 再重新赋值 便可以脱离 内存地址的绑定 也就是克隆了一个新的对象,但有个问题 对象长度 过大,或一些不明原因 会导致 转换报错JSON.strin...原创 2020-03-02 09:02:40 · 1697 阅读 · 0 评论 -
vue 模拟鼠标右键菜单
1. 安装插件github地址 https://github.com/ShengChangWei/e-vue-contextmenunpm ie-vue-contextmenu2. 在main.js 中全局 注册组件, (也可以局部注册)import EVueContextmenu from 'e-vue-contextmenu'Vue.use(EVueContext...原创 2020-02-26 14:36:49 · 1143 阅读 · 0 评论 -
vue render 函数 如和创建 html 注释节点, 如何创建文本节点
最近在研究一个自动化项目, 让使用者可以直接编辑网页上得模块 (用 Vue 写的)项目业务1.首先 从数据库 获取 head 和 body 的innerHTML 文本2.然后用 递归 循环 head ,body 的所有节点 其中包括 注释节点, 转换成 render 函数节点 (期间添加N多个自动化方法),这样就可以在vue 中渲染页面实现想要 自动化的功能render 函数参数...原创 2020-01-22 14:01:23 · 2295 阅读 · 0 评论 -
js查找 对象,json 中的值是否存在 ,深层查找,并返回该参数 (ES5语法)
测试数据:let obj = { name: 'lee', info: { age: '18', set: [0, { aa: 'zz' }, 2] } }方法:// 方法function getter(obj, arr) { return arr.length === 0 ? obj : getter(typeof obj === 'undefined' ? unde...原创 2020-01-17 13:39:41 · 1846 阅读 · 0 评论 -
mapState 用法
store代码:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }...原创 2020-01-14 17:03:30 · 848 阅读 · 0 评论 -
拆分数组 形成二维数组
拆分数组let setChunk = function (Arr, num){ class Chunk { constructor (list, num) { this.list = list || [] this.num = num || 2 this.end = [] } ...原创 2020-01-14 15:23:12 · 399 阅读 · 0 评论 -
es6中 数组的flat() 与 flatMap() ,map() 使用方法
把嵌套数组拉平,该方法返回一个新数组,对原数据没有影响。[1, 2, [3, 4]].flat()// [1, 2, 3, 4]flat(num) 需要拉平几层 数组,按顺序排列, 默认 是 1[1, 2, [3, [4, 5]]].flat()// [1, 2, 3, [4, 5]][1, 2, [3, [4, 5]]].flat(2)// [1, 2, 3, 4, 5...原创 2020-01-02 15:31:20 · 1340 阅读 · 0 评论 -
JS中Map的用法
JS中Map的用法var map = new Map();设值map.set("key","value");取值map.get("key");判断key是否存在map.has("key"); 删除keymap.delete("key");原创 2020-01-02 15:24:26 · 626 阅读 · 0 评论 -
多维数组,以及 业务中 递增数据计算!使用map方法 可以快速计算
在日常开发中 可能遇到 一些让人很头疼的 递增数据 ,逻辑很清晰, 但代码写起来 就很复杂!~之前Vue (iview UI) 写过一个 购物网站的后台管理项目,里面有一个 型号递增规则 动态生成 表格数据!写的我脑子都要炸了(怪我太菜了!)1. iview table表格 将来要接的数据格式是 (最终UI 上需要同型号合并表格,忽略) : (这里我只写到了二级内容 业...原创 2020-01-02 10:47:06 · 570 阅读 · 1 评论 -
判断两个时间段是否相差 几 个月
//比较两个时间 time1,time2均为日期类型 //判断两个时间段是否相差 m 个月function completeDate(time1 , time2 , m){ var diffyear = time2.getFullYear() - time1.getFullYear() ; var diffmonth = diffyear * 12 + time2.ge...转载 2019-11-20 18:36:37 · 3226 阅读 · 0 评论 -
js clipboard 剪贴板复制插件
clipboard.js下载链接:https://pan.baidu.com/s/1_38F2VNSXnNHCm__R6PWEg提取码:lwba<!DOCTYPE html><head> <meta charset="UTF-8"> <title>this is 方案 1 </title> &...转载 2019-06-26 09:45:27 · 541 阅读 · 0 评论 -
component: resolve => require(['../pages/home.vue'], resolve)
import Vue from 'vue'import VueRouter from 'vue-router'// "@"相当于".."import Detail from '../pages/goodsDetail'import Msg from '../components/message.vue' // 使用路由Vue.use(VueRouter) export def...转载 2018-12-12 16:35:44 · 1510 阅读 · 0 评论 -
在数组中找出相同的内容
let leeArr = [1,1,1,2,2,2]let dataArr = []for (let i = 0; i<leeArr.length; i++) { let tempArr = [] let str = leeArr[i] tempArr.push(str) for(let j = i+1; j<leeArr.length; j++) { let tem...原创 2019-09-12 10:50:08 · 868 阅读 · 0 评论 -
vue 使用 Canvas 在画布上 添加图片
首先在template 里面创建一个dom<div style="display:none"> <img ref="conf0" src="../../assets/image/tx.jpg"></div>然后画图代码 这样写// 获取Canvas 画图let myCanvas = this.$refs.myCanvasvar ct...原创 2019-03-20 16:12:08 · 25131 阅读 · 4 评论 -
map() 的使用方式 (数组循环Map()), reduce() 的使用方法 , filter() 的使用方法, forEach()
做为数组 循环的map( )方法map 通俗讲 就是 进去 几条数据,就会 返回几条数据let arr2 = [ 60, 30, 40, 99, 80, 65, 70, 15 ]// map 有个返回值let result = arr2.map(item=>{ console.log(item) return item >=60?item+'及格':it...原创 2019-03-09 10:12:59 · 1247 阅读 · 0 评论 -
Promise 的使用 以及 async , await ,Promise.all 使用方法
代码 是直接拷贝 项目中写的 没有做简化 许多内容 是调用 项目中的数据 可以忽略掉1.代码中 uploadSectionFile()是封装的 上传图片到阿里云的一个公用方法,其结果 用 Promise 返回代码示例:Vue.prototype.uploadSectionFile = function (key, fileList) { return new Pr...原创 2019-03-05 17:26:37 · 5604 阅读 · 0 评论 -
Vue 兼容IE cdn 引用 babel-polyfill
方案1:在 webpack.config.js 文件中,entry 入口处修改,加入即可"babel-polyfill":"babel-polyfill",//用来解决的兼容性例如:entry: { "babel-polyfill":"babel-polyfill",//用来解决的兼容性 app: path.resolve(__dirname, config.ent...转载 2019-02-21 16:05:57 · 7383 阅读 · 0 评论 -
npm安装卸载命令
npm安装模块【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录; 【npm install -g xxx】利用npm安装全局模块xxx;本地安装时将模块写入package.json中:【npm install xxx】安装但不写入package.json; 【npm install xxx –save】 安装并写入package.json的”depe...转载 2019-02-21 16:03:59 · 2215 阅读 · 0 评论 -
vue——数组的深度监听
data:{ temperature:[14,false,15], suggestion:'夹克长裙', num:14, }, methods:{ add:function(){ this.temperature[0]+=5; ...转载 2019-02-02 16:48:09 · 4745 阅读 · 0 评论 -
Vue.directive 指令的使用方法 ,控制元素 DOM
指令 是Vue项目中的全局API ,不能写在 局部方法里例如 :computed:{ body.... }methods:{ body.... }Vue.directive使用方式: 打开页自动 面获取某个 input 焦点// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时...原创 2018-12-14 09:29:55 · 1204 阅读 · 0 评论