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;