v1.0.9

2019-10-17 21:21:39 +08:00
parent 9416e64e7e
commit de672117e1
19 changed files with 257 additions and 70 deletions
--- a/docs/assets/common.less
+++ b/docs/assets/common.less
@@ -178,6 +178,11 @@ button, input, select, textarea {
 	display: inline-block;
 	width: 300px;
 }
+.xm-select-size{
+    vertical-align: top;
+	display: inline-block;
+	width: 150px;
+}
 .xm-select-demo-alert:extend(.xm-select-demo){
    margin: 20px;
 }
--- a/docs/mds/XM05.md
+++ b/docs/mds/XM05.md
@@ -168,8 +168,8 @@ var demo5 = xmSelect.render({
 var demo6 = xmSelect.render({
    el: '#demo6', 
    filterable: true,
-    filterDone: function(val){
-        alert('搜索完毕')
+    filterDone: function(val, list){
+        alert(`搜索完毕, 搜索关键词: ${val}, 过滤数据: ${list.length}个`)
    },
    data: [
        {name: '水果', value: 1},
--- a/docs/mds/XM24.md
+++ b/docs/mds/XM24.md
@@ -0,0 +1,61 @@
+## 尺寸
+
+
+### 四种尺寸变换
+
+
+
+:::demo `large`, `medium`, `small`, `mini`
+```html
+<div id="demo1" class="xm-select-size"></div>
+<div id="demo2" class="xm-select-size"></div>
+<div id="demo3" class="xm-select-size"></div>
+<div id="demo4" class="xm-select-size"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    size: 'large',
+    data: [
+        {name: 'large', value: 1, selected: true},
+        {name: '李四1', value: 2},
+        {name: '王五1', value: 3, disabled: true},
+        {name: '苹果2', value: 4},
+    ]
+})
+
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+    size: 'medium',
+    data: [
+        {name: 'medium', value: 1, selected: true},
+        {name: '李四1', value: 2},
+        {name: '默认尺寸', value: 3, selected: true, disabled: true},
+        {name: '苹果2', value: 4},
+    ]
+})
+
+var demo3 = xmSelect.render({
+    el: '#demo3', 
+    size: 'small',
+    data: [
+        {name: 'small', value: 1, selected: true},
+        {name: '李四1', value: 2},
+        {name: '王五1', value: 3, disabled: true},
+        {name: '苹果2', value: 4},
+    ]
+})
+
+var demo4 = xmSelect.render({
+    el: '#demo4', 
+    size: 'mini',
+    data: [
+        {name: 'mini', value: 1, selected: true},
+        {name: '李四1', value: 2},
+        {name: '王五1', value: 3, disabled: true},
+        {name: '苹果2', value: 4},
+    ]
+})
+</script>
+```
+:::
--- a/docs/mds/XM25.md
+++ b/docs/mds/XM25.md
@@ -0,0 +1,55 @@
+## 警告
+
+
+### 警告提示
+
+放下她, 让我来!!!  默认颜色`#e54d42`, 多选上限的样色
+
+
+:::demo 
+```html
+<div id="demo1" class="xm-select-demo"></div>
+<button class="btn" id="demo1-warning">警告</button>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3, disabled: true},
+    ]
+})
+
+document.getElementById('demo1-warning').onclick = function(){
+    demo1.warning();
+}
+</script>
+```
+:::
+
+
+### 自定义闪烁颜色
+
+
+:::demo 
+```html
+<div id="demo2" class="xm-select-demo"></div>
+<button class="btn" id="demo2-warning">警告</button>
+
+<script>
+var demo2 = xmSelect.render({
+    el: '#demo2', 
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3, disabled: true},
+    ]
+})
+
+document.getElementById('demo2-warning').onclick = function(){
+    demo2.warning('#6739b6');
+}
+</script>
+```
+:::
--- a/docs/mds/ZM01.md
+++ b/docs/mds/ZM01.md
@@ -85,22 +85,15 @@ var demo2 = xmSelect.render({
 document.getElementById('demo2-getValue').onclick = function(){
    //获取当前多选选中的值
    var selectArr = demo2.getValue();
-    document.getElementById('demo2-value').innerHTML = JSON.stringify(selectArr, null, 2);
+    document.getElementById('demo2-value').innerHTML = `\ndemo2.getValue()\n\n` + JSON.stringify(selectArr, null, 2);
 }

-document.getElementById('name').onclick = function(){
-    //获取当前多选选中的值
-    var selectArr = demo2.getValue('name');
-    document.getElementById('demo2-value').innerHTML = JSON.stringify(selectArr, null, 2);
-}
-
-
 var types = ['name', 'nameStr', 'value', 'valueStr'];
 types.forEach(function(type){
    document.getElementById(type).onclick = function(){
        //获取当前多选选中的值
        var selectArr = demo2.getValue(type);
-        document.getElementById('demo2-value').innerHTML = JSON.stringify(selectArr, null, 2);
+        document.getElementById('demo2-value').innerHTML = `\ndemo2.getValue('${type}')\n\n` + JSON.stringify(selectArr, null, 2);
    }
 });

--- a/docs/mds/ZM04.md
+++ b/docs/mds/ZM04.md
@@ -5,31 +5,32 @@
 <div id="demo1"></div>

 <script>
-var demo1 = xmSelect.render({
-    el: '#demo1', 
-    autoRow: true,
-    toolbar: { show: true },
-	filterable: true,
-	remoteSearch: true,
-	remoteMethod: function(val, cb, show){
-		//这里如果val为空, 则不触发搜索
-		if(!val){
-			return cb([]);
-		}
-	    axios({
-	        method: 'get',
-	        url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
-	        params: {
-	            keyword: val,
-	        }
-	    }).then(response => {
-	        var res = response.data;
-	        cb(res.data)
-	    }).catch(err => {
-	        cb([]);
-	    });
-	},
-})
+    var demo1 = xmSelect.render({
+        el: '#demo1', 
+        autoRow: true,
+        toolbar: { show: true },
+        filterable: true,
+        remoteSearch: true,
+        remoteMethod: function(val, cb, show){
+            //这里如果val为空, 则不触发搜索
+            if(!val){
+                return cb([]);
+            }
+            //这里引入了一个第三方插件axios, 相当于$.ajax
+            axios({
+                method: 'get',
+                url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
+                params: {
+                    keyword: val,
+                }
+            }).then(response => {
+                var res = response.data;
+                cb(res.data)
+            }).catch(err => {
+                cb([]);
+            });
+        },
+    })
 </script>
 ```
 :::
--- a/docs/mds/options.md
+++ b/docs/mds/options.md
@@ -15,7 +15,7 @@
 | searchTips        | 搜索提示 | string           |    -    |    请选择    |
 | delay             | 搜索延迟 ms | int           |    -    |    500    |
 | filterMethod      | 搜索回调函数 | function(val, item, index, prop)  val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key           |    -    |    -    |
-| filterDone        | 搜索完成函数 | function(val)  val: 当前搜索值           |    -    |    -    |
+| filterDone        | 搜索完成函数 | function(val, list)  val: 当前搜索值, list: 过滤后的数据           |    -    |    -    |
 | remoteSearch      | 是否开启自定义搜索 (远程搜索)| boolean           |    true / false   |    false    |
 | remoteMethod      | 自定义搜索回调函数 | function(val, cb, show)  val: 当前搜索值, cb: 回调函数, 需要回调一个数组, 结构同data, show: 下拉框显示状态         |    -    |    -    |
 | direction         | 下拉方向| string           |    auto / up / down   |    auto    |
@@ -39,6 +39,7 @@
 | toolbar           | 工具条, 具体看下表  |  object  |   -  |    -    |
 | showCount         | 展示在下拉框中的最多选项数量  |  int  |   -  |    0    |
 | autoRow           | 是否开启自动换行(选项过多时)  |  boolean  |   -  |    false    |
+| size              | 尺寸  |  string  |  large / medium / small / mini  |    medium    |


 ### prop
@@ -177,3 +178,4 @@ xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
 | closed  | 主动关闭下拉 | - |
 | reset  | 重置为上一次的render状态 | - |
 | update  | 更新多选选中, reset不保留 | (options: 见配置项) |
+| warning  | 警告 | (color: 默认同theme.maxColor) |
--- a/docs/router.js
+++ b/docs/router.js
@@ -69,6 +69,8 @@ export default [{
            { path: '/example/XM21', name: 'Optgroup 分组', component: importMd('/XM21') },
            { path: '/example/XM22', name: 'AutoRow 自动换行', component: importMd('/XM22') },
            { path: '/example/XM23', name: 'HiddenIcon 隐藏图标', component: importMd('/XM23') },
+            { path: '/example/XM24', name: 'Size 尺寸', component: importMd('/XM24') },
+            { path: '/example/XM25', name: 'Warning 警告', component: importMd('/XM25') },
        ]
 	}, {
 		path: '/example-custom',