- 博客(103)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 可拖拽表格列组件（可以禁止拖动列如序号）
使用组件时需要安装sortablejs$ npm install sortablejs --save组件<template><el-table ref="dragTable" :data="tableData" class="drag-table" border stripe :row-key="uniqueKey" tooltip-effect="dark" height="100%" element-loading-text="拼命加载中" v-loading="loadin
2022-01-18 10:40:21
2044
1
原创 el-date-picker禁用当月之前的月份
<el-date-picker value-format="yyyy-MM" type="month" v-model="date" placeholder="请选择" :picker-options="endDateOptMonth"></el-date-picker>在data中增加一个属性 endDateOptMonth: { disabledDate: (time) => { return time.getT...
2021-08-04 10:13:47
1523
原创 侧边栏组件(elementUI)
参考其他资料进行修改。hidden当菜单不出现在侧边栏时设置isNest是否嵌套，是的话里面的el-submenu不在生成图标，即只有最外层的才会生成。<template><div v-if="!item.hidden"> <template v-if="hasNoChild(item)"> <el-menu-item :index="item.menuUrl" :class="{'submenu-title-noDropdown':!isNes
2021-07-16 11:04:59
821
原创 文件上传组件(elementUI)
elementUI提供了长传的组件，然而项目中可能多次用到，每次都用官网的修改，过于繁琐，封装成组件。<template><el-upload class="upload-demo" :action="uploadPath" :headers="fileHeaders" :data='uploadData' :show-file-list="false" :accept="accept" :on-success="handleSuccess" :on-error="handleErro
2021-07-16 10:46:37
1338
原创 远程搜索组件(elementUI)
<template><el-select v-model="selectVal" filterable remote :placeholder="placeholder" :remote-method="remoteMethod" :loading="loading" :disabled="disabled" @focus="clearPreList" @change="selectChange"> <el-option v-for="item in list" :k
2021-07-16 10:24:25
674
原创 修改组件默认样式之/deep/(less,sass)
在使用第三方组件时有时候我们想修改组件的样式，可以使用全局的方式，即不使用scoped。如果多处共用我们只需要统一修改，假如有多种类型呢？我们不得不另起一个名字。如果我们想要封装一个组件，定义的样式希望在该文件中生效，不影响其他组件，我们将使用scpoed的方式。这种方式去修第三方组件的样式往往是无效的，什么原因呢？怎么处理呢？使用scoped的方式生成的dom其实有额外的属性因为该属性的存在使得里面的样式在定义时无效。解决方式，在less或者scss等编译语言中使用/deep/或者在sty
2021-06-17 18:00:44
5341
原创 vue项目前端导出表格Export2Excel
直接上代码npm install -S file-savernpm install -S xlsxnpm install -D script-loader下载Export2Excel.js 文件，放在项目里import { export_json_to_excel as exportJsonToExcel } from '../assets/vender/Export2Excel' exportDataToExcel () { const tHeader = [
2020-10-26 13:18:46
882
原创 vue打包 报错vue-template-compiler版本不匹配（jenkins错误）
出现以上错误，多是package.json与package-lock.json中vue-template-compiler不匹配，更新相应的版本即可npm install [email protected] --save-devnpm install [email protected] --save-dev下面说另一个问题，使用以上方法后，本地ok。但是jenkins上打包后依旧报上面的错误，而打包代码中的package.json与package-lock.json中的 [email protected]..
2020-09-14 16:12:08
1364
原创 element通过el-color-picker换肤
定义vue文件,结构如上图，index内容如下：<template> <el-color-picker v-model="theme" class="theme-picker" popper-class="theme-picker-dropdown" size="small"/></template><script>const version = require('element-ui/package.json').v.
2020-09-11 13:45:56
1867
原创 vue中引用icon不显示
vue中assets里的icon在其他工具里使用相对路径时，有时候存在引用不到的问题，解决方案是通过import引入图片，在需要使用的地方使用该变量即可。举例，echart中使用图片时import bar from '@/assets/img/bar.png'const BAR = 'image://' + bar高德地图import icon from '../assets/icon/merge.png'new AMap.Marker({ icon: new AMap.Icon({
2020-08-25 13:55:28
2063
原创 文本过长，hover时提示框显示全部信息，否则不出现提示框
使用的是vuetemplate <ul class="list"> <li v-for="(item, index) in operateData" :key="index" class="list-li" @mouseenter="handleCellMouseEnter" @mouseleave="handleCellMouseLeave"> <span>{{item.time}}</span>
2020-07-28 17:37:51
1449
原创 echart 3D渐变进度柱状图
使用到的资源图片实现效果：demo：// 这里是关键，引入一张图片在symbol: BAR使用// 以下导入方式会被编译为base64import bar from '@/assets/img/bar.png'// 这里是echart要求的格式之一const BAR = 'image://' + barconst VALUE = [0.2, 0.4, 0.6, 0.8, 1]const SHOW_VALUE = [20, 40, 60, 80, 100]const cubeOpt
2020-07-08 10:15:55
1095
原创 水平3d柱状图
最近做了查了很多资料，做了一个3D渐变水平柱状图，给大家做个参考，以更好的理解学习css3<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib
2020-06-09 13:29:22
340
原创 CopyWebpackPlugin的ignore
官网介绍const CopyWebpackPlugin = require('copy-webpack-plugin');const path = require('path');module.exports = { context: path.join(__dirname, 'app'), devServer: { // This is required for older versions of webpack-dev-server // if y
2020-05-18 10:50:57
3531
原创 对cookie的诠释
学习了一下cookie，这里做下个人分享。cookie是一种存储机制，主要是web服务器开发人员设置的，前端开发人员较少使用cookie，使用情况比如后端返回的token没有放在cookie中，前端想要放在cookie中时即可使用。好处是cookie有失效时间，也就是在失效之前都是可以获取到的。后端设置(主要是测试使用，真正使用时会在中间件中处理，比如jwt)const Koa = require('koa');const app = new Koa(); app.use(async(ctx)
2020-05-13 14:58:52
207
原创 Webpack的externals的理解
webpack官网介绍：防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。webpack的externals上面的信息是什么意思呢？你可以通过script方式引入后，在文件中直接使用$这里是没有问题的，如果你使用了eslint，它会提示你该变量未定义。但是如果...
2020-04-27 10:52:56
11899
原创 v-infinite-scroll无限滚动
网上搜索了很多，基本上都是指'vue-infinite-scroll'组件，其实如果你是elementUI项目的话，你可以直接使用v-infinite-scroll示例： <div style="height:100px;overflow: auto;" v-infinite-scroll="test"> <div style="height:200px">滚动...
2020-04-24 18:18:44
13542
原创 this.$nextTick使用技巧
这个方法基本上很少用到正如官网所言：Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用因此博主开始也觉得这个方法基本无用，因为如果需要dom更新后做些事情，完全可以在mo...
2020-04-24 18:02:53
1771
原创 js文件下载的方法以及相关概念的解释
参考了一些资料，这里主要是对一些内容作出解释下载方式基本上都是一样的，代码如下： if ('msSaveOrOpenBlob' in navigator) { // IE 中下载文件的方法 msSaveBlob 和 msSaveOrOpenBlob // msSaveBlob 提供保存按钮 // msSaveOrOpenBlob 提供保存按钮和打开按钮 ...
2020-04-13 16:43:02
397
原创 element table跨分页多选
参考了很多资料，最简单的方式是使用element自带的属性，官网介绍如下： <el-table :data="tableData" @selection-change="handleSelectionChange" :row-key="uniqueKey" ref="multipleTable" > <el-...
2020-04-10 16:30:52
5637
1
原创 elementUI input组件模拟数字数字及保留几位小数
该方法的好处是虽然保留2位小数，但以下方式的书写同时支持，跟iunput-number组件相比0,不必显示为’‘0.00’,可以灵活的为’0.0’或者’0’示例如下 <el-form-item label="" prop="name"> <el-input placeholder="" v-model="name" @input="name = checkNum...
2020-04-01 17:59:57
2360
1
原创 vue递归组件的理解使用
官网介绍如何使用呢？新建SidebarItem.vue文件，内容如下<template><div class="menu-wrapper"> <template v-if="hasNoChild(item)"> <div :class="{'submenu-title-noDropdown':!isNest}"> ...
2020-03-29 19:56:13
969
原创 elementUI重置表单时发送额外请求
避免额外请求的方式是在el-form上添加onsubmit="return fasle"<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" onsubmit="return fasle"> <el-form-item label=...
2020-03-29 12:13:49
257
原创 iview日期控件,格式化后通不过validate验证
百度了很多信息，发现差不多出奇的一致，问题已经解决，为了避免后来者受到其他错误解释的影响，写此文。其他文章大都在强调pattern: /.+/ 的作用，举个例子：purchaseDate: [{required: true, message: '日期不能为空!', trigger: 'blur', pattern: /.+/}],这里博主要说明的是，以上内容确实通过了验证，但是起作用的不是...
2020-03-16 17:15:50
521
原创 iview组件之DatePicker日期格式
1,关于日期通常关注value的格式问题，组件使用value绑定还是使用v-model绑定在使用了on-change事件的情况下是没有什么区别的。使用v-model绑定时，值的类型是date 类型，也就是说如果你要传给后端一个’2016-01-15’,那就需要额外的处理，那么怎么处理起来比较简单呢，这就是on-change的魅力所在，该事件返回两个值，已经格式化后的日期，比如 2016-01-01...
2020-03-02 14:43:17
4439
7
原创 iview组件之select绑定类型number
本文仅记录在select使用过程中出现的不常见问题，一般的使用问题，请直接在官网查看。1，有时后端使用的数据是int类型，也就是说，你要绑定的value是数字，使用官网上的验证方法是无法通过检测的，这个时候怎么办呢？官网上使用的验证规则是 async-validator，该规则中rule的type是这样定义的string: Must be of type string. This is the...
2020-02-24 16:18:22
1448
原创 vscode 自动修复eslint错误
一般情况下，在项目中使用eslint后，通过在vscode的插件中安装eslint vetur即可通过工具的自我检测功能，实现自动修复。可以首选-设置中，设置保存时自动修复，也可以通过快捷键使用按F1，搜索eslint:fix all auto-fixable priblems 即可最近遇到了一个奇葩问题，同一个项目，换了一台电脑，同样的配置，vscode工具突然失灵了，找了好久，才发现是它...
2020-02-24 15:38:31
7041
原创 iview table中嵌套input同步更新table中data值
iview中嵌套input的方法根据iview版本的不同有两种写法，一种是render，一种是template。如果当前行有操作可以直接通过change，获取当前行row。然而，对于input这种组件，习惯于双向绑定的我们，如何使修改后的支直接作用到table上的data属性里呢？请看demo示例：<template> <div> <Table clas...
2020-02-12 14:22:24
1576
2
原创 js实现动画效果
进度条动画跳过<h1>JavaScript 百分比进度条</h1><div id="myProgress"> <div id="myBar">10%</div></div><br><button onclick="move()">点我</button>#myProgre...
2020-01-02 15:48:41
801
1
原创 js点击页面空白处，实现操作
通过为window绑定click时间即可实现比如制作一个模态框，点在模态框上实现关闭模态框<button onclick="document.getElementById('id01').style.display='block'">注册</button><div id="id01" class="modal"> <form class="m...
2020-01-02 14:52:18
4226
原创 js秒杀倒计时方法
<p id="demo"></p>// 设置我们准备倒计时的日期const countDownDate = new Date("2028-01-05 15:37:25").getTime();// 每秒更新一次var x = setInterval(function() { // 获取当前时间 var now = new Date().getT...
2020-01-02 14:31:37
664
1
原创 js事件改变css属性，增加动画效果
我们通过js直接改变css属性的话，增加些动画看起来更加好看，我们通常用到的是在css里直接使用:hover, :active, :focus等方式去改变属性.overlay { height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background...
2020-01-02 13:35:27
3217
原创 自动触发dom绑定事件
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen"> London</button>如上面的button如何自动触发绑定在dom上的click事件，方法如下// 触发 id="defaultOpen" click 事件document.getElem...
2020-01-02 13:19:21
1077
原创 Cannot find module 'lodash'
出现该问题的场景多样，但解决方法基本类似。本文以lodash模块为例如果是拉取代码后运行时出现Cannot find module lodash，通常是其他人提交了一个插件lodash，而你本地环境中没有，可以直接去package.json中查看有没有lodash，如果有的话，那证明你的node_module中并没有安装该lodash，使用cnpm install安装下即可。如果发现pac...
2019-12-26 11:02:05
21171
原创 vue路由如何传递当前行数据
在当前页面中，查看当前行数据，如果是通过弹框的方式，我们可以通过方法带的row，来展示当前行数据，但是如果是跳转到新的页面呢，我们如何在详情页拿到当前数据呢？通过后端提供的接口可以，通过浏览器存储机制也可以，其实路由本身就提供了一种方式，那就是动态路由，通过动态路由，我们可以把信息隐式的传递过去，当然在路由里面你并不需要写成动态路由的方式，这里只是借用动态路由的机制实现带当前row进行跳转如路由...
2019-12-17 17:03:58
864
原创 koa后端模板
–最近又学习了下koa2，参考各种资料整理了一套简单的模板，和大家一起学习交流，主要用到的技术栈是node，koa2，mongoose，mongodb数据库，以及一些常用的中间件，log4js，jwt，cros等项目构建先介绍下目录结构，如下.├── README.md 项目描述├── app 业务侧代码│ ├── controller 与路由关联的api方法│ └──...
2019-12-09 15:17:37
438
原创 npm安装package到dependencies与devDependencies
本文以express为例。$ npm install express安装好之后，express 包就放在了工程目录下的 node_modules 目录中，因此在代码中只需要通过 require(‘express’) 的方式就好，无需指定第三方包路径。var express = require('express');npm 的包安装分为本地安装（local）、全局安装（global）两种...
2019-11-29 14:31:54
9150
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人