andt vue 日常开发问题记录

Fingaz

已于 2022-07-13 15:01:40 修改

阅读量256

点赞数

分类专栏：日常笔记文章标签： vue.js elementui 前端

于 2022-02-23 17:18:45 首次发布

本文链接：https://blog.csdn.net/m0_67079867/article/details/123094981

版权

日常笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了前端开发中的一些实用技巧，包括输入限制，如设置input的最大长度并去除特殊字符；文本超出隐藏的CSS样式实现，通过限制行数和使用overflow隐藏；以及富文本样式的设定，保持文本换行和防止溢出。同时，还提到了antd组件的使用，如日期选择器和下拉框的优化，解决下拉框随滚动条移动时的位置问题。

摘要由CSDN通过智能技术生成

1.部分表单数据输入限制

<a-input
    placeholder="请输入审核流程名" // 描述
    :maxLength="20" // 最大长度
    onkeyup="this.value=this.value.replace(/[, ]/g,'')" // 去除回车和空格
    @blur="form.tagName = form.tagName.replace(/[, ]/g, '')" // 聚焦离开input时发生
/>

2.文本超出隐藏(css样式方法)

/deep/.overText { // 如果组建内，用/deep/打通
  width: 100%;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; // 限制快级元素的文本行数
  overflow: hidden;
}

3.展示完整富文本样式(css)

.kala_text {
  white-space: pre-wrap;
  word-break: break-word;
}

4.antd dataPicker 等时间组件日常问题

<a-date-picker
    valueFormat="YYYY-MM-DD" // 输出的值以某种格式输出
    v-model="expirationAt"
/>

5. antd 下拉框随着滑轮移动出现移位现象的问题


<a-select
   :getPopupContainer="triggerNode => triggerNode.parentNode"
   placeholder="输入异常的设备名称搜索"
>
   <a-select-option v-for="d in devices" :key="d._id" :value="d._id">
      {{ d.name }}
   </a-select-option>
</a-select>