本文详细介绍了Element UI组件的使用，包括dialog、$notify、el-tooltip、v-infinite-scroll、el-cascader、el-dialog、el-progress、el-table等，并针对浏览器兼容性问题，特别是Firefox下的el-table进行了分析。同时，提到了在element-plus中遇到的el-select问题及解决方案。
element-ui
element组件功能
dialog
dialog内嵌套dialog 通过esc关闭弹窗一次可能关闭两个弹窗且不会监听到内部的close事件，解决方法：
全部添加到body上
:append-to-body="true"
:destroy-on-close="true"
$notify
提示框本身有一个bug: 【文本换行以后，字体间距样式就乱了】
解决方法：
// 加一个style控制样式
let body = `<p style="word-break: break-all;">${msg}</p>`
this.$notify({
title: title,
message: body,
type: 'info',
duration: 3000,
offset: 50,
dangerouslyUseHTMLString: true
});
el-tooltip
鼠标移动到元素上弹出框显示完整内容的组件。
之前没有发现这个，自己去用css实现的效果：
<!-- 给超出指定字数的元素绑定属性，并去自动截取字符串连接...-->
<div
v-for="(item, index) in list"
:key="index"
:data-tip="
(item.name + item.value).length > 10 ? item.name + item.value : ''
"
>
<span v-if="(item.name + item.value).length <= 10">{{
item.name + item.value
}}</span>
<span v-else>
{{ (item.name + item.value).slice(0, 10) + "..." }}
</span>
</div>
// 设置属性选择器来设置
[data-tip]{
position: relative;
}
[data-tip]::before,[data-tip]::after{
position: absolute;
// z-index: 2;
visibility: hidden;
opacity: 0;
transition: .3s;
}
[data-tip]::before{
content: "";
border: 5px solid transparent;
border-top: 5px solid black;
left: 50%;
transform: translateX(-50%);
bottom: 100%;
margin-bottom: -5px;
}
[data-tip]::after{
content: attr(data-tip);
bottom: 100%;
margin-bottom: 5px;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 40px;
background: black;
color: white;
font-size: 14px;
padding: 5px;
border-radius: 5px;
white-space: pre-wrap;
}
[data-tip]:hover::after,
[data-tip]:hover::before{
visibility: visible;
opacity: 1;
transition-delay: .4s;
}
[data-tip=""]::after,
[data-tip=""]::before{
display: none !important;
}
之后找到这个组件，使用
<el-tooltip content="tooltip仅可对状态为保存2的数据进行操" placement="top" :disabled="false">
<span>111111111111111111111</span>
</el-tooltip>
content:提示框内容placement:提示框的位置出现设置disabled：是否使用弹出框
v-infinite-scroll无限滚动
- 用vue自定义指令
import Vue from "vue";
export default {}.install = function() {
Vue.directive("select-loadmore", {
bind(el, binding) {
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector(
".el-select-dropdown .el-select-dropdown__wrap"
);
SELECTWRAP_DOM.addEventListener("scroll", function() {
const CONDITION =
Math.floor(this.scrollHeight - this.scrollTop) <= Math.floor(this.clientHeight);
if (CONDITION) {
binding.value();
}
});
}
});
};
然后在要使用滚动效果的元素上使用v-select-loadmore并添加回调函数触发请求函数。
而该指令用法一致，不在赘述。
el-cascader
- 未给类型value赋值
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "value": "TypeError: Cannot read property 'level' of null" -
- 在removeTag时，第一个remove时获取值数组并没删除，但页面已经删除tag
el-dialog
- dialog设置宽度属性无效：组件自身的样式设置dialog的宽度为50%，后面设置的宽度
width="400"并未应用到元素上，需要添加单位width="400px",且手动设置的el-dialog样式低于组件自身样式。
// 组件样式
.el-dialog {
position: relative;
margin: 0 auto 50px;
background: #FFFFFF;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
width: 50%;
}
// 手动设置
<style>
.el-dialog {
width: 450px!important;
min-width: 450px;
~~border-radius: 4px;~~
}
el-progress
- el-progress在初次加载和更新时会出现
Invalid prop: custom validator check failed for prop "percentage".
初次加载percentage绑定的变量还未获取到，dom已经渲染，就会出现不是他指定的格式的数据，undefined,所以去赋给变量是可以通过||来指定初始值。
- el-progress样式
// 修改进度条底色
.el-progress-circle__track {
stroke: #120D65;
}
el-table
// el-table背景颜色修改
.el-table, .el-table__expanded-cell {
background-color: #0A0933;
}
.el-table th, .el-table tr {
background-color: #0A0933;
}
// el-table 的border
.el-table td, .el-table th.is-leaf {
border-bottom: 1px dashed #120D65;
}
// el-table最后一行的一条线
.el-table--border::after, .el-table--group::after, .el-table::before {
background-color: #120D65;
}
// 选中整行样式
/* 选中某行时的背景色*/
.el-table__body tr.current-row > td {
box-shadow: inset 0 5px 5px -5px #043773, inset 0 -5px 5px -5px #043773;
background-color: #0A0933!important;
}
.el-table__body tr.current-row > td:first-child {
box-shadow: inset 3px 0 3px #043773;
}
.el-table__body tr.current-row > td:last-child {
box-shadow: inset -3px 0 3px #043773;
}
/*鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
box-shadow: inset 0 5px 5px -5px #043773, inset 0 -5px 5px -5px #043773;
background-color: #0A0933!important;
}
.el-table--enable-row-hover .el-table__body tr:hover > td:first-child {
box-shadow: inset 3px 0 3px #043773;
}
.el-table--enable-row-hover .el-table__body tr:hover > td:last-child {
box-shadow: inset -3px 0 3px #043773;
}
浏览器兼容
el-table
FireFox浏览器
- 项目中对table的设置属性：
stripe。在火狐中显示为偶数行的border不显示的问题。实际上也不算是兼容性问题了，主要是在对table的样式上设置了以下样式：
.el-table__header, .el-table__body, .el-table__footer{
// 火狐在设置了该属性后strip的偶数行不显示border-right
border-collapse: collapse;
}
取消掉之后border正常显示。
这里对border-collapse进行粗略的概述一下：(各个浏览器的兼容性较好)
// 相邻单元格共享边框
border-collapse: collapse;
// 相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性 border-spacing 来确定
border-collapse: separate;
- 究其原因：我觉得是设置了
border-spacing: 0所以才没有间隙的吧。
不用组件实现table-td表格，table有一个优先级很低的样式
user agent stylesheet
table {
display: table;
~~border-collapse: separate;~~
box-sizing: border-box;
~~border-spacing: 2px;~~
border-color: grey;
}
然后默认table样式为下设置：
table {
border-collapse: collapse;
border-spacing: 0;
}
觉得正常设置如下，当更改了border-spacing的值>0时显示空格。
table {
border-collapse: separate;
border-spacing: 0px;
}
show-overflow-tooltip
应该不是浏览器不兼容text-overflow：ellipsis属性的原因，我这块主要是由于设置了好些没用的样式：
.el-table {
font-size: 14px;
.cell.el-tooltip{
// 必须设置在文本元素上
div{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// display: -webkit-box;
// -webkit-line-clamp: 1; /* 限制在一个块元素显示的文本的行数 */
// -webkit-box-orient: vertical; /* 垂直排列 */
// word-break: break-all; /* 内容自动换行 */
}
}
给el-table-column上设置了该属性后，渲染在td中的文本的元素直接父元素是.cell,.el-tooltip 下的div，所以给他设置white-space: nowrap; overflow: hidden; text-overflow: ellipsis;即可。
- 偶尔不显示提示框的问题待办
element-plus
-
Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'model'
form表单置空时，报错
通过ref绑定了和form的model同名的变量，换一个变量名 -
element-plus 中placeholder的默认值是Select, 当placeholder的值为空字符串，undefined等时无法让placeholder为空，逻辑上无法让他为空，只能用
placeholder=' '的方式。 -
popper-class 新加class无法添加到元素上，目前通过class添加，具体原因未知
-
之前写项目的时候依赖的vue,vue-router,vuex, element-plus,element-plus/icons,是一个一个下载的会出现 版本不匹配造成的一些问题。比如element的el-select框下拉部分不出现display：none始终；el-icon中的图标不生效等。删除之后，一起下载会匹配合适的版本。
el-select
select下拉列表在第一次进入页面不展示（从别的页面第一次进入时点击不展示，点击几次后出现）
扫一扫
8832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
