es6 实现原生select组件，只用于学习，有哪些不足请指出

Posted 2020-11-23 supermanguo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了es6 实现原生select组件，只用于学习，有哪些不足请指出相关的知识，希望对你有一定的参考价值。

select 组件效果

技术图片

这里不废话了直接上代码

html结构和select组件样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .sel-plugin{
            position: relative;
            display: inline-block;
            max-width: 280px;
            height: 42px;
            font-size: 14px;
            border: 1px solid rgb(221, 221, 221);
            vertical-align: middle;
        }
        .sel-plugin-focus{
            border: solid 1px #3c95b7;
        }
        .sel-plugin__content{
            height: 100%;
            padding-left: 10px;
            padding-right:35px;
            background: rgb(255, 255, 255);
            border-radius: 2px;
            
            font-family: MicrosoftYaHei;
            color: rgb(51, 51, 51);
            cursor: pointer;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .sel-plugin__arrow{
            position: absolute;
            width: 20px;
            height: 20px;
            top:50%;
            right: 10px;
            transform: scale(0.8) translateY(-50%);
            cursor: pointer;
        }
        .sel-plugin__arrow::before{
            content: "";
            display: block;
            border-top:10px solid #2d0909;
            border-right:10px solid transparent;
            border-bottom:10px solid transparent;
            border-left:10px solid transparent;
            margin-top:2px;
        }
        .sel-plugin__items{
            display: none;
            border: 1px solid #eee;
            position: absolute;
            width: 99%;
            max-height: 200px;
            overflow-y: auto;
            top: 102%;
        }
        .sel-plugin__items-show{
            display: block;
        }
        .sel-plugin__ul{
            list-style: none;
        }
        .sel-plugin__ul li{
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
            cursor: pointer;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .sel-plugin__li-sel,.sel-plugin__ul li:hover{
            background-color:#f5f7fa;
        }
        
    </style>
    <title>Document</title>
</head>
<body>
    球队：<div class="js-sel-plugin"></div>
    <script type="module"> 
        import SelPlugin from ‘./src/js/SelPlugin.js‘;
        // 使用
        let sel = new SelPlugin({
            el:".js-sel-plugin",
            // val:2,
            data:[//下拉框数据，默认数据，可覆盖
            {val:1, txt:‘维拉人朴茨茅斯‘},
            {val:2, txt:‘农夫农场主阿斯顿维拉‘},
            {val:3, txt:‘军港西布罗姆维奇‘},
            {val:4, txt:‘萝卜裤‘},
            {val:5, txt:‘拖拉机手诺维‘},
            {val:6, txt:‘蓝军桑德兰‘}
          ]
          
        });
      
    </script>
</body>
</html>

javascript代码

class SelPlugin {

  constructor(option) {

    this.opt = Object.assign({
      el: null,//挂载的元素，必须的，类型 string 选择器字符串
      height: 30,//下拉框高度
      onoff: false,//列表展示开关
      focus_onoff: false,//下拉框是否获取焦点
      val: 0,//设置默认选中的值，必须data包含的值
      data: [//下拉框数据，默认数据，可覆盖
        { val: 1, txt: ‘请选择‘ }
      ],
      changeCall: function (obj) {//数据当发生改变时回调

      },
      clickCall:function(obj){//点击选项卡回调

      }
    }, option);
    this.init();

  }
  //初始化
  init() {

    if (!this.opt.el)
      throw ‘selPlugin el cannot be empty‘;

    if (!this.opt.data || this.opt.data.length == 0) {
      this.opt.data = [
        { val: 1, txt: ‘请选择‘ }
      ];
    }

    this.el = document.querySelector(this.opt.el);
    this.cur_val_txt = this.opt.val ? this.opt.data.find(item => item.val == this.opt.val) : this.opt.data[0];
    if (!this.cur_val_txt) {
      this.cur_val_txt = this.opt.data[0];
    }
    this.stop_ele = null;//下拉列表停留选项元素，默认为null
    this.render();
    this.addEvent();

  }
  //添加下拉框行为事件
  addEvent() {

    let div_items = this.el.querySelector(".sel-plugin__items");
    this.el.addEventListener("click", this.onOff.bind(this));
    div_items.addEventListener("mousemove", this.mmove.bind(this));
    div_items.addEventListener("mouseleave", this.mleave.bind(this));
    document.addEventListener("click", this.watchDocClick.bind(this));
    document.addEventListener(‘keydown‘, this.keydown.bind(this));

  }
  //获取焦点时能通过键盘上下左右箭头进行选择下拉文本
  keydown(e) {

    if (!this.opt.focus_onoff)
      return;

    let code = e.keyCode;
    let index = this.getIndex();
    let length = this.opt.data.length - 1;
    switch (code) {
      case 37:
        if (index > 0) {
          this.updateVal(--index);
        }
        break;
      case 38:
        if (index > 0) {
          this.updateVal(--index);
        }
        break;
      case 39:
        if (index < length) {
          this.updateVal(++index);
        }
        break;
      case 40:
        if (index < length) {
          this.updateVal(++index);
        }
        break;
      case 13:
        this.selHide();
        break;
    }

  }
  //通过下标更改值
  updateVal(index) {
    this.cur_val_txt = this.opt.data[index];
    let content = this.el.querySelector(‘.sel-plugin__content‘);
    content.innerHTML = this.cur_val_txt.txt;
    let lis = this.el.querySelectorAll("li");
    [...lis].forEach((item, i) => {
      item.classList.remove("sel-plugin__li-sel")
      if (index == i) {
        item.classList.add(‘sel-plugin__li-sel‘);
      }
    });
    this.opt.changeCall && this.opt.changeCall(this.cur_val_txt);

  }
  //移出下拉框行为事件
  removeEvent() {

    let div_items = this.el.querySelector(".sel-plugin__items");
    this.el.removeEventListener("click", this.onOff.bind(this));
    div_items.removeEventListener("mousemove", this.mmove.bind(this));
    div_items.removeEventListener("mouseleave", this.mleave.bind(this));
    document.removeEventListener("click", this.watchDocClick.bind(this));
    document.removeEventListener(‘keydown‘, this.keydown.bind(this));

  }
  //监听document点击，如果当前点击的目标元素不是下拉框则然下拉框失去焦点
  watchDocClick({ target }) {

    if (!this.isContain(target)) {
      this.selHide();
      this.blur();
    }

  }
  //获取下拉框焦点
  focus() {

    this.opt.focus_onoff = true;
    this.el.classList.add("sel-plugin-focus");

  }
  //下拉框失去焦点
  blur() {

    this.opt.focus_onoff = false;
    this.el.classList.remove("sel-plugin-focus");

  }
  //查找父辈或祖辈元素类名包含sel-plugin 如果有返回true
  isContain(tag) {

    while (tag && tag.classList.length && !tag.classList.contains("sel-plugin")) {
      tag = tag.parentNode;
    }
    return tag && tag.classList.length ? tag.classList.contains("sel-plugin") : false;

  }
  //下拉列表显示或隐藏
  onOff(e) {
    this.opt.clickCall && this.opt.clickCall();
    this.focus();
    this.opt.onoff = !this.opt.onoff;
    let div_items = this.el.querySelector(".sel-plugin__items");

    if (this.opt.onoff) {
      div_items.classList.add("sel-plugin__items-show");
    } else {
      div_items.classList.remove("sel-plugin__items-show");
    }
    if (e.target.tagName.toLowerCase() == "li") {
      let val = e.target.dataset.value;
      this.cur_val_txt = this.opt.data.find(item => item.val == val);
      this.el.querySelector(".sel-plugin__content").innerHTML = this.cur_val_txt.txt;
      this.opt.changeCall && this.opt.changeCall(this.cur_val_txt);
    }

    window.event ? window.event.cancelBubble = true : e.stopPropagation();


  }
  //下拉隐藏
  selHide() {

    let div_items = this.el.querySelector(".sel-plugin__items");
    this.opt.onoff = false;
    div_items.classList.remove("sel-plugin__items-show");

  }

  mmove({ target }) {

    let lis = this.el.querySelectorAll("li");
    [...lis].forEach(item => item.classList.remove("sel-plugin__li-sel"));
    if (target.tagName.toLowerCase() == "li") {
      this.stop_ele = target;
    }

  }

  mleave(e) {

    this.stop_ele && this.stop_ele.classList.add("sel-plugin__li-sel")

  }
  //渲染下拉框
  render() {

    let unit = "px";
    this.el.classList.add(‘sel-plugin‘);
    this.el.style.width = this.opt.width + unit;
    this.el.style.height = this.opt.height + unit;
    this.opt.focus_onoff ? this.el.classList.add("sel-plugin-focus") : ‘‘;

    let div_content = document.createElement(‘div‘);
    div_content.className = ‘sel-plugin__content‘;

    div_content.innerHTML = this.cur_val_txt.txt;
    div_content.style.lineHeight = this.opt.height + unit;
    this.el.appendChild(div_content);

    let div_arrow = document.createElement(‘div‘);
    div_arrow.className = ‘sel-plugin__arrow‘;
    div_arrow.innerHTML = "<div></div>";
    this.el.appendChild(div_arrow);

    let div_items = document.createElement(‘div‘);
    div_items.className = ‘sel-plugin__items‘;
    div_items.style.width = this.opt.width + unit;
    this.opt.onoff ? div_items.classList.add("sel-plugin__items-show") : ‘‘;
    this.el.appendChild(div_items);

    let ul = document.createElement(‘ul‘);
    ul.classList.add(‘sel-plugin__ul‘);
    div_items.appendChild(ul);

    let classstr = "";
    let html = this.opt.data.map(item => {
      classstr = item.val == this.cur_val_txt.val ? "class=‘sel-plugin__li-sel‘" : ‘‘;
      return `<li ${classstr} data-value=‘${item.val}‘>${item.txt}</li>`;
    }).join(‘‘);
    ul.innerHTML = html;

  }
  //获取当前选项索引
  getIndex() {

    let lis = this.el.querySelectorAll("li");
    let index = 0;
    [...lis].forEach((item, i) => {
      if (item.classList.contains("sel-plugin__li-sel")) {
        index = i;
      }
    });
    return index;

  }
  //获取值
  getVal() {

    return this.cur_val_txt;

  }

  updateData(data, cur_item) {

    this.opt.data = data.length>0 ? data : [{ val: 1, txt: ‘请选择‘ }];
    this.opt.cur_val_txt = cur_item ? cur_item : this.opt.data[0];
    let div_content = this.el.querySelector(".sel-plugin__content");
    let ul = this.el.querySelector(".sel-plugin__ul");

    div_content.innerHTML = this.opt.cur_val_txt.txt;
    ul.innerHTML = "";
    let classstr = "";
    let html = this.opt.data.map(item => {
      classstr = item.val == this.cur_val_txt.val ? "class=‘sel-plugin__li-sel‘" : ‘‘;
      return `<li ${classstr} data-value=‘${item.val}‘>${item.txt}</li>`;
    }).join(‘‘);
    ul.innerHTML = html;

  }


}
export default SelPlugin;

代码复制到自己电脑，浏览页面必须安装本地服务器运行代码，否则或报错，因为我用的是es6 模块加载，必须是http协议的方式加载

以上是关于es6 实现原生select组件，只用于学习，有哪些不足请指出的主要内容，如果未能解决你的问题，请参考以下文章

如何用原生的react，webpack，es6来使用蚂蚁金服的ant design组件库

原生javascript实现的选取搜索组件

ES6 数组遍历方法的实战用法总结

es6学习4: 原生js常用api

微信小程序原生开发功能合集二：下拉选择组件封装

vue学习笔记の实现select组件