文档新增示例代码

This commit is contained in:
maplemei 2019-12-16 18:32:21 +08:00
parent 844f9a207f
commit c64b497482
9 changed files with 251 additions and 17 deletions

View File

@ -69,9 +69,9 @@ QQ群: 660408068
如果喜欢作者的插件, 可以请作者吃雪糕 ^_^ 如果喜欢作者的插件, 可以请作者吃雪糕 ^_^
<p> <p>
<a href="javascript:;"> <a href="javascript:;">
<img src="docs/assets/wx.jpg" alt="打赏" width="300"> <img src="docs/assets/wx.jpg" alt="打赏" width="300" style="border: 1px solid #EFEFEF">
</a> </a>
</p> </p>
#### 示例 #### 示例

2
dist/static/2.js vendored

File diff suppressed because one or more lines are too long

2
dist/xm-select.js vendored

File diff suppressed because one or more lines are too long

View File

@ -54,3 +54,99 @@ axios({
</script> </script>
``` ```
::: :::
### 动态创建xm-select多选
:::demo
```html
<table id="form-create" class="layui-table">
<thead>
<tr>
<th style="width: 50px;">序号</th>
<th>性别</th>
<th>爱好</th>
<th style="width: 150px;">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">
<span>这里呢, 演示一下动态添加多选的例子</span>
</td>
<td colspan="1">
<div class="layui-btn-group">
<button type="button" class="layui-btn add">增加</button>
</div>
</td>
</tr>
</tbody>
</table>
<script>
var $ = layui.jquery;
var index = 1;
$('.add').on('click', function(){
var element = $([
'<tr>',
'<td>'+ index +'</td>',
'<td class="gender"></td>',
'<td class="hobby"></td>',
'<td class="handler">',
'<button type="button" class="layui-btn layui-btn-normal get">取值</button>',
'<button type="button" class="layui-btn layui-btn-danger del">删除</button>',
'</td>',
'</tr>',
].join(''))
var hobby = element.find('.hobby')[0];
var hobbySelect = xmSelect.render({
el: hobby,
data: function(){
return [
{name: '篮球' + index, value: 1},
{name: '足球' + index, value: 2},
{name: '乒乓球' + index, value: 3},
]
}
})
var gender = element.find('.gender')[0];
xmSelect.render({
el: gender,
radio: true,
clickClose: true,
model: { label: { type: 'text' } },
data: function(){
return [
{name: '男', value: 1},
{name: '女', value: 2},
{name: '保密', value: 3},
]
},
on: function(data){
var changeItem = data.change[0];
if(data.isAdd && changeItem.value == 3){
this.update({ disabled: true })
}else{
this.update({ disabled: false })
}
}.bind(hobbySelect),
})
element.find('.get').on('click', function(){
alert('valueStr: ' + this.getValue('valueStr'));
}.bind(hobbySelect))
element.find('.del').on('click', function(){
$(this).parents('tr').remove();
})
index++;
$('#form-create tbody').append(element)
});
</script>
```
:::

View File

@ -180,3 +180,140 @@ var demo2 = xmSelect.render({
</script> </script>
``` ```
::: :::
### 单选树(radio模式)
```
//显示为text模式
model: { label: { type: 'text' } },
//单选模式
radio: true,
//选中关闭
clickClose: true,
//树
tree: {
show: true,
//非严格模式
strict: false,
//默认展开节点
expandedKeys: [ -1 ],
},
```
:::demo
```html
<div id="demo3" class="xm-select-demo"></div>
<script>
var demo3 = xmSelect.render({
el: '#demo3',
model: { label: { type: 'text' } },
radio: true,
clickClose: true,
tree: {
show: true,
strict: false,
expandedKeys: [ -1 ],
},
height: 'auto',
data(){
return [
{name: '销售员', value: -1, children: [
{name: '张三', value: 100, selected: true, children: []},
{name: '李四1', value: 2, selected: true},
{name: '王五1', value: 3, disabled: true},
]},
{name: '奖品', value: -2, children: [
{name: '奖品3', value: -3, children: [
{name: '苹果3', value: 14, selected: true},
{name: '香蕉3', value: 15},
{name: '葡萄3', value: 16},
]},
{name: '苹果2', value: 4, selected: true, disabled: true},
{name: '香蕉2', value: 5},
{name: '葡萄2', value: 6},
]},
]
}
})
</script>
```
:::
### 单选树(on处理模式)
```
//显示为text模式
model: { label: { type: 'text' } },
//树
tree: {
show: true,
//非严格模式
strict: false,
//默认展开节点
expandedKeys: [ -1, -3 ],
},
//处理方式
on: function(data){
if(data.isAdd){
return data.change.slice(0, 1)
}
},
```
:::demo
```html
<div id="demo4" class="xm-select-demo"></div>
<script>
var demo4 = xmSelect.render({
el: '#demo4',
model: { label: { type: 'text' } },
tree: {
show: true,
strict: false,
expandedKeys: [ -1 ],
},
on: function(data){
if(data.isAdd){
return data.change.slice(0, 1)
}
},
height: 'auto',
})
//这里模拟ajax
setTimeout(function(){
demo4.update({
data: [
{name: '销售员', value: -1, children: [
{name: '张三', value: 100, children: []},
{name: '李四1', value: 2},
{name: '王五1', value: 3, disabled: true},
]},
{name: '奖品', value: -2, children: [
{name: '奖品3', value: -3, children: [
{name: '苹果3', value: 14},
{name: '香蕉3', value: 15},
{name: '葡萄3', value: 16},
]},
{name: '苹果2', value: 4, disabled: true},
{name: '香蕉2', value: 5},
{name: '葡萄2', value: 6},
]},
]
})
//设置默认值
demo4.setValue([
{name: '李四1', value: 2},
{name: '苹果3', value: 14},
], null, true)
}, 300)
</script>
```
:::

View File

@ -11,7 +11,7 @@ var demo1 = xmSelect.render({
pageSize: 2, pageSize: 2,
autoRow: true, autoRow: true,
tree: { tree: {
strict: true, strict: false,
show: true, show: true,
showFolderIcon: true, showFolderIcon: true,
showLine: true, showLine: true,
@ -33,7 +33,7 @@ var demo1 = xmSelect.render({
model: { model: {
icon: 'show' icon: 'show'
}, },
radio: false, radio: true,
toolbar: { toolbar: {
show: true show: true
}, },
@ -47,7 +47,7 @@ var demo1 = xmSelect.render({
{name: '朝阳区', value: 1, children: [ {name: '朝阳区', value: 1, children: [
{name: '河北省', value: -12, children: [ {name: '河北省', value: -12, children: [
{name: '廊坊市', value: 14, selected: true}, {name: '廊坊市', value: 14, selected: true},
{name: '石家庄', value: 15}, {name: '石家庄', value: 15, selected: true},
{name: '邯郸市', value: 16}, {name: '邯郸市', value: 16},
]} ]}

View File

@ -114,7 +114,7 @@ class xmOptions {
warn('请传入数组结构...') warn('请传入数组结构...')
return ; return ;
} }
childData[this.options.el].value(sels, show, listenOn); childData[this.options.el].value(this.options.radio ? sels.slice(0, 1) : sels, show, listenOn);
return this; return this;
} }

View File

@ -1,10 +1,11 @@
@font-face { @font-face {
font-family: "xm-iconfont"; font-family: "xm-iconfont";
src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831'); src: url('//at.alicdn.com/t/font_792691_ptvyboo0bno.eot?t=1574048839056'); /* IE9 */
src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831#iefix') format('embedded-opentype'), src: url('//at.alicdn.com/t/font_792691_ptvyboo0bno.eot?t=1574048839056#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.ttf?t=1534240067831') format('truetype'), url('//at.alicdn.com/t/font_792691_ptvyboo0bno.woff?t=1574048839056') format('woff'),
url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.svg?t=1534240067831#iconfont') format('svg'); url('//at.alicdn.com/t/font_792691_ptvyboo0bno.ttf?t=1574048839056') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_792691_ptvyboo0bno.svg?t=1574048839056#iconfont') format('svg'); /* iOS 4.1- */
} }
.xm-iconfont { .xm-iconfont {

View File

@ -179,7 +179,7 @@ xm-select{
animation-fill-mode: both; animation-fill-mode: both;
.scroll-body{ .scroll-body{
overflow: auto; overflow: hidden auto;
.scrollBorder() { .scrollBorder() {
-webkit-border-radius: 2em; -webkit-border-radius: 2em;