- 博客(60)
- 资源 (5)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 发送携带token，cookie的axios请求
安装 js-cookienpm install js-cookie -s在src下面创建util文件夹，并创建auth.js文件import Cookies from 'js-cookie'const TokenKey = 'token'export function getToken() { return Cookies.get(TokenKey)}export function setToken(token) { return Cookies.set(TokenKey,.
2021-01-15 14:48:23
847
原创 在 Vue 中实现表单校验失败后页面滚动到错误处
在处理表单校验时，确保用户能够清晰地看到错误是非常重要的。通过将页面滚动到错误处，可以帮助用户更快地找到并纠正错误。在 Vue 中，实现这一功能是相对简单的，只需遵循上述步骤即可轻松实现。希望本文能够帮助你提高用户体验并改进你的 Vue 表单验证功能。
2024-05-21 10:58:06
1553
2
原创 EventEmitter3在vue中的使用
eventBus的使用范围更加广泛，可以跨越不同组件和模块之间进行信息通信传递,它是一个全局概念的事件总线。通常作为一个单例对象存在，因此往往需要创建一个中央管理器的实例是一个基于类的模块,用于在单个组件或模块内部实现事件的发布和订阅。所以它可以在需要的地方创建实例对象，并将其用于内部事件的发布和订阅。
2023-11-15 10:18:41
972
原创 vue使用tinymce（新增字数限制）
前提：已经使用了tinymce，且是本地引用我这里是将其放在了/public/tinymce/plugins下面4、文档以上是引用插件的基本用法，但是部分项目在使用时还需要校验当输入超过后又删除回来的判断方法这里我对解压后的文件进行了修改：// plugin.js主要添加的就是这四行代码在返回后添加一个校验的bool值在并在函数中进行接收:
2022-11-21 12:03:15
5006
2
原创 gitlab push 时提示 “Empty Reply From Server”
公司内部搭建的gitlab平台，结果其他人可以正常使用，我在push时提示fatal: unable to access : Empty reply from server。经过一番查找，网上搜到的几个解决方法都不行，最后发现是我设置了代理，使用git config --global --unset http.proxy之后即可正常使用。...
2022-04-21 15:34:56
1996
原创 Vite创建Vue2项目
注意：在 Vite创建项目 中讲到，Vite 官方对 Vue 的支持只针对于Vue3.x 版本，而对于 Vue2.x 是不支持的。使 Vite 支持 Vue2.x，是需要安装插件来实现 官方vue2插件1.使用vite创建基础项目 创建方式这里我使用的是npm（个人常用npm，无关其他）：$ npm create vite@latest2.输入项目名按个人需求取即可，我这里随便叫一个vue2吧? Project name: vue23.选择框架? Select a framewo
2022-03-02 11:17:23
7228
2
原创 vite 初体验
Vite是什么？Vite 是Vue作者开发的一款想要取代webpack的工具（基于原生 ES-Module 的前端构建工具）其原理是利用ES6的import发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去了webpack冗长的打包时间所以本质 Vite 其实就是利用了浏览器模块化功能的一个代理转化器，转化器应该能明白吧，就是类似 .vue 转化成 .js 文件。webpack 官网的例子已经很形象了。就把有相互依赖关系的模块，聚合转化成单个 .js 文件、单个 .css文件以及其他的一些静
2022-03-02 10:23:26
808
原创 github新建项目
1 首先你需要一个github账号，所以还没有的话先去注册吧！github2 我们使用git需要先安装git工具，这里给出下载地址，下载后一路（傻瓜式安装）直接安装即可git3 登陆后，进入Github首页，点击New repository新建一个项目3.填写相应信息后点击create repository即可Repository name: 仓库名称（输入名字，最好不要使用中文）Description(可选): 仓库描述介绍Public, Private : 仓库权限（公开共享，私有或指定
2022-01-11 15:20:57
1134
原创 vue项目中input打开文件夹
<el-form-item label="文件夹路径："> <div>{{ form.collectPath }}</div> <input id="file" type="file" hidden webkitdirectory @change="fileChange"> <el-button @click="handleOpenMenu">打开文件夹</el-button></el-form-item>
2021-12-20 20:12:03
3408
5
原创 element实现超出隐藏省略号，鼠标移动悬浮显示
效果图：新增vue文件EllipsisTooltip.vue一般情况下我都是在component文件夹中创建改vue文件<template> <el-tooltip :ref="tlp" :content="text" effect="dark" :disabled="!tooltipFlag" :placement="placement" class="tooltip" > <span :class="c
2021-12-01 19:24:35
1003
原创 使用vue-grid-layout完成桌面拖拽布局功能(实现两个元素互换位置)
最近有个项目需要实现和windows桌面类似的图标拖拽功能，找了很多组件都没找到一个合适的，但通过本博主的不懈努力最后发现了两款不错的插件：sortablejsvue-grid-layout本来一开始我使用的是第一个，但是可能是有点转不过来，最终放弃了第一个插件，但是第二个也确实香，虽然也有不少bug但是也不是不能解决的，下面就回到正题上来给大家粗略说一下：先上代码吧，怕大家等不及往下拉：<template> <div> <grid-layout :
2021-10-26 08:34:30
3923
原创 vue动态新增、修改、编辑树
弹窗组件<template> <div id="dialogCatalog"> <el-dialog title="产品目录管理" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" width="500px" :before-close="handleClose"
2021-08-23 15:25:19
774
原创 登录权限管理
该篇文章主要考虑的是：一个项目可同时等前台以及后台系统路由分为固定路由，以及动态路由固定的路由一般我们不进行考虑，它一般在开始的时候我们就将他进行挂载了动态路由我们需要进行接口获取时将其获取直接上代码：router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import store from '@/store/index.js' // no redirect whitelistimport Admin
2021-08-06 09:21:14
483
原创 解决VUE keyup.enter和blur绑定同一事件，触发两次的问题
<el-input ref="editTagFoucus" size="mini" @keyup.enter.native="$event.target.blur" @blur="editCompleteTag(items)" v-model='items.name'> </el-input>坑：有些情况会造成报错：这时候就要在$event.target.blur()加上（）让$event.target调用的是blur()方法故：<el-
2021-08-03 10:33:57
1661
2
转载 VUE饿了么树形控件添加增删改功能
大致效果如图：1.省市API在网上复制了个省市的list，有两个属性是新增的isEdit ：控制编辑状态maxexpandId ：为现下id的最大值export default{ maxexpandId: 95, treelist: [{ id: 1, name: "北京市", ProSort: 1, remark: "直辖市", pid: '', isEdit:
2021-07-31 16:28:23
722
原创 在vue中使用tinymce富文本（vue-element-admin）
1.可以直接跳转到vue-element-admin中下载或者clone2.将vue-element-admin/src/components/Tinymce tinymce文件复制到所要用的项目中3.在所需要的地方进行引用<tinymce v-model="description" ref="editor" :height="300" />import Tinymce from '@/components/Tinymce'components: { Tinym
2021-06-16 16:52:51
1157
原创 vscode+eslint+vue
1.vscode安装eslint2.在文件–首选项–设置–setting "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.formatOnSave": true, "eslint.format.enable": true, "editor.formatOnType": true, "eslint.options": {}3.再去配置eslint
2021-06-11 16:08:00
226
1
原创 vue原生编写上传图片
标签<input type="file" id="imageUrl" accept="image/*" @change="changefile">方法/* 上传图片操作 */ changefile(event) { /* 获取到你选择的文件 */ // let file = event.target.files[0]; let file = document.getElementById("imageUrl").files[0];
2021-05-28 09:57:54
356
原创 element的form重置机制
两个表单同时在一个页面同一个页面有两个表单需要验证的时候this.$refs[formName].resetFields();只会获取到第一个表单的ref，而后面的表单则无法获取到解决方法使用v-show将其他表单进行隐藏，则获取到的表单会成为当前第一个表单，用v-show的时候可以用三目运算来实现v-show的判断。注意：v-if不会真正消除当前表单，只会隐藏，所以不能用v-if，只能用v-show来判断...
2021-05-21 12:00:06
362
原创 在vue中使用echarts
1、通过npm获取echartsnpm install echarts --save2、在vue项目中引入echarts（main.js）import echarts from ‘echarts’Vue.prototype.$echarts = echarts3、新建Echarts.vue文件（例子）<template> <div id="dashboard"> <div id="myChart" :style="{ width: '800px', he
2021-05-20 10:25:53
119
原创 原生js存储cookie登录信息
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/html"><head> <meta charset="UTF-8"> <title>jsCookie</title></head><body><form id="form1" action="http://www.apple.com"> user
2021-05-08 16:35:34
189
原创 elementUi在table组件中添加多选条件
先上图该图前面的为全选框，后面的为多选框数据 tableData: [ { id:1, //id name: "11", //大类名 checkedCities: [], //用来存放选中的小类，并表示小类选中状态 indeterminate: false, //半选中状态 checkAll: false, // 大类的选中状态 cityOp
2021-04-30 17:05:40
884
2
转载 vue父组件点击触发子组件事件
父组件app.vue<template> <div id="app"> <!--父组件--> <input v-model="msg"> <button v-on:click="notify">广播事件</button> <!--子组件--> <popup ref="child" ></popup> </div> </template> <
2021-04-29 17:34:07
2251
vue有没有取消排序的网格拖拽组件
2021-10-25
TA创建的收藏夹 TA关注的收藏夹
TA关注的人