遇到的问题

去除el-input右下角图标,最终宽高会固定

// 输入框文本域模式
.el-textarea__inner {
    // 去除右下角图标
    resize: none;
}

contenteditable 可以控制div可输入

        <div
            class="workspace-title oneline"
            :style="{
              border:
                focusState == diagram.hhxsProcessonId
                  ? '1px solid rgba(35,121,249,1)'
                  : 'none',
              boxShadow:
                focusState == diagram.hhxsProcessonId
                  ? '0px 8px 20px 0px rgba(75,77,84,0.1)'
                  : 'none',
            }"
          >
            <div
              v-if="!trashList"
              contenteditable="true"
              @focus="FocusFn"
              @blur="BlurFn"
              @input="textChange"
              class="titlename"
            >
              123456
            </div>
            <span v-if="trashList" class="titlename">123456</span>
          </div>

文本一行显示(盒子设置宽度)

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  white-space: normal; // 文本换行

搜索框样式

  <div class="sousuoxin">
        <el-input v-model="searchinput" placeholder="搜索项目名称" class="inpxin" />
        <el-button circle class="circle-btn sousuotu">
          <i class="iconfont icon-sousuomoren right-icon"></i>
        </el-button>
      </div>

.sousuoxin {
  display: flex;
  margin-right: 12px;
  align-items: center;
  position: relative;
  .inpxin {
    width: 0;
    position: absolute;
    right: 25px;
    background: #ffffff;
    box-shadow: 0px 0px 30px 0px rgba(254, 88, 88, 0.1);
    border-radius: 21px;
    transition: all 0.5s;
  }
  .sousuotu {
    margin-right: 12px;
  }
  &:hover .inpxin {
    width: 208px !important;
  }
}
.inpxin :deep .el-input__inner {
  height: 42px;
}

el-button失焦事件

const fangfa= (event: any) => {
  // 这里需要注意下，点击的target可能不是button，因为el-button最终生成的是button和span元素，所以需要判断下
// 失焦时永远保证是button失焦而不是其他地方失焦
  if (event.target.nodeName === 'SPAN') {
    event.target.parentNode.blur()
  } else if (event.target.nodeName === 'BUTTON') {
    event.target.blur()
  } else if (event.target.nodeName === 'I') {
    event.target.parentNode.parentNode.blur()
  }
}

文本换行

textarea属性

属性	作用
cols	文本列数
rows	文本行数
maxlength	字符数量上限
readonly属性	是否只读不可编辑?
换行	/n
resize属性	如何处置textarea自带的可缩放属性:none彻底不允许缩放,限定max-height,max-width和长宽:限定缩放范围

普通div

属性	可用值
word-break	break-all, normal, keep-all
word-wrap	break-word, normal

属性	作用
word-break:break-all	不管怎么样,到了最大宽度就是要换行!
word-break:normal	使用浏览器默认的换行规则
word-break:keep-all	只能在半角空格或连字符处换行。
word-wrap:break-word	检索英文单词,如果强制换行面临拆词,那么会保留完整词并在其后换行
word-wrap:normal	只在允许的断字点换行（浏览器保持默认处理）。

鼠标右击事件

在标签上添加   @contextmenu.prevent.native="事件名字($event)" // 添加鼠标右击事件

//阻止浏览器右键事件
//在mounted里面写   
//禁止鼠标右键菜单
      document.oncontextmenu = function(e) {
        return false;
      };
  //屏蔽F1---F12
        if (code > 111 && code < 124) {
          if (evt.preventDefault) {
            evt.preventDefault();
          } else {
            evt.keyCode = 0;
            evt.returnValue = false;
          }
        }
      };
  //阻止后退的所有动作，包括 键盘、鼠标手势等产生的后退动作。
      history.pushState(null, null, window.location.href);
      window.addEventListener("popstate", function() {
        history.pushState(null, null, window.location.href);
      });

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;