- 博客(51)
- 收藏
- 关注
RSS订阅原创 好用的滚动方法，列表滚动
上下滚动// javascript原生自动滚动export default function startmarquee(lh, speed, delay, marqueeObj) { // lh---每行列表的高度，speed---滚动的速度，delay---间隔多久滚动一次,marqueeObj---需要实现这个效果的id var p = false; var t; var o = document.getElementById(marqueeObj); o.inner
2022-04-20 16:11:57
653
原创 实现查看更多功能 -记录一下可复用
<div :class="[{'box': item.handleText.length > 200 && expandFlag != index }, 'words']" :content="item.handleText"> {{item.handleText}} <span class="btn" @click="expandFlag = index" v-if="item.handleText.length > 200 &&
2021-06-03 11:18:31
245
原创 富文本TinyMCE
引入tinymce<script src="你的网站路径/tinymce/tinymce.min.js"></script>tinymce 基本插件具体配置方法’参照官网pai封装组件<template> <div class="Editors"> <textarea :id="id" :value="contents"></textarea> </div></template>
2021-04-09 10:30:26
185
原创 vue引用高德地图实现选择定位，根据经纬度标注功能
引用vue-amapyarn add vue-amapmain配置// 引入vue-amapimport VueAMap from 'vue-amap';Vue.use(VueAMap);// 初始化vue-amap，高德的key值需要自己去申请VueAMap.initAMapApiLoader({ key: '', plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Place
2021-04-01 21:52:47
1589
原创 Element树形懒加载表格，数据改变时刷新列表
写个小demohtml<div id="app"><template><div> <el-button @click="handletest">123</el-button> <el-table :data="tableData1" style="width: 100%" row-key="id" ref="tableDom" border lazy :l
2021-01-06 10:42:02
1757
原创 select拿除了value以外的子选项内参数
随手记一下<a-select v-model="checkedPlat" style="width: 120px" @change="platChange"> <a-select-option :value="item.platformId" v-for="item in platList" :key="item.platformId" :data="item"> {{ item.platformName }} </a-select-option&
2020-12-29 14:24:10
374
原创 $emit在子组件传参外自己传参的方法
之前忘记怎么写了，记一下，可以查看<tag-modal ref="policyTag" :type="1" @submit="handleTagSubmit($event,'policyTag')"></tag-modal> this.$emit('submit', this.checkList);
2020-12-24 11:21:34
250
原创 antdesign的tag close方法关闭两个tag
关闭两个tag <a-tag v-for="(item,index) in form.value8" :key="index" color="blue" closable @close="closTag(index)"> {{ item }}</a-tag>closeTag(index) { this.form.value8.splice(index, 1);}tag的key千万不要用index
2020-12-24 09:33:54
1628
原创 echarts结合阿里datav地图精确到区
主要记录一下datav，日后可能会用到地图jsonhttp://datav.aliyun.com/tools/atlas/#&lat=29.67402915372495&lng=121.56761992209837&zoom=8.5把需要的地域的json下载下来（只下载当前区域或者包含子区域可做内部区域统计）以宁波市为例,map.js中是从阿里datav下载下来的宁波市json<template> <div id="map" style
2020-12-22 15:40:16
2680
1
原创 promise，return解析
希望在promise中return结果function fun() { return new Promise((resolve, reject) => { resolve('模拟axios') })}function test() { return fun().then(res => { console.log('1,',res) return 1 }).then(res => { console.
2020-10-27 16:16:42
7547
4
原创 element拖拽表格
1.引入利用require或直接引入Sortablerequire(["${base}/plugins/qs/qs.js","${base}/plugins/sortable/Sortable.min.js"], function (qs, Sortable) {})2.表格(注意key值不能重复)<el-table ref="fileTable" :data="fileTable" class="fileTable" row-key="key"></el-table>
2020-10-10 15:15:49
205
原创 webpack4+ 疯狂踩坑记录
前言webpack在前端化过程中十分重要，所以花了一段时间学习webpack，以及webpack4新特性，本文是按照从易到难的过程，梳理部分webpack概念，常见的loader，plugins，webpack4新特新，还有部分高级概念。webpack需要掌握的核心概念????Entry:webpack开始构建的入口模块Output: 如何命名输出文件，以及输出目录，比如常见的dist目录。Loaders:作用在于解析文件，将无法处理的非js文件，处理成webpack能够处理的模块。Plugin
2020-09-08 10:59:13
1801
原创 element的select框实现懒加载数据
element模糊搜索下拉框数据太多，和后端协商做成懒加载模式自定义指令el-select-loadmorev-el-select-loadmore=“handleLoadMore”<el-select popper-class="matterNameClass" v-model="matterName" placeholder="请输入名称关键字" style="width: 100%" @change="selectMatter" v-el-select-loadmore="handleLo
2020-08-28 10:32:55
3137
原创 密码框自动填充样式问题
透明：input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active { -webkit-transition-delay: 99999s; -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;}纯色：input:-web
2020-07-30 15:39:42
190
原创 less自动生成wxss文件
1.vscode安装Easy LESS插件2.settings.json中添加"less.compile":{"outExt":".wxss"}
2020-07-30 15:39:37
979
原创 下载文件模拟a标签点击，接收blob二进制文件,文件格式进行发送
downloadFileMethod(file){ let that = this; event.preventDefault(); axios({ method: 'get', url: that.downloadCommonUrl+'?id='+file.id, responseType: 'blob' }).t...
2020-07-30 15:39:30
491
原创 vscode使用npm和git（备忘）
1.打开文件/首选项/设置修改settings.json。之前已经配过了，要使用npm配置终端指向terminal.integrated.shell.windows{"eslint.autoFixOnSave":true,"eslint.validate":[{"language":"javascript","autoFix":true},{...
2020-07-30 15:38:44
419
原创 webpack4+vuecli3 项目打包优化
1.把vue，axios，vue-router，vant, iconfont等长期不需要更新的包整理到/public/cdn目录下2.安装js语法优化插件（babel-polyfill, classlist-polyfill）yarn add babel-polyfill classlist-polyfill安装babel-polyfill和classlist-polyfill。Babe...
2020-07-20 16:21:00
2353
2
原创 浏览器渲染机制(记录)
浏览器进程renderer进程：浏览器内核每个tab页面对应一个独立的renderer进程内部有多个线程。负责脚本执行，位图绘制，事件触发，任务队列轮询等Broswer进程：浏览器的主进程，负责主控，协调（浏览器大脑）网络资源的管理，下载等（页面网络文件）负责将renderer进程得到的存在内存中的位图渲染（显示）到页面负责创建和销毁tab进程（renderer进程负责与用户的交互GPU进程：负责3D绘制，只有当该页面使用了硬件加速才会使用它，来渲染（显示）页面。否则的话，不
2020-07-08 13:57:10
547
原创 vue路由动态配置
router.beforeEach((to, from, next) => { if(to.path != "/login" && store.getters.menu.length == 0 && store.getters.access_token){ store.dispatch('GetMenu').then((res) => { if(res){ for (let ind.
2020-07-07 10:47:44
172
原创 前端树状结构搜索过滤解析
树状搜索参照element树过滤方法进行解析假设后端传递树状结构为datadata: [ { id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1', children: [{ ...
2020-04-05 00:47:06
1424
1
原创 echarts关系图用id进行关联
echarts关系图的link在api中默认连接方式有索引，name但在项目中大多遇到的都是用id进行关联，官方默认node存在id，优先用id进行关联注意点：id必须为字符串形式...
2020-03-20 09:59:02
2197
原创 next框架结合lib-flexible，postcss-pxtorem做pc端rem适配
安装lib-flexible，postcss-pxtoremyarn add lib-flexibleyarn add postcss-pxtorem配置postcss-pxtorem在根目录下建立postcss.config.js文件const pxtorem = require("postcss-pxtorem");module.exports = { plugins: [...
2020-02-06 14:34:25
3253
1
原创 PostMessage父页面和iframe的信息相互传递
跨域：父页面向内嵌iframe子页面传递消息父页面：<iframe src="http://114.55.177.188:18061/dna" id="otherPage"></iframe>// 通过 postMessage 向子窗口发送数据document.getElementById("otherPage").contentWindow.postMe...
2019-12-27 11:37:23
1338
原创 引入vue.js的项目如何实现ie兼容
1.下载browser-polyfill.min.jsbrowser-polyfill.min.js下载地址2.下载browser.min.jsbrowser.min.js下载地址3.引入browser.min.js 和browser-polyfill.min.js4.<script type="text/babel">...</script>转换语法。5.注...
2019-12-25 08:57:59
2755
2
原创 element可编辑表格验证失效问题
elemnet官网实例动态增减表单项<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item v-for="(domain, index) in dynamicValidateForm...
2019-10-31 11:25:36
1029
原创 element上传组件重名判断，下载
上传组件本次调用不执行立即上传<el-upload class="upload-demo" ref="fileUpload" action="${base}/survey/surveyConfirmFile/uploadFile"<!--必选参数，上传的地址--> :on-change="fileChange"<!--文件状态改变时的钩子...
2019-10-18 09:34:57
1081
原创 react-redux入门使用
react-reduxdemo的git安装react-redux和reduxyarn add react-reduxyarn add reduxreact-redux的provider和connect配置src/index.jsimport React from 'react';import ReactDOM from 'react-dom';import TodoList fr...
2019-10-15 09:27:26
154
1
原创 redux入门级使用
redux使用demo的git地址1.简单使用reduxredux流程举个例子理解，假设我们想要得到的state为图书。我们告诉图书管理员想要的书籍，图书管理员在图书馆会通过图书管理软件来寻找具体位置，然后找到再给我们安装reduxyarn add redux创建store文件夹actionCreators：图书管理员,定义action，通过stroe.dispatch(ac...
2019-10-14 16:05:46
119
原创 react骨架屏的使用
import React from 'react';import PropTypes from 'prop-types'import { Skeleton } from 'antd';class DepartCatalog extends React.Component{ static contextTypes = { user: PropTypes.string...
2019-09-12 10:01:47
2992
原创 element表头通过render-createElement自定义
element官方文档利用render-header进行渲染为当前label增加tooltipmethods: { labelHead(h,{column,index}){ return [ h( 'el-tooltip', ...
2019-08-21 14:27:42
277
原创 vuex结合stroage使用
在项目中有一些全局变量1.如果只保存在vuex中，在页面进行刷新时，数据丢失2.如果保存在session或者stroage中，数据变化，监听不到希望结果：1.具有vuex通过单项数据流 set一个值 就会重新触发get 然后全局值就改变了 再重新渲染的功能 2.页面刷新数据不丢失解决方法：vuex结合stroagevuex获得数据：...
2019-08-13 11:18:28
142
原创 element的upload组件在before-upload之后触发before-remove以及后面on-remove方法
element的upload组件在before-upload之后return false之后竟然自动触发了before-remove以及后面on-remove方法解决方法：移除前方法BeforeRemove(file,fileList){ if (file && file.status==="success") { //移除前方法 ...
2019-08-08 11:26:15
10504
4
原创 快速解决端口占用问题
解决1099端口占用，找到使用该端口的进程pid并终止netstat -ano | findstr 1099taskkill /pid 14864 /f
2019-07-11 08:30:43
96
2
原创 webpack第一个实例
1.安装node2.安装cnpm3.cnpm init生成package.json4.全局安装webpackcnpm install webpack -g5.全局安装 webpack-clicnpm install webpack-cli -g6.全局安装webpack-dev-servercnpm install webpack-dev-server -g7....
2019-07-10 20:06:40
152
原创 element合并单元格
获取表格基础合并数组 getIndex(){ let table = this.tableData this.spanArray = [] table.forEach((item,index)=>{ if(index === 0){ this.spanArray.push({sameName:item.ma...
2019-07-04 16:17:31
294
原创 vue异步数据影响页面渲染
今天遇到一个问题，要保证页面渲染前请求的数据已经得到了由于user是在异步请求之后保存在session中，而在页面渲染时session中还没有user，页面直接报错。因此我希望能在所有请求都得到后再去做页面的渲染。1.先把id为app的div用v-if="appShow",定义appShow为false进行隐藏，避免渲染2.写计数器，每1ms进行一次查询，如果session...
2019-06-20 16:53:56
3511
2
原创 原生js实现对未来dom的事件绑定
在对未来事件的绑定上，我们都知道jquey的on是可以实现的。$("#div1").on("click","p",function(){ $(this).css("background-color","pink");});在现在公司项目中为了避免vue和jquery混合使用产生问题，并不引入jquery。我想对系统中的每张页面底下的.cell的div进行事件绑定，但是有些....
2019-06-20 16:25:22
2201
原创 element表格卡顿性能问题
之前在用vue和element搭建的项目里一直出现表格卡顿问题，开始以为是表格基数大导致的问题，后来在官网写了个demo发现并没有这方面的问题。由于该系统后端发过来的数据大多都是id或value值，需要前端自己遍历数据，因此我写了多个过滤器来实现。在之后的排查中发现卡顿问题是由于这些过滤器导致的，可是如果表格数据没有发生变化怎么会多次渲染，执行过滤器里的代码呢？又在element官网中...
2019-06-20 16:08:17
20856
10
原创 element验证不通过焦点自动跳转
this.$refs[formName].validate((valid) => { if (valid) { //... } else { this.nextTick(()=>{ var isError= document.getElementsByClassN...
2019-06-10 16:09:20
697
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人