随笔分类 -  vue

摘要:v-html更新元素的innerHTML,内容按普通HTML插入,不会作为Vue模版进行编译。在网站上动态渲染任意HTML是非常危险的,因为容易导致XSS攻击,只在可信内容上使用v-html,永不用在用户提交的内容上, 在使用v-html时为了防止XSS攻击,可以安装 npm install xss 阅读全文
posted @ 2024-03-21 14:58 天宁哦 阅读(765) 评论(0) 推荐(0)
摘要:el-collapse 组件回车键会触发显隐(第一次手动触发后) 因为change方法原因 可以把事件放到title插槽上面 <template> <div class="coordination-communication"> <el-collapse v-model="activeNames" 阅读全文
posted @ 2023-12-08 11:55 天宁哦 阅读(283) 评论(0) 推荐(0)
摘要:给input标签添加css样式固定,注意使用scss语法 <style scoped lang="scss"> :deep(.el-input__wrapper) { position: relative; .el-input__inner { padding-right: 18px; } .el- 阅读全文
posted @ 2023-11-27 10:05 天宁哦 阅读(542) 评论(0) 推荐(0)
摘要:代码 新建一个loading.ts文件 import { ElLoading } from "element-plus"; /* 全局请求 loading */ let loadingInstance: ReturnType < typeof ElLoading.service > ; /** * 阅读全文
posted @ 2023-11-23 14:02 天宁哦 阅读(1325) 评论(0) 推荐(0)
摘要:思路 1.获取到指定单元格的位置 2.通过状态来判断 是否展示编辑 步骤 1.定义变量去确定行和列 let tableRowEditId = ref(null), // 控制可编辑的每一行 let tableColumnEditIndex = ref(null), //控制可编辑的每一列 2.在el 阅读全文
posted @ 2023-10-24 09:02 天宁哦 阅读(1726) 评论(0) 推荐(0)
摘要:## 说明 在使用element的table表格的时候,发现单元格内容较多的情况下 在`el-table-column`上面使用了`show-overflow-tooltip`属性:当内容过长被隐藏时显示 tooltip 但是他是一整行展示,不太好看 ![image](https://img2023 阅读全文
posted @ 2023-07-06 13:37 天宁哦 阅读(1594) 评论(0) 推荐(0)
摘要:安装 npm安装方式 npm init vue@latest pnpm安装方式(二选一) pnpm create vue@latest 然后设置项目名称,接着选择自己需要的配置,安装完成 安装说明地址:https://cn.vuejs.org/guide/quick-start.html#creat 阅读全文
posted @ 2023-06-21 11:18 天宁哦 阅读(109) 评论(0) 推荐(0)
摘要:> 因为项目的 elementPlus 不是全局引入而是按需引入,所以不可以使用“全局配置”。 ### 解决方案 在 App.vue 文件中加入 el-config-provider 标签以及引入具体代码 ```html xxxxxxxxx ``` 阅读全文
posted @ 2023-06-15 11:07 天宁哦 阅读(792) 评论(0) 推荐(0)
摘要:因为这些元素都是插入到body里面的,而当某一div全屏后由于层级原因无法显示这些组件,解决办法如下 ![image](https://img2023.cnblogs.com/blog/3028693/202306/3028693-20230609114332847-1422644774.png) 阅读全文
posted @ 2023-06-09 11:44 天宁哦 阅读(1223) 评论(0) 推荐(0)
摘要:## 说明 经常会遇到对话框中打开对话框的对话框嵌套问题,可能会出现关闭内部对话框的时候发现遮罩层还在 主要是Dialog组件在全局只维护一个遮罩层DOM节点,然后在关闭当前遮罩层的时候通过堆栈恢复上一个遮罩层位置。当我们打开第二个页签的弹窗时其实是把第一个弹窗的遮罩层给强行征用了,所以当我们切换回 阅读全文
posted @ 2023-06-08 10:26 天宁哦 阅读(2113) 评论(0) 推荐(0)
摘要:## 说明 前端实现导出word文档,我们需要用到docxtemplater这个库 使用的是vue2.6和vue-cli5 还需要准备一个word模板,更多模板变量请去[docxtemplater官网获取](https://docxtemplater.com/demo/ "docxtemplater 阅读全文
posted @ 2023-06-05 17:31 天宁哦 阅读(1717) 评论(0) 推荐(1)
摘要:## 实现 ```html {{ isFullscreen ? "退出全屏" : "全屏" }} ``` ```js mounted() { //监听是否进入全屏模式 document.addEventListener("fullscreenchange", e => { if (document. 阅读全文
posted @ 2023-06-01 15:47 天宁哦 阅读(306) 评论(0) 推荐(0)
摘要:## 说明 在vue2的子组件内我想实现在子组件引入的js文件内传出点击事件 主要是就是把props传进去,因为props传入function时,函数中this自动绑定Vue实例 触发点击以后再传出来 ## 实现 子组件 ```js props: { OneNodeClick: { required 阅读全文
posted @ 2023-06-01 09:33 天宁哦 阅读(287) 评论(0) 推荐(0)
摘要:在Element-UI中,当对表格列进行固定后,底部的横向滚动条就无法拖动了,主要的问题就是固定区域盖住了横向滚动条。 ## 方案一:修改el-table__body-wrapper样式的层级,随便设个层级就可 ```css ::v-deep .el-table__body-wrapper{ z-i 阅读全文
posted @ 2023-05-24 15:38 天宁哦 阅读(1614) 评论(0) 推荐(0)
摘要:说明 想要实现在Dialog对话框上加载效果, 父组件开启loding,子组件关闭 首先需要在父组件传值的时候把this.$loading的结果赋我们定义好的变量 代码 父组件 <page-details :data="details" ></page-details> // data部分 data 阅读全文
posted @ 2023-05-17 11:10 天宁哦 阅读(3524) 评论(0) 推荐(0)
摘要:说明 收集整理在开发中遇到的对于上传组件和图片组件的使用 Upload上传组件 修改上传按钮的默认宽高 ::v-deep .el-upload--picture-card { width: 80px; height: 80px; line-height: 85px; } 修改默认的上传组件图片列表展 阅读全文
posted @ 2023-05-16 17:40 天宁哦 阅读(140) 评论(0) 推荐(0)
摘要:前言 vue-element-admin 中文官网 要使用中文版,直接去git github下载包:https://github.com/PanJiaChen/vue-element-admin/tree/i18n gitee下载包:https://gitee.com/panjiachen/vue- 阅读全文
posted @ 2023-05-12 10:44 天宁哦 阅读(401) 评论(0) 推荐(0)
摘要:说明 <el-button slot="append"></el-button>里的 slot="append" 就是一个UI摆放的位置,其实就是封装的样式布局。 append:代表放在紧贴在依赖组件的后面 prepend:代表放在紧贴在依赖组件的前面 阅读全文
posted @ 2023-05-12 10:25 天宁哦 阅读(905) 评论(0) 推荐(0)