
Vue
乐之终曲
技术很多,路还很长
展开
-
Vue 实现 xlsx 导出工具封装
Vue 实现 xlsx 导入工具封装安装组件组件封装:exportExcel.vueHTMLJS使用HTMLJS安装组件npm install xlsx --save组件封装:exportExcel.vueHTML对上传按钮进行封装<template> <el-button type="primary" size="mini" @click="exportExcel">{{ btnName || "导出" }}</el-button></templ原创 2021-01-20 14:00:22 · 880 阅读 · 0 评论 -
Vue新手学习笔记:基础知识点整理及示例
作为一个刚毕业的应届生,实话我自学能力不好,因此我选择写文章将我的学习过程,感悟记录下来,慢慢改进提高自学能力。学习Vue的一些基本语法MVC和MVVM的关系图解:官方手册:https://cn.vuejs.org/v2/guide/不管学什么,起码要知道自学将要学习的东西是什么,以及一些基本的语法。在vue的官网上学习语法,同时可以在官方提供的平台上做简单的代码编写,...原创 2019-01-03 10:09:55 · 8820 阅读 · 4 评论 -
Vue新手学习笔记:vue-cli框架
搭建vue-cli项目作为一个喜欢动手的人,在理论有一定了解的情况下,我选择通过实践来让我记住之前看过的理论,因为我看完就忘1.安装node.js及npmnpm官网地址下载node,安装很简单一直下一步就可以了。win+R 输入cmd进入命令行 输入node -vnpm -v出现以上信息说明node.js及npm安装成功2.创建vue-cli项目使用vu...原创 2019-01-17 17:08:41 · 9534 阅读 · 20 评论 -
Vue 新手学习笔记:动画效果
1.过渡类名实现动画参考:单元素/组件的过渡 v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。 v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。 v-enter-to:2.1.8版及以...原创 2019-02-21 14:05:29 · 441 阅读 · 0 评论 -
Vue 新手学习笔记:vue-element-admin 之入门开发教程(v4.0.0 之前)
说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些但没办法,接下来做微服务架构,前端就用 vue,这块你负责。。。。说多了都是泪,脚手架框架布了都没看过干就完事,不过好在做好了,这里写下给和我一样苦逼的同学能快点适应入门下,当然一些基础的东西还是要知道的v4.0.0 版本的调整后讲解:Vue 新手学习笔记:vue-element-admin 之 入门开发教程(...原创 2019-03-19 09:34:56 · 65584 阅读 · 48 评论 -
Vue 新手学习笔记:vue-element-admin 之 入门开发教程(v4.0.0 之后)
由于vue-element-admin 的架构再 4.0.0 版本后做了重构,所以写这个文章,对改动比较大的部分做个讲解,方便大家入门学习。虽说项目做了重构,但是整体结构上和之前的还是很相似的,所以有些和之前差不多的我会直接放之前文章的链接由于 Markdown 实在不太会用,这里手动列下目录,毕竟东西有点杂安装&准备工作&ESLint配置 连接后台真数据 Mock ...原创 2019-09-05 13:11:34 · 13350 阅读 · 6 评论 -
Vue 新手学习笔记:vue-element-admin 之登陆及目录权限控制
登陆万事开头难,做什么事都要有个起点,后面才能更好的进行下去,因此我选择的起点就是最为直观的登陆页面 /login/index.vue/src/views/login/index去除那些无关的东西,比如什么 rules 校验啊,默认的账号密码之类的东西,直接看核心登陆方法handleLogin handleLogin() { this.$refs.loginFor...原创 2019-05-31 11:34:57 · 54893 阅读 · 46 评论 -
Vue 新手学习笔记:vue-element-admin 之按钮级权限管控
随着软件的发展,网站从最初的满足用户业务需求到提升用户。就比如一个按钮只要求权限方面的管控我们可以通过 shiro,注解等方式来实现,但是页面上用户点击后没反应或者点击后弹框没权限,这显然不是一个好的用户体验,因此通过前端来实现权限管控也是很有必要的。思路1.获取按钮权限2.按钮权限保存在前端全局中vuex3.页面加载按钮时通过判断权限的存在与否,控制按钮的显示隐藏或者样式选择P...原创 2019-06-26 14:11:39 · 13556 阅读 · 2 评论 -
Vue 新手学习笔记:vue-element-admin 给每个页面设置相应的 Title
Vue 新手学习笔记:vue-element-admin 给每个页面设置相应的 Title前言路由设置 Titlemain.js 设置 Title 变化效果前言根据每个页面的路由,给每个页面设置想用的 Title路由设置 Titlemain.js 设置 Title 变化router.beforeEach((to, from, next) => { /* 路由发生变化修改页面t...原创 2020-04-07 15:56:49 · 2415 阅读 · 2 评论 -
Vue 新手学习笔记:vue-element-admin 之解决路由开启 Histroy 模式,刷新跳首页问题
Vue 新手学习笔记:vue-element-admin 之解决路由开启 Histroy 模式,刷新跳首页问题为什么开启 Histroy 模式开启 Histroy 导致的问题解决方案为什么开启 Histroy 模式原因是不开启 Histroy 模式,默认 hash 模式下路由路径上会带 # 号,强迫症会觉得不美观,不符合正常的 URL 写法开启 Histroy 导致的问题正常情况下页面刷新后应该是停留在当前页,开启 Histroy 模式后,刷新页面会由于 URL 匹配不到任何静态资源导致跳转到首原创 2020-07-15 11:00:33 · 1670 阅读 · 1 评论 -
Vue 新手学习笔记:vue-element-admin 之零散配置修改
Vue 新手学习笔记:vue-element-admin 之零散配置修改前言网页 Title 替换以及类似问题修改问题点修改前言本文更像随便,遇到框架中一些零散的配置修改在此记录,发现一个加一个网页 Title 替换以及类似问题修改问题点修改可以直接搜索功能搜索修改对应文件:/src/layout/components/Sidebar/Logo.vue/src/settin...原创 2019-11-29 09:58:50 · 3325 阅读 · 0 评论 -
Vue 新手学习笔记:vue-element-admin 之 Tinymce 富文本编辑器回写问题
Vue 新手学习笔记:vue-element-admin 之 Tinymce 富文本编辑器回写问题问题描述问题分析解决方案问题描述Tinymce 富文本编辑器作为子组件引入时,如果富文本编辑器已经绑定过值,再通过 v-model 双向绑定去更新值时,值不会发生变化这是我第三次单击编辑,此时由于富文本中已经有值,再次回写不生效,因此预览正确应该为 a,但是富文本中不正确。问题分析代码位置:/src/components/Tinymce/index.vue该文件是 Tinymce 富文本子组件,其原创 2020-06-04 11:00:10 · 3045 阅读 · 9 评论 -
Vue table 点击按钮展开折叠面板
vue 实现的 table 折叠展开功能,由于工作中用到,这里把相应代码整理下,方便自己日后 Copy1.Html 部分由基本的 table 表单与折叠栏部分组成PS:table 上需要加上 ref,以便方法中能够获取到 table 属性 <!-- 注意:el-table 上加一个 ref="table" --> <el-table ref="tabl...原创 2019-04-26 16:51:22 · 18195 阅读 · 8 评论 -
Vue 实现附件上传
Vue 附件上传示例前言前端部分HTMLJS工具类 JS前言前端 UI 是用的是 element-ui 的上传功能本文主要记录下代码,方便下次复制粘贴前端部分HTMLlimit: 限制文件个数 1 个on-remove: 移除附件时的钩子函数,主要就 console 输出下on-error: 用于处理上传异常后的处理,本人这主要用来关闭弹窗和全屏等待file-list: 绑定附件auto-upload: 禁止自动上传,true 的话选了文件就自动上传http-request: 自定义原创 2020-05-28 16:08:36 · 4040 阅读 · 1 评论 -
Vue 数值型输入框,并限制长度
element-ui 数值型输入框,并限制长度描述代码描述element-ui 原有的 <input type="number" /> 个人觉得存在问题,maxlength 属性无法生效,其次 max 属性虽然能够限制,但是无法阻止用户手动输入,因此依然存在 bug代码改为正则表达式方式<el-input v-model="form.level" onkeyup="th...原创 2019-12-12 09:50:48 · 3083 阅读 · 0 评论 -
Vue table 表格中参数过长省略并且提示显示
<el-table-column :show-overflow-tooltip="true"></el-table-column>原创 2019-04-29 11:30:27 · 18524 阅读 · 6 评论 -
Vue 设置背景图片样式
Vue 设置背景图片样式CSS效果图CSS<style>body{ background-image: url('./bg.jpg'); background-size: cover; background-position: center; font: 14px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',s...原创 2020-04-07 16:26:37 · 5932 阅读 · 1 评论 -
Uncaught TypeError: Cannot assign to read only property 'exports' of object '
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#错误解决方案太久没启动 Vue,启动不知道咋的就报错了据说是 export 和 import 共用了导致不兼容引起的npm install babel-plugin-transform-es2015-modules-commonjs...原创 2019-11-06 12:59:12 · 412 阅读 · 0 评论