v1.0.10

下拉自定义
2019-10-20 18:01:27 +08:00
parent de672117e1
commit 6d23654a43
27 changed files with 2136 additions and 133 deletions
--- a/docs/assets/common.less
+++ b/docs/assets/common.less
@@ -232,3 +232,12 @@ button, input, select, textarea {
    align-items: center;
    justify-content: center;
 }
+
+.demo-ZP01{
+    .xm-body-custom{
+        padding: 0 10px;
+    }
+    table{
+        margin-bottom: 10px !important;
+    }
+}
--- a/docs/entry.js
+++ b/docs/entry.js
@@ -7,6 +7,7 @@ import VueRouter from 'vue-router';
 import routes from './router';
 import App from './App.vue';
 import demoBlock from './components/demo-block.vue';
+import './plugins'

 Vue.use(ElementUI);
 Vue.use(VueRouter);
--- a/docs/mds/XM07.md
+++ b/docs/mds/XM07.md
@@ -2,7 +2,7 @@

 ### 随便试试

-修改一下背景色和外边距吧
+修改一下外边距, 加上圆角, 更改一下高度

 :::demo 
 ```html
@@ -12,8 +12,9 @@
 var demo1 = xmSelect.render({
    el: '#demo1', 
    style: {
-        backgroundColor: 'red',
        marginLeft: '200px',
+        borderRadius: '50px',
+        height: '50px',
    },
    data: [
        {name: '张三', value: 1},
--- a/docs/mds/XM16.md
+++ b/docs/mds/XM16.md
@@ -9,6 +9,10 @@
 ```html
 <div id="demo1" class="xm-select-demo"></div>

+<br/><br/>
+<button class="btn" id="setValue1">监听setValue(['zhangsan'], null, true)</button>
+<button class="btn" id="setValue2">不监听setValue(['zhangsan'])</button>
+
 <script>
 var demo1 = xmSelect.render({
    el: '#demo1', 
@@ -21,6 +25,14 @@ var demo1 = xmSelect.render({
        {name: '王五', value: 'wangwu'},
    ]
 })
+
+document.getElementById('setValue1').onclick = function(){
+    demo1.setValue(['zhangsan'], null, true);
+}
+
+document.getElementById('setValue2').onclick = function(){
+    demo1.setValue(['zhangsan']);
+}
 </script>
 ```
 :::
--- a/docs/mds/XM21.md
+++ b/docs/mds/XM21.md
@@ -1,12 +1,6 @@
 ## 分组


-
-:::tip
-使用分组时, 不建议开启分页, 也不建议开启选项数量控制!!!
-:::
-
-
 ### optgroup模式

 :::demo 指定选项中的`optgroup`为`true`
@@ -134,3 +128,37 @@ var demo4 = xmSelect.render({
 </script>
 ```
 :::
+
+
+### 带有分页的分组
+
+:::demo 
+```html
+<div id="demo5" class="xm-select-demo"></div>
+
+<script>
+var demo5 = xmSelect.render({
+    el: '#demo5', 
+    toolbar:{
+        show: true,
+    },
+    filterable: true,
+    height: '500px',
+    paging: true,
+    pageSize: 2,
+    data: [
+        {name: '销售员', children: [
+            {name: '张三1', value: 1},
+            {name: '李四1', value: 2},
+            {name: '王五13', value: 3},
+        ]},
+        {name: '奖品', children: [
+            {name: '苹果23', value: 4},
+            {name: '香蕉2', value: 5},
+            {name: '葡萄2', value: 6},
+        ]},
+    ]
+})
+</script>
+```
+:::
--- a/docs/mds/ZP01.md
+++ b/docs/mds/ZP01.md
@@ -0,0 +1,53 @@
+## 下拉自定义
+
+
+
+### 下拉表格
+
+至于能干什么, 就看你们的想象了~~
+
+:::demo 
+```html
+
+<div id="demo1"></div>
+
+<script>
+//先渲染多选
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    content: `
+        <table class="layui-table">
+          <colgroup>
+            <col width="150">
+            <col width="200">
+            <col>
+          </colgroup>
+          <thead>
+            <tr>
+              <th>昵称</th>
+              <th>加入时间</th>
+              <th>签名</th>
+            </tr> 
+          </thead>
+          <tbody>
+            <tr>
+              <td>贤心</td>
+              <td>2016-11-29</td>
+              <td>人生就像是一场修行</td>
+            </tr>
+            <tr>
+              <td>许闲心</td>
+              <td>2016-11-28</td>
+              <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
+            </tr>
+          </tbody>
+        </table>
+    `,
+})
+
+
+
+
+</script>
+```
+:::
--- a/docs/mds/ZP02.md
+++ b/docs/mds/ZP02.md
@@ -0,0 +1,88 @@
+## 下拉树
+
+### eleTree
+
+结合 `layui` 插件中心的 `eleTree`, <a href='https://fly.layui.com/extend/eleTree/' target='_blank'>传送门</a>
+
+
+:::demo 
+```html
+
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+//先渲染多选
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    theme: {
+        color: '#5FB878',
+    },
+    content: '<div id="ele1" lay-filter="ele1"></div>',
+})
+
+//渲染自定义内容
+var ele = layui.eleTree.render({
+    elem: '#ele1',
+    data: [
+        {
+            id: 1,
+            label: "安徽省",
+            children: [
+                {
+                    id: 2,
+                    label: "马鞍山市",
+                    disabled: true,
+                    children: [
+                        {
+                            id: 3,
+                            label: "和县",
+                        },
+                        {
+                            id: 4,
+                            label: "花山区",
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            id: 5,
+            label: "河南省",
+            children: [
+                {
+                    id: 6,
+                    label: "郑州市"
+                }
+            ]
+        }
+    ],
+    showCheckbox: true,
+    defaultExpandAll: true,
+});
+
+//监听下拉多选的选择
+demo1.update({
+   on({ arr, change, isAdd }){
+       if(isAdd === false){//监听取消
+           ele.setChecked(arr.map(item => item.id), true);
+       }
+   },
+});
+
+//监听树的选择
+layui.eleTree.on("nodeChecked(ele1)", function(d) {
+    var arr = ele.getChecked(true, false)
+    demo1.update({
+        prop: {
+            name: 'label',
+            value: 'id',
+        },
+        data: arr,
+    }).setValue(arr)
+})
+
+
+
+</script>
+```
+:::
--- a/docs/mds/ZTEST.md
+++ b/docs/mds/ZTEST.md
@@ -7,28 +7,29 @@
 <div id="demo1" class="xm-select-demo"></div>

 <script>
+//先渲染多选
 var demo1 = xmSelect.render({
    el: '#demo1', 
-    filterable: true,
-    toolbar: {
-        show: true
-    },
-    height: '500px',
-    model: {
-        icon: 'hidden',
-    },
-    autoRow: true,
-    data: [
-        {name: '城市', optgroup: true},
-        {name: '北京13', value: 1},
-        {name: '天津1', value: 2, selected: true, disabled: true},
-        {name: '上海1', value: 3},
-        {name: '销售员', children: [
-            {name: '李四23', value: 4, selected: true},
-            {name: '王五2', value: 5},
-        ]},
-    ],
+    paging: true,
+    pageSize: 2,
+    data(){
+        return [
+            {name: '销售员', children: [
+                {name: '张三1', value: 1, selected: true},
+                {name: '李四1', value: 2, selected: true},
+                {name: '王五1', value: 3, disabled: true},
+            ]},
+            {name: '奖品', children: [
+                {name: '苹果2', value: 4, selected: true, disabled: true},
+                {name: '香蕉2', value: 5},
+                {name: '葡萄2', value: 6},
+            ]},
+        ]
+    }
 })
+
+
+
 </script>
 ```
 :::
--- a/docs/mds/options.md
+++ b/docs/mds/options.md
@@ -8,6 +8,7 @@
 | el                | 渲染对象, css选择器      | string          |    -    |    -      |
 | language          | 语言选择              | string           |    zn / en    |    zn    |
 | data              | 显示的数据              | array           |    -    |    [ ]    |
+| content           | 自定义下拉框html              | string           |    -    |    -    |
 | initValue         | 初始化选中的数据, 需要在data中存在 | array           |    -    |    null    |
 | tips              | 默认提示, 类似于placeholder | string           |    -    |    请选择    |
 | empty             | 空数据提示 | string           |    -    |    暂无数据    |
@@ -38,7 +39,7 @@
 | name              | 表单提交时的name  |  string  |   -  |    select    |
 | toolbar           | 工具条, 具体看下表  |  object  |   -  |    -    |
 | showCount         | 展示在下拉框中的最多选项数量  |  int  |   -  |    0    |
-| autoRow           | 是否开启自动换行(选项过多时)  |  boolean  |   -  |    false    |
+| autoRow           | 是否开启自动换行(选项过多时)  |  boolean  |   true / false  |    false    |
 | size              | 尺寸  |  string  |  large / medium / small / mini  |    medium    |


@@ -171,7 +172,7 @@ xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
 | 事件名 | 说明               | 参数 |
 | ------ | ------------------ | -------- |
 | getValue  | 获取当前选中的数据 | (type: 类型), 可选值: name, nameStr, value, valueStr |
-| setValue  | 动态设置数据 | (array: 选中的数据, show: 是否展开下拉, 不传默认当前显示状态, 取值: true/false) |
+| setValue  | 动态设置数据 | (array: 选中的数据, show: 是否展开下拉,不传默认当前显示状态,取值: true/false, listenOn: 是否触发on的监听, 默认false) |
 | append  | 追加赋值 | (array: 追加的数据) |
 | delete  | 删除赋值 | (array: 删除的数据) |
 | opened  | 主动展开下拉 | - |
--- a/docs/mds/question.md
+++ b/docs/mds/question.md
@@ -22,3 +22,8 @@

 - 打开控制台查看是否报错
 - 加群: 660408068, 询问
+
+
+### 4.占位标签为什么是div
+
+演示中使用的是div, 不限制标签, 但是不建议使用`select`, 因为`layui`会渲染`select`标签
--- a/docs/plugins/eleTree/eleTree.css
+++ b/docs/plugins/eleTree/eleTree.css
@@ -0,0 +1,168 @@
+/* #region tree */
+.eleTree{
+    position: relative;
+}
+.eleTree-hide,
+.eleTree-search-hide{
+    display: none;
+}
+.eleTree-loadData{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    top: 0px;
+}
+.eleTree-loadData .layui-icon{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%)  translateY(-50%);
+}
+.eleTree-node-content{
+    cursor: pointer;
+    height: 26px;
+    line-height: 1.3;
+    white-space: nowrap;
+}
+.eleTree-node-content:hover,
+.eleTree-node-content.eleTree-node-content-active{
+    background-color: #eee;
+}
+.eleTree-node-content-icon .layui-icon{
+    padding: 6px 3px;
+    color: #c0c4cc;
+    font-size: 12px;
+    display: inline-block;
+    transform: rotate(0deg);
+    transition: transform .3s ease-in-out;
+}
+.eleTree-node-content-icon .layui-icon.icon-rotate{
+    transform: rotate(90deg);
+}
+.eleTree-node-content .layui-form-checkbox[lay-skin=primary] i{
+    width: 13px;
+    height: 14px;
+    line-height: 1.3;
+}
+.eleTree-node-content-label{
+    padding-left: 5px;
+}
+.eleTree-node-content-input{
+    width: 80px;
+    border: 1px solid #e6e6e6;
+    outline: 0;
+    padding: 3px 5px;
+    font-size: 12px;
+}
+
+/* 线条样式 */
+.eleTree-node{
+    position: relative;
+}
+.eleTree-node .eleTree-node-verticalline{
+    position: absolute;
+    width: 0;
+    height: 100%;
+    border: 1px dotted #ccc;
+    z-index: 1;
+}
+.eleTree-node .eleTree-node-horizontalline{
+    position: absolute;
+    height: 0;
+    top: 13px;
+    border: 1px dotted #ccc;
+    z-index: 1;
+}
+
+/* checkbox第三种状态 */
+input.eleTree-hideen[type=checkbox]{
+    display: none;
+}
+.eleTree-checkbox {
+    height: auto!important;
+    line-height: normal!important;
+    min-height: 12px;
+    border: none!important;
+    margin-right: 0;
+    padding-left: 18px;
+    position: relative;
+    display: inline-block;
+}
+.eleTree-checkbox i {
+    left: 0;
+    border: 1px solid #d2d2d2;
+    font-size: 12px;
+    border-radius: 2px;
+    background-color: #fff;
+    -webkit-transition: .1s linear;
+    transition: .1s linear;
+    position: absolute;
+    top: 0;
+    color: #fff;
+    cursor: pointer;
+    text-align: center;
+    width: 13px;
+    height: 14px;
+    line-height: 1.3;
+}
+.eleTree-checkbox i:hover {
+    border-color: #5FB878;
+}
+.eleTree-checkbox-checked i {
+    border-color: #5FB878;
+    background-color: #5FB878;
+    color: #fff;
+}
+.eleTree-checkbox-line:after{
+    content: "";
+    position: relative;
+    width: 8px;
+    height: 1px;
+    background-color: #fff;
+    display: inline-block;
+    top: -4px;
+}
+
+.eleTree-checkbox.eleTree-checkbox-disabled i{
+    cursor: not-allowed;
+    background-color: #f2f6fc;
+    border-color: #dcdfe6;
+    color: #c2c2c2;
+}
+.eleTree-checkbox.eleTree-checkbox-disabled i.eleTree-checkbox-line:after{
+    background-color: #c2c2c2;
+}
+.eleTree-checkbox.eleTree-checkbox-disabled i:hover{
+    border-color: #dcdfe6;
+}
+
+#tree-menu{
+    margin: 0;
+    padding: 2px;
+    position: absolute;
+    background: #f5f5f5;
+    border: 1px solid #979797;
+    box-shadow: 2px 2px 2px #999;
+    display: none;
+    z-index: 20181205;
+}
+#tree-menu li>a{
+    display: block;
+    padding: 0 1em;
+    text-decoration: none;
+    width: auto;
+    color: #000;
+    white-space: nowrap;
+    line-height: 2.4em;
+    text-shadow: 1px 1px 0 #fff;
+    border-radius: 1px;
+}
+#tree-menu li>a:hover{
+    background-color: #e8eff7;
+    box-shadow: 0 0 2px #0a6aa1;
+}
+.tree-menu-bg{
+    background-color: #ccc;
+}
+/* #endregion */
--- a/docs/plugins/eleTree/eleTree.js
+++ b/docs/plugins/eleTree/eleTree.js
--- a/docs/plugins/index.js
+++ b/docs/plugins/index.js
@@ -0,0 +1,2 @@
+import './eleTree/eleTree.js'
+import './eleTree/eleTree.css'
--- a/docs/router.js
+++ b/docs/router.js
@@ -1,4 +1,5 @@
 import Component from './components/component.vue';
+import { version } from '../package.json'

 function importVue(path) {
 	return r => require.ensure([], () => r(require(`./pages${path}.vue`)));
@@ -20,7 +21,7 @@ export default [{
 		redirect: '/component',
 	}, {
 		path: '/changelog',
-		name: '更新日志',
+		name: '更新日志 v' + version,
 		component: importVue('/changelog'),
 	}, {
 		path: '/add',
@@ -84,12 +85,25 @@ export default [{
            { path: '/example-custom/ZM04', name: '远程搜索', component: importMd('/ZM04') },
            { path: '/example-custom/ZM05', name: '动态数据', component: importMd('/ZM05') },
            { path: '/example-custom/ZM06', name: '弹框中的多选', component: importMd('/ZM06') },
-            // { path: '/example-custom/ZTEST', name: '测试', component: importMd('/ZTEST') },
+        ]
+	}, {
+		path: '/example-plugin',
+		name: '拓展中心',
+		redirect: '/example-plugin/ZP01',
+		component: Component,
+		children: [
+            { path: '/example-plugin/ZP01', name: '下拉自定义', component: importMd('/ZP01') },
+            { path: '/example-plugin/ZP02', name: '下拉树', component: importMd('/ZP02') },
        ]
 	}, {
 		path: '/question',
 		name: '常见问题',
 		component: importMd('/question'),
-	},
+	}, {
+        path: '/test',
+        name: '测试',
+        hidden: true,
+        component: importMd('/ZTEST'),
+    },

 ];