vue
关注
分享
扫一扫
wangjinsheng593
这个作者很懒，什么都没留下…
展开
-
vue3.0导入表格通用组件封装
1.安装插件依赖 npm install xlsx -s2.在components文件夹中创建UploadExcel文件夹index.vue内容如下：<template> <div class="upload-excel"> <div class="btn-upload"> <el-button :loading="loading" type="primary" @click="handleUpload"> {原创 2022-05-15 14:18:26 · 990 阅读 · 0 评论 -
vue+file-saver+xlsx 封装导出Excel表格方法
file-saver+xlsx 封装通用导出方法安装插件依赖npm i xlsx@0.17.0npm i file-saver@2.0.52.在utils文件夹中创建ExportExcel.js文件/* eslint-disable */import { saveAs } from 'file-saver'import XLSX from 'xlsx'function datenum(v, date1904) { if (date1904) v += 1462 var ep原创 2022-05-15 14:05:06 · 1511 阅读 · 2 评论 -
git约定式提交规范
一.Commitizen助你规范化提交代码commitizen 仓库名为 cz-cli ，它提供了一个 git cz 的指令用于代替 git commit，简单一句话介绍它：当你使用 commitizen 进行代码提交（git commit）时，commitizen 会提交你在提交时填写所有必需的提交字段！全局安装Commitizennpm install -g commitizen@4.2.4全局安装Commitizennpm i cz-customizable@6.3.0 --s原创 2022-05-15 13:31:08 · 1000 阅读 · 0 评论 -
为什么toFixed(2)四舍五入保留两位小数，有时候会进位有时不会进位？
为什么toFixed(2)四舍五入保留两位小数，第三位大于等于5时，有时候会进位，有时不会进位问题问题描述在做项目得时候遇到金额得计算，计算出金额之后需要保留两位小数，并且小数的第三位大于等于五需要向小数点的第二位加1（进位），也就是四舍五入。但是遇到了一个奇葩的问题，也就是toFixed（2）有时候 会向前进一，有时候不会，如下：** 这个大于等于五不会进位 **** 这个大于等于五会进位 **得出的结果让我很困惑，于是经过我不断查阅百度和各种论坛终于找到了解决方法： //在需要的原创 2022-01-19 11:44:09 · 3173 阅读 · 1 评论 -
vue 封装一个导出Excel数据的公共函数
vue+element UI 封装一个导出Excel数据的公共函数将公共方法封装在store的modules的common.js中，如下图：代码如下：const download = { actions: { downloadData({ commit, state }, data) { return new Promise((resolve, reject) => { data.event(data.formD原创 2021-09-28 11:35:18 · 1462 阅读 · 2 评论 -
vue-quill-editor富文本的简单使用
基于Vue项目的富文本vue-quill-editor的使用一、背景之前就已经使用过其他的富文本，因为使用的不多，所以很快就忘记了。正所谓好记性不然烂笔头，为了快速开发，节约时间所以简单的做一下笔记。二、二.Vue-Quill-Editor使用1.简介Quill适用于Vue的富文本编辑器,支持服务端渲染和单页应用.不过有一定的兼容性,就是兼容IE10+2.安装-使用npm install vue-quill-editor -S使用：我这里使用的是局部注册，因为使用的不多，所以就不挂载全原创 2021-07-26 10:27:08 · 393 阅读 · 0 评论 -
Vue 前端页面按钮权限控制
前言按钮权限控制的功能其实在前面的一篇的页面权限管理也包含有这个功能，但是没有凸显出来，所以现在单独写一篇文章用来记录一下一、什么是按钮权限控制？刚刚做完了一个后台管理系统，有用到按钮权限控制，所以记录一下。按钮权限控制就是说对于不同的用户，可操作的按钮是不一样的，比如有些按钮有些用户是看不见，有些用户是可以看得见的。应用场景：用户A能看得到‘新增’按钮，而用户B是看不到‘新增’按钮的二、使用步骤按钮权限控制，我知道的有两种解决方案:1.定义一个全局方法,配合v-if实现（下面会介绍）;2.使用原创 2021-07-23 15:24:00 · 13109 阅读 · 10 评论 -
vue-template-admin 页面权限管理
一、前言** 在做后台管理系统的时候有幸搞了一下权限管理的功能，所以记录一下这个流程，我是用的是element 的模板vue-template-admin**二、使用步骤1.登录拦击（1）在src目录下创建权限文件夹（2）然后在main中引入（3）在登录成功之后请求getInfo接口获取用户信息（4）getInfo主要放在vuex的user文件中，里面共有Login，GetInfo，logout等接口。GetInfo获取用户信息并存储用户信息之后，接着GenerateUserRout原创 2021-07-23 11:37:05 · 3035 阅读 · 0 评论 -
vue 表单校验工具
** 表单检验工具 记录一下**Vuelidate 官网VeeValidate 中文文档-API原创 2021-07-10 15:58:57 · 369 阅读 · 0 评论 -
vue+Echarts 图表的封装
Echarts图形封装1.子组件的封装<template> <div :id="id" :style="{height:height,width:width}" /></template><script>import resize from '@/mixins/resize'export default { name: 'Chart', mixins: [resize], props: { /原创 2021-06-30 14:18:15 · 504 阅读 · 4 评论 -
vue+element table动态表格的封装
elementUI的动态表格封装，做个笔记，elementUI官网1.在components中创建GlobalTable文件夹，代码如下<template> <div class="c-table"> <!--region 表格--> <el-table id="CTable" ref="CTable" v-loading="loading" empty-text="暂无数据" :h原创 2021-06-30 12:00:25 · 884 阅读 · 0 评论 -
vue element Pagination分页组件二次封装
vue+element 的分页组件封装1.在components中创建GlobalPagination文件夹，代码如下<template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background="background" :current-page.sync="currentPage" :page-size原创 2021-05-18 11:17:49 · 497 阅读 · 0 评论 -
element Tabs标签二次封装
直接上代码<template> <div class="tab-container"> <el-tabs v-model="activeName" style="margin-top:15px;" :type="tabType" @tab-click="handleClick"> <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :n原创 2021-05-18 10:46:52 · 1983 阅读 · 5 评论 -
class 和 style 绑定的高级用法
class 和 style 绑定的高级用法<html> <head> <title>class 和 style 绑定的高级用法</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> <d原创 2021-03-30 15:39:52 · 126 阅读 · 0 评论 -
vue+iview 封装分页组件
vue+iview的分页组件封装1.在components中创建pagination文件夹，接着创建src，index.js,index.less文件2.index.less文件 //需要修改的样式 .ivu-page-options { margin-left: 10px; .ivu-page-options-sizer { margin-right: 0; } }3.index.js文件import "./index.less";import原创 2020-10-21 18:31:55 · 707 阅读 · 0 评论 -
vue+element 封装动态可配置扩展性强的搜索form表单
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2020-10-21 17:57:47 · 923 阅读 · 0 评论 -
git commit提交规范
feat：新增功能（feature）fix：修复补丁（bug）docs：修订文档，如Readme, Change Log, Contribute等refactor：代码重构，未新增任何功能和修复任何bugstyle： 仅调整空格、格式缩进等（不改变代码逻辑的变动）perf：优化相关，改善性能和体验的修改test：测试用例的增加/修改chore：非 src 和 test 的修改merge：合并分支或冲突等revert： 回滚到上一个版本build：改变构建流程，新增依赖库、工具等（例如we原创 2020-08-25 14:57:24 · 156 阅读 · 0 评论 -
推荐一个vue的组件分享网站--轮子工厂
推荐一个优秀轮子的网站—轮子工厂，一直在持续更新的组件分享网站。这里提供vue和angular的组件，同时还分享一些优秀的组件库。这里的每个组件都有比较详细的安装，使用说明，实例和参数列表等。可以很方便的引入组件到你的应用中使用。网站:轮子工厂...原创 2020-06-17 18:00:57 · 1944 阅读 · 4 评论 -
ES6学习笔记之Promise对象
Promise对象1.异步回调语法不美观我们遇见了回调黑洞问题（一层嵌套一层）回调就是当有多个异步的事情，要排队进行的时候，此时必须回调嵌套回调。ES6推出了Promise对象，就是优雅的解决回调函数的黑洞问题,Promise对象2. ES6的Promise对象ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。下面代码创造了一个Promise实例。cons...原创 2020-03-08 16:12:02 · 200 阅读 · 0 评论 -
ES6学习笔记之ES6中的模块
一ES6中的模块（CMD规范）1 import和export基本使用重点：在ES6中新增了js文件的暴露和引入的新写法：（import和export） node es6 require() → import exports.*** → export module.exp...原创 2020-03-08 15:39:16 · 211 阅读 · 0 评论 -
ES6学习笔记之ES6中函数的新特性
一箭头函数ES6 允许使用“箭头”（=>）定义函数：注意：=> 是一个完整的运算符，不能拆开 = >箭头函数一定是匿名函数，要使用“=”赋值接收某一个匿名的箭头函数，来给这个匿名的箭头函数命名。函数的扩展1【function的基本简化】之前定义函数要写function关键字：const sum = function(a , b){ return a + ...原创 2020-03-08 15:08:44 · 202 阅读 · 0 评论 -
ES6学习笔记之数组的扩展
一、数组的扩展1 find和findIndex方法数组实例的find方法，用于找出第一个符合条件的数组成员，它不会遍历完整的数组。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员，就结束。如果没有符合条件的成员，则返回undefinedvar arr = [2,3,4,5,6,7,8,9,10,11,12];var index =...原创 2020-03-08 14:26:33 · 158 阅读 · 0 评论 -
ES6学习笔记之对象的扩展，字符串的扩展
一.对象的扩展1.对象属性名表达式ES6可以在JSON中使用[]包裹一个key的名字。此时这个key将用表达式作为属性名（被当做变量求值），这个key值必须是字符串。var a = "name";var obj = { [a] : "小明", "age": 12, "sex":"男"}console.log(obj.name); //小明2 Object.a...原创 2020-03-07 17:37:35 · 211 阅读 · 0 评论 -
ES6学习笔记之数组方法和纯函数
一、ES6得新增数组方法ES6中对数组新增了四大“金刚”函数：forEach()、map()、filter()、reduce()，都是一些语法糖。forEach()是es5语法1 forEach()遍历数组forEach()方法用来循环遍历数组，方法中的function回调函数接收3个参数第1个是遍历的数组内容(item)；第2个是对应的数组索引(index)，第3个是数组本身(array...原创 2020-03-07 15:51:03 · 712 阅读 · 0 评论 -
ES6学习笔记之扩展运算符
一.扩展运算符1.扩展运算符（spread）是三个点（…）。将一个数组转为用逗号分隔的参数序列，还能强制展开一个对象，通常用于对象的赋值，使用灵活广泛。第一个作用：称为“展开运算符”，就是把东西展开，可以用在数组和对象上。var obj1 = { "a" :100, "b" :200, "c" :300,}var obj2 = { ...obj1, ...原创 2020-03-07 14:17:26 · 278 阅读 · 0 评论 -
ES6学习笔记之const和let，变量的解构
一、const和let1 constconst用来定义常量，所谓的常量就是值一旦给定后就不变，一次定义终身不变的量const a = 10;a = 20;上面的a就是一个常量，若给a重新赋值，你会发现报错了注意：const通常会定义两种东西：l 定义函数l 定义一些特殊的字符串和常数常量名一般都是全大写，如果由多个单词组成，用下划线隔开，暗示这个是常量2 letlet用...原创 2020-03-07 10:34:55 · 314 阅读 · 0 评论 -
vue prototype 扩展方法
在vue的原型上扩展自己的方法，然后可以全局使用。自己常用的方法有两种混入也是可以全局使用的，但是不能再.js文件中使用，混入请查看混入的使用**方式一1.路径：utils/getTime.js// 倒计时 时间格式化输出，如11天03小时25分钟19秒 每1s都会调用一次function dateformat(micro_second) { // 总秒数 如果传入的是毫秒需要 m...原创 2020-01-19 10:42:20 · 1534 阅读 · 0 评论 -
vue mixins混入的使用
1.mixins就是混入,就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改，mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式一个混入对象可以包含任意组件选项。.比如组件的生命周期，data(){return{}}，methods方法等，凡事能在组件上编写的都能在混入2.什么时候使用Mixins页面的风格不用，但是执行的方法和需要的数据类似，这...原创 2020-01-18 16:29:00 · 672 阅读 · 0 评论 -
vue 自定义通知信息弹窗，全局可用
自定义属于自己的弹窗，并挂载在全局，可在全局使用。适合适用于通知类弹窗，业务逻辑复杂需要与其他组件交互的不推荐使用在src/components文件夹下创建modal文件夹，并创建两个文件分别为：index.js,Modal.vueindex.jsimport Vue from "vue";import Modal from "./Modal.vue";//局部注册 需要传入 co...原创 2020-01-18 14:48:41 · 1571 阅读 · 0 评论 -
VScode Eslint代码校验
{ "git.ignoreMissingGitWarning": true, "workbench.colorTheme": "Monokai", "workbench.iconTheme": "vscode-icons", // 是否自动保存 // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": fa...原创 2019-12-29 14:51:29 · 422 阅读 · 0 评论 -
触屏页面移动默认选中设置
在做页面自助收银的时候用户点击按钮，会默认选中两个点之间的区域，还会出现选中的颜色，这对于触屏程序来说是很不友好的，折腾半个小时候找到了一个解决办法，亲测有效。1.使用以下代码，两点之间将不再会默认选中，我把这端css放在APP.vue下，全局有效.disable-select { user-select: none; /* supported by Chrome and Opera */...原创 2019-12-12 11:17:33 · 276 阅读 · 0 评论 -
Vue3.0 使用mock
Vue CLI 3 环境中使用模拟数据（Mock）第一步：下载mock插件 以及axiosnpm install --save axiosnpm install --save mockjs2.第二步：在根目录下创建mock文件夹，跟src统计，然后在创建mock.js。这是用来存储模拟数据的文件const Mock = require('mockjs') //引入mockMo...原创 2019-11-29 15:01:34 · 2366 阅读 · 3 评论 -
Vue PC端分辨率自适应
因为在做超市POS收银系统的时候，遇到需要适配不同的PC端的分辨率，原来PC还能做自适应的呀，感觉发现了新大路，于是打算做一下笔记。当然我在做的过程中也借鉴了其他大佬的写的，如：https://blog.youkuaiyun.com/weixin_41257563/article/details/97266234先下载所需要的插件npm i lib-flexible -Snpm i px2rem...原创 2019-11-29 11:59:54 · 3502 阅读 · 7 评论 -
vue 键盘组合事件，POS系统
前言最近在做POS端的超市收银系统，需要监听所有按钮的事件，由于需要监听的按钮比较多，有点复杂，所有就想记录下来。我这里做键盘的监听事件的基本思路是：首先使用**document.onkeydown = function(e) {}**获取到keycode的值存在数组里面，为了防止按错或者多按了其他按钮，所有我需要取数组的后四位元素，为什么要取四位？因为我这边最多的组合键和回车键一共四位数，所以...原创 2019-11-25 11:22:09 · 775 阅读 · 0 评论 -
表单的自定义校验规则
在工作中使用得挺多的表单自定义校验规则的,所以打算记录下来,以后需要的时候再来查看.在utils文件夹下创建check.js文件,然后就写自定义校验规则,在导出,代码如下:/** * Created by jiachenpan on 16/11/18. */const isvalidUsername = (str) => { const validMap = ['admin'...原创 2019-07-11 15:18:16 · 1866 阅读 · 0 评论 -
less自定义变量以及全局使用，scss的全局使用
1.在assets文件夹下创建–>base–>variable.less,如下//这些都是less的自定义变量,都在可以全局使用@data-color-cyan: #70FFE1;@data-color-green: #00D08F;@data-color-orange: #FA6400;@user-state-orange: #FE824C;@big-size: 30p...原创 2019-07-13 14:36:52 · 6694 阅读 · 0 评论 -
API的封装
API以前自己也尝试封装过但是看了老大的封装之后才发现自己封装得很臃肿,话不多说,还是来看一下代码吧:1.这是代理的设置,跟网上的没有什么量两样 proxyTable: { '/portal2': { // 这是服务器的地址(下面的地址是我乱写得) target: 'http://120.00.000.000:0000', chang...原创 2019-07-13 12:03:15 · 5045 阅读 · 2 评论 -
打包部署后elememt-ui图标无法显示问题
打包部署后elememt-ui图标无法显示,访问各种论坛之后终于找到了解决的办法,于是就想记录下来解决办法：1、查看build目录下webpack.base.config文件的module中 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: {...原创 2019-07-13 11:35:18 · 559 阅读 · 0 评论