xm-select的简单封装

向下很多小伙伴刚接触这个插件时会遇到一点小麻烦，例如填写表单之类的，需要需要多个下拉框，那么就会有很多相同的代码，强迫症的我接受不了，于是我对这个插件进行了一个简单的封装，话不多说，直接上代码。

/**
 * 使用ES6基于xm-select插件封装的一个 XmSelectWrapper 类
 * 创建实例时传递选择器（selector）和选项（options），
 * 从而实现更大的灵活性。你可以在多个地方使用相同的选项配置来创建不同的XmSelectWrapper实例。
 * 同时，通过使用...扩展运算符将选项合并到xmSelect.render的参数中，确保传递的选项按照原始的键值对方式传递给xmSelect。
 * @param selector ID选择器
 * @param options  Xm-select配置及数据选项
 * 使用前确保已经引入了xm-select.js
 */

class XmSelectWrapper {
  constructor(selector, options) {
    this.selector = selector;
    this.parent = document.querySelector(selector).parentNode;
    this.options = {
      theme: {
        //组件颜色固定配置，如有需要可根据需要修改或新增其他固定配置
        color: "#ED493B",
        maxColor: "#ED493B",
        hover: "",
      },
      ...options,
    };
    this.instance = null;
    this.selectedValues = []; // 存储选中值的数组
  }
  // 初始化（使用render函数渲染DOM节点）、监听选中值
  init() {
    const that = this; // 保存当前类的引用
    this.instance = xmSelect.render({
      el: this.selector,
      ...this.options,
      on({ arr }) {
        that.selectedValues = arr.map(({ value }) => value); // 更新选中值数组
      },
    });
  }
  // 获取选中值
  getSelectedValues() {
    if (this.options.radio) {
      return this.selectedValues[0] || null; // 单选模式只返回第一个选中值
    } else {
      return this.selectedValues; // 多选模式返回选中值数组
    }
  }
}

这个XmSelectWrapper类是我基于我的需要进行封装的，接下来提供两个使用示例，使用这个类时一定要先引入xm-select插件。

 // 静态下拉数据使用示例
const options = {
  tips: "请选择辅导形式",
  radio: true,      //开启单选模式
  clickClose: true, //选中后是否关闭下拉框
  data: [
    { name: "v1", value: "1" },
    { name: "v2", value: "2" },
  ]
};
const xmSelectWrapper = new XmSelectWrapper("#demo2", options);
xmSelectWrapper.init();

// 测试获取选中值是否成功;
 $("body").click(function () {
   const selectedValues = xmSelectWrapper.getSelectedValues();
   console.log(selectedValues);
 });

这个是针对静态下拉数据的使用示例，这边是一个单选模式的下拉框，如果要多选，直接将radio与clickClose删除即可。

接下来展示远程数据的下拉搜索框

// 动态下拉数据使用示例;
var options = {
  tips: "填写您所学专业",
  filterable: true, //下拉列表开启搜索框
  remoteSearch: true,  //启用远程搜索功能
  radio: true, //开启单选模式
  clickClose: true, //选中后是否关闭下拉框
  paging: true,   //开启分页
  pageSize: 5,    //每页展示的条数
  remoteMethod: function (val, cb, show) {
    //在这里获取动态数据以及数据处理
    if (!val) {
      return cb([]);
    }
    $.ajax({
      type: "POST",
      url: "{:U('Becometutor/getSubjectCode')}", //记得替换为自己要请求的接口地址
      data: {
        name_zh: val,
        "q_word[]": val,
        pageNumber: 1,
        pageSize: 10,
        andOr: "OR",
        searchTable: "tbl",
        type: 0,
      },
      dataType: "json",
      success: function (res) {
        console.log(res.gridResult.list);
        let arr = [];
        res.gridResult.list.forEach((element) => {
          let ele = element;
          ele.name = ele.name_zh;
          ele.value = ele.name_zh;
          arr.push(ele);
        });
        return cb(arr);
      },
    });
  },
};
const major = new XmSelectWrapper("#major", options);
major.init();
//测试选中值
$("body").click(function () {
  let major = major.getSelectedValues();
  console.log(major);
});

在这里我没有将远程数据封装，因为我的应用场景比较多，接口返回的数据字段以及数据结构都不一样，不利于我的使用，如果大家有需要可以自行更改代码。

目前这种程度的封装以及可以满足我的业务需要，大家可以根据需要自行优化，不足的地方欢迎大家提出建议和补充。