el-select触底加载更多
Vue.directive("loadmore", {
bind(el, { value }) {
const ele = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
if (!ele) return;
el.handle = function() {
const bottom = this.scrollHeight - this.scrollTop <= this.clientHeight
if (bottom) {
value();
}
}
ele.addEventListener('scroll', el.handle)
},
unbind(el) {
el.removeEventListener('scroll', el.handle)
},
})
滚动条
<el-scrollbar></el-scrollbar>
模拟点击上传
<el-upload
action
v-how="false"
ref="uploadRef"
:on-success="onSuccess"
:http-request="httpRequest"
/>
this.$refs.uploadRef.$refs["upload-inner"].$refs.input.click()
this.$refs.uploadRef.uploadFiles
httpRequest(file) {
const _formData = new FormData();
_formData.append("file", file.file);
}
onSuccess() {
this.$refs.uploadRef.clearFiles()
}
el-select下拉框选项太宽
<el-select popper-class="popper_class" :popper-append-to-body="false" v-model="value">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
<el-tooltip placement="top" :disabled="item.label.length<17">
<div slot="content">
<span>{{item.label}}</span>
</div>
<div class="text_ellipsis">{{ item.label }}</div>
</el-tooltip>
</el-option>
</el-select>
data() {
return {
options: [
{
value: "选项1",
label: "11111111111111111"
},
{
value: "选项2",
label: "2222222222222222"
},
],
value: ""
};
},
.el-select {
width: 300px;
/deep/ .popper_class {
width: 300px;
}
}
.text_ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
type=number
<el-input type="number" class="el_input"></el-input>
.el_input {
/deep/ .el-input__inner {
line-height: 1px;
&[type="number"]{
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
}
}
}
}