v1.0.3

docs/mds/XM01.md

@@ -0,0 +1,26 @@
+## 基础使用
+
+:::tip
+只需引入`xm-select.js`, 剩下的就只有渲染了
+:::
+
+
+### 一个小栗子
+
+:::demo `el`绑定的不一定是id, 也可以是其他css选择器
+```html
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    data: [
+        {name: '张三', value: 1},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+

docs/mds/XM02.md

@@ -0,0 +1,28 @@
+## 国际化
+
+
+### 英语
+
+:::demo 目前仅支持`中文`和`英文`, 如需更多语言, 可以`clone`代码进行二次开发
+```html
+<div id="demo1" class="xm-select-demo"></div>
+<div xid="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    language: 'en',
+    data: []
+})
+var demo2 = xmSelect.render({
+    el: '[xid=demo2]', 
+    language: 'en',
+    data: [
+        {name: 'apple', value: 1},
+        {name: 'banana', value: 2},
+        {name: 'orange', value: 3},
+    ]
+})
+</script>
+```
+:::

docs/mds/XM03.md

@@ -0,0 +1,47 @@
+## 默认选中
+
+
+
+### 使用`selected`属性
+
+:::demo 当然`selected`是选中, `disabled`是禁用
+```html
+<div id="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+    data: [
+        {name: '水果', value: 1, selected: true, disabled: true},
+        {name: '蔬菜', value: 2, selected: true},
+        {name: '桌子', value: 3, disabled: true},
+        {name: '北京', value: 4},
+    ]
+})
+</script>
+```
+:::
+
+
+
+### 使用initValue进行初始化
+
+:::demo `initValue`的优先级大于选项中的`selected`
+```html
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+var demo5 = xmSelect.render({
+    el: '#demo1', 
+    initValue: [4],
+    data: [
+        {name: '水果', value: 1, selected: true, disabled: true},
+        {name: '蔬菜', value: 2, selected: true},
+        {name: '桌子', value: 3, disabled: true},
+        {name: '北京', value: 4},
+    ]
+})
+</script>
+```
+:::
+

docs/mds/XM04.md

@@ -0,0 +1,64 @@
+## 修改提示
+
+
+
+### 修改选项提示文字
+
+:::demo 
+```html
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    tips: '你喜欢什么水果呢?',
+    data: [
+        {name: '水果', value: 1},
+        {name: '蔬菜', value: 2},
+        {name: '桌子', value: 3},
+        {name: '北京', value: 4},
+    ]
+})
+</script>
+```
+:::
+
+
+### 修改空数据提示文字
+
+:::demo 
+```html
+<div id="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+    empty: '呀, 没有数据呢',
+    data: [ ]
+})
+</script>
+```
+:::
+
+
+### 修改搜索提示文字
+
+:::demo 
+```html
+<div id="demo3" class="xm-select-demo"></div>
+
+<script>
+var demo3 = xmSelect.render({
+    el: '#demo3', 
+    filterable: true,
+    searchTips: '你想吃什么水果吧',
+    data: [
+        {name: '水果', value: 1},
+        {name: '蔬菜', value: 2},
+        {name: '桌子', value: 3},
+        {name: '北京', value: 4},
+    ]
+})
+</script>
+```
+:::

docs/mds/XM05.md

@@ -0,0 +1,118 @@
+## 搜索模式
+
+
+
+### 默认搜索
+
+:::demo 默认按照`name`进行搜索
+```html
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+	filterable: true,
+    data: [
+        {name: '水果', value: 1},
+        {name: '蔬菜', value: 2},
+        {name: '桌子', value: 3},
+        {name: '北京', value: 4},
+    ]
+})
+</script>
+```
+:::
+
+
+### 重写搜索方法
+
+:::demo 
+```html
+<div id="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+    filterable: true,
+    filterMethod: function(val, item, index, prop){
+        if(val == item.value){//把value相同的搜索出来
+            return true;
+        }
+        if(item.name.indexOf(val) != -1){//名称中包含的搜索出来
+            return true;
+        }
+        return false;//不知道的就不管了
+    },
+    data: [
+        {name: '水果', value: 1},
+        {name: '蔬菜', value: 2},
+        {name: '桌子', value: 3},
+        {name: '北京', value: 4},
+    ]
+})
+</script>
+```
+:::
+
+
+### 搜索延迟
+
+为了提高有效搜索, 当停止输入`500ms`后才开始进行过滤搜索, 当然这个`500`你也可以进行修改
+
+:::demo `delay: 2000` 输入停止2s后进行搜索过滤
+```html
+<div id="demo3" class="xm-select-demo"></div>
+
+<script>
+var demo3 = xmSelect.render({
+    el: '#demo3', 
+    filterable: true,
+    delay: 2000,
+    data: [
+        {name: '水果', value: 1},
+        {name: '蔬菜', value: 2},
+        {name: '桌子', value: 3},
+        {name: '北京', value: 4},
+    ]
+})
+</script>
+```
+:::
+
+
+### 自定义搜索 (远程搜索)
+
+第一步: 需要先开启搜索 `filterable: true,`
+
+第二步: 开启自定义搜索 `remoteSearch: true`
+
+第三部: 重写搜索回调
+
+简单吧, 记得Star ^_^
+
+:::demo `render`后, 就会进行一次回调, 用于渲染第一次数据
+```html
+<div id="demo4" class="xm-select-demo"></div>
+
+<script>
+var demo4 = xmSelect.render({
+    el: '#demo4', 
+    filterable: true,
+    remoteSearch: true,
+    remoteMethod: function(val, cb){
+        //这里模拟3s后返回数据
+        setTimeout(function(){
+            //需要回传一个数组
+            cb([
+                {name: '水果' + val, value: val + 1},
+                {name: '蔬菜' + val, value: val + 2},
+                {name: '桌子' + val, value: val + 3},
+                {name: '北京' + val, value: val + 4},
+            ])
+        }, 3000)
+    },
+    data: []
+})
+</script>
+```
+:::

docs/mds/XM06.md

@@ -0,0 +1,69 @@
+## 下拉方向
+
+
+### 自动`auto`
+
+:::demo 
+```html
+<div style="height: 500px">占位div, 演示效果使用, 底部空间不足时会自动向上展开</div>
+
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+	direction: 'auto',
+    data: [
+        {name: '水果', value: 1},
+        {name: '蔬菜', value: 2},
+        {name: '桌子', value: 3},
+        {name: '北京', value: 4},
+    ]
+})
+</script>
+```
+:::
+
+
+### 打卡向上`up`
+
+:::demo 
+```html
+<div id="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+    direction: 'up',
+    data: [
+        {name: '水果', value: 1},
+        {name: '蔬菜', value: 2},
+        {name: '桌子', value: 3},
+        {name: '北京', value: 4},
+    ]
+})
+</script>
+```
+:::
+
+
+### 打开向下`down`
+
+:::demo
+```html
+<div id="demo3" class="xm-select-demo"></div>
+
+<script>
+var demo3 = xmSelect.render({
+    el: '#demo3', 
+    direction: 'down',
+    data: [
+        {name: '水果', value: 1},
+        {name: '蔬菜', value: 2},
+        {name: '桌子', value: 3},
+        {name: '北京', value: 4},
+    ]
+})
+</script>
+```
+:::

docs/mds/XM07.md

@@ -0,0 +1,48 @@
+## 自定义样式
+
+### 随便试试
+
+修改一下背景色和外边距吧
+
+:::demo 
+```html
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    style: {
+        backgroundColor: 'red',
+        marginLeft: '200px',
+    },
+    data: [
+        {name: '张三', value: 1},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 修改下拉框的最大高度
+
+
+:::demo 
+```html
+<div id="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+    height: '50px',
+    data: [
+        {name: '张三', value: 1},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::

docs/mds/XM08.md

@@ -0,0 +1,110 @@
+## 分页
+
+### 启用分页
+
+:::demo 
+```html
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    paging: true,
+    data: [
+        {name: '张三', value: 1},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+        {name: '赵六', value: 4},
+        {name: '苹果', value: 5},
+        {name: '香蕉', value: 6},
+        {name: '凤梨', value: 7},
+        {name: '葡萄', value: 8},
+        {name: '樱桃', value: 9},
+        {name: '车厘子', value: 10},
+        {name: '火龙果', value: 11},
+    ]
+})
+</script>
+```
+:::
+
+
+### 自定义条数
+
+每页3条
+
+:::demo 
+```html
+<div id="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+    paging: true,
+    pageSize: 3,
+    data: [
+        {name: '张三', value: 1},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+        {name: '赵六', value: 4},
+        {name: '苹果', value: 5},
+        {name: '香蕉', value: 6},
+        {name: '凤梨', value: 7},
+        {name: '葡萄', value: 8},
+        {name: '樱桃', value: 9},
+        {name: '车厘子', value: 10},
+        {name: '火龙果', value: 11},
+    ]
+})
+</script>
+```
+:::
+
+
+### 搜索+分页
+
+:::demo 
+```html
+<div id="demo3" class="xm-select-demo"></div>
+<button class="btn" id="demo3-5">每页5条</button>
+<button class="btn" id="demo3-10">每页10条</button>
+<button class="btn" id="demo3-20">每页20条</button>
+
+<script>
+var data = [];
+for(var i = 0 ; i < 100 ; i++ ){
+    data.push({
+        name: '测试数据' + i,
+        value: i,
+    })
+}
+
+var demo3 = xmSelect.render({
+    el: '#demo3', 
+    paging: true,
+    pageSize: 5,
+    filterable: true,
+    data
+})
+
+document.getElementById('demo3-5').onclick = function(){
+    demo3.update({
+        pageSize: 5
+    })
+}
+
+document.getElementById('demo3-10').onclick = function(){
+    demo3.update({
+        pageSize: 10
+    })
+}
+
+document.getElementById('demo3-20').onclick = function(){
+    demo3.update({
+        pageSize: 20
+    })
+}
+
+</script>
+```
+:::

docs/mds/XM09.md

@@ -0,0 +1,79 @@
+## 单选
+
+### 开启单选
+
+
+:::demo 
+```html
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    radio: true,
+    data: [
+        {name: '张三', value: 1},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 单选完关闭下拉
+
+:::demo 
+```html
+<div id="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+    radio: true,
+    clickClose: true,
+    data: [
+        {name: '张三', value: 1},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 更换显示方式
+
+:::demo 
+```html
+<div id="demo3" class="xm-select-demo"></div>
+
+<script>
+var demo3 = xmSelect.render({
+    el: '#demo3', 
+    radio: true,
+    clickClose: true,
+    model: {
+        label: {
+            type: 'text',
+            text: {
+                //左边拼接的字符
+                left: '',
+                //右边拼接的字符
+                right: '',
+                //中间的分隔符
+                separator: ', ',
+            },
+        }
+    },
+    data: [
+        {name: '张三', value: 1},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::

docs/mds/XM10.md

@@ -0,0 +1,83 @@
+## 重复选
+
+### 开启重复选
+
+
+:::demo 
+```html
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    repeat: true,
+    data: [
+        {name: '张三', value: 1},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 重复选完关闭下拉
+
+:::demo 
+```html
+<div id="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+    repeat: true,
+    clickClose: true,
+    data: [
+        {name: '张三', value: 1},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 更换显示方式
+
+:::demo 好像这样只能增不能减了~~ 有待完善
+```html
+<div id="demo3" class="xm-select-demo"></div>
+
+<script>
+var demo3 = xmSelect.render({
+    el: '#demo3', 
+    repeat: true,
+    model: {
+        label: {
+            type: 'count',
+            count: {
+                template: function(data, sels){
+                    var res = {};
+                    sels.forEach(item => {
+                       var name = item.name; 
+                       !res[name] && (res[name] = 0);
+                       res[name] += 1;
+                    });
+                    return Object.keys(res).map(key => {
+                        return `${key} (${res[key]})`
+                    }).join(',');
+                }
+            },
+        }
+    },
+    data: [
+        {name: '张三', value: 1},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::

docs/mds/XM11.md

@@ -0,0 +1,35 @@
+## 自定义属性
+
+### 更换属性key
+
+也许你的数据库返回的并不是`name`和`value`, 也许你提交的时候不止`name`和`value`, 怎么办? 自定义就行
+
+
+:::demo 我的`name`是`label`, 我的`value`是`id`, 我有其他属性`group`
+```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({
+    el: '#demo1', 
+    prop: {
+        name: 'label',
+        value: 'id',
+    },
+    data: [
+        {label: '张三', id: 1, group: 1},
+        {label: '李四', id: 2, group: 1},
+        {label: '王五', id: 3, group: 2},
+    ]
+})
+
+document.getElementById('demo1-getValue').onclick = function(){
+    //获取当前多选选中的值
+    var selectArr = demo1.getValue();
+    document.getElementById('demo1-value').innerHTML = JSON.stringify(selectArr, null, 2);
+}
+</script>
+```
+:::

docs/mds/XM12.md

@@ -0,0 +1,329 @@
+## 主题
+
+### 经典绿 ( #009688 )
+
+:::demo 
+```html
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 嫣红 ( #e54d42 )
+
+:::demo 
+```html
+<div id="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+    theme: {
+        color: '#e54d42',
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 桔橙 ( #f37b1d )
+
+:::demo 
+```html
+<div id="demo3" class="xm-select-demo"></div>
+
+<script>
+var demo3 = xmSelect.render({
+    el: '#demo3', 
+    theme: {
+        color: '#f37b1d',
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 明黄 ( #fbbd08 )
+
+:::demo 
+```html
+<div id="demo4" class="xm-select-demo"></div>
+
+<script>
+var demo4 = xmSelect.render({
+    el: '#demo4', 
+    theme: {
+        color: '#fbbd08',
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 橄榄 ( #8dc63f )
+
+:::demo 
+```html
+<div id="demo5" class="xm-select-demo"></div>
+
+<script>
+var demo5 = xmSelect.render({
+    el: '#demo5', 
+    theme: {
+        color: '#8dc63f',
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 天青 ( #1cbbb4 )
+
+:::demo 
+```html
+<div id="demo6" class="xm-select-demo"></div>
+
+<script>
+var demo6 = xmSelect.render({
+    el: '#demo6', 
+    theme: {
+        color: '#1cbbb4',
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 海蓝 ( #0081ff )
+
+:::demo 
+```html
+<div id="demo7" class="xm-select-demo"></div>
+
+<script>
+var demo7 = xmSelect.render({
+    el: '#demo7', 
+    theme: {
+        color: '#0081ff',
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 姹紫 ( #6739b6 )
+
+:::demo 
+```html
+<div id="demo8" class="xm-select-demo"></div>
+
+<script>
+var demo8 = xmSelect.render({
+    el: '#demo8', 
+    theme: {
+        color: '#6739b6',
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 木槿 ( #9c26b0 )
+
+:::demo 
+```html
+<div id="demo9" class="xm-select-demo"></div>
+
+<script>
+var demo9 = xmSelect.render({
+    el: '#demo9', 
+    theme: {
+        color: '#9c26b0',
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 桃粉 ( #e03997 )
+
+:::demo 
+```html
+<div id="demo10" class="xm-select-demo"></div>
+
+<script>
+var demo10 = xmSelect.render({
+    el: '#demo10', 
+    theme: {
+        color: '#e03997',
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 棕褐 ( #a5673f )
+
+:::demo 
+```html
+<div id="demo11" class="xm-select-demo"></div>
+
+<script>
+var demo11 = xmSelect.render({
+    el: '#demo11', 
+    theme: {
+        color: '#a5673f',
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 玄灰 ( #8799a3 )
+
+:::demo 
+```html
+<div id="demo12" class="xm-select-demo"></div>
+
+<script>
+var demo12 = xmSelect.render({
+    el: '#demo12', 
+    theme: {
+        color: '#8799a3',
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 草灰 ( #aaaaaa )
+
+:::demo 
+```html
+<div id="demo13" class="xm-select-demo"></div>
+
+<script>
+var demo13 = xmSelect.render({
+    el: '#demo13', 
+    theme: {
+        color: '#aaaaaa',
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 墨黑 ( #333333 )
+
+:::demo 
+```html
+<div id="demo14" class="xm-select-demo"></div>
+
+<script>
+var demo14 = xmSelect.render({
+    el: '#demo14', 
+    theme: {
+        color: '#333333',
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+
+
+
+
+
+:::warning
+颜色值来源于[ColorUI](https://github.com/weilanwl/ColorUI), 有兴趣的可以看看
+:::

docs/mds/XM13.md

@@ -0,0 +1,63 @@
+## 显示与隐藏
+
+
+### 主动打开/关闭下拉框
+
+:::demo 
+```html
+<div id="demo1" class="xm-select-demo"></div>
+<button class="btn" id="demo1-open">打开下拉框</button>
+<button class="btn" id="demo1-close">关闭下拉框</button>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    data: [
+        {name: '张三', value: 1},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+
+
+document.getElementById('demo1-open').onclick = function(){
+    //这里延迟1S, 是因为, 点击下拉框外边的位置 会出发关闭事件, 所以延迟演示效果
+    setTimeout(function(){
+        demo1.opened();
+    }, 1000);
+}
+
+document.getElementById('demo1-close').onclick = function(){
+    //先点一下关闭, 然后把下拉框点开, 3S后会自动关闭
+    setTimeout(function(){
+        demo1.closed();
+    }, 3000);
+}
+</script>
+```
+:::
+
+### 监听打开/关闭下拉框
+
+:::demo 
+```html
+<div id="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+    data: [
+        {name: '张三', value: 1},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ],
+    show(){
+        alert('打开了')
+    },
+    hide(){
+        alert('关闭了')
+    }
+})
+</script>
+```
+:::

docs/mds/XM14.md

@@ -0,0 +1,178 @@
+## 显示方式
+
+
+### 方块形状
+
+:::demo 
+```html
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2, selected: true},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 方块形状, 隐藏删除图标
+
+:::demo 
+```html
+<div id="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+    model: {
+        label: {
+            type: 'block',
+            block: {
+                //最大显示数量, 0:不限制
+                showCount: 0,
+                //是否显示删除图标
+                showIcon: false,
+            }
+        }
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2, selected: true},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 方块形状, 超过1个隐藏
+
+:::demo 
+```html
+<div id="demo3" class="xm-select-demo"></div>
+
+<script>
+var demo3 = xmSelect.render({
+    el: '#demo3', 
+    model: {
+        label: {
+            type: 'block',
+            block: {
+                //最大显示数量, 0:不限制
+                showCount: 1,
+                //是否显示删除图标
+                showIcon: true,
+            }
+        }
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2, selected: true},
+        {name: '王五', value: 3},
+    ]
+})
+</script>
+```
+:::
+
+
+### 简单拼接形式
+
+:::demo 
+```html
+<div id="demo4" class="xm-select-demo"></div>
+
+<script>
+var demo4 = xmSelect.render({
+    el: '#demo4', 
+    model: {
+        label: {
+            type: 'text',
+            //使用字符串拼接的方式
+            text: {
+                //左边拼接的字符
+                left: '【',
+                //右边拼接的字符
+                right: '】',
+                //中间的分隔符
+                separator: '，',
+            },
+        }
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2, selected: true},
+        {name: '王五', value: 3},
+    ],
+})
+</script>
+```
+:::
+
+
+### 自定义显示
+
+:::demo 
+```html
+<div id="demo5" class="xm-select-demo"></div>
+
+<script>
+var demo5 = xmSelect.render({
+    el: '#demo5', 
+    model: {
+        label: {
+            type: 'xxxx', //自定义与下面的对应
+            xxxx: {
+                template(data, sels){
+                    return "已选中 " + sels.length + " 项, 共 " + data.length + " 项"
+                }
+            },
+        }
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2, selected: true},
+        {name: '王五', value: 3},
+    ],
+})
+</script>
+```
+:::
+
+
+### 自定义显示HTML
+
+:::demo 
+```html
+<div id="demo6" class="xm-select-demo"></div>
+
+<script>
+var demo6 = xmSelect.render({
+    el: '#demo6', 
+    model: {
+        label: {
+            type: 'xxxx', //自定义与下面的对应
+            xxxx: {
+                template(data, sels){
+                    //也可以是html
+                    return `<div style="color: red;">${sels.length} / ${data.length}</div>`
+                }
+            },
+        }
+    },
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2, selected: true},
+        {name: '王五', value: 3},
+    ],
+})
+</script>
+```
+:::

docs/mds/XM15.md

@@ -0,0 +1,44 @@
+## 构建选项
+
+
+### 默认渲染
+
+:::demo 
+```html
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    data: [
+        {name: '张三', value: 'zhangsan', selected: true},
+        {name: '李四', value: 'lisi', selected: true},
+        {name: '王五', value: 'wangwu'},
+    ]
+})
+</script>
+```
+:::
+
+
+### 自定义渲染
+
+:::demo 
+```html
+<div id="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+    template({ item, sels, name, value }){
+        return name  + '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>' 
+    },
+    data: [
+        {name: '张三', value: 'zhangsan', selected: true},
+        {name: '李四', value: 'lisi', selected: true},
+        {name: '王五', value: 'wangwu'},
+    ]
+})
+</script>
+```
+:::

docs/mds/XM16.md

@@ -0,0 +1,56 @@
+## 监听选择
+
+
+### 实时监听
+
+实时监听多选的选中状态变化
+
+:::demo 
+```html
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+	on({ arr, item, selected }){
+		alert(`name: ${item.name}, 状态: ${selected}`)
+	},
+    data: [
+        {name: '张三', value: 'zhangsan', selected: true},
+        {name: '李四', value: 'lisi', selected: true},
+        {name: '王五', value: 'wangwu'},
+    ]
+})
+</script>
+```
+:::
+
+
+### 监听动态复制
+
+选中北京后, 不能选中上海, 二者互斥
+
+:::demo 
+```html
+<div id="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+	on({ arr, item, selected }){
+		if(selected){
+            var index = arr.findIndex(i => i.mutex == item.mutex && i.value != item.value);
+            if(index != -1){
+                arr.splice(index, 1);
+            }
+        }
+	},
+    data: [
+        {name: '北京', value: 1, mutex: 1, selected: true},
+        {name: '上海', value: 2, mutex: 1},
+        {name: '广州', value: 3},
+    ]
+})
+</script>
+```
+:::

docs/mds/XM17.md

@@ -0,0 +1,57 @@
+## 性能测试
+
+
+### 数据渲染耗时测试
+
+
+:::demo 事实证明分页是好使的 ^_^
+```html
+<div id="demo1" class="xm-select-demo"></div>
+<button class="btn" id="demo1-test1">测试1000条</button>
+<button class="btn" id="demo1-test2">测试10000条</button>
+<button class="btn" id="demo1-test3">测试10000条+分页</button>
+<pre id="demo1-result"></pre>
+
+<script>
+function run(count, paging){
+    //生成数据
+    var data = [];
+    for(var i = 0; i < count; i++){
+        data.push({
+            name: '测试数据' + i,
+            value: i,
+        })
+    }
+    
+    //记录开始渲染时间
+    var startTime = Date.now();
+    
+    var demo1 = xmSelect.render({
+        el: '#demo1', 
+        paging,
+        data
+    })
+    
+    //记录结束时间
+    var endTime = Date.now();
+    
+    document.getElementById('demo1-result').innerText = `渲染耗时: ${endTime - startTime} ms`
+}
+
+document.getElementById('demo1-test1').onclick = function(){
+    run(1000, false)
+};
+
+document.getElementById('demo1-test2').onclick = function(){
+    run(10000, false)
+};
+
+document.getElementById('demo1-test3').onclick = function(){
+    run(10000, true)
+};
+
+run(1000, false);
+
+</script>
+```
+:::

docs/mds/install.md

@@ -0,0 +1,72 @@
+## 安装
+
+
+### 简介
+
+:::tip
+基于 [layui](https://layui.com) 的一个多选解决方案。前身 [formSelects](https://github.com/hnzzmsf/layui-formSelects/)，经历了4个大版本的更新迭代，移除了对 `jquery` 的依赖，以一种全新的面貌诞生了。
+:::
+
+- 唯一依赖库[preactjs](https://preactjs.com/)
+- 打包方式[webpack](https://www.webpackjs.com/)
+- 文档借鉴于[ElementUI](https://element.eleme.cn/#/zh-CN)的编写方式
+- [Fly社区交流贴](https://fly.layui.com/jie/57776/)
+- QQ交流群: `660408068`
+
+> 作者: maplemei, 热爱前端的Java程序猿, 如果喜欢作者的插件, 可以请作者吃雪糕 ^_^
+
+<p>
+  <a href="javascript:;">
+    <img src="../assets/wx.jpg" alt="打赏" width="300">
+  </a>
+</p>
+
+
+
+### 下载
+
+[![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](https://gitee.com/maplemei/xm-select)
+
+
+
+### 二次开发
+
+```
+$ git clone https://gitee.com/maplemei/xm-select.git
+$ cd xm-select
+$ npm install && npm run dev
+```
+
+
+### Hello World
+
+
+:::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({
+    el: '#demo1', 
+    language: 'zn',
+    data: [
+        {name: '张三', value: 1},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ]
+})
+
+document.getElementById('demo1-getValue').onclick = function(){
+    //获取当前多选选中的值
+    var selectArr = demo1.getValue();
+    document.getElementById('demo1-value').innerHTML = JSON.stringify(selectArr, null, 2);
+}
+</script>
+
+```
+:::

docs/mds/options.md

@@ -0,0 +1,107 @@
+## 配置项与方法
+
+
+### 配置项
+
+| 参数              | 说明                             | 类型            | 可选值 | 默认值 |
+| ----------------- | ------------------------------  | --------------- | ------ | ------ |
+| el                | 渲染对象, css选择器      | string          |    -    |    -      |
+| language          | 语言选择              | string           |    zn / en    |    zn    |
+| data              | 显示的数据              | array           |    -    |    [ ]    |
+| initValue         | 初始化选中的数据, 需要在data中存在 | array           |    -    |    null    |
+| tips              | 默认提示, 类似于placeholder | string           |    -    |    请选择    |
+| empty             | 空数据提示 | string           |    -    |    暂无数据    |
+| filterable        | 是否开启搜索 | boolean           |    true / false    |    false    |
+| searchTips        | 搜索提示 | string           |    -    |    请选择    |
+| delay             | 搜索延迟 ms | int           |    -    |    500    |
+| filterMethod      | 搜索回调函数 | function(val, item, index, prop)  val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key           |    -    |    -    |
+| remoteSearch      | 是否开启自定义搜索 (远程搜索)| boolean           |    true / false   |    false    |
+| remoteMethod      | 自定义搜索回调函数 | function(val, cb)  val: 当前搜索值, cb: 回调函数, 需要回调一个数组, 结构同data          |    -    |    -    |
+| direction         | 下拉方向| string           |    auto / up / down   |    auto    |
+| style             | 自定义样式| object           |    -   |    { }    |
+| height            | 默认最大高度| string           |    -   |    200px   |
+| paging            | 是否开启自定义分页 | boolean           |    true / false   |    false    |
+| pageSize          | 分页条数 | int           |    -   |    10    |
+| radio             | 是否开启单选模式 | boolean           |    true / false   |    false    |
+| repeat            | 是否开启重复性模式 | boolean           |    true / false   |    false    |
+| clickClose        | 是否点击选项后自动关闭下拉框 | boolean           |    true / false   |    false    |
+| prop              | 自定义属性名称, 具体看下表 | object           |   -  |        |
+| theme             | 主题配置, 具体看下表 | object           |   -  |        |
+| model             | 模型, 多选的展示方式, 具体见下表 | object           |   -  |        |
+| show              | 展开下拉的回调 | function           |   -  |    -    |
+| hide              | 隐藏下拉的回调 | function           |   -  |    -    |
+| template          | 自定义渲染选项 | function({ item, sels, name, value })  |   -  |    -    |
+| on                | 监听选中变化 | function({ arr, item, selected })  |   -  |    -    |
+
+
+### prop
+
+| 参数              | 说明                             | 类型            | 可选值 | 默认值 |
+| ----------------- | ------------------------------  | --------------- | ------ | ------ |
+| name        | 显示名称      | string     |    -    |    name      |
+| value       | 选中值        | string     |    -    |    value     |
+| selected    | 是否选中      | string     |    -    |    selected      |
+| disabled    | 是否警用      | string     |    -    |    disabled      |
+
+
+### theme
+
+| 参数              | 说明                             | 类型            | 可选值 | 默认值 |
+| ----------------- | ------------------------------  | --------------- | ------ | ------ |
+| color        | 颜色      | string     |    -    |    #009688      |
+
+
+### model
+
+目前仅配置label即可
+
+```
+model: {
+    label: {
+        //使用方式
+        type: 'block',
+        //使用字符串拼接的方式
+        text: {
+            //左边拼接的字符
+            left: '',
+            //右边拼接的字符
+            right: '',
+            //中间的分隔符
+            separator: ', ',
+        },
+        //使用方块显示
+        block: {
+            //最大显示数量, 0:不限制
+            showCount: 0,
+            //是否显示删除图标
+            showIcon: true,
+        },
+        //自定义文字
+        count: {
+            //函数处理
+            template(data, sels){
+                //data: 所有的数据
+                //sels: 选中的数据
+                return `已选中 ${sels.length} 项, 共 ${data.length} 项`
+            }
+        },
+    },
+},
+```
+
+
+### 方法
+
+:::warning
+xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
+:::
+
+| 事件名 | 说明               | 参数 |
+| ------ | ------------------ | -------- |
+| getValue  | 获取当前选中的数据 | - |
+| setValue  | 动态设置数据 | array: 选中的数据, show: 是否展开下拉 |
+| opened  | 主动展开下拉 | - |
+| closed  | 主动关闭下拉 | - |
+| render  | 重新渲染多选 | (options):见配置项 |
+| reset  | 重置为上一次的render状态 | - |
+| update  | 更新多选选中, reset不保留 | - |

docs/mds/question.md

@@ -0,0 +1,17 @@
+## 常见问题
+
+
+
+### 1.在哪里下载
+
+[Gitee码云下载](https://gitee.com/maplemei/xm-select), 使用时引入`xm-select.js`即可, 具体请看[入门指南](/#/component/install)
+
+
+### 2.为什么多选不显示
+
+重要的事情说三遍, 需要渲染, 需要渲染, 需要渲染
+
+
+### 3.渲染后还是不显示
+
+打开控制台查看是否报错, 加群: 660408068, 询问