![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
Vue相关
小志哥斯拉
将前端技术进行到底
展开
-
quill 富文本编辑器 @提及
3. 在vue2中使用的示例,已省去无关代码。(示例来自自行封装的Quill.vue通用组件)无论哪个示例,记得引入css样式。在源码的 dist/quill.mention.css。使用插件quill-mention实现在quill 富文本编辑器使用@或#提及用户。原创 2023-08-09 17:20:37 · 970 阅读 · 0 评论 -
当一个 form 元素中只有一个输入框时,在该输入框中按下回车提交表单,并阻止默认的表单提交
当一个 form 元素中只有一个输入框时,在该输入框中按下回车,会默认提交该表单,导致刷新整个页面。而需求是不可以刷新页面,而是异步提交表单。监听输入框的回车事件 @keydown.enter.native="shipContainerBill",自行提交表单。W3C 标准: 当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。加上 @submit.native.prevent 阻止form表单默认提交事件。原创 2023-06-08 08:32:08 · 407 阅读 · 0 评论 -
element-ui table 列渲染错乱
当table表格通过v-if配置是否显示列,且列的数量过多时(大概10列以上),就会出现渲染混乱。(例如:页面组件是缓存的keep-alive,首次渲染表格没问题。但是切换到其他组件再切换回来时,表格列就会出现错乱。通过v-if控制表格的列是否展示,每列通过showColumn函数检查用户的配置,返回true或false(是否显示该列)。每一列添加唯一key属性值,问题解决。原创 2023-04-23 16:45:37 · 519 阅读 · 1 评论 -
用vue做一个音乐播放器
开源协议MIT Licensegithub: https://github.com/huangweizhi/xz-music.gitgitee: https://gitee.com/weizhihuang/xz-music.git使用了开源的网易云音乐 NodeJS 版 APIvue全家桶 vite + vue3 + vue-router4 +pinia2原创 2023-03-15 17:00:43 · 669 阅读 · 0 评论 -
element-ui table 设置表格滚动条位置
在切换不同页面时(被 keep-alive 缓存的组件间切换),页面中的element-ui table的滚动条位置没有停留在原来的位置。目前需要切换不同的页面返回来后,滚动条保持在原来的位置。原创 2023-03-01 08:32:26 · 4546 阅读 · 0 评论 -
Vue history模式路由 部署到二级目录 配置
增加一个环境变量VUE_APP_BASE_URL,将环境变量VUE_APP_BASE_URL值设为 '/cms'。3.1 改为hash模式路由,将router mode配置注释掉。3.2 修改网站目录,对应修改VUE_APP_BASE_URL。修改publicPath(打包后公共资源文件访问路径)。示例:部署到二级目录/cms。2、vue2项目配置。原创 2023-02-15 12:22:04 · 1069 阅读 · 0 评论 -
解决vue-router4缓存页与不缓存页切换失效的问题
路由配置中,name要唯一且和组件名称要相同,否则缓存无效。keepAlive用于说明该组件是否缓存。这样会存在一个问题,当从缓存页切到不缓存页,再从不缓存页返回到缓存页时,缓存失效,缓存页会重新加载。还是按照官方的方法来吧,使用include属性。原创 2022-10-14 09:52:29 · 1691 阅读 · 1 评论 -
vue-devtools安装(v6.4.1)
导入devtool插件的路径是 D:\HBuilderProjects\devtools-6.4.1\packages\shell-chrome。4.4、选择文件夹 D:\HBuilderProjects\devtools-6.4.1\packages\shell-chrome。3、我的项目所在地址是 D:\HBuilderProjects\devtools-6.4.1。2、下载并解压到本地后,在项目根目录运行。4.1、右上角点开 更多程序-扩展程序。4.3、加载已解压的扩展程序。4.2、打开开发者模式。原创 2022-09-28 10:29:06 · 962 阅读 · 0 评论 -
js实现表格按行滚动
3、滚动控制:为了实现按行滚动,需要拿到div表格的每一行的高度,然后定时、逐行执行滚动(即对tbody滚动高度值定时进行累加,每次累加表格行的高度,然后tbody的style属性的top取滚动高度值的负值)。1、表格模仿table的结构,使用div元素构建,其中在tbody外包了一层div(tbody-container),以便对超出tbody-container的内容进行隐藏。最近又有同样的需求,不过是vue项目,所以又做了一个基于 js实现的表格按行滚动,原理相同。优化了表格内容见底后即滚回顶部。原创 2022-09-02 11:12:18 · 2844 阅读 · 0 评论 -
Vue 高德地图 输入提示和POI搜索插件结合使用 拾取对应地点坐标
7、效果:在搜索框输入地点名称,产生输入提示,点击某个提示选项后,进行POI搜索,地图会自行标记出搜索地点。点击地图任意位置,或者POI搜索结果的marker,都会拿到相对应的坐标。4、JSAPI 的加载:这里使用官方文档推荐的方式,使用 JSAPI Loader ,并按 NPM 方式使用 Loader。1、准备好高德地图的key和安全密钥jscode,key的平台类型是Web 端 ( JSAPI )。如上述代码,在配置文件中设置安全密钥,这样只要外部引用key就会执行 设置安全密钥 的代码。...原创 2022-08-26 11:24:51 · 4507 阅读 · 12 评论 -
在element-ui menu组件基础上,封装一个动态侧边菜单栏组件
组件由两个文件构成,都放在了Sidebar目录下,分别是index.vue和SideItem.vue,使用时直接引入index.vue即可。菜单栏数据从路由表获取,示例中通过mapGetters从store中获取permission_routes。在不考虑权限时,这些数据可以直接从router/index.js文件引入,permission_routes是根据登录用户权限筛选后的路由。示例中路由表的数据格式如下:菜单栏组件逻辑:菜单栏由el-menu整体包裹,可展开的菜单项由el-submenu包裹,原创 2022-07-12 20:58:57 · 1657 阅读 · 2 评论 -
vue-i18n 插件实现国际化,支持切换不同语言
文档https://kazupon.github.io/vue-i18n/zh/started.html 1、安装依赖包vue-i18n$ npm install vue-i18n --save2、国际化相关的代码都放在项目的src/lang目录下src/lang/en.jssrc/lang/zh.jssrc/lang/index.js如果项目使用了element ui,element ui也需要进行国际化,它可以与 vue-i18n 搭配使用实现多语言切换https://element.ele原创 2022-07-07 20:28:26 · 718 阅读 · 0 评论 -
在 Vue.js 中使用 Font Awesome
官方文档https://fontawesome.com/docs/web/use-with/vue/1、安装核心包:npm i --save @fortawesome/fontawesome-svg-core2、安装Font Awesome Vue组件:Vue 2.xnpm i --save @fortawesome/vue-fontawesome@latest-23、按需安装图标包:免费图标npm i --save @fortawesome/free-solid-svg-iconsnpm i --原创 2022-06-23 11:16:39 · 544 阅读 · 0 评论 -
Vue alias 配置路径别名,解决无法快捷跳转问题
配置路径别名,在项目vue.config.js文件中添加如下配置:这样就可以在项目中使用别名了: 但是会有一个问题,Ctrl+鼠标左键 点击引入的login,无法跳转到login方法。解决方法:项目根目录新建jsconfig.json文件,配置如下:重启vscode即可。...原创 2022-06-20 17:02:25 · 2198 阅读 · 1 评论 -
react或vue项目部署到nginx服务器、history路由模式、nginx代理解决跨域的配置
需求:后台服务地址:http://127.0.0.1:5000前端地址:http://127.0.0.1 (history路由模式)前端向后台发送请求的地址:http://127.0.0.1/api配置: nginx.conf配置文件:原创 2022-06-03 19:37:22 · 1030 阅读 · 0 评论 -
element-ui表格行不对齐
element-ui在表格存在固定列的情况下,首次渲染会出现滚动列的部分和固定列的部分不对齐的情况。解决方法:el-table添加属性ref="table",在调用后台接口获取表格数据完成之后,调用表格方法doLayout(),对表格进行重新布局。async getData() { let queryInfo = {...this.searchForm, ...this.sortObj} queryInfo.warehouseCode = this.$store原创 2022-05-13 08:44:50 · 2639 阅读 · 0 评论 -
xlsx将html table导出为excel表格
示例中已省略部分无关的代码。一、安装xlsx$ npm install xlsx --save二、导出excel方法将导出excel方法写在混入中,在每个需要的页面混入。isShowTableColumn 控制不需要打印的列 (XLSX会根据拿到的table的dom来转换成excel,将isShowTableColumn设为false,临时将不需要展示的列从dom中删除),打印前将isShowTableColumn设为false,等dom更新后(Vue.nextTick方法)再调用XLS原创 2022-04-26 12:27:02 · 1155 阅读 · 0 评论 -
在vue项目中使用less全局变量
一、使用less使用less,需要安装开发依赖:$ npm install lessless-loader --sav-dev在项目中使用less:二、less全局变量在全局less文件中定义全局变量:在其他地方引用less全局变量:此时全局变量并未生效,需要安装开发依赖:$ npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev并在vue.confi...原创 2022-03-23 15:21:20 · 15062 阅读 · 4 评论 -
vue 过滤器使用
数据处理函数 utils/index.js:// 字节转换为单位大小export const bytesToSize = (bytes=0) => { if(bytes <= 0) return '0 B'; var k = 1024 var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] var i = Math.floor(Math.log(bytes) / Math.log(k)) re原创 2022-02-15 14:45:26 · 225 阅读 · 0 评论 -
vue-quill-editor的使用
1、安装vue-quill-editor模块:$nmp installvue-quill-editor --save2、安装quill-image-extend-module模块(可选,用于将图片上传到服务器):$nmpinstallquill-image-extend-module --save3、自定义中文样式(可选),src/assets/css/global.css:/* 富文本编辑器 */.editor { line-height: normal !important;}...原创 2022-02-15 14:28:37 · 1791 阅读 · 0 评论 -
vue-router 路由导航守卫使用
未登陆时,前端路由自动跳转到登录界面。登陆时,允许访问其他前端路由。// src/router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'const Login = () => import('../views/Login.vue')const Home = () => import('../views/Home.vue')const Welcome = () => import('..原创 2022-01-19 16:45:59 · 416 阅读 · 0 评论 -
vue项目中使用 axios 实现拦截网络请求,并添加请求头
在vue项目入口文件main.js中添加如下代码:// main.js// 引入axiosimport axios from 'axios'// 设置url地址axios.defaults.baseURL = 'http://localhost:3000/admin/'//request请求拦截axios.interceptors.request.use(config => { // 添加请求头示例(自行定义) config.headers.Authorization =原创 2022-01-19 16:33:49 · 1169 阅读 · 0 评论