草庐IT

vue3-admin

全部标签

vue element ui el-table单元格里面显示多张图片点击并放大

效果图:一个单元格里面显示三张图片,并且点击图片可以放大。1.将图片v-for渲染出来,具体上代码注:el-popover的属性  2.单元格里能够展示多张图片,需要在请求的接口里面做处理getList(){this.loading=true;listPosts(this.queryParams).then(response=>{this.total=response.total;for(letindexinresponse.rows){response.rows[index].postImages=response.rows[index].postImages.split(',')//后端返

vue中支持txt,docx,xlsx,mp4格式文件预览(纯前端)

前言在平常的工作当中,已经会遇到文件上传后需要预览的功能,比如docx,doc,xls,xlsx,ppt,pdf,txt,图片,视频等格式的文件,其实也可以让后端人员写接口解析,本着不想麻烦别人的心态,能自己解决的绝不麻烦别人,这里简单介绍txt,docx,xlsx,mp4文件预览。一、txt文本预览    1.在vue项目中安装axios   npmiaxios-S 或yarnaddaxios     2.准备一个txt文件,里面随便输入些内容             3.使用axios来请求该txt文件            页面完整代码如下        {{textContent}}i

vue项目中 jsconfig.json和tsconfig.json文件配置释义 & compilerOptions配置

vue项目中jsconfig.json和tsconfig.json文件配置释义&compilerOptions配置示例和src同层级jsconfig.json{"compilerOptions":{"baseUrl":".","paths":{//解决项目中使用@作为路径别名,导致vscode无法跳转文件的问题"@/*":["src/*"]},//解决prettier对于装饰器语法的警告"experimentalDecorators":true,//解决.jsx文件无法快速跳转的问题"jsx":"preserve"},//提高IDE性能"exclude":["node_modules","di

前端vue简单实用折叠面板可以折叠收起展开内容区域

随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率低,降低维护成本。组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦,其背后还有很多工作来支撑组件化的进行,例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等。本文给大家介绍的一款组件是:前端vue简单实用折叠面板可以折叠收起展开内容区域

vue3项目返回第三方页面onBeforeUnmount和onBeforeRouteLeave失效问题

vue3项目埋点需求,需记录页面浏览时长,入口在第三方页面,从vue3页面返回到第三方页面时,onBeforeUnmount、onBeforeRouteLeave全部失效不执行,在vue3项目里组件之间跳转没问题。经测试,popstate事件监听pc端及移动端都失效;js的beforeUnload事件在pc端谷歌浏览器上返回第三方页面有效,vue项目内组件跳转无效,ios手机上这些事件监听及钩子函数全部无效。解决方法:监听js的pagehide事件,在pc端及移动端都有效,返回第三方页面和vue项目里点击按钮跳转第三方也都有效,(但是通过window.location.href跳转小程序时无效

【vue】 vue-router安装和配置方法

vue-router是vue.js官方的路由插件,里面组件和URL的映射关系由vue-route帮我们管理。在vue-router的单页面应用中,页面的路径的改变就是组件的切换。第一步:1.正常初始化项目的时候,会有个vue-router供我们选择。2.如果你不知道插件俺没安装,看下图中是否有此信息即可,如有即存在。3.如果不存在则通过代码安装插件即可。代码:npminstallvue-router--save这里要备注一下有的人安装的时候会报错,大致意思是说要选择vue-router版本,报错信息如下从新敲入代码:npminstallvue-router@3.5.2--save建议3.5.2

Windows批处理文件起始目录时 'run as admin'

我有一个位于目录中的批处理文件,也必须从那里运行,因为它会更新该目录中的文件。这工作得很好,除非用户以管理员身份运行批处理文件(在Vista上需要)。那么起始目录是C:\Windows\System32。有什么办法仍然能够知道批处理文件是从哪个目录运行的?我不希望用户手动输入目录。 最佳答案 尝试像这样访问批处理文件路径:echo%~dp0有关详细信息,请参阅命令for/?中的以下引述,它描述了上述命令的工作原理:Youcannowusethefollowingoptionalsyntax:%~I-expands%Iremoving

vue全局引入scss样式文件

在vue中全局引入非功能性的scss样式文件很简单,只需要在main.js文件中引入对应文件就行import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'//全局引入样式文件import'@/assets/scss/index.scss'createApp(App).use(store).use(router).mount('#app')但想要在vue中引入功能性(即定义的颜色规范、mixin样式函数等,如下)的scss的样式文件,单单在main.js中