23年3月工作笔记整理（前端）

一、业务遇到的问题

1.使用dayjs时间戳的入参是数字类型，其他类型可能引起时间不正确
2.灵活宽度，超出区域用省略号显示，同时悬浮可显示全称

<div class="left" :title="item.name" v-if="showNameTip">
          <span @mouseleave="showNameTip = false">{{ item.name }}</span>
        </div>
        <div class="left" v-else :ref="`${index}left`">
          <span
            @mouseover="overName(index)"
            @mouseleave="showNameTip = false"
            :ref="`${index}ref`"
            >{{ item.name }}</span
          >
 </div>

   //判断子元素和父元素的宽度
    overName(index) {
      const parentWidth = this.$refs[`${index}left`][0].offsetWidth
      const contentWidth = this.$refs[`${index}ref`][0].offsetWidth
      if (contentWidth >= parentWidth) {
        this.showNameTip = true
      } else {
        this.showNameTip = false
      }
    },

3.多选合并之后，鼠标悬浮上去可以看到全部内容

//借助tooltip组件实现，它的显隐是disabled属性控制的
//html
 <el-tooltip
                  class="item"
                  effect="dark"
                  :content="desReceiver"
                  placement="top"
                  :disabled="!desReceiver"
                >
                  <el-select
                    v-model="form.receiver"
                    multiple
                    collapse-tags
                    placeholder="请选择接收人员"
                    @change="chooseReceiver"
                  >
                    <el-option
                      v-for="item in receiverList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-tooltip>
//js，再通过选择触发函数来对要显示的内容进行拼接
  chooseReceiver() {
      this.desReceiver = ''
      let label = []
      this.form.receiver &&
        this.form.receiver.forEach(item => {
          label.push(this.receiverList.find(e => item === e.value).label)
        })

      this.desReceiver = label.join(';')
    },

4.模糊输入匹配的使用

//html，使用饿了么提供的模糊输入组件
       <el-autocomplete
                v-model="form.squeezePage"
                :fetch-suggestions="querySearchAsync"
                 placeholder="请输入落地页"
                 @select="handleSelect"
         ></el-autocomplete>
//js fetch-suggestion是用来获取模糊匹配的数据， select是选中之后对数据进行处理
    querySearchAsync(queryString, cb) {
//queryString是输入的值，cb是回调成模糊匹配的数据
      let result = []
      if (queryString === '') {
        cb(result)
      } else {
        //调接口后拿数据
      result = res
         cb(result)
        })
      }
    },

二、前端学习

1.vuex的学习
state是存放公共数据的地方，mutation类似于同步事件（commit触发），action类似于异步事件（dispatch触发），getter类似于computed进行缓存
2.scrollIntoView()
子元素的dom调用这个方法，就可以滚动父元素
默认与顶端对齐，传false就与低端对齐
传{behavior:auto/smooth,block:垂直方向对齐start/center/end/nearest,inline:水平方向对齐start/center/end/nearest}