《ElementUI 基础知识》
ElementUI 基础知识
AvatarGiser
这个作者很懒,什么都没留下…
展开
-
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动(ElementPlus同样适用)
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键,可左右滑动!原创 2024-04-29 11:45:01 · 451 阅读 · 0 评论 -
《ElementUI 基础知识》png 图片扩展 icon用法
UI 设计给的切图是.png格式。《ElementUI 基础知识》png 图片扩展 icon用法但想与用法类似,方案如下。原创 2024-04-18 17:55:18 · 535 阅读 · 0 评论 -
Vue ElementUI el-input-number 改变控制按钮 icon 箭头为三角形
【代码】Vue ElementUI el-input-number 改变控制按钮 icon 箭头为三角形。原创 2024-04-11 17:47:42 · 490 阅读 · 0 评论 -
《Vue2.X 进阶知识点》- 防 ElementUI Divider 分割线
防 ElementUI Divider 分割线原创 2023-12-26 11:53:31 · 831 阅读 · 0 评论 -
Vue ElementUI el-tooltip 全局样式修改
Vue ElementUI el-tooltip 全局样式修改。原创 2023-11-01 14:01:38 · 593 阅读 · 0 评论 -
《Cesium 进阶知识点》- el-select 列表打开后,点击Cesium.Viewer场景无法自动关闭
### el-select 列表打开后,点击Cesium.Viewer场景无法自动关闭#### 前提原创 2023-10-25 16:22:21 · 317 阅读 · 0 评论 -
Vue ElementUI el-tree 动态设置节点是否显示
Vue ElementUI el-tree 动态设置节点是否显示原创 2023-02-24 11:50:58 · 1984 阅读 · 0 评论 -
Vue ElementUI el-select 图片选择效果
Vue ElementUI el-select 图片选择效果原创 2023-02-24 10:28:01 · 1673 阅读 · 0 评论 -
Vue ElementUI el-tree 添加单选按钮 el-radio 效果
el-tree 添加单选按钮 el-radio 效果原创 2022-10-21 16:36:07 · 1471 阅读 · 2 评论 -
Vue ElementUI el-tree 修改 check 等勾选图标
Vue ElementUI el-tree 修改 check 等勾选图标原创 2022-10-10 11:30:54 · 1514 阅读 · 0 评论 -
Vue ElementUI el-table 单元格不换行,使用省略号
Vue ElementUI el-table 单元格不换行,使用省略号原创 2022-09-23 18:44:57 · 5829 阅读 · 2 评论 -
Vue ElementUI el-tabs 监听导航栏的mouseover 和 mouseleave 事件
监听导航栏的鼠标移入移出事件原创 2022-06-11 12:56:42 · 1640 阅读 · 0 评论 -
Vue ElementUI el-select 取消箭头的切换动画
需求收到的需求就是不要动画,额... 好吧,实现是没问题的...F12 在开发者工具中可以看到,这里默认设置 0.3 秒的动画效果。修改不要动画,设为 0 秒即可。.el-select .el-input__suffix .el-input__suffix-inner .el-select__caret { transition: transform 0s;}完成代码<template> <div class="select-main".原创 2022-05-24 09:57:03 · 1608 阅读 · 0 评论 -
Vue ElementUI el-switch 改变圆形按钮的颜色
el-switch开关可以通过属性改变关闭和打开的背景色,但无法改变圆形的默认颜色,可以这样设置:/* 改变默认为白色的圆形 */.el-switch .el-switch__core:after { background:#0e3062;}修改前修改后...原创 2022-04-12 20:32:58 · 2449 阅读 · 0 评论 -
Vue ElementUI el-tree 过滤显示未被勾选的节点
使用属性 el-treefilter-node-method// 显示出未勾选的节点 checkedfilterNodeMethod(value, data, node) { // 判断传值必须是 boolean 类型 if(typeof value === 'boolean') { // 注意使用属性 node let b = value ? !node.checked : true; return b } ...原创 2022-04-12 17:18:00 · 1689 阅读 · 0 评论 -
Vue ElementUI el-select 弹出框 是否插入 body
el-select设置如下参数<template> <div class="test"> <el-select v-model="value" placeholder="请选择" :popper-append-to-body="false"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value.原创 2022-03-23 14:18:41 · 2385 阅读 · 0 评论 -
Vue ElementUI 自定义主题操作步骤
官网自定义主题有说明,打开一个 vue 项目:1. 安装 element-uinpm i element-ui -S2. 安装 sassnpm i sass-loader node-sass -D在 vue.config.js 文件的module.rules 中添加配置{ test: /\.sass$/, loaders: ['style', 'css', 'sass']}3.安装elementui的自定义主题工具npm i element...原创 2022-02-17 16:22:01 · 1396 阅读 · 0 评论 -
Vue ElementUI el-dropdown 添加选中icon效果
直接上效果:注意 el-dropdown 是动态生成,在开发者工具里可以看到渲染完后的 Dom 其实是 一个 ul:注意el-dropdown-item 中的group 是自定义属性,用于分组显示。代码第 5/6 和 7/8行是有无 icon 的区别,根据 group 属性值做分组显示。<!--下拉列表 --><el-dropdown class="dropdown-btn" @command="onCommand" :hide-on-clic...原创 2022-02-17 09:58:15 · 3826 阅读 · 0 评论 -
Vue ElementUI el-button 修改样式
el-button这里以 危险样式为例:<el-button type="danger">危险按钮</el-button>.el-button--danger { height:30px; line-height: 0.4; background-color:#c13030; border:1px solid #f57d7d; border-radius:1px; span { font-family原创 2022-02-15 13:54:03 · 8330 阅读 · 0 评论 -
Vue ElementUI el-slider 带输入框(两种样式)
以前还傻乎乎...的自己写 input,然后和 slider 关联。Element ui 已支持,APIel-slider提供属性show-input 和show-input-controls注意:在show-input 为 true 时,show-input-controls的设置才有效。代码<!-- 带控制按钮 --><el-slider style="width:350px" v-model="value" show-input ><...原创 2022-01-20 13:47:54 · 2040 阅读 · 0 评论 -
Vue ElementUI el-table 表头不换行且宽度自适应
参考此篇文章,在此记录自己的理解和使用。APIel-table设置属性render-header代码<template> <div> <el-table :data="tableData" style="width: 100%" height="250"> <el-table-column v-for="col of columns" :key="col.prop" ...原创 2021-12-15 17:10:23 · 18337 阅读 · 6 评论 -
Vue ElementUI el-table 单元格内容过长被隐藏时显示 tooltip
APIel-table设置属性show-overflow-tooltip 为 true代码<template> <div> <el-table :data="tableData" style="width: 100%" height="250"> <el-table-column fixed prop="date" label="日期" ></el-table-column>...原创 2021-12-13 16:34:53 · 2439 阅读 · 0 评论 -
Vue ElementUI el-carousel 走马灯 指示灯样式修改
一、原始样式二、修改后三、代码<template> <div> <el-carousel height="250px" > <el-carousel-item v-for="item in 4" :key="item"> <h3 class="small">{{ item }}</h3> </el-car.原创 2021-11-24 16:10:56 · 10802 阅读 · 1 评论 -
Vue ElementUI el-slider 循环设置后,界面无法更新
<div class="layer-visible-item" v-for="(item, index) of layers" :key="index" > <div class="item-label">{{item.label}}</div> <div class="item-slider-div"> <el-slider v-model="item.alpha" :show-tooltip="false" :min.原创 2021-11-12 10:17:57 · 1803 阅读 · 0 评论 -
Vue ElementUI el-tree 修改默认 CheckBox 样式
需求:el-tree checkbox 样式修改。一、原始样式二、修改后三、代码Html:注意 el-tree 标签上有一个 div 。<div class="eltree-main"> <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-ch.原创 2021-09-06 14:23:07 · 1728 阅读 · 0 评论 -
Vue ElementUI el-tree 修改节点收缩 icon
需求:el-tree 父节点收缩 icon 展开和隐藏样式修改。一、原始样式二、修改后三、代码Html:注意 el-tree 标签上有一个 div 。<div class="eltree-main"> <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :d...原创 2021-09-06 11:20:58 · 1179 阅读 · 0 评论 -
Vue ElementUI el-tree 背景透明且重置hover等默认样式
需求:el-tree 背景透明,使用父元素的颜色。一、原始样式二、修改后注意:这里是全局,<style scoped>无效。如果只对某个tree改样式,可加前缀。下述的示例使用预处理 stylus。// 这里没有 scoped<style lang="stylus">.el-tree{ color: #FFFFFF;// 白色字体 background: rgba(0,0,0,0);// 整体背景透明 .el-checkbox__原创 2021-04-28 18:27:16 · 2771 阅读 · 0 评论 -
Vue ElementUI el-tree 默认初始化时,未展开的子节点不渲染
官网 API 中这个参数默认是 true,改为 false 后,初始化时未展开的子节点也会渲染。当为 true 时,只勾选父节点,未渲染的子节点是接收不到check 事件的,从而导致功能错误。原创 2021-04-09 17:18:44 · 3121 阅读 · 0 评论 -
Vue ElementUI 按需引入
一、安装npm i babel-pugin-componet -D项目根目录下新建.babelrc文件,配置如下:{ "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]}二、新建 element/index.js 文件,按需加载import V.原创 2021-03-01 18:11:51 · 2825 阅读 · 0 评论 -
Vue ElementUI el-select 改变高度
默认高度是 40px。自定义高度要修改内部 css。注意右侧的箭头也要修改,否则会有偏移问题。直接上代码<style lang="stylus">/* 自定义宽度 */.my-el-select { width: 320px; /* selecte 框的高度设置,默认是 40px*/ .el-input__inner{ height: 30px; } /* 下面设置右侧按钮居中 */ .el-input__..原创 2021-02-26 10:51:40 · 18831 阅读 · 3 评论 -
Vue ElementUI el-collapse 改造:手风琴
一、源码<template> <div class="left-tree"> <el-collapse class="tree-collapse" accordion v-model="activeName"> <el-collapse-item ref="clooapseItem" v-for="(tree, i) of treeNames" :name="i.toString()" :key="tree.na原创 2020-12-16 14:42:50 · 3341 阅读 · 0 评论 -
Vue ElementUI el-dialog 可拖拽指令
一、新建文件directives.jsimport Vue from 'vue'; // v-dialogDrag: 弹窗拖拽属性Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header'); const dragDom = el.querySelector.原创 2021-01-14 09:12:21 · 1008 阅读 · 0 评论 -
Vue ElementUI el-button 绑定 mouseover 和 mouseout 无效
事件 mouseover 和 mouseout 无效,但 click 可用<el-button @mouseover="onMouseover" @mouseout="onMouseout" @click="onClick">修改如下,添加 .native<el-button @mouseover.native="onMouseover" @mouseout.native="onMouseout" @click="onClick">参考官网:将原生事件绑定到组件原创 2021-02-23 11:11:54 · 2326 阅读 · 0 评论 -
Vue ElementUI 安装与引入
目录一、安装二、全局引入 (main.js)三、使用一、安装npm i element-ui -S二、全局引入main.js 文件// js 文件import ElementUI from 'element-ui'// 样式文件import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)三、使用参考官网:https://element.eleme.cn/#/zh-CN/compon...原创 2021-02-23 09:18:08 · 427 阅读 · 0 评论