一、业务遇到的问题
1.使用dayjs时间戳的入参是数字类型,其他类型可能引起时间不正确
2.灵活宽度,超出区域用省略号显示,同时悬浮可显示全称
<div class="left" :title="item.name" v-if="showNameTip">
<span ="showNameTip = false">{{ item.name }}</span>
</div>
<div class="left" v-else :ref="`${index}left`">
<span
="overName(index)"
="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="请选择接收人员"
="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="请输入落地页"
="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}