# xm-select
#### 介绍
始于Layui, 下拉选择框的多选解决方案
前身[前往formSelectes](https://github.com/hnzzmsf/layui-formSelects), 由于渲染速度慢, 代码冗余, 被放弃了
`xm-select`使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展
[xm-select演示站点](https://maplemei.gitee.io/xm-select/)
> 支持功能
- [x] 国际化 - 中文/英文
- [x] 多选
- [x] 单选
- [x] 重复选
- [x] 分组
- [x] 工具条
- [x] 创建条目
- [x] 显示模式
- [x] 搜索模式 (本地数据过滤, 远程搜索)
- [x] 分页模式
- [x] 下拉树
- [x] 下拉任意 - 可以自己写html
> 联系方式
- xm-select技术群①: `660408068` (500人)
- xm-select技术群②: `938624691` (500人)
- xm-select技术群③: `1145047250` (500人)
[issues 需求记录](https://gitee.com/maplemei/xm-select/issues)
[更新日志](CHANGELOG.md)
#### 软件架构
1. 引入第三方[preact](https://preactjs.com/)库, 利用jsx渲染页面结构
2. 使用[webpack](https://www.webpackjs.com/)进行打包
#### 快读上手
> 直接使用
```
1. 引入 `dist/xm-select.js`
2. 写一个`<div id="demo1"></div>`
3. 渲染
var demo1 = xmSelect.render({
el: '#demo1',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
})
```
> 二次开发
```
1. git clone https://gitee.com/maplemei/xm-select.git
2. cd xm-select
3. yarn 或者 npm install
```
[目录结构说明](https://gitee.com/maplemei/xm-select/wikis/pages?sort_id=2465940&doc_id=820743)
> 打赏
如果喜欢作者的插件, 可以请作者吃雪糕 ^_^
<p>
<a href="javascript:;">
<img src="docs/assets/wx.jpg" alt="打赏" width="300" style="border: 1px solid #EFEFEF">
</a>
</p>
#### 示例
[示例页面](https://maplemei.gitee.io/xm-select/)
> 一个小栗子
```
<!-- 占位 -->
<div id="demo1"></div>
<!-- 引入插件 -->
<script src="../dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
<!-- 渲染页面 -->
<script type="text/javascript">
var demo1 = xmSelect.render({
// 这里绑定css选择器
el: '#demo1',
// 渲染的数据
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
})
// 变量, demo1 可以通过API操作
// 获取选中值, demo1.getValue();
// 设置选中值, demo1.setValue([{ name: '动态值', value: 999 }])
// ...
</script>
```
#### 相关
> 支持IE吗
简单适配IE10以上的版本, 如有其它兼容性问题, 请加群反馈
> 为什么没有css文件
已经内置到js代码中了, 直接引入`xm-select.js`即可使用
> 开源 != 无私
有问题请自己多动手尝试^_^
> 成长之路
```
maplemei, 一个90后, 热爱前端的程序猿
16年接触了 贤心大大 的 layui, 开始走向了前端的不归之路
17年尝试自己写了一个基于layui的省市区联动插件, 同年底开发了layui select多选第一版
18年6月发布了formSelects
19年6月发布了xm-select
其实每个版本的更新都是自己对前端的一个新的认知, 也是一个新的学习之路
目前作者几乎不怎么使用layui, 已经走向了vue, react的新途 , xm-select的维护是对layui的一种情怀 ^_^
```
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
xm-select下拉选择框 v1.2.4.zip (99个子文件)
说明.htm 4KB
xm-select-v1.2.4
.editorconfig 261B
src
main.js 955B
style
index.less 11KB
iconfont.less 4KB
components
xm-select
index.js 6KB
framework
index.js 18KB
plugin
tree.js 14KB
cascader.js 5KB
general.js 16KB
custom.js 604B
label
index.js 6KB
common
expand.js 2KB
util.js 5KB
index.js 2KB
config
options.js 4KB
language
zn.js 247B
en.js 252B
LICENSE 11KB
CHANGELOG.md 13KB
.babelrc 68B
docs
pages
changelog.vue 5KB
App.vue 6KB
plugins
index.js 0B
assets
wx.jpg 101KB
common.less 4KB
dataNotArray.png 5KB
index.ejs 1KB
mds
XM21.md 2KB
XM08.md 5KB
ZM04.md 725B
XM20.md 970B
question.md 2KB
XM25.md 2KB
XM07.md 763B
XM05.md 4KB
XM11.md 910B
ZP06.md 2KB
XM23.md 1KB
ZP02.md 9KB
ZM07.md 2KB
options.md 13KB
ZM08.md 1KB
ZTEST.md 2KB
XM24.md 1KB
XM27.md 1KB
ZP05.md 1KB
XM22.md 2KB
XM26.md 2KB
XM15.md 1KB
XM19.md 3KB
install.md 3KB
ZM05.md 3KB
XM02.md 532B
XM14.md 4KB
XM06.md 1KB
ZM03.md 3KB
XM13.md 1KB
XM03.md 920B
ZP01.md 1KB
ZP04.md 3KB
XM10.md 1KB
XM17.md 1KB
ZM02.md 974B
XM04.md 1003B
es6.md 2KB
XM01.md 822B
XM12.md 5KB
XM16.md 3KB
ZP03.md 2KB
XM09.md 1KB
ZM01.md 3KB
XM18.md 1KB
ZM06.md 821B
components
side-nav.vue 5KB
demo-block.vue 6KB
header.vue 8KB
component.vue 55B
entry.js 1KB
router.js 6KB
.gitee
ISSUE_TEMPLATE.zh-CN.md 84B
PULL_REQUEST_TEMPLATE.zh-CN.md 147B
dist
index.html 1021B
xm-select.js 98KB
static
3.js 35KB
docs.js 1.86MB
wx.b556b2e.jpg 101KB
element-icons.535877f.woff 28KB
2.js 285KB
element-icons.732389d.ttf 55KB
package.json 1KB
build
webpack.config.js 3KB
md-loader
fence.js 665B
containers.js 729B
util.js 2KB
config.js 575B
index.js 2KB
.gitignore 43B
README.md 3KB
共 99 条
- 1
资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- AutoHotKey 2.0中文帮助文件
- 基于Docker-compose的Elasticsearch集群每个节点均是独立docker-compose配置而成源码.zip
- 目标检测-零售食品LOGO检测数据集-40000张图-+对应VOC-COCO-YOLO三种格式标签+数据集划分脚本
- 目标检测-零售食品LOGO检测数据集-30000张图-+对应VOC-COCO-YOLO三种格式标签+数据集划分脚本
- 目标检测-零售食品LOGO检测数据集-20000张图-+对应VOC-COCO-YOLO三种格式标签+数据集划分脚本
- 目标检测-零售食品LOGO检测数据集-10000张图-+对应VOC-COCO-YOLO三种格式标签+数据集划分脚本
- 基于GUI+MYSQL+JAVA图书管理系统文档说明+源码(高分大作业项目).zip
- 基于Qt使用C++实现图书管理系统源码+数据库(95分以上).zip
- 基于GUI+MYSQL+JAVA票务管理系统文档介绍+源码+数据库(高分大作业).zip
- Java项目-购物网站系统(java+Servlet+JSP+Mysql)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功