element UI使用小技巧(持续更新中)

本是古典何须时尚 2021-08-02 17:38 570阅读 0赞

### element UI使用小技巧(持续更新中) ###

#### 1. 回到顶部组件的使用 ####

在页面较长的时候，为了优化用户体验，我们往往需要添加回到顶部功能方便用户操作。具体的使用方法如下：

<el-backtop target=".el-main" :visibility-height='150' :right="50" :bottom="50"></el-backtop>

*  将组件放置到 ***App.vue*** 组件下，对应的触发滚动的对象 ***target*** 是 ***.el-main***
 *  我们本质上需要滚动的就是内容区域，对于顶部与侧边导航栏都是固定的。

--------------------

#### 2. 组件中带有回调参数的事件绑定函数传入自定义参数 ####

*  使用场景：在页面使用多个相同的组件
 *  使用目的：多个组件绑定同一个回调函数，避免多个函数功能雷同。

**html**代码

<div class="discount-list">
      <div class="title">开始日期</div>
      <el-date-picker size="small" value-format="yyyy-MM-dd" @change="date=>chooseDate(date,'start')" v-model="discontInfo.startTime" type="date" placeholder="开始日期"></el-date-picker>
    </div>
    <div class="discount-list">
      <div class="title">结束日期</div>
      <el-date-picker size="small" value-format="yyyy-MM-dd" @change="date=>chooseDate(date,'end')" v-model="discontInfo.endTime" type="date" placeholder="结束日期"></el-date-picker>
    </div>

**js**代码

chooseDate(date, str) { 
      console.log(date, str);
      switch (str) { 
        case "start":
            this.discontInfo.startTime = date;
          break;
        case "end":
            this.discontInfo.endTime = date;
          break;
      }
      console.log(this.discontInfo)
    }

注意：在 ***datepicker*** 组件的 ***change*** 事件，回调参数是选择的日期，我们使用自定义的第二个参数来区分是哪一个组件，并对返回的参数，按照我们的需求进行赋值处理。

@change="date=>chooseDate(date,'end')"

**需要特别注意的是，我们需要采用箭头函数来绑定，并且自定的参数作为第一个参数，第一个参数是默认的毁掉参数。**

--------------------

#### 3. input自动聚焦问题 ####

*  使用场景：在使用*elementUI*的时候，弹出的Dialog 对话框组件中放入form表单，我们通常需要自动聚焦到第一个输入框，提示用户输入相关信息。
 *  思路分析： 在*elementUI*中这个组件，对form表单中第一个输入框，设置*autofocus*属性，会出现只有在第一显示对话框的时候才会自动聚焦，以后不会自动聚焦，不符合需求。怎么解决这个问题呢？
 *  具体的方案如下：
    
     *  在对应的第一个input标签中，设置ref属性；
    
        <el-input ref="settingFocus" class="list-input" v-model="relationForm.description"/>
    
     *  在对应的改变对话框显隐状态的函数中，添加以下代码即可；
    
        // 输入框自动聚焦问题
        this.$nextTick(() => { 
          this.$refs["settingFocus"].focus();
        });

--------------------

#### 4. input输入框enter键搜索功能 ####

<el-input clearable size="small" class="search-input" placeholder="请输入关键字" v-model="input4" @keyup.enter.native="searchData">
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-input>

分析：element UI中input组件是二次封装的组件，使用键盘修饰符的时候，需要使用 *.native* 后缀，例如 *enter* 事件，*@keyup.enter.native=“searchData”*