VUE
戴草帽的太阳
悄悄地敲敲敲。。。
展开
-
【VUE】用js实现动态数据流式布局
目前这种流式布局主要应用于图片展示,用css、flex方法来实现的居多,但这些仅适用于固定数据,并不适用于本项目中的动态数据(即列数、每列高度均不定的情况)实现流式布局。【背景】由于项目需求中遇到一个 ‘更多菜单’ 中的布局需要用到瀑布流布局,特地去了解了下什么是瀑布流布局?从第二行开始,每一个容器都要放在第一行容器高度最小的下方,以此类推。小编通过结合其实现原理 封装了一个用js实现动态数据流式布局的组件。瀑布流的特点:即等宽不等高。原创 2023-03-11 21:40:01 · 903 阅读 · 1 评论 -
VUE WangEditor 配置图片上传至服务器
功能需求:在我的实际项目中因wangEditor默认的图片上传的存储方式是base64存储,会导致上传后的图片太大,所以需配置上传本地服务器wangEditor版本:4.7.9话不多说 直接上代码:<template> <div> <el-form ref="form" :model="form" label-width="150px"> <el-form-item label="文本内容" prop="content" class="con原创 2022-03-01 11:58:55 · 2996 阅读 · 0 评论 -
VUE 如何隐藏高德地图vue-amap左下角的logo
情景描述在我的项目中,引用了高德地图api,在页面展示上需要隐藏掉左下角的logo,尝试过很多博主提供的方法,未果,最后找到了解决方案解决方案:在我项目中,自定义封装了地图组件(具体看我上一篇文章),直接在该文件中设置样式即可<style lang="scss" scoped>::v-deep .amap-logo { display: none; opacity: 0 !important;}::v-deep .amap-copyright { opacity: 0原创 2021-11-19 15:19:48 · 2119 阅读 · 1 评论 -
VUE使用【高德地图】vue-amap自定义封装组件带搜索功能及回显标记功能
vue-amap的使用情景描述:1.点击查看按钮弹出弹框显示地图,搜索地址后地图上进行选点获取经纬度、省市地区等信息,点击确定按钮关闭弹窗将获取到的信息填入表单2.在表单已有经纬度数据时点击按钮地图根据经纬度信息回显标记到相应位置效果如图:地图搜索选点点击确定将信息填入表单step1.安装 npm install --save vue-amapstep2.main.js中引入配置// 全局组件高德地图import VueAMap from 'vue-amap'Vue.use(VueA原创 2021-11-19 14:56:01 · 4230 阅读 · 1 评论 -
踩坑指南——VUE项目前端使用SM3国密加密
使用场景:在我的项目中,甲方要求系统登录时对密码进行加密后再传给后端,指定使用国密SM3,在这个过程中使用了很多种方法,最终总结出最简单的一种方法,如下:操作步骤:1.先在项目中使用npm命令安装依赖npm install --save sm-crypto2.页面中部分代码<template>//密码框部分<el-form-item prop="password"> <el-input :key="passwordTyp原创 2021-09-02 14:47:40 · 8062 阅读 · 3 评论 -
踩坑指南——前端处理vue项目在页面上点击下载文件名乱码问题
遇到的问题:在网页中点击链接下载下来的文件名字不是原本的文件名,打开文件后内容正常的。之前在网站上也参考过很多其他博主的解决方案,试了好几种都没效果上代码:页面上的片段 由于使用el-link直接下载,再点击下载时会出现闪屏的情况,所以就绑定了一个事件来解决这个问题 <el-table-column prop="url" header-align="center" label="附件" :show-overflow-tooltip="true"> &原创 2021-08-25 18:40:44 · 3335 阅读 · 3 评论 -
踩坑指南——Vue element admin 自带的富文本编辑器Tinymce语言设置
问题:菜单栏等内容默认为英文状态在此之前也看了很多博主的方法,但经本人实际验证无效,方法实际是没问题的,但漏掉了一步最关键的修改操作如下:由于我的项目使用的是vue-element-admin,默认在src/main.js中就注册使用了elementui组件,所以此步骤省略1.文件路径::src/components/Tinymce/index.vue2.文件路径:src/store/getters.js3.文件路径:src/store/modules/app.js最终修改效果如下:原创 2021-07-02 16:31:00 · 1088 阅读 · 4 评论 -
VUE利用provide和inject实现页面局部刷新功能
功能需求:点击刷新时,路由保持在当前路由,不会t跳回到首页,当前路由下的页面局部刷新实现原理:利用vue的provide和inject,它们成对出现,作用于父组件向子孙组件传递数据,provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子组件等下级组件中注入数据。代码如下:步骤1.先在APP.vue中修改<template> <div id="app"> <router-view v-if="isRouterActive" />原创 2021-06-22 10:54:04 · 704 阅读 · 0 评论