element-ui、element-plus

223 阅读1分钟

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; /* 去除聚焦时的上下箭头 */
       }
      }
    }
}

element-ui

element-plus