一、通过el-tree自定义渲染网页版工作目录 1.1、需求介绍 最近做项目时需要做一些云原生相关的内容,有个需求要在服务器上做临时文件夹作为工作目录,同时要将工作目录映射到docker image中和前端页面上。那么将服务器的本地工作目录渲染到前端页面上是必须要实现的部分,其中从后端API获取本地目录信息后,将数据渲染成自...
folder el-icon-folder-opened el-icon-folder-add el-icon-folder-remove el-icon-folder-delete el-icon-folder-checked el-icon-tickets el-icon-document-remove el-icon-document-delete el-icon-document-copy el-icon-document-checked el-icon-document el-icon-document-add el-icon-printer el-icon-...
{{selName}} <el-tree class="tree-menu" :data="newTree" :props="defaultProps" @node-click="playVideo"> {{node.label}} </el-tree> 这个是分成两个接口,树为一个接口,播放资源为一个接口,有播放资源的在新树里面可播放。 注: :class="node.expanded ? 'el-icon-circle-plus-out...
console.log(this.list[index]);return'el-icon-folder-opened'; }else{ console.log(this.list[index]);return'el-icon-folder'; } }else{return'el-icon-folder'; } }
因为是二次封装,所以不能用回<el-icon>,这是Element Plus的组件。 本次封装的目的是简化icon的使用方式,所以我把标签名也跟着简化了,变成<e-icon> 缺点 打包出来的体积可能会大一丢丢。 开发 开发中涉及的技术点: 组件通讯 动态组件 全量引入Element Plus提供的svg图标 ...
{{selName}} <el-tree class="tree-menu" :data="newTree" :props="defaultProps" @node-click="playVideo"> {{node.label}} </el-tree> 这个是分成两个接口,树为一个接口,播放资源为一个接口,有播放资源的在新树里面可播放。 注: :class="node.expanded...
"el-icon-question", "el-icon-info", "el-icon-remove", "el-icon-circle-plus", "el-icon-success", "el-icon-error", "el-icon-zoom-in", "el-icon-zoom-out", "el-icon-remove-outline", "el-icon-circle-plus-outline", "el-icon-circle-check", ...
将elementui升级到具有el-icon-s-fold的折叠图标的版本即可。 执行命令npm i element-ui,就可以升级到最新版本的饿了么UI了,这样图标出出现了,哈哈问题解决。 思路总结 版本的升级可能会新增一些特性或者去除一些特性,所以在我们项目使用某个特性的时候,如果没出现我们想要的效果的时候。首先要去审查代码,找BUG,如果...
<ElIcon:size="30"color="hotpink"><edit/></ElIcon><!-- 也可以直接使用图标标签,无需父标签包裹 --><edit/> 个人觉得,Element UI的用法会更加简单。 下一篇文章我会讲解如何在Element Plus的基础上二次封装出一个更好用的Icon组件。 Icon 在 Element Plus 中的使用逻辑 ...
以下是el-icon的使用方法,分别从安装、引入和使用三个方面进行介绍。 一、安装 使用el-icon之前需要安装Element UI,安装方法如下: 1. 安装VueCLI。 首先需要安装VueCLI,打开终端,执行以下命令: npm install -g vue-cli 2. 创建Vue项目。 在终端输入以下命令来创建Vue项目: 其中my-project是项目名称,可以自己...