element-ui

element组件功能

dialog

dialog内嵌套dialog 通过esc关闭弹窗一次可能关闭两个弹窗且不会监听到内部的close事件，解决方法：
全部添加到body上

:append-to-body="true"
:destroy-on-close="true"

$notify

提示框本身有一个bug: 【文本换行以后，字体间距样式就乱了】


解决方法：

// 加一个style控制样式
let body = `
${msg}`
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>111111111111111111111span>
el-tooltip>

• content:提示框内容
• placement:提示框的位置出现设置
• disabled： 是否使用弹出框

v-infinite-scroll无限滚动

1. 用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

1. 未给类型value赋值
   vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "value": "TypeError: Cannot read property 'level' of null"
2. • 在removeTag时，第一个remove时获取值数组并没删除，但页面已经删除tag

el-dialog

1. 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%;
}
// 手动设置