xm-select/docs/mds/install.md

95 lines
2.5 KiB
Markdown
Raw Normal View History

2019-09-25 17:47:38 +08:00
## 安装
### 简介
:::tip
2019-11-21 13:53:29 +08:00
始于 [layui](https://layui.com) 的一个多选解决方案。<br/>
前身 [formSelects](https://github.com/hnzzmsf/layui-formSelects/), 由于渲染速度慢, 代码冗余, 被放弃了<br/>
[xm-select](https://gitee.com/maplemei/xm-select)使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展
2019-09-25 17:47:38 +08:00
:::
- 唯一依赖库[preactjs](https://preactjs.com/)
- 打包方式[webpack](https://www.webpackjs.com/)
- 文档借鉴于[ElementUI](https://element.eleme.cn/#/zh-CN)的编写方式
- [Fly社区交流贴](https://fly.layui.com/jie/57776/)
2019-12-23 12:16:58 +08:00
- xm-select技术群①: `660408068` (500人已满)
- xm-select技术群②: `938624691` (500人)
- 群满了加不进去的话 有问题就提 [issues](https://gitee.com/maplemei/xm-select/issues) 吧
2019-09-25 17:47:38 +08:00
2019-11-21 13:53:29 +08:00
### 作者
maplemei, 热爱前端的Java程序猿, 如果喜欢作者的插件, 可以请作者吃雪糕 ^_^
### 打赏
2019-11-19 20:13:50 +08:00
2019-12-12 14:17:46 +08:00
喜欢就支持一下吧
2019-11-19 20:13:50 +08:00
<p>
<a href="javascript:;">
2019-12-12 14:17:46 +08:00
<img src="../assets/wx.jpg" alt="打赏" width="300" style="border: 1px solid #EFEFEF">
2019-11-19 20:13:50 +08:00
</a>
2019-09-25 17:47:38 +08:00
</p>
### 下载
2019-11-21 13:53:29 +08:00
| star | fork | download |
| - | - | - |
| [![star](https://gitee.com/maplemei/xm-select/badge/star.svg?theme=dark)](https://gitee.com/maplemei/xm-select/stargazers) | [![fork](https://gitee.com/maplemei/xm-select/badge/fork.svg?theme=dark)](https://gitee.com/maplemei/xm-select/members) | [码云下载](https://gitee.com/maplemei/xm-select/releases) |
2019-09-25 17:47:38 +08:00
### 二次开发
```
$ git clone https://gitee.com/maplemei/xm-select.git
$ cd xm-select
$ npm install && npm run dev
```
### Hello World
2019-11-21 13:53:29 +08:00
```
第一步: 下载
第二步: 引入 xm-select.js
第三步: 写一个`<div id="demo1"></div>`
第四步: 渲染
var demo1 = xmSelect.render({
el: '#demo1',
language: 'zn',
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
```
2019-09-25 17:47:38 +08:00
:::demo 只需引入`xm-select.js`
```html
<div id="demo1" class="xm-select-demo"></div>
<button class="btn" id="demo1-getValue">获取选中值</button>
<pre id="demo1-value"></pre>
<script>
var demo1 = xmSelect.render({
2019-11-19 20:13:50 +08:00
el: '#demo1',
language: 'zn',
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
2019-09-25 17:47:38 +08:00
})
document.getElementById('demo1-getValue').onclick = function(){
2019-11-19 20:13:50 +08:00
//获取当前多选选中的值
var selectArr = demo1.getValue();
document.getElementById('demo1-value').innerHTML = JSON.stringify(selectArr, null, 2);
2019-09-25 17:47:38 +08:00
}
</script>
```
:::