- 博客(21)
- 收藏
- 关注
RSS订阅原创 vue3项目element-plus，树组件el-tree修改下拉图标，增加引导线
vue3项目element-plus，树组件el-tree修改下拉图标，增加引导线组件库的el-tree样式由于基础版的样式不满足当前的ui设计，所以对el-tree做一下样式改造 参考的博客并做了一部分优化，目前呈现样式如下：代码具体实现1、template模板引入el-tree组件，注意点需要设置:indent=“0”，不然每层树padding-left呈18px的倍数增加<div class="mytree"> <el-tree :indent="
2021-12-07 15:33:33
9648
3
原创 vue3项目axios返回对象数据根据某一字段进行排序（默认升序）
vue3项目ajax返回对象数据根据某一字段进行排序（默认升序）vue3项目ajax返回对象数据根据某一字段进行排序（默认升序）项目中经常遇到把返回的对象数组根据某一字段进行排序，在这里记录一下方便大家使用。核心代码，封装compare方法const compare = (key) => { return (obj1, obj2) => { let value1 = obj1[key] let value2 = obj2[key]
2021-11-30 10:57:51
1892
转载 vue 项目自定义指令实现防抖
自定义v-debounce指令实现click事件防抖工具uitls文件夹创建debounce.js文件代码如下import Vue from 'vue'Vue.directive('debounce', { inserted: function (el, binding) { let timer; el.addEventListener("click", () => { if (timer) { clearTimeout(timer);
2020-09-16 16:10:00
2706
2
转载 vue项目参考vue-element-admin开源项目三级路由（菜单）无法缓存
项目框架参考vue-element-admin开源项目，左侧菜单是读取路由配置参与的项目一般都是二级菜单，所以当用keep-alive做页面缓存时，只要正确的配置组件name都能做到缓存，但是最近的一个项目有三级菜单，当点击切换的时候页面不能缓存，csdn有一篇博客有做很好的阐述，本文只是简单的功能实现博客地址：https://blog.youkuaiyun.com/sinat_31243877/article/details/100183468划重点，解决的中心思想就是，菜单用配置好的路由层级，在生成路由实
2020-06-16 09:26:34
5458
2
原创 vue项目three.js&&vue-draggable-resizable组件实现图片添加热点
通过使用three.js&&vue-draggable-resizable组件实现图片添加热点，场景世界坐标和平面热点二维坐标互转项目描述：当前项目需求是，场景图中可以手动添加热点，并且热点可以在场景图上拖拽改变位置。实现逻辑：npm install --save vue-draggable-resizablemain.js添加如下代码import VueDraggableResizable from 'vue-draggable-resizable'import 'vue-dr
2020-05-30 18:19:51
1424
原创 vue项目使用three.js轨道控制器OrbitControls.js渲染VR2D360度图片
vue项目使用three.js轨道控制器OrbitControls.js渲染VR2D360度图片上一篇博客是用浏览器监听事件来控制图片的render，随着项目的深入，发现three.js-master源码里有几种控制器，例如： OrbitControls、TrackballControls ，通过使用可以精简很多代码，本篇只讲OrbitControls.js。当前demo使用的three.js为0.115.0版本项目中安装threenpm install three安装完成再组件如下导入：im
2020-05-29 19:14:58
1314
原创 vue 项目中使用three.js实现vr360度全景图片预览
vue 项目中使用three.js实现vr360度全景图片预览当前demo使用的three.js为0.115.0版本项目中安装threenpm install three安装完成再组件如下导入：import * as THREE from 'three'html文件中写入如下代码图片预览容器，代码如下：<div ref="container" id="container"&...
2020-04-13 18:45:11
8194
11
转载 Vue elementui 上传前获取图片宽度尺寸和大小
Vue elementui 上传前获取图片宽度尺寸和大小项目中用到elementui上传组件，但是before-upload钩子函数中file参数只能拿到文件名字和大小，如果是图片就拿不到图片的宽高，不符合目前的需求，所以采用如下方式进行处理代码如下：handleBefore(file) { this.file = file; this.sceneForm.uplo...
2020-04-13 15:12:45
9660
1
转载 ElementUI中table复选框多选，翻页/切换条数时保持选中状态
table复选框多选，翻页/切换条数时保持选中状态注意点：1. 通过type="selection"设置复选框列，重点在于 reserve-selection 属性，设置为true时，数据更新之后保留之前选中的数据。2.需要表格属性“row-key”的配合，在使用 reserve-selection 功能的情况下，该属性是必填的。将row-key设置为表格中唯一的字段名称（例如progra...
2020-03-19 14:41:50
6176
1
原创 Vue中 watch最初绑定的时候就执行，及对象的深度监听
Vue中 watch最初绑定的时候就执行，及对象的深度监听watch 的一个特点是，最初绑定的时候是不会执行的，要等到 属性改变时才执行监听计算，如何才能在最初绑定时就执行， watch 代码如下：在这里插入代码片watch: {options: {handler(newValue, oldValue) {…},immediate: true,deep: true // 实现深...
2020-03-12 16:49:50
1037
转载 el-select下拉加载（实现懒加载）自定义loadmore事件
el-select下拉加载（实现懒加载）自定义loadmore事件使用场景：下拉框远程搜索数据量较大，导致dom渲染很慢，所以远程搜索要采用分页的形式，故自定义事件，实现滚动加载，具体如下：1、自定义事件创建directives.js，内部实现loadmore事件，代码如下：import Vue from 'vue'Vue.directive('loadmore', { bind ...
2020-03-12 16:38:54
4526
4
转载 vue 中使用防抖函数组件
应用场景：表单点击提交，快速点击可提交多次使用方法：注意事项:防抖组件实现代码：参考优快云博客使用方法：import '@/util/debounce.js'<Debounce :time="500" events="click" :immediate="true"> <button class="primaryButton" @click.prevent="sub...
2020-01-16 15:43:49
478
原创 formCreate不使用默认的提交按钮、重置按钮
formCreate生成表单不使用默认的提交按钮、重置按钮<form-create :rule="formRule" :model="formData" :option="option" ref="formData"></form-create>原来使用这种方式去生成表单，发现只能修改提交按钮，对重置按钮只能控制显隐，明显不能满足要求，所以采用另一种方式，如下：1...
2020-01-11 18:19:51
2545
转载 es6对象数组通过reduce去重
es6对象数组通过reduce去重根据id去重let obj = {} this.backTag = this.backTag.reduce(function(item, next) { obj[next.id] ? '' : obj[next.id] = true && item.push(next); return item; }, []);...
2020-01-11 11:20:48
616
原创 elementui下拉框选中获取value和label方法
下拉框选中获取value和label方法<el-select v-model="remotePram" value-key="id" filterable remote placeholder="请输入关键词" :remote-method='remoteMethod' @change="handleValue"> <el-option ...
2020-01-11 11:09:26
7137
2
原创 js秒数换算成时间
js秒数换算成时间时间格式为xx:xx:xxtimeFormatter(duration) { let secondTime = parseInt(duration);// 秒 let minuteTime = 0;// 分 let hourTime = 0;// 小时 if (secondTime > 60) { // 如果秒数大于60，...
2020-01-03 09:30:04
3386
原创 form-create的:rule通过JSON动态生成，自定义组件实现复用
form-create的:rule通过JSON动态生成，自定义组件实现复用<form-create :rule="formRule" :model="formData" ref="formData" ></form-create>首先再data定义rule存储需要用到的组件库，formRule:[]为form-create动态创建表单规则rule: [{ ...
2019-12-30 16:20:36
1851
原创 vue-cli2.0项目兼容ie8以上版本配置
vue-cli2.0项目兼容ie8以上版本配置注意一定要用npm安装依赖包！！！！！1修改根目录的index.html文件加入如下一行代码<meta http-equiv="X-UA-Compatible" content="IE=edge">2npm安装依赖安装babel-polyfill npm install babel-polyfill --save-dev...
2019-12-20 11:19:57
1268
2
原创 vue项目中本地图片动态绑定img的src属性解决方案
本地图片动态绑定img的src属性1 将图片当成模块先引进来，再绑定2本地静态资源加载将所有的静态图片资源放在和src同级目录下的static文件夹下路径可以写成自然的’…/…/static/img/xxx.png’ 也可以按照红框中的写法（这种写法对应的是编译后文件的目录）这样按照平常的动态绑定src属性你的图片路径在开发模式下和生产模式下的图片资源路径都是不会出问题的...
2019-12-20 11:13:18
3422
原创 vue项目main.js配置全局基础组件
main.js配置全局基础组件1.文件导入lodash接口import upperFirst from 'lodash/upperFirst'import camelCase from 'lodash/camelCase'2.代码实现const requireComponent = require.context( // 其组件目录的相对路径 './components/base...
2019-12-20 10:44:24
1155
原创 页面点击保存url“#”号之前出现“？”，页面刷新不跳路由解决方案
页面点击保存url“#”号之前出现“？”，页面刷新不跳路由解决方案问题展现解决方案click添加.prevent<Debounce :time="500" events="click" :immediate="true"> <button class="primaryButton btns-son" @click.prevent="submitForm('ruleFo...
2019-12-20 10:30:14
260
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人