v1.1.0
This commit is contained in:
maplemei
90
docs/App.vue
90
docs/App.vue
@@ -175,55 +175,57 @@
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 50px;
|
||||
padding-top: 50px;
|
||||
|
||||
pre{
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
&> {
|
||||
h3 {
|
||||
margin: 55px 0 20px;
|
||||
&>h3 {
|
||||
margin: 55px 0 20px;
|
||||
}
|
||||
|
||||
&>ul:not(.timeline) {
|
||||
margin: 10px 0;
|
||||
padding: 0 0 0 20px;
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
&>table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
margin-bottom: 45px;
|
||||
line-height: 1.5em;
|
||||
|
||||
strong {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
margin-bottom: 45px;
|
||||
line-height: 1.5em;
|
||||
|
||||
strong {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
padding: 15px;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
color: #909399;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
td {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
th:first-child,
|
||||
td:first-child {
|
||||
padding-left: 10px;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
padding: 15px;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
ul:not(.timeline) {
|
||||
margin: 10px 0;
|
||||
padding: 0 0 0 20px;
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
line-height: 2em;
|
||||
th {
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
color: #909399;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
td {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
th:first-child,
|
||||
td:first-child {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,245 +1,254 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&.is-component {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
|
||||
&.is-component {
|
||||
overflow-y: hidden;
|
||||
|
||||
.main-cnt {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
height: 100%;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.headerWrapper {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1500;
|
||||
|
||||
.container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #409EFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #f9fafc;
|
||||
padding: 0 4px;
|
||||
border: 1px solid #eaeefb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button, input, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
line-height: 1.8;
|
||||
font-family: Menlo, Monaco, Consolas, Courier, monospace;
|
||||
font-size: 12px;
|
||||
padding: 18px 24px;
|
||||
background-color: #fafafa;
|
||||
border: solid 1px #eaeefb;
|
||||
margin-bottom: 25px;
|
||||
border-radius: 4px;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.main-cnt {
|
||||
margin-top: -80px;
|
||||
padding: 80px 0 340px;
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.container,
|
||||
.page-container {
|
||||
width: 1140px;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding-top: 55px;
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
color: #1f2d3d;
|
||||
margin: 0;
|
||||
}
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
h2, h3, h4, h5 {
|
||||
font-weight: normal;
|
||||
color: #1f2f3d;
|
||||
|
||||
&:hover a {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
a {
|
||||
float: left;
|
||||
margin-left: -20px;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.tip {
|
||||
padding: 8px 16px;
|
||||
background-color: #ECF8FF;
|
||||
border-radius: 4px;
|
||||
border-left: #50bfff 5px solid;
|
||||
margin: 20px 0;
|
||||
|
||||
code {
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
color: #445368;
|
||||
}
|
||||
}
|
||||
|
||||
.warning {
|
||||
padding: 8px 16px;
|
||||
background-color: #fff6f7;
|
||||
border-radius: 4px;
|
||||
border-left: #FE6C6F 5px solid;
|
||||
margin: 20px 0;
|
||||
|
||||
code {
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
color: #445368;
|
||||
}
|
||||
}
|
||||
}
|
||||
.demo {
|
||||
margin: 20px 0;
|
||||
}
|
||||
@media (max-width: 1140px) {
|
||||
.container,
|
||||
.page-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container,
|
||||
.page-container {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
#app.is-component .headerWrapper .container {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.xm-select-demo{
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.xm-select-size{
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
}
|
||||
.xm-select-demo-alert:extend(.xm-select-demo){
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.btn{
|
||||
outline: 0;
|
||||
display: inline-block;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
padding: 0 18px;
|
||||
background-color: #009688;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:hover{
|
||||
opacity: .8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-ZM03{
|
||||
table{
|
||||
margin-bottom: -1px !important;
|
||||
border-collapse: unset !important;
|
||||
line-height: unset !important;
|
||||
font-size: unset !important;
|
||||
background-color: unset !important;
|
||||
|
||||
th, td{
|
||||
padding: 5px 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ly-label-center.layui-form-pane .layui-form-label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.demo-ZP01{
|
||||
.xm-body-custom{
|
||||
padding: 0 10px;
|
||||
}
|
||||
table{
|
||||
margin-bottom: -1px !important;
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&.is-component {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
|
||||
&.is-component {
|
||||
overflow-y: hidden;
|
||||
|
||||
.main-cnt {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
height: 100%;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.headerWrapper {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1500;
|
||||
|
||||
.container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #409EFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #f9fafc;
|
||||
padding: 0 4px;
|
||||
border: 1px solid #eaeefb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button, input, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
line-height: 1.8;
|
||||
font-family: Menlo, Monaco, Consolas, Courier, monospace;
|
||||
font-size: 12px;
|
||||
padding: 18px 24px;
|
||||
background-color: #fafafa;
|
||||
border: solid 1px #eaeefb;
|
||||
margin-bottom: 25px;
|
||||
border-radius: 4px;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.main-cnt {
|
||||
margin-top: -80px;
|
||||
padding: 80px 0 340px;
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.container,
|
||||
.page-container {
|
||||
width: 1140px;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding-top: 55px;
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
color: #1f2d3d;
|
||||
margin: 0;
|
||||
}
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
h2, h3, h4, h5 {
|
||||
font-weight: normal;
|
||||
color: #1f2f3d;
|
||||
|
||||
&:hover a {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
a {
|
||||
float: left;
|
||||
margin-left: -20px;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.tip {
|
||||
padding: 8px 16px;
|
||||
background-color: #ECF8FF;
|
||||
border-radius: 4px;
|
||||
border-left: #50bfff 5px solid;
|
||||
margin: 20px 0;
|
||||
|
||||
code {
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
color: #445368;
|
||||
}
|
||||
}
|
||||
|
||||
.warning {
|
||||
padding: 8px 16px;
|
||||
background-color: #fff6f7;
|
||||
border-radius: 4px;
|
||||
border-left: #FE6C6F 5px solid;
|
||||
margin: 20px 0;
|
||||
|
||||
code {
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
color: #445368;
|
||||
}
|
||||
}
|
||||
}
|
||||
.demo {
|
||||
margin: 20px 0;
|
||||
}
|
||||
@media (max-width: 1140px) {
|
||||
.container,
|
||||
.page-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container,
|
||||
.page-container {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
#app.is-component .headerWrapper .container {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.xm-select-demo{
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.xm-select-size{
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
}
|
||||
.xm-select-demo-alert:extend(.xm-select-demo){
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.btn{
|
||||
outline: 0;
|
||||
display: inline-block;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
padding: 0 18px;
|
||||
background-color: #009688;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:hover{
|
||||
opacity: .8;
|
||||
.demo-ZP03{
|
||||
.layui-laydate-footer{
|
||||
padding: 0;
|
||||
}
|
||||
&:active{
|
||||
opacity: 1;
|
||||
xm-select .scroll-body{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-ZM03{
|
||||
table{
|
||||
margin-bottom: -1px !important;
|
||||
border-collapse: unset !important;
|
||||
line-height: unset !important;
|
||||
font-size: unset !important;
|
||||
background-color: unset !important;
|
||||
|
||||
th, td{
|
||||
padding: 5px 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ly-label-center.layui-form-pane .layui-form-label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.demo-ZP01{
|
||||
.xm-body-custom{
|
||||
padding: 0 10px;
|
||||
}
|
||||
table{
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@ const router = new VueRouter({
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.path) {
|
||||
_hmt.push(['_trackPageview', to.fullPath]);
|
||||
_hmt.push(['_trackPageview', '/#' + to.fullPath]);
|
||||
}
|
||||
next();
|
||||
});
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function() {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?758a90d7d534804ddd66137da7c9ee69";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
</script>
|
||||
<% for (var chunk in htmlWebpackPlugin.files.css) { %>
|
||||
<link rel="preload" href="<%= htmlWebpackPlugin.files.css[chunk] %>" as="style">
|
||||
<% } %>
|
||||
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
|
||||
<link rel="preload" href="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>" as="script">
|
||||
<% } %>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
||||
<title>xm-select</title>
|
||||
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css">
|
||||
<script src="https://www.layuicdn.com/layui-v2.5.5/layui.all.js"></script>
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function() {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?758a90d7d534804ddd66137da7c9ee69";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
</script>
|
||||
<% for (var chunk in htmlWebpackPlugin.files.css) { %>
|
||||
<link rel="preload" href="<%= htmlWebpackPlugin.files.css[chunk] %>" as="style">
|
||||
<% } %>
|
||||
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
|
||||
<link rel="preload" href="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>" as="script">
|
||||
<% } %>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
||||
<title>xm-select</title>
|
||||
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css">
|
||||
<script src="https://www.layuicdn.com/layui-v2.5.5/layui.all.js"></script>
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,26 +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>
|
||||
```
|
||||
:::
|
||||
|
||||
## 基础使用
|
||||
|
||||
:::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>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,28 +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>
|
||||
```
|
||||
## 国际化
|
||||
|
||||
|
||||
### 英语
|
||||
|
||||
:::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>
|
||||
```
|
||||
:::
|
||||
@@ -1,47 +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>
|
||||
```
|
||||
:::
|
||||
|
||||
## 默认选中
|
||||
|
||||
|
||||
|
||||
### 使用`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>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
128
docs/mds/XM04.md
128
docs/mds/XM04.md
@@ -1,64 +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>
|
||||
```
|
||||
:::
|
||||
## 修改提示
|
||||
|
||||
|
||||
|
||||
### 修改选项提示文字
|
||||
|
||||
:::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>
|
||||
```
|
||||
:::
|
||||
|
||||
366
docs/mds/XM05.md
366
docs/mds/XM05.md
@@ -1,183 +1,183 @@
|
||||
## 搜索模式
|
||||
|
||||
|
||||
|
||||
### 默认搜索
|
||||
|
||||
:::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, show){
|
||||
//这里模拟3s后返回数据
|
||||
setTimeout(function(){
|
||||
//需要回传一个数组
|
||||
cb([
|
||||
{name: '水果' + val, value: val + 1},
|
||||
{name: '蔬菜' + val, value: val + 2, selected: true},
|
||||
{name: '桌子' + val, value: val + 3},
|
||||
{name: '北京' + val, value: val + 4},
|
||||
])
|
||||
}, 3000)
|
||||
},
|
||||
data: []
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 远程搜索
|
||||
|
||||
第一步: 需要先开启搜索 `filterable: true,`
|
||||
|
||||
第二步: 开启自定义搜索 `remoteSearch: true`
|
||||
|
||||
第三部: 重写搜索回调
|
||||
|
||||
简单吧, 记得Star ^_^
|
||||
|
||||
:::demo `render`后, 就会进行一次回调, 用于渲染第一次数据
|
||||
```html
|
||||
<div id="demo5" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo5 = xmSelect.render({
|
||||
el: '#demo5',
|
||||
filterable: true,
|
||||
remoteSearch: true,
|
||||
remoteMethod: function(val, cb, show){
|
||||
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([]);
|
||||
});
|
||||
},
|
||||
data: []
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 搜索完成回调
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo6" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo6 = xmSelect.render({
|
||||
el: '#demo6',
|
||||
filterable: true,
|
||||
filterDone: function(val, list){
|
||||
alert(`搜索完毕, 搜索关键词: ${val}, 过滤数据: ${list.length}个`)
|
||||
},
|
||||
data: [
|
||||
{name: '水果', value: 1},
|
||||
{name: '蔬菜', value: 2},
|
||||
{name: '桌子', value: 3},
|
||||
{name: '北京', value: 4},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
## 搜索模式
|
||||
|
||||
|
||||
|
||||
### 默认搜索
|
||||
|
||||
:::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, show){
|
||||
//这里模拟3s后返回数据
|
||||
setTimeout(function(){
|
||||
//需要回传一个数组
|
||||
cb([
|
||||
{name: '水果' + val, value: val + 1},
|
||||
{name: '蔬菜' + val, value: val + 2, selected: true},
|
||||
{name: '桌子' + val, value: val + 3},
|
||||
{name: '北京' + val, value: val + 4},
|
||||
])
|
||||
}, 3000)
|
||||
},
|
||||
data: []
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 远程搜索
|
||||
|
||||
第一步: 需要先开启搜索 `filterable: true,`
|
||||
|
||||
第二步: 开启自定义搜索 `remoteSearch: true`
|
||||
|
||||
第三部: 重写搜索回调
|
||||
|
||||
简单吧, 记得Star ^_^
|
||||
|
||||
:::demo `render`后, 就会进行一次回调, 用于渲染第一次数据
|
||||
```html
|
||||
<div id="demo5" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo5 = xmSelect.render({
|
||||
el: '#demo5',
|
||||
filterable: true,
|
||||
remoteSearch: true,
|
||||
remoteMethod: function(val, cb, show){
|
||||
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([]);
|
||||
});
|
||||
},
|
||||
data: []
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 搜索完成回调
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo6" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo6 = xmSelect.render({
|
||||
el: '#demo6',
|
||||
filterable: true,
|
||||
filterDone: function(val, list){
|
||||
alert(`搜索完毕, 搜索关键词: ${val}, 过滤数据: ${list.length}个`)
|
||||
},
|
||||
data: [
|
||||
{name: '水果', value: 1},
|
||||
{name: '蔬菜', value: 2},
|
||||
{name: '桌子', value: 3},
|
||||
{name: '北京', value: 4},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
138
docs/mds/XM06.md
138
docs/mds/XM06.md
@@ -1,69 +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>
|
||||
```
|
||||
:::
|
||||
## 下拉方向
|
||||
|
||||
|
||||
### 自动`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>
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -1,49 +1,49 @@
|
||||
## 自定义样式
|
||||
|
||||
### 随便试试
|
||||
|
||||
修改一下外边距, 加上圆角, 更改一下高度
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
style: {
|
||||
marginLeft: '200px',
|
||||
borderRadius: '50px',
|
||||
height: '50px',
|
||||
},
|
||||
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>
|
||||
```
|
||||
:::
|
||||
## 自定义样式
|
||||
|
||||
### 随便试试
|
||||
|
||||
修改一下外边距, 加上圆角, 更改一下高度
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
style: {
|
||||
marginLeft: '200px',
|
||||
borderRadius: '50px',
|
||||
height: '50px',
|
||||
},
|
||||
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>
|
||||
```
|
||||
:::
|
||||
|
||||
352
docs/mds/XM08.md
352
docs/mds/XM08.md
@@ -1,176 +1,176 @@
|
||||
## 分页
|
||||
|
||||
### 启用分页
|
||||
|
||||
```
|
||||
xmSelect.render({
|
||||
//...
|
||||
paging: true,
|
||||
})
|
||||
```
|
||||
|
||||
:::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条
|
||||
|
||||
```
|
||||
xmSelect.render({
|
||||
//...
|
||||
paging: true,
|
||||
pageSize: 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>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 搜索+分页
|
||||
|
||||
```
|
||||
xmSelect.render({
|
||||
//...
|
||||
paging: true,
|
||||
pageSize: 5,
|
||||
filterable: true,
|
||||
})
|
||||
```
|
||||
|
||||
:::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>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 搜索 + 分页 无数据 不展示分页
|
||||
|
||||
```
|
||||
xmSelect.render({
|
||||
//...
|
||||
paging: true,
|
||||
pageSize: 3,
|
||||
filterable: true,
|
||||
pageEmptyShow: false,
|
||||
})
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo4" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo4 = xmSelect.render({
|
||||
el: '#demo4',
|
||||
paging: true,
|
||||
pageSize: 3,
|
||||
filterable: true,
|
||||
pageEmptyShow: false,
|
||||
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>
|
||||
```
|
||||
:::
|
||||
## 分页
|
||||
|
||||
### 启用分页
|
||||
|
||||
```
|
||||
xmSelect.render({
|
||||
//...
|
||||
paging: true,
|
||||
})
|
||||
```
|
||||
|
||||
:::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条
|
||||
|
||||
```
|
||||
xmSelect.render({
|
||||
//...
|
||||
paging: true,
|
||||
pageSize: 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>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 搜索+分页
|
||||
|
||||
```
|
||||
xmSelect.render({
|
||||
//...
|
||||
paging: true,
|
||||
pageSize: 5,
|
||||
filterable: true,
|
||||
})
|
||||
```
|
||||
|
||||
:::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>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 搜索 + 分页 无数据 不展示分页
|
||||
|
||||
```
|
||||
xmSelect.render({
|
||||
//...
|
||||
paging: true,
|
||||
pageSize: 3,
|
||||
filterable: true,
|
||||
pageEmptyShow: false,
|
||||
})
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo4" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo4 = xmSelect.render({
|
||||
el: '#demo4',
|
||||
paging: true,
|
||||
pageSize: 3,
|
||||
filterable: true,
|
||||
pageEmptyShow: false,
|
||||
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>
|
||||
```
|
||||
:::
|
||||
|
||||
158
docs/mds/XM09.md
158
docs/mds/XM09.md
@@ -1,79 +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>
|
||||
```
|
||||
:::
|
||||
## 单选
|
||||
|
||||
### 开启单选
|
||||
|
||||
|
||||
:::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>
|
||||
```
|
||||
:::
|
||||
|
||||
166
docs/mds/XM10.md
166
docs/mds/XM10.md
@@ -1,83 +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>
|
||||
```
|
||||
:::
|
||||
## 重复选
|
||||
|
||||
### 开启重复选
|
||||
|
||||
|
||||
:::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>
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -1,35 +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>
|
||||
```
|
||||
:::
|
||||
## 自定义属性
|
||||
|
||||
### 更换属性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>
|
||||
```
|
||||
:::
|
||||
|
||||
658
docs/mds/XM12.md
658
docs/mds/XM12.md
@@ -1,329 +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), 有兴趣的可以看看
|
||||
:::
|
||||
## 主题
|
||||
|
||||
### 经典绿 ( #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), 有兴趣的可以看看
|
||||
:::
|
||||
|
||||
126
docs/mds/XM13.md
126
docs/mds/XM13.md
@@ -1,63 +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>
|
||||
```
|
||||
:::
|
||||
## 显示与隐藏
|
||||
|
||||
|
||||
### 主动打开/关闭下拉框
|
||||
|
||||
:::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>
|
||||
```
|
||||
:::
|
||||
|
||||
356
docs/mds/XM14.md
356
docs/mds/XM14.md
@@ -1,178 +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>
|
||||
```
|
||||
:::
|
||||
## 显示方式
|
||||
|
||||
|
||||
### 方块形状
|
||||
|
||||
:::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>
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -1,44 +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>
|
||||
```
|
||||
:::
|
||||
## 构建选项
|
||||
|
||||
|
||||
### 默认渲染
|
||||
|
||||
:::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>
|
||||
```
|
||||
:::
|
||||
|
||||
157
docs/mds/XM16.md
157
docs/mds/XM16.md
@@ -1,76 +1,81 @@
|
||||
## 监听选择
|
||||
|
||||
|
||||
### 实时监听
|
||||
|
||||
实时监听多选的选中状态变化
|
||||
|
||||
:::demo
|
||||
```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',
|
||||
on({ arr, change, isAdd }){
|
||||
alert(`已有: ${arr.length} 变化: ${change.length}, 状态: ${isAdd}`)
|
||||
},
|
||||
data: [
|
||||
{name: '张三', value: 'zhangsan', selected: true},
|
||||
{name: '李四', value: 'lisi', selected: true},
|
||||
{name: '王五', value: 'wangwu'},
|
||||
]
|
||||
})
|
||||
|
||||
document.getElementById('setValue1').onclick = function(){
|
||||
demo1.setValue(['zhangsan'], null, true);
|
||||
}
|
||||
|
||||
document.getElementById('setValue2').onclick = function(){
|
||||
demo1.setValue(['zhangsan']);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 监听+动态赋值
|
||||
|
||||
选中北京后, 不能选中上海, 二者互斥
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
toolbar: {
|
||||
show: true
|
||||
},
|
||||
on({ arr, change, isAdd }){
|
||||
//arr: 当前多选已选中的数据
|
||||
//change, 此次选择变化的数据,数组
|
||||
//isAdd, 此次操作是新增还是删除
|
||||
console.log(arr);
|
||||
if(isAdd){
|
||||
var item = change[0];
|
||||
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>
|
||||
```
|
||||
:::
|
||||
## 监听选择
|
||||
|
||||
|
||||
### 实时监听
|
||||
|
||||
实时监听多选的选中状态变化
|
||||
|
||||
:::demo
|
||||
```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',
|
||||
on({ arr, change, isAdd }){
|
||||
alert(`已有: ${arr.length} 变化: ${change.length}, 状态: ${isAdd}`)
|
||||
},
|
||||
data: [
|
||||
{name: '张三', value: 'zhangsan', selected: true},
|
||||
{name: '李四', value: 'lisi', selected: true},
|
||||
{name: '王五', value: 'wangwu'},
|
||||
]
|
||||
})
|
||||
|
||||
document.getElementById('setValue1').onclick = function(){
|
||||
demo1.setValue(['zhangsan'], null, true);
|
||||
}
|
||||
|
||||
document.getElementById('setValue2').onclick = function(){
|
||||
demo1.setValue(['zhangsan']);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 监听+动态赋值
|
||||
|
||||
选中北京后, 不能选中上海, 二者互斥
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
toolbar: {
|
||||
show: true
|
||||
},
|
||||
on: function(data){
|
||||
//arr: 当前多选已选中的数据
|
||||
var arr = data.arr;
|
||||
//change, 此次选择变化的数据,数组
|
||||
var change = data.change;
|
||||
//isAdd, 此次操作是新增还是删除
|
||||
var isAdd = data.isAdd;
|
||||
|
||||
console.log(arr);
|
||||
|
||||
if(isAdd){
|
||||
var item = change[0];
|
||||
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>
|
||||
```
|
||||
:::
|
||||
|
||||
114
docs/mds/XM17.md
114
docs/mds/XM17.md
@@ -1,57 +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>
|
||||
```
|
||||
:::
|
||||
## 性能测试
|
||||
|
||||
|
||||
### 数据渲染耗时测试
|
||||
|
||||
|
||||
:::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>
|
||||
```
|
||||
:::
|
||||
|
||||
140
docs/mds/XM18.md
140
docs/mds/XM18.md
@@ -1,70 +1,70 @@
|
||||
## 多选上限
|
||||
|
||||
|
||||
### 最多选择2个
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
max: 2,
|
||||
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',
|
||||
max: 2,
|
||||
maxMethod(seles, item){
|
||||
alert(`${item.name}不能选了, 已经超了`)
|
||||
},
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, selected: true},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 自定义选超的闪烁颜色
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo3" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo3 = xmSelect.render({
|
||||
el: '#demo3',
|
||||
max: 2,
|
||||
theme: {
|
||||
maxColor: 'orange',
|
||||
},
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, selected: true},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
## 多选上限
|
||||
|
||||
|
||||
### 最多选择2个
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
max: 2,
|
||||
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',
|
||||
max: 2,
|
||||
maxMethod(seles, item){
|
||||
alert(`${item.name}不能选了, 已经超了`)
|
||||
},
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, selected: true},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 自定义选超的闪烁颜色
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo3" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo3 = xmSelect.render({
|
||||
el: '#demo3',
|
||||
max: 2,
|
||||
theme: {
|
||||
maxColor: 'orange',
|
||||
},
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, selected: true},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
310
docs/mds/XM19.md
310
docs/mds/XM19.md
@@ -1,156 +1,156 @@
|
||||
## 工具条
|
||||
|
||||
|
||||
### 默认工具条
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
toolbar: {
|
||||
show: true,
|
||||
},
|
||||
filterable: true,
|
||||
paging: true,
|
||||
pageSize: 3,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, selected: true},
|
||||
{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="demo2" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
toolbar: {
|
||||
show: true,
|
||||
showIcon: false,
|
||||
},
|
||||
filterable: true,
|
||||
paging: true,
|
||||
pageSize: 3,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, selected: true},
|
||||
{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>
|
||||
|
||||
<script>
|
||||
var demo3 = xmSelect.render({
|
||||
el: '#demo3',
|
||||
toolbar: {
|
||||
show: true,
|
||||
list: ['ALL', {
|
||||
name: '自定义',
|
||||
icon: 'el-icon-star-off',
|
||||
method(data){
|
||||
alert('我是自定义的');
|
||||
}
|
||||
}]
|
||||
},
|
||||
filterable: true,
|
||||
paging: true,
|
||||
pageSize: 3,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, selected: true},
|
||||
{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>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 全部工具条
|
||||
|
||||
```
|
||||
//全选, 清空, 反选
|
||||
xmSelect.render({
|
||||
toolbar: {
|
||||
show: true,
|
||||
list: [ 'ALL', 'CLEAR', 'REVERSE' ]
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo4" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo4 = xmSelect.render({
|
||||
el: '#demo4',
|
||||
toolbar: {
|
||||
show: true,
|
||||
list: [ 'ALL', 'CLEAR', 'REVERSE' ]
|
||||
},
|
||||
filterable: true,
|
||||
paging: true,
|
||||
pageSize: 3,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, selected: true},
|
||||
{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="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
toolbar: {
|
||||
show: true,
|
||||
},
|
||||
filterable: true,
|
||||
paging: true,
|
||||
pageSize: 3,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, selected: true},
|
||||
{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="demo2" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
toolbar: {
|
||||
show: true,
|
||||
showIcon: false,
|
||||
},
|
||||
filterable: true,
|
||||
paging: true,
|
||||
pageSize: 3,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, selected: true},
|
||||
{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>
|
||||
|
||||
<script>
|
||||
var demo3 = xmSelect.render({
|
||||
el: '#demo3',
|
||||
toolbar: {
|
||||
show: true,
|
||||
list: ['ALL', {
|
||||
name: '自定义',
|
||||
icon: 'el-icon-star-off',
|
||||
method(data){
|
||||
alert('我是自定义的');
|
||||
}
|
||||
}]
|
||||
},
|
||||
filterable: true,
|
||||
paging: true,
|
||||
pageSize: 3,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, selected: true},
|
||||
{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>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 全部工具条
|
||||
|
||||
```
|
||||
//全选, 清空, 反选
|
||||
xmSelect.render({
|
||||
toolbar: {
|
||||
show: true,
|
||||
list: [ 'ALL', 'CLEAR', 'REVERSE' ]
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo4" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo4 = xmSelect.render({
|
||||
el: '#demo4',
|
||||
toolbar: {
|
||||
show: true,
|
||||
list: [ 'ALL', 'CLEAR', 'REVERSE' ]
|
||||
},
|
||||
filterable: true,
|
||||
paging: true,
|
||||
pageSize: 3,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, selected: true},
|
||||
{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>
|
||||
```
|
||||
:::
|
||||
@@ -1,39 +1,39 @@
|
||||
## 选项显示数量
|
||||
|
||||
|
||||
|
||||
:::tip
|
||||
当数量量过大时, 又不想使用分页的形式, 就可以控制显示数量, 用搜索的方式把最适合的数据展示出来
|
||||
|
||||
!!! 此处与分页配置互斥, 开启分页后, 此配置无效
|
||||
|
||||
!!! 使用此配置时建议开启搜索模式, 否则无法显示全部数据
|
||||
:::
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
<div>可以搜索 1, 2, 3看看效果</div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
filterable: true,
|
||||
showCount: 5,
|
||||
data: [
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{name: '李四1', value: 2, selected: true},
|
||||
{name: '王五1', value: 3},
|
||||
{name: '赵六1', value: 4},
|
||||
{name: '苹果2', value: 5},
|
||||
{name: '香蕉2', value: 6},
|
||||
{name: '凤梨2', value: 7},
|
||||
{name: '葡萄2', value: 8},
|
||||
{name: '樱桃3', value: 9},
|
||||
{name: '车厘子3', value: 10},
|
||||
{name: '火龙果3', value: 11},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
## 选项显示数量
|
||||
|
||||
|
||||
|
||||
:::tip
|
||||
当数量量过大时, 又不想使用分页的形式, 就可以控制显示数量, 用搜索的方式把最适合的数据展示出来
|
||||
|
||||
!!! 此处与分页配置互斥, 开启分页后, 此配置无效
|
||||
|
||||
!!! 使用此配置时建议开启搜索模式, 否则无法显示全部数据
|
||||
:::
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
<div>可以搜索 1, 2, 3看看效果</div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
filterable: true,
|
||||
showCount: 5,
|
||||
data: [
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{name: '李四1', value: 2, selected: true},
|
||||
{name: '王五1', value: 3},
|
||||
{name: '赵六1', value: 4},
|
||||
{name: '苹果2', value: 5},
|
||||
{name: '香蕉2', value: 6},
|
||||
{name: '凤梨2', value: 7},
|
||||
{name: '葡萄2', value: 8},
|
||||
{name: '樱桃3', value: 9},
|
||||
{name: '车厘子3', value: 10},
|
||||
{name: '火龙果3', value: 11},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
268
docs/mds/XM21.md
268
docs/mds/XM21.md
@@ -1,164 +1,104 @@
|
||||
## 分组
|
||||
|
||||
|
||||
### optgroup模式
|
||||
|
||||
:::demo 指定选项中的`optgroup`为`true`
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
toolbar:{
|
||||
show: true,
|
||||
},
|
||||
height: '500px',
|
||||
data: [
|
||||
{name: '销售员', optgroup: true},
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{name: '李四1', value: 2, selected: true},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
{name: '奖品', optgroup: true},
|
||||
{name: '苹果2', value: 4, selected: true, disabled: true},
|
||||
{name: '香蕉2', value: 5},
|
||||
{name: '葡萄2', value: 6},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### children模式
|
||||
|
||||
:::demo 选项中的`children`为数组
|
||||
```html
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
toolbar:{
|
||||
show: true,
|
||||
},
|
||||
filterable: true,
|
||||
height: '500px',
|
||||
data: [
|
||||
{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>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 混合模式
|
||||
|
||||
如果自己感觉舒服的话, 也可以这么用...
|
||||
|
||||
:::demo
|
||||
```html
|
||||
|
||||
<div id="demo3" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo3 = xmSelect.render({
|
||||
el: '#demo3',
|
||||
filterable: true,
|
||||
toolbar: {
|
||||
show: true
|
||||
},
|
||||
height: '500px',
|
||||
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},
|
||||
]},
|
||||
],
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 分组的单击事件
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo4" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo4 = xmSelect.render({
|
||||
el: '#demo4',
|
||||
toolbar:{
|
||||
show: true,
|
||||
},
|
||||
height: '500px',
|
||||
data: [
|
||||
{name: '选中', optgroup: true, click: 'SELECT'},
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2, disabled: true},
|
||||
{name: '清空', optgroup: true, click: 'CLEAR'},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
{name: '苹果', value: 4, selected: true},
|
||||
{name: '自动', optgroup: true, click: 'AUTO'},
|
||||
{name: '香蕉', value: 5},
|
||||
{name: '葡萄', value: 6},
|
||||
{name: '自定义', optgroup: true, click: function(item){
|
||||
alert('自定义的, 想干嘛干嘛');
|
||||
}},
|
||||
{name: '小米', value: 7},
|
||||
{name: '华为', value: 8},
|
||||
]
|
||||
})
|
||||
</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>
|
||||
```
|
||||
:::
|
||||
## 分组
|
||||
|
||||
|
||||
### children模式
|
||||
|
||||
:::demo 选项中的`children`为数组
|
||||
```html
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
toolbar:{
|
||||
show: true,
|
||||
},
|
||||
filterable: true,
|
||||
height: '500px',
|
||||
data: [
|
||||
{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>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 分组的单击事件
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo4" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo4 = xmSelect.render({
|
||||
el: '#demo4',
|
||||
toolbar:{
|
||||
show: true,
|
||||
},
|
||||
height: '500px',
|
||||
data: [
|
||||
{name: '选中', optgroup: true, click: 'SELECT', children: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2, disabled: true},
|
||||
]},
|
||||
{name: '清空', optgroup: true, click: 'CLEAR', children: [
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
{name: '苹果', value: 4, selected: true},
|
||||
]},
|
||||
{name: '自动', optgroup: true, click: 'AUTO', children: [
|
||||
{name: '香蕉', value: 5},
|
||||
{name: '葡萄', value: 6},
|
||||
]},
|
||||
{name: '自定义', optgroup: true, click: function(item){ alert('自定义的, 想干嘛干嘛') }, children: [
|
||||
{name: '小米', value: 7},
|
||||
{name: '华为', value: 8},
|
||||
]},
|
||||
]
|
||||
})
|
||||
</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>
|
||||
```
|
||||
:::
|
||||
|
||||
214
docs/mds/XM22.md
214
docs/mds/XM22.md
@@ -1,107 +1,107 @@
|
||||
## 自动换行
|
||||
|
||||
|
||||
|
||||
:::tip
|
||||
当需要选择很多选项时, 横向滚动满足不了你的需求, 可以开启自动换行
|
||||
:::
|
||||
|
||||
|
||||
### 开启换行
|
||||
|
||||
:::demo `autoRow` = `true`
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
toolbar:{
|
||||
show: true,
|
||||
},
|
||||
autoRow: true,
|
||||
height: '500px',
|
||||
data: [
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{name: '李四1', value: 2, selected: true},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
{name: '苹果2', value: 4, selected: true, disabled: true},
|
||||
{name: '香蕉2', value: 5, selected: true},
|
||||
{name: '葡萄2', value: 6},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Layui风格
|
||||
|
||||
前面的label居中 需要 **自行** 加一段css, 这里就没有内置到插件中了, 避免样式污染, 当前或许你有更好的css解决方案 ^_^
|
||||
```css
|
||||
.layui-form-pane .layui-form-label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<form class="layui-form layui-form-pane xm-select-demo ly-label-center" action="">
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">居中风格</label>
|
||||
<div class="layui-input-block">
|
||||
<div id="demo2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form class="layui-form layui-form-pane xm-select-demo" action="">
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">默认风格</label>
|
||||
<div class="layui-input-block">
|
||||
<div id="demo3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
toolbar:{
|
||||
show: true,
|
||||
},
|
||||
filterable: true,
|
||||
height: '500px',
|
||||
autoRow: true,
|
||||
data: [
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{name: '李四1', value: 2, selected: true},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
{name: '苹果2', value: 4, selected: true, disabled: true},
|
||||
{name: '香蕉2', value: 5, selected: true},
|
||||
{name: '葡萄2', value: 6},
|
||||
]
|
||||
})
|
||||
|
||||
var demo3 = xmSelect.render({
|
||||
el: '#demo3',
|
||||
toolbar:{
|
||||
show: true,
|
||||
},
|
||||
filterable: true,
|
||||
height: '500px',
|
||||
autoRow: true,
|
||||
data: [
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{name: '李四1', value: 2, selected: true},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
{name: '苹果2', value: 4, selected: true, disabled: true},
|
||||
{name: '香蕉2', value: 5, selected: true},
|
||||
{name: '葡萄2', value: 6},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
## 自动换行
|
||||
|
||||
|
||||
|
||||
:::tip
|
||||
当需要选择很多选项时, 横向滚动满足不了你的需求, 可以开启自动换行
|
||||
:::
|
||||
|
||||
|
||||
### 开启换行
|
||||
|
||||
:::demo `autoRow` = `true`
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
toolbar:{
|
||||
show: true,
|
||||
},
|
||||
autoRow: true,
|
||||
height: '500px',
|
||||
data: [
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{name: '李四1', value: 2, selected: true},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
{name: '苹果2', value: 4, selected: true, disabled: true},
|
||||
{name: '香蕉2', value: 5, selected: true},
|
||||
{name: '葡萄2', value: 6},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Layui风格
|
||||
|
||||
前面的label居中 需要 **自行** 加一段css, 这里就没有内置到插件中了, 避免样式污染, 当前或许你有更好的css解决方案 ^_^
|
||||
```css
|
||||
.layui-form-pane .layui-form-label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<form class="layui-form layui-form-pane xm-select-demo ly-label-center" action="">
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">居中风格</label>
|
||||
<div class="layui-input-block">
|
||||
<div id="demo2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form class="layui-form layui-form-pane xm-select-demo" action="">
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">默认风格</label>
|
||||
<div class="layui-input-block">
|
||||
<div id="demo3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
toolbar:{
|
||||
show: true,
|
||||
},
|
||||
filterable: true,
|
||||
height: '500px',
|
||||
autoRow: true,
|
||||
data: [
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{name: '李四1', value: 2, selected: true},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
{name: '苹果2', value: 4, selected: true, disabled: true},
|
||||
{name: '香蕉2', value: 5, selected: true},
|
||||
{name: '葡萄2', value: 6},
|
||||
]
|
||||
})
|
||||
|
||||
var demo3 = xmSelect.render({
|
||||
el: '#demo3',
|
||||
toolbar:{
|
||||
show: true,
|
||||
},
|
||||
filterable: true,
|
||||
height: '500px',
|
||||
autoRow: true,
|
||||
data: [
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{name: '李四1', value: 2, selected: true},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
{name: '苹果2', value: 4, selected: true, disabled: true},
|
||||
{name: '香蕉2', value: 5, selected: true},
|
||||
{name: '葡萄2', value: 6},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
152
docs/mds/XM23.md
152
docs/mds/XM23.md
@@ -1,76 +1,76 @@
|
||||
## 隐藏图标
|
||||
|
||||
|
||||
### 隐藏单选图标
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
radio: true,
|
||||
clickClose: true,
|
||||
model: {
|
||||
icon: 'hidden',
|
||||
label: {
|
||||
type: 'text'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{name: '李四1', value: 2},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
{name: '苹果2', value: 4},
|
||||
]
|
||||
})
|
||||
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
radio: true,
|
||||
clickClose: true,
|
||||
theme: {
|
||||
color: '#5FB878',
|
||||
},
|
||||
model: {
|
||||
icon: 'hidden',
|
||||
label: {
|
||||
type: 'text'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{name: '李四1', value: 2},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
{name: '苹果2', value: 4},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 隐藏多选图标
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo3" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo3 = xmSelect.render({
|
||||
el: '#demo3',
|
||||
model: {
|
||||
icon: 'hidden',
|
||||
},
|
||||
data: [
|
||||
{name: '张三1', value: 1, selected: true, disabled: true},
|
||||
{name: '李四1', value: 2, selected: true},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
{name: '苹果2', value: 4},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
## 隐藏图标
|
||||
|
||||
|
||||
### 隐藏单选图标
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
radio: true,
|
||||
clickClose: true,
|
||||
model: {
|
||||
icon: 'hidden',
|
||||
label: {
|
||||
type: 'text'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{name: '李四1', value: 2},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
{name: '苹果2', value: 4},
|
||||
]
|
||||
})
|
||||
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
radio: true,
|
||||
clickClose: true,
|
||||
theme: {
|
||||
color: '#5FB878',
|
||||
},
|
||||
model: {
|
||||
icon: 'hidden',
|
||||
label: {
|
||||
type: 'text'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{name: '李四1', value: 2},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
{name: '苹果2', value: 4},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 隐藏多选图标
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo3" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo3 = xmSelect.render({
|
||||
el: '#demo3',
|
||||
model: {
|
||||
icon: 'hidden',
|
||||
},
|
||||
data: [
|
||||
{name: '张三1', value: 1, selected: true, disabled: true},
|
||||
{name: '李四1', value: 2, selected: true},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
{name: '苹果2', value: 4},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
122
docs/mds/XM24.md
122
docs/mds/XM24.md
@@ -1,61 +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>
|
||||
```
|
||||
:::
|
||||
## 尺寸
|
||||
|
||||
|
||||
### 四种尺寸变换
|
||||
|
||||
|
||||
|
||||
:::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>
|
||||
```
|
||||
:::
|
||||
|
||||
176
docs/mds/XM25.md
176
docs/mds/XM25.md
@@ -1,88 +1,88 @@
|
||||
## 警告
|
||||
|
||||
|
||||
### 警告提示
|
||||
|
||||
放下她, 让我来!!! 默认颜色`#e54d42`, 多选上限的样色
|
||||
|
||||
```
|
||||
/*
|
||||
* COLOR: 自定义颜色, 默认是 options.theme.maxColor的颜色
|
||||
* SUSTAIN: 是否持续显示, 默认为false
|
||||
*/
|
||||
xmSelectObj.warning(COLOR, SUSTAIN);
|
||||
```
|
||||
|
||||
|
||||
:::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>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 持续显示
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo3" class="xm-select-demo"></div>
|
||||
<button class="btn" id="demo3-warning">警告</button>
|
||||
|
||||
<script>
|
||||
var demo3 = xmSelect.render({
|
||||
el: '#demo3',
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
})
|
||||
|
||||
document.getElementById('demo3-warning').onclick = function(){
|
||||
demo3.warning('#6739b6', true);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## 警告
|
||||
|
||||
|
||||
### 警告提示
|
||||
|
||||
放下她, 让我来!!! 默认颜色`#e54d42`, 多选上限的样色
|
||||
|
||||
```
|
||||
/*
|
||||
* COLOR: 自定义颜色, 默认是 options.theme.maxColor的颜色
|
||||
* SUSTAIN: 是否持续显示, 默认为false
|
||||
*/
|
||||
xmSelectObj.warning(COLOR, SUSTAIN);
|
||||
```
|
||||
|
||||
|
||||
:::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>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 持续显示
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo3" class="xm-select-demo"></div>
|
||||
<button class="btn" id="demo3-warning">警告</button>
|
||||
|
||||
<script>
|
||||
var demo3 = xmSelect.render({
|
||||
el: '#demo3',
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
})
|
||||
|
||||
document.getElementById('demo3-warning').onclick = function(){
|
||||
demo3.warning('#6739b6', true);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
180
docs/mds/XM26.md
180
docs/mds/XM26.md
@@ -1,90 +1,90 @@
|
||||
## 禁用
|
||||
|
||||
|
||||
### 渲染禁用
|
||||
|
||||
```
|
||||
xmSelect.render({
|
||||
//...
|
||||
disabled: true
|
||||
})
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
disabled: true,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 动态启用禁用
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
<button class="btn" id="demo21">禁用</button>
|
||||
<button class="btn" id="demo22">启用</button>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
})
|
||||
|
||||
document.getElementById('demo21').onclick = function(){
|
||||
demo2.update({ disabled: true });
|
||||
}
|
||||
document.getElementById('demo22').onclick = function(){
|
||||
demo2.update({ disabled: false });
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 选完`张三`后禁用
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo3" class="xm-select-demo"></div>
|
||||
<button class="btn" id="demo3-disabled">启用</button>
|
||||
|
||||
<script>
|
||||
var demo3 = xmSelect.render({
|
||||
el: '#demo3',
|
||||
data: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
],
|
||||
on({ arr, change, isAdd }){
|
||||
var hasZS = change.find(item => item.name === '张三');
|
||||
if(isAdd && hasZS){
|
||||
demo3.update({ disabled: true });
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
//没有做不到, 只有想不到, 把多选玩出花来吧
|
||||
document.getElementById('demo3-disabled').onclick = function(){
|
||||
demo3.update({ disabled: false });
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
## 禁用
|
||||
|
||||
|
||||
### 渲染禁用
|
||||
|
||||
```
|
||||
xmSelect.render({
|
||||
//...
|
||||
disabled: true
|
||||
})
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
disabled: true,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 动态启用禁用
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
<button class="btn" id="demo21">禁用</button>
|
||||
<button class="btn" id="demo22">启用</button>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
})
|
||||
|
||||
document.getElementById('demo21').onclick = function(){
|
||||
demo2.update({ disabled: true });
|
||||
}
|
||||
document.getElementById('demo22').onclick = function(){
|
||||
demo2.update({ disabled: false });
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 选完`张三`后禁用
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo3" class="xm-select-demo"></div>
|
||||
<button class="btn" id="demo3-disabled">启用</button>
|
||||
|
||||
<script>
|
||||
var demo3 = xmSelect.render({
|
||||
el: '#demo3',
|
||||
data: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
],
|
||||
on({ arr, change, isAdd }){
|
||||
var hasZS = change.find(item => item.name === '张三');
|
||||
if(isAdd && hasZS){
|
||||
demo3.update({ disabled: true });
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
//没有做不到, 只有想不到, 把多选玩出花来吧
|
||||
document.getElementById('demo3-disabled').onclick = function(){
|
||||
demo3.update({ disabled: false });
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
156
docs/mds/XM27.md
156
docs/mds/XM27.md
@@ -1,78 +1,78 @@
|
||||
## 创建条目
|
||||
|
||||
|
||||
### 搜索不存在则创建条目
|
||||
|
||||
```
|
||||
//想创建就必须要开启本地搜索
|
||||
xmSelect.render({
|
||||
//...
|
||||
filterable: true,
|
||||
create: function(val){
|
||||
//返回一个创建成功的对象, val是搜索的数据
|
||||
return {
|
||||
name: '创建-' + val,
|
||||
value: val
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
filterable: true,
|
||||
create: function(val){
|
||||
return {
|
||||
name: '创建-' + val,
|
||||
value: val
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 单选创建
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
radio: true,
|
||||
clickClose: true,
|
||||
filterable: true,
|
||||
create: function(val){
|
||||
return {
|
||||
name: '创建-' + val,
|
||||
value: val
|
||||
}
|
||||
},
|
||||
model: {
|
||||
icon: 'hidden',
|
||||
label: {
|
||||
type: 'text',
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
## 创建条目
|
||||
|
||||
|
||||
### 搜索不存在则创建条目
|
||||
|
||||
```
|
||||
//想创建就必须要开启本地搜索
|
||||
xmSelect.render({
|
||||
//...
|
||||
filterable: true,
|
||||
create: function(val){
|
||||
//返回一个创建成功的对象, val是搜索的数据
|
||||
return {
|
||||
name: '创建-' + val,
|
||||
value: val
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
filterable: true,
|
||||
create: function(val){
|
||||
return {
|
||||
name: '创建-' + val,
|
||||
value: val
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 单选创建
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
radio: true,
|
||||
clickClose: true,
|
||||
filterable: true,
|
||||
create: function(val){
|
||||
return {
|
||||
name: '创建-' + val,
|
||||
value: val
|
||||
}
|
||||
},
|
||||
model: {
|
||||
icon: 'hidden',
|
||||
label: {
|
||||
type: 'text',
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
208
docs/mds/ZM01.md
208
docs/mds/ZM01.md
@@ -1,104 +1,104 @@
|
||||
## 赋值与取值
|
||||
|
||||
|
||||
### 给多选赋值
|
||||
|
||||
函数`setValue(array)`, 动态赋值多选选中的数据, array可以是value数组, 也可以是完整的object数组
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
<br/><br/>
|
||||
<button class="btn" id="demo1-test1">赋值张三</button>
|
||||
<button class="btn" id="demo1-test2">赋值张三(value方式)</button>
|
||||
<button class="btn" id="demo1-test3">追加赋值李四</button>
|
||||
<br/><br/>
|
||||
<button class="btn" id="demo1-test4">清除李四</button>
|
||||
<button class="btn" id="demo1-test5">清空</button>
|
||||
<pre id="demo1-result"></pre>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
data: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
|
||||
document.getElementById('demo1-test1').onclick = function(){
|
||||
demo1.setValue([
|
||||
{name: '张三', value: 1},
|
||||
])
|
||||
};
|
||||
|
||||
document.getElementById('demo1-test2').onclick = function(){
|
||||
demo1.setValue([ 1 ])
|
||||
};
|
||||
|
||||
document.getElementById('demo1-test3').onclick = function(){
|
||||
demo1.append([ 2 ]);
|
||||
};
|
||||
|
||||
document.getElementById('demo1-test4').onclick = function(){
|
||||
demo1.delete([ 2 ])
|
||||
};
|
||||
|
||||
document.getElementById('demo1-test5').onclick = function(){
|
||||
demo1.setValue([ ])
|
||||
};
|
||||
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 取值
|
||||
|
||||
函数`getValue(type)`, type类型 name, nameStr, value, valueStr
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
<button class="btn" id="demo2-getValue">获取选中值</button>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<button class="btn" id="name">获取name数组</button>
|
||||
<button class="btn" id="nameStr">获取name字符串</button>
|
||||
<button class="btn" id="value">获取value数组</button>
|
||||
<button class="btn" id="valueStr">获取value字符串</button>
|
||||
|
||||
<pre id="demo2-value"></pre>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
data: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
|
||||
document.getElementById('demo2-getValue').onclick = function(){
|
||||
//获取当前多选选中的值
|
||||
var selectArr = demo2.getValue();
|
||||
document.getElementById('demo2-value').innerHTML = `\ndemo2.getValue()\n\n` + 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 = `\ndemo2.getValue('${type}')\n\n` + JSON.stringify(selectArr, null, 2);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
```
|
||||
:::
|
||||
## 赋值与取值
|
||||
|
||||
|
||||
### 给多选赋值
|
||||
|
||||
函数`setValue(array)`, 动态赋值多选选中的数据, array可以是value数组, 也可以是完整的object数组
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
<br/><br/>
|
||||
<button class="btn" id="demo1-test1">赋值张三</button>
|
||||
<button class="btn" id="demo1-test2">赋值张三(value方式)</button>
|
||||
<button class="btn" id="demo1-test3">追加赋值李四</button>
|
||||
<br/><br/>
|
||||
<button class="btn" id="demo1-test4">清除李四</button>
|
||||
<button class="btn" id="demo1-test5">清空</button>
|
||||
<pre id="demo1-result"></pre>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
data: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
|
||||
document.getElementById('demo1-test1').onclick = function(){
|
||||
demo1.setValue([
|
||||
{name: '张三', value: 1},
|
||||
])
|
||||
};
|
||||
|
||||
document.getElementById('demo1-test2').onclick = function(){
|
||||
demo1.setValue([ 1 ])
|
||||
};
|
||||
|
||||
document.getElementById('demo1-test3').onclick = function(){
|
||||
demo1.append([ 2 ]);
|
||||
};
|
||||
|
||||
document.getElementById('demo1-test4').onclick = function(){
|
||||
demo1.delete([ 2 ])
|
||||
};
|
||||
|
||||
document.getElementById('demo1-test5').onclick = function(){
|
||||
demo1.setValue([ ])
|
||||
};
|
||||
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 取值
|
||||
|
||||
函数`getValue(type)`, type类型 name, nameStr, value, valueStr
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
<button class="btn" id="demo2-getValue">获取选中值</button>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<button class="btn" id="name">获取name数组</button>
|
||||
<button class="btn" id="nameStr">获取name字符串</button>
|
||||
<button class="btn" id="value">获取value数组</button>
|
||||
<button class="btn" id="valueStr">获取value字符串</button>
|
||||
|
||||
<pre id="demo2-value"></pre>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
data: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
|
||||
document.getElementById('demo2-getValue').onclick = function(){
|
||||
//获取当前多选选中的值
|
||||
var selectArr = demo2.getValue();
|
||||
document.getElementById('demo2-value').innerHTML = `\ndemo2.getValue()\n\n` + 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 = `\ndemo2.getValue('${type}')\n\n` + JSON.stringify(selectArr, null, 2);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -1,50 +1,50 @@
|
||||
## 表单提交
|
||||
|
||||
|
||||
### 默认表单提交
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<form>
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
<button class="btn" type="submit">提交</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
data: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 修改name
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<form>
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
<button class="btn" type="submit">提交</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
name: 'lalalalalala',
|
||||
data: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
|
||||
</script>
|
||||
```
|
||||
## 表单提交
|
||||
|
||||
|
||||
### 默认表单提交
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<form>
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
<button class="btn" type="submit">提交</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
data: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 修改name
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<form>
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
<button class="btn" type="submit">提交</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
name: 'lalalalalala',
|
||||
data: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
118
docs/mds/ZM03.md
118
docs/mds/ZM03.md
@@ -9,65 +9,65 @@
|
||||
<table id="demo" lay-filter="test"></table>
|
||||
|
||||
<script>
|
||||
layui.use('table', function() {
|
||||
var table = layui.table;
|
||||
|
||||
//第一个实例
|
||||
table.render({
|
||||
elem: '#demo',
|
||||
page: true, //开启分页
|
||||
height: 500,
|
||||
cols: [
|
||||
[ //表头
|
||||
{ field: 'id', title: 'ID', width: 80, sort: true },
|
||||
{ field: 'username', title: '用户名', width: 80 },
|
||||
{ field: 'sex', title: '性别', width: 80, sort: true },
|
||||
{ field: 'city', title: '城市', width: 80 },
|
||||
{ field: 'sign', title: '爱好', width: 200, templet: function(d){
|
||||
return '<div id="XM-' + d.id + '" ></div>'
|
||||
} },
|
||||
{ field: 'experience', title: '积分', width: 80, sort: true },
|
||||
{ field: 'score', title: '评分', width: 80, sort: true },
|
||||
{ field: 'classify', title: '职业', width: 80 },
|
||||
{ field: 'wealth', title: '财富', width: 135, sort: true }
|
||||
]
|
||||
],
|
||||
data: [
|
||||
{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},
|
||||
{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},
|
||||
{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},
|
||||
{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},
|
||||
{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},
|
||||
{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},
|
||||
{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},
|
||||
{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},
|
||||
{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},
|
||||
{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75}
|
||||
],
|
||||
done: function(res){
|
||||
//修改一些css样式, 这里虽然能够使用, 但是还是不太友好, 努力中...
|
||||
var cells = document.querySelectorAll('div[lay-id="demo"] .layui-table-cell');
|
||||
for(var i = 0 ; i < cells.length ; i++ ){
|
||||
cells[i].style.overflow = 'unset';
|
||||
cells[i].style.height = 'auto';
|
||||
}
|
||||
//渲染多选
|
||||
res.data.forEach(item => {
|
||||
var xm = xmSelect.render({
|
||||
el: '#XM-' + item.id,
|
||||
autoRow: true,
|
||||
data: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
|
||||
item.__xm = xm;
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
layui.use('table', function() {
|
||||
var table = layui.table;
|
||||
|
||||
//第一个实例
|
||||
table.render({
|
||||
elem: '#demo',
|
||||
page: true, //开启分页
|
||||
height: 500,
|
||||
cols: [
|
||||
[ //表头
|
||||
{ field: 'id', title: 'ID', width: 80, sort: true },
|
||||
{ field: 'username', title: '用户名', width: 80 },
|
||||
{ field: 'sex', title: '性别', width: 80, sort: true },
|
||||
{ field: 'city', title: '城市', width: 80 },
|
||||
{ field: 'sign', title: '爱好', width: 200, templet: function(d){
|
||||
return '<div id="XM-' + d.id + '" ></div>'
|
||||
} },
|
||||
{ field: 'experience', title: '积分', width: 80, sort: true },
|
||||
{ field: 'score', title: '评分', width: 80, sort: true },
|
||||
{ field: 'classify', title: '职业', width: 80 },
|
||||
{ field: 'wealth', title: '财富', width: 135, sort: true }
|
||||
]
|
||||
],
|
||||
data: [
|
||||
{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},
|
||||
{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},
|
||||
{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},
|
||||
{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},
|
||||
{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},
|
||||
{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},
|
||||
{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},
|
||||
{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},
|
||||
{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},
|
||||
{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75}
|
||||
],
|
||||
done: function(res){
|
||||
//修改一些css样式, 这里虽然能够使用, 但是还是不太友好, 努力中...
|
||||
var cells = document.querySelectorAll('div[lay-id="demo"] .layui-table-cell');
|
||||
for(var i = 0 ; i < cells.length ; i++ ){
|
||||
cells[i].style.overflow = 'unset';
|
||||
cells[i].style.height = 'auto';
|
||||
}
|
||||
//渲染多选
|
||||
res.data.forEach(item => {
|
||||
var xm = xmSelect.render({
|
||||
el: '#XM-' + item.id,
|
||||
autoRow: true,
|
||||
data: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
|
||||
item.__xm = xm;
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -1,36 +1,36 @@
|
||||
## 远程搜索
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<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, 相当于$.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>
|
||||
```
|
||||
:::
|
||||
## 远程搜索
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<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, 相当于$.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>
|
||||
```
|
||||
:::
|
||||
|
||||
112
docs/mds/ZM05.md
112
docs/mds/ZM05.md
@@ -1,56 +1,56 @@
|
||||
## 动态数据
|
||||
|
||||
|
||||
### 本地数据动态赋值
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
data: []
|
||||
})
|
||||
|
||||
demo1.update({
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, selected: true},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
})
|
||||
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 远程数据动态赋值
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
toolbar: {show: true},
|
||||
data: []
|
||||
})
|
||||
|
||||
axios({
|
||||
method: 'get',
|
||||
url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
|
||||
}).then(response => {
|
||||
var res = response.data;
|
||||
|
||||
demo2.update({
|
||||
data: res.data,
|
||||
autoRow: true,
|
||||
})
|
||||
});
|
||||
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
## 动态数据
|
||||
|
||||
|
||||
### 本地数据动态赋值
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
data: []
|
||||
})
|
||||
|
||||
demo1.update({
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, selected: true},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
})
|
||||
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 远程数据动态赋值
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo2 = xmSelect.render({
|
||||
el: '#demo2',
|
||||
toolbar: {show: true},
|
||||
data: []
|
||||
})
|
||||
|
||||
axios({
|
||||
method: 'get',
|
||||
url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
|
||||
}).then(response => {
|
||||
var res = response.data;
|
||||
|
||||
demo2.update({
|
||||
data: res.data,
|
||||
autoRow: true,
|
||||
})
|
||||
});
|
||||
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
## 远程搜索
|
||||
|
||||
|
||||
### layer弹出框
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<button class="btn" id="demo1-btn">弹出多选</button>
|
||||
|
||||
<script>
|
||||
document.getElementById('demo1-btn').onclick = function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '多选',
|
||||
content: '<div id="demo1" class="xm-select-demo-alert"></div>',
|
||||
success: function(layero, index){
|
||||
//这里因为内容过少, 会被遮挡, 所以简单修改了下样式
|
||||
document.getElementById('layui-layer' + index).getElementsByClassName('layui-layer-content')[0].style.overflow = 'unset';
|
||||
//渲染多选
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, disabled: true},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
## 远程搜索
|
||||
|
||||
|
||||
### layer弹出框
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<button class="btn" id="demo1-btn">弹出多选</button>
|
||||
|
||||
<script>
|
||||
document.getElementById('demo1-btn').onclick = function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '多选',
|
||||
content: '<div id="demo1" class="xm-select-demo-alert"></div>',
|
||||
success: function(layero, index){
|
||||
//这里因为内容过少, 会被遮挡, 所以简单修改了下样式
|
||||
document.getElementById('layui-layer' + index).getElementsByClassName('layui-layer-content')[0].style.overflow = 'unset';
|
||||
//渲染多选
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2, disabled: true},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
158
docs/mds/ZM07.md
158
docs/mds/ZM07.md
@@ -1,79 +1,79 @@
|
||||
## 获取实例对象
|
||||
|
||||
|
||||
### 全局方法 get
|
||||
|
||||
:::warning
|
||||
get方法默认返回的是符合条件的数组,
|
||||
:::
|
||||
|
||||
```
|
||||
|
||||
//所有
|
||||
xmSelect.get();
|
||||
//字符串
|
||||
xmSelect.get('#demo2');
|
||||
//正则
|
||||
xmSelect.get(/demo.*/);
|
||||
//过滤方法
|
||||
xmSelect.get((el) => {
|
||||
return el == '#demo1' || el == '#xm3'
|
||||
});
|
||||
//获取单实例
|
||||
xmSelect.get('#demo2', true);
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
<div id="xm3" class="xm-select-demo"></div>
|
||||
|
||||
<div><button class="btn" id="btn1">get(所有)</button></div>
|
||||
<div><button class="btn" id="btn2">get(字符串)</button></div>
|
||||
<div><button class="btn" id="btn3">get(正则)</button></div>
|
||||
<div><button class="btn" id="btn4">get(过滤方法)</button></div>
|
||||
<div><button class="btn" id="btn5">get(获取单实例)</button></div>
|
||||
|
||||
<script>
|
||||
|
||||
['#demo1', '#demo2', '#xm3'].forEach((el, index) => {
|
||||
xmSelect.render({
|
||||
el,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('btn1').onclick = function(){
|
||||
var xmList = xmSelect.get();
|
||||
alert('当前页面多选个数: ' + xmList.length)
|
||||
}
|
||||
|
||||
document.getElementById('btn2').onclick = function(){
|
||||
var xmList = xmSelect.get('#demo2');
|
||||
alert('获取 #demo2 实例: ' + xmList.length)
|
||||
}
|
||||
|
||||
document.getElementById('btn3').onclick = function(){
|
||||
var xmList = xmSelect.get(/demo.*/);
|
||||
alert('获取匹配正则 /demo.*/ 的实例: ' + xmList.length)
|
||||
}
|
||||
|
||||
document.getElementById('btn4').onclick = function(){
|
||||
var xmList = xmSelect.get((el) => {
|
||||
return el == '#demo1' || el == '#xm3'
|
||||
});
|
||||
alert('自定义方法的实例: ' + xmList.length)
|
||||
}
|
||||
|
||||
document.getElementById('btn5').onclick = function(){
|
||||
var demo2 = xmSelect.get('#demo2', true);
|
||||
alert('获取单实例#demo2当前选中值: ' + demo2.getValue('nameStr'));
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
## 获取实例对象
|
||||
|
||||
|
||||
### 全局方法 get
|
||||
|
||||
:::warning
|
||||
get方法默认返回的是符合条件的数组,
|
||||
:::
|
||||
|
||||
```
|
||||
|
||||
//所有
|
||||
xmSelect.get();
|
||||
//字符串
|
||||
xmSelect.get('#demo2');
|
||||
//正则
|
||||
xmSelect.get(/demo.*/);
|
||||
//过滤方法
|
||||
xmSelect.get((el) => {
|
||||
return el == '#demo1' || el == '#xm3'
|
||||
});
|
||||
//获取单实例
|
||||
xmSelect.get('#demo2', true);
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
<div id="xm3" class="xm-select-demo"></div>
|
||||
|
||||
<div><button class="btn" id="btn1">get(所有)</button></div>
|
||||
<div><button class="btn" id="btn2">get(字符串)</button></div>
|
||||
<div><button class="btn" id="btn3">get(正则)</button></div>
|
||||
<div><button class="btn" id="btn4">get(过滤方法)</button></div>
|
||||
<div><button class="btn" id="btn5">get(获取单实例)</button></div>
|
||||
|
||||
<script>
|
||||
|
||||
['#demo1', '#demo2', '#xm3'].forEach((el, index) => {
|
||||
xmSelect.render({
|
||||
el,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('btn1').onclick = function(){
|
||||
var xmList = xmSelect.get();
|
||||
alert('当前页面多选个数: ' + xmList.length)
|
||||
}
|
||||
|
||||
document.getElementById('btn2').onclick = function(){
|
||||
var xmList = xmSelect.get('#demo2');
|
||||
alert('获取 #demo2 实例: ' + xmList.length)
|
||||
}
|
||||
|
||||
document.getElementById('btn3').onclick = function(){
|
||||
var xmList = xmSelect.get(/demo.*/);
|
||||
alert('获取匹配正则 /demo.*/ 的实例: ' + xmList.length)
|
||||
}
|
||||
|
||||
document.getElementById('btn4').onclick = function(){
|
||||
var xmList = xmSelect.get((el) => {
|
||||
return el == '#demo1' || el == '#xm3'
|
||||
});
|
||||
alert('自定义方法的实例: ' + xmList.length)
|
||||
}
|
||||
|
||||
document.getElementById('btn5').onclick = function(){
|
||||
var demo2 = xmSelect.get('#demo2', true);
|
||||
alert('获取单实例#demo2当前选中值: ' + demo2.getValue('nameStr'));
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
122
docs/mds/ZM08.md
122
docs/mds/ZM08.md
@@ -1,61 +1,61 @@
|
||||
## 批量操作
|
||||
|
||||
|
||||
### 批量操作已渲染实例
|
||||
|
||||
```
|
||||
//filter, 同get方法
|
||||
//method, 需要执行的方法
|
||||
//args, 执行方法的参数
|
||||
xmSelect.batch(filter, method, ...args);
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
<div id="xm3" class="xm-select-demo"></div>
|
||||
|
||||
<div><button class="btn" id="btn1">batch禁用</button></div>
|
||||
<div><button class="btn" id="btn2">batch启用</button></div>
|
||||
<div><button class="btn" id="btn3">batch警告</button></div>
|
||||
<div><button class="btn" id="btn4">batch获取已选中数据</button></div>
|
||||
|
||||
<pre id="demo-value"></pre>
|
||||
|
||||
<script>
|
||||
|
||||
['#demo1', '#demo2', '#xm3'].forEach((el, index) => {
|
||||
xmSelect.render({
|
||||
el,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('btn1').onclick = function(){
|
||||
xmSelect.batch('', 'update', {
|
||||
disabled: true
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('btn2').onclick = function(){
|
||||
xmSelect.batch('', 'update', {
|
||||
disabled: false
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('btn3').onclick = function(){
|
||||
xmSelect.batch(/demo.*/, 'warning', '#F00', true);
|
||||
}
|
||||
|
||||
document.getElementById('btn4').onclick = function(){
|
||||
var selectArr = xmSelect.batch(null, 'getValue', 'name');
|
||||
document.getElementById('demo-value').innerHTML = JSON.stringify(selectArr, null, 2);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
## 批量操作
|
||||
|
||||
|
||||
### 批量操作已渲染实例
|
||||
|
||||
```
|
||||
//filter, 同get方法
|
||||
//method, 需要执行的方法
|
||||
//args, 执行方法的参数
|
||||
xmSelect.batch(filter, method, ...args);
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
<div id="demo2" class="xm-select-demo"></div>
|
||||
<div id="xm3" class="xm-select-demo"></div>
|
||||
|
||||
<div><button class="btn" id="btn1">batch禁用</button></div>
|
||||
<div><button class="btn" id="btn2">batch启用</button></div>
|
||||
<div><button class="btn" id="btn3">batch警告</button></div>
|
||||
<div><button class="btn" id="btn4">batch获取已选中数据</button></div>
|
||||
|
||||
<pre id="demo-value"></pre>
|
||||
|
||||
<script>
|
||||
|
||||
['#demo1', '#demo2', '#xm3'].forEach((el, index) => {
|
||||
xmSelect.render({
|
||||
el,
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('btn1').onclick = function(){
|
||||
xmSelect.batch('', 'update', {
|
||||
disabled: true
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('btn2').onclick = function(){
|
||||
xmSelect.batch('', 'update', {
|
||||
disabled: false
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('btn3').onclick = function(){
|
||||
xmSelect.batch(/demo.*/, 'warning', '#F00', true);
|
||||
}
|
||||
|
||||
document.getElementById('btn4').onclick = function(){
|
||||
var selectArr = xmSelect.batch(null, 'getValue', 'name');
|
||||
document.getElementById('demo-value').innerHTML = JSON.stringify(selectArr, null, 2);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
128
docs/mds/ZP01.md
128
docs/mds/ZP01.md
@@ -1,53 +1,75 @@
|
||||
## 下拉自定义
|
||||
|
||||
|
||||
|
||||
### 下拉表格
|
||||
|
||||
至于能干什么, 就看你们的想象了~~
|
||||
|
||||
:::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>
|
||||
```
|
||||
:::
|
||||
## 下拉自定义
|
||||
|
||||
|
||||
|
||||
### 下拉表格
|
||||
|
||||
至于能干什么, 就看你们的想象了~~
|
||||
|
||||
:::demo
|
||||
```html
|
||||
|
||||
<div id="demo1"></div>
|
||||
|
||||
<script>
|
||||
//先渲染多选
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
prop: {
|
||||
name: 'username',
|
||||
value: 'username',
|
||||
},
|
||||
content: `
|
||||
<table class="layui-table" lay-filter="demo">
|
||||
<thead>
|
||||
<tr>
|
||||
<th lay-data="{field:'username', width:80}">昵称</th>
|
||||
<th lay-data="{field:'experience', width:50, sort:true}">积分</th>
|
||||
<th lay-data="{field:'sign', width: 200}">签名</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>贤心1</td>
|
||||
<td>66</td>
|
||||
<td>人生就像是一场修行a</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>贤心2</td>
|
||||
<td>88</td>
|
||||
<td>人生就像是一场修行b</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>贤心3</td>
|
||||
<td>33</td>
|
||||
<td>人生就像是一场修行c</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`,
|
||||
height: 'auto',
|
||||
})
|
||||
|
||||
layui.table.init('demo', {
|
||||
done: function(res){
|
||||
demo1.update({ data: res.data })
|
||||
}
|
||||
}).on('row(demo)', function(obj){
|
||||
var values = demo1.getValue();
|
||||
var item = obj.data;
|
||||
var has = values.find(function(i){
|
||||
return i.username === item.username
|
||||
})
|
||||
if(has){
|
||||
demo1.delete([ item ]);
|
||||
}else{
|
||||
demo1.append([ item ]);
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
142
docs/mds/ZP02.md
142
docs/mds/ZP02.md
@@ -1,8 +1,23 @@
|
||||
## 下拉树
|
||||
|
||||
### eleTree
|
||||
### tree
|
||||
|
||||
结合 `layui` 插件中心的 `eleTree`, <a href='https://fly.layui.com/extend/eleTree/' target='_blank'>传送门</a>
|
||||
默认配置
|
||||
|
||||
```
|
||||
tree: {
|
||||
//是否显示树状结构
|
||||
show: false,
|
||||
//是否展示三角图标
|
||||
showFolderIcon: true,
|
||||
//是否显示虚线
|
||||
showLine: false,
|
||||
//间距
|
||||
indent: 20,
|
||||
//默认展开节点的数组
|
||||
expandedKeys: [],
|
||||
},
|
||||
```
|
||||
|
||||
|
||||
:::demo
|
||||
@@ -10,60 +25,81 @@
|
||||
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<br/>
|
||||
<div class="layui-form">
|
||||
<input type="checkbox" name="showFolderIcon" lay-filter="showFolderIcon" lay-skin="primary" title="是否展示三角图标" checked>
|
||||
<input type="checkbox" name="showLine" lay-filter="showLine" lay-skin="primary" title="是否显示虚线" checked>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px">间距</div>
|
||||
<div id="slideTest1"></div>
|
||||
|
||||
|
||||
<script>
|
||||
//先渲染多选
|
||||
layui.form.render();
|
||||
|
||||
layui.form.on('checkbox(showFolderIcon)', function(data){
|
||||
demo1.update({
|
||||
tree: {
|
||||
showFolderIcon: data.elem.checked
|
||||
}
|
||||
})
|
||||
});
|
||||
layui.form.on('checkbox(showLine)', function(data){
|
||||
demo1.update({
|
||||
tree: {
|
||||
showLine: data.elem.checked
|
||||
}
|
||||
})
|
||||
});
|
||||
layui.slider.render({
|
||||
elem: '#slideTest1',
|
||||
min: 10,
|
||||
max: 100,
|
||||
showstep: true,
|
||||
input: true,
|
||||
tips: true,
|
||||
value: 20,
|
||||
change: function(value){
|
||||
demo1.update({
|
||||
tree: {
|
||||
indent: value
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
theme: {
|
||||
color: '#5FB878',
|
||||
},
|
||||
content: '<div id="ele1" lay-filter="ele1"></div>',
|
||||
el: '#demo1',
|
||||
autoRow: true,
|
||||
tree: {
|
||||
show: true,
|
||||
showFolderIcon: true,
|
||||
showLine: true,
|
||||
indent: 20,
|
||||
expandedKeys: [ -3 ],
|
||||
},
|
||||
height: 'auto',
|
||||
data(){
|
||||
return [
|
||||
{name: '销售员', value: -1, disabled: true, children: [
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{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},
|
||||
]},
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
//渲染自定义内容
|
||||
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: "郑州市" },
|
||||
{ id: 7, label: "开封市" },
|
||||
{ id: 8, label: "焦作市" },
|
||||
{ id: 9, 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>
|
||||
```
|
||||
:::
|
||||
|
||||
138
docs/mds/ZP03.md
138
docs/mds/ZP03.md
@@ -1,65 +1,85 @@
|
||||
## 下拉树
|
||||
## 下拉日期多选
|
||||
|
||||
### laydate
|
||||
|
||||
### layuiTree
|
||||
```
|
||||
//css调整部分
|
||||
xm-select .scroll-body{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
结合 `layui` 的 `tree`, <a href='https://www.layui.com/doc/modules/tree.html' target='_blank'>传送门</a>
|
||||
|
||||
:::demo
|
||||
```html
|
||||
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var data = [
|
||||
{ id: 1, title: "安徽省", children: [
|
||||
{ id: 2, title: "马鞍山市", disabled: true, children: [
|
||||
{ id: 3, title: "和县" },
|
||||
{ id: 4, title: "花山区" }
|
||||
]}
|
||||
]},
|
||||
{ id: 5, title: "河南省", children: [
|
||||
{ id: 6, title: "郑州市" },
|
||||
{ id: 7, title: "开封市" },
|
||||
{ id: 8, title: "焦作市" },
|
||||
{ id: 9, title: "洛阳市" },
|
||||
]}
|
||||
]
|
||||
|
||||
|
||||
//先渲染多选
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
theme: {
|
||||
color: '#5FB878',
|
||||
},
|
||||
content: '<div id="layuiTree"></div>',
|
||||
data: data,
|
||||
prop: {
|
||||
name: 'title',
|
||||
value: 'id',
|
||||
}
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
content: '<div id="laydate" />',
|
||||
height: 'auto',
|
||||
autoRow: true,
|
||||
on: function(data){
|
||||
if(!data.isAdd){
|
||||
dateSelect(demo1.getValue('value'));
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
//渲染自定义内容
|
||||
var ele = layui.tree.render({
|
||||
id: 'demoId',
|
||||
elem: '#layuiTree',
|
||||
data: data,
|
||||
showCheckbox: true,
|
||||
oncheck: function(obj){
|
||||
var checkData = layui.tree.getChecked('demoId');
|
||||
}
|
||||
});
|
||||
layui.laydate.render({
|
||||
elem: '#laydate',
|
||||
position: 'static',
|
||||
showBottom: false,
|
||||
format: 'yyyy-M-dd',
|
||||
change: function(){
|
||||
dateSelect(demo1.getValue('value'));
|
||||
},
|
||||
done: function(value){
|
||||
console.log(value)
|
||||
var values = demo1.getValue('value');
|
||||
var index = values.findIndex(function(val){
|
||||
return val === value
|
||||
});
|
||||
|
||||
if(index != -1){
|
||||
values.splice(index, 1);
|
||||
}else{
|
||||
values.push(value);
|
||||
}
|
||||
|
||||
dateSelect(values);
|
||||
|
||||
demo1.update({
|
||||
data: values.map(function(val){
|
||||
return {
|
||||
name: val,
|
||||
value: val,
|
||||
selected: true,
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
ready: removeAll,
|
||||
})
|
||||
|
||||
//监听下拉多选的选择
|
||||
demo1.update({
|
||||
on({ arr, change, isAdd }){
|
||||
if(isAdd === false){//监听取消
|
||||
ele.setChecked(arr.map(item => item.id), true);
|
||||
}
|
||||
},
|
||||
});
|
||||
function removeAll(){
|
||||
document.querySelectorAll('#laydate td[lay-ymd].layui-this').forEach(function(dom){
|
||||
dom.classList.remove('layui-this');
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
function dateSelect(values){
|
||||
removeAll();
|
||||
values.forEach(function(val){
|
||||
var dom = document.querySelector('#laydate td[lay-ymd="'+val.replace(/-0([1-9])/g, '-$1')+'"]');
|
||||
dom && dom.classList.add('layui-this');
|
||||
});
|
||||
}
|
||||
|
||||
//这里仅仅提供一个演示, 更多的想法由你自己来创造
|
||||
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -9,36 +9,36 @@
|
||||
<script>
|
||||
//先渲染多选
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
autoRow: true,
|
||||
filterable: true,
|
||||
toolbar: {show: true},
|
||||
paging: true,
|
||||
create: (val, data) => {
|
||||
console.log(val, data)
|
||||
return {
|
||||
name: val,
|
||||
value: val,
|
||||
}
|
||||
},
|
||||
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},
|
||||
]},
|
||||
]
|
||||
}
|
||||
el: '#demo1',
|
||||
autoRow: true,
|
||||
tree: {
|
||||
show: true,
|
||||
expandedKeys: [-3],
|
||||
},
|
||||
height: 'auto',
|
||||
on({ arr, change, isAdd }){
|
||||
console.log(arr, change, isAdd)
|
||||
},
|
||||
data(){
|
||||
return [
|
||||
{name: '销售员', value: -1, disabled: true, children: [
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{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, disabled: 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>
|
||||
```
|
||||
:::
|
||||
|
||||
292
docs/mds/es6.md
292
docs/mds/es6.md
@@ -1,146 +1,146 @@
|
||||
## es6语法说明
|
||||
|
||||
:::warning
|
||||
文档中会存在es6语法, 这里简单说明一下, 其中`IE`不支持`es6`语法
|
||||
:::
|
||||
|
||||
### 概览
|
||||
|
||||
- let const
|
||||
- 模板字符串
|
||||
- 对象中属性方法简写
|
||||
- 箭头函数
|
||||
- 解构
|
||||
|
||||
这里只是简单说明, 有兴趣可以看大神<a href="https://es6.ruanyifeng.com/" target="_blank">阮一峰的资料</a>
|
||||
|
||||
|
||||
### let与const
|
||||
|
||||
```
|
||||
//lES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
|
||||
|
||||
{
|
||||
let a = 10;
|
||||
var b = 1;
|
||||
}
|
||||
|
||||
a // ReferenceError: a is not defined.
|
||||
b // 1
|
||||
|
||||
|
||||
//const声明一个只读的常量。一旦声明，常量的值就不能改变。
|
||||
const PI = 3.1415;
|
||||
PI // 3.1415
|
||||
|
||||
PI = 3;
|
||||
// TypeError: Assignment to constant variable.
|
||||
```
|
||||
|
||||
|
||||
### 模板字符串
|
||||
|
||||
```
|
||||
//模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
|
||||
|
||||
// 普通字符串
|
||||
`In JavaScript '\n' is a line-feed.`
|
||||
|
||||
// 多行字符串
|
||||
`In JavaScript this is
|
||||
not legal.`
|
||||
|
||||
console.log(`string text line 1
|
||||
string text line 2`);
|
||||
|
||||
// 字符串中嵌入变量
|
||||
let name = "Bob", time = "today";
|
||||
`Hello ${name}, how are you ${time}?`
|
||||
```
|
||||
|
||||
|
||||
### 对象中属性方法简写
|
||||
|
||||
```
|
||||
//常规写法
|
||||
var name = 'zs';
|
||||
|
||||
var obj = {
|
||||
name: name,
|
||||
run: function(){
|
||||
console.log('haha');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//简写
|
||||
let name = 'zs';
|
||||
|
||||
let obj = {
|
||||
name,
|
||||
run(){
|
||||
console.log('haha');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### 箭头函数
|
||||
|
||||
```
|
||||
//常规写法
|
||||
setTimeout(function(){
|
||||
//...
|
||||
}, 1000);
|
||||
|
||||
//简写
|
||||
setTimeout(() => {
|
||||
//...
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
|
||||
### 解构
|
||||
|
||||
```
|
||||
//假如现在有一个对象
|
||||
let obj = {
|
||||
name: 'zs',
|
||||
age: 18,
|
||||
address: 'beijing',
|
||||
}
|
||||
|
||||
//正常获取name
|
||||
var name = obj.name
|
||||
|
||||
//解构写法
|
||||
let { name } = obj
|
||||
|
||||
//也可以多个
|
||||
let { name, age, address } = obj;
|
||||
|
||||
//如果不存在也可以声明默认值
|
||||
let { name, age, address, status = '1' } = obj;
|
||||
|
||||
//想添加一条属性
|
||||
obj.status = '1';
|
||||
|
||||
//对象属性合并
|
||||
var newObj = {
|
||||
...obj,
|
||||
status: '1'
|
||||
}
|
||||
|
||||
//方法传参
|
||||
function calc(data){
|
||||
var a = data.a;
|
||||
var b = data.b;
|
||||
return a + b;
|
||||
}
|
||||
//解构传参
|
||||
function calc({ a, b }){
|
||||
return a + b;
|
||||
}
|
||||
```
|
||||
|
||||
至于更多的就自己去找学习资料吧
|
||||
## es6语法说明
|
||||
|
||||
:::warning
|
||||
文档中会存在es6语法, 这里简单说明一下, 其中`IE`不支持`es6`语法
|
||||
:::
|
||||
|
||||
### 概览
|
||||
|
||||
- let const
|
||||
- 模板字符串
|
||||
- 对象中属性方法简写
|
||||
- 箭头函数
|
||||
- 解构
|
||||
|
||||
这里只是简单说明, 有兴趣可以看大神<a href="https://es6.ruanyifeng.com/" target="_blank">阮一峰的资料</a>
|
||||
|
||||
|
||||
### let与const
|
||||
|
||||
```
|
||||
//lES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
|
||||
|
||||
{
|
||||
let a = 10;
|
||||
var b = 1;
|
||||
}
|
||||
|
||||
a // ReferenceError: a is not defined.
|
||||
b // 1
|
||||
|
||||
|
||||
//const声明一个只读的常量。一旦声明，常量的值就不能改变。
|
||||
const PI = 3.1415;
|
||||
PI // 3.1415
|
||||
|
||||
PI = 3;
|
||||
// TypeError: Assignment to constant variable.
|
||||
```
|
||||
|
||||
|
||||
### 模板字符串
|
||||
|
||||
```
|
||||
//模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
|
||||
|
||||
// 普通字符串
|
||||
`In JavaScript '\n' is a line-feed.`
|
||||
|
||||
// 多行字符串
|
||||
`In JavaScript this is
|
||||
not legal.`
|
||||
|
||||
console.log(`string text line 1
|
||||
string text line 2`);
|
||||
|
||||
// 字符串中嵌入变量
|
||||
let name = "Bob", time = "today";
|
||||
`Hello ${name}, how are you ${time}?`
|
||||
```
|
||||
|
||||
|
||||
### 对象中属性方法简写
|
||||
|
||||
```
|
||||
//常规写法
|
||||
var name = 'zs';
|
||||
|
||||
var obj = {
|
||||
name: name,
|
||||
run: function(){
|
||||
console.log('haha');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//简写
|
||||
let name = 'zs';
|
||||
|
||||
let obj = {
|
||||
name,
|
||||
run(){
|
||||
console.log('haha');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### 箭头函数
|
||||
|
||||
```
|
||||
//常规写法
|
||||
setTimeout(function(){
|
||||
//...
|
||||
}, 1000);
|
||||
|
||||
//简写
|
||||
setTimeout(() => {
|
||||
//...
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
|
||||
### 解构
|
||||
|
||||
```
|
||||
//假如现在有一个对象
|
||||
let obj = {
|
||||
name: 'zs',
|
||||
age: 18,
|
||||
address: 'beijing',
|
||||
}
|
||||
|
||||
//正常获取name
|
||||
var name = obj.name
|
||||
|
||||
//解构写法
|
||||
let { name } = obj
|
||||
|
||||
//也可以多个
|
||||
let { name, age, address } = obj;
|
||||
|
||||
//如果不存在也可以声明默认值
|
||||
let { name, age, address, status = '1' } = obj;
|
||||
|
||||
//想添加一条属性
|
||||
obj.status = '1';
|
||||
|
||||
//对象属性合并
|
||||
var newObj = {
|
||||
...obj,
|
||||
status: '1'
|
||||
}
|
||||
|
||||
//方法传参
|
||||
function calc(data){
|
||||
var a = data.a;
|
||||
var b = data.b;
|
||||
return a + b;
|
||||
}
|
||||
//解构传参
|
||||
function calc({ a, b }){
|
||||
return a + b;
|
||||
}
|
||||
```
|
||||
|
||||
至于更多的就自己去找学习资料吧
|
||||
|
||||
@@ -13,12 +13,12 @@
|
||||
- [Fly社区交流贴](https://fly.layui.com/jie/57776/)
|
||||
- QQ交流群: `660408068`
|
||||
|
||||
> 作者: maplemei, 热爱前端的Java程序猿, 如果喜欢作者的插件, 可以请作者吃雪糕 ^_^
|
||||
|
||||
<p>
|
||||
<a href="javascript:;">
|
||||
<img src="../assets/wx.jpg" alt="打赏" width="300">
|
||||
</a>
|
||||
> 作者: maplemei, 热爱前端的Java程序猿, 如果喜欢作者的插件, 可以请作者吃雪糕 ^_^
|
||||
|
||||
<p>
|
||||
<a href="javascript:;">
|
||||
<img src="../assets/wx.jpg" alt="打赏" width="300">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
||||
@@ -52,19 +52,19 @@ $ npm install && npm run dev
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
language: 'zn',
|
||||
data: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
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);
|
||||
//获取当前多选选中的值
|
||||
var selectArr = demo1.getValue();
|
||||
document.getElementById('demo1-value').innerHTML = JSON.stringify(selectArr, null, 2);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,218 +1,224 @@
|
||||
## 配置项与方法
|
||||
|
||||
|
||||
### 配置项
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ----------------- | ------------------------------ | --------------- | ------ | ------ |
|
||||
| el | 渲染对象, css选择器 | string | - | - |
|
||||
| language | 语言选择 | string | zn / en | zn |
|
||||
| data | 显示的数据 | array | - | [ ] |
|
||||
| content | 自定义下拉框html | string | - | - |
|
||||
| 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 | - | - |
|
||||
| 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 |
|
||||
| style | 自定义样式| object | - | { } |
|
||||
| height | 默认最大高度| string | - | 200px |
|
||||
| paging | 是否开启自定义分页 | boolean | true / false | false |
|
||||
| pageSize | 分页条数 | int | - | 10 |
|
||||
| pageEmptyShow | 分页无数据是否显示 | boolean | true / false | true |
|
||||
| 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, change, isAdd }) | - | - |
|
||||
| max | 设置多选选中上限 | int | - | 0 |
|
||||
| maxMethod | 达到选中上限的回到 | function(sels, item), sels: 已选中数据, item: 当前选中的值 | - | - |
|
||||
| name | 表单提交时的name | string | - | select |
|
||||
| toolbar | 工具条, 具体看下表 | object | - | - |
|
||||
| showCount | 展示在下拉框中的最多选项数量 | int | - | 0 |
|
||||
| autoRow | 是否开启自动换行(选项过多时) | boolean | true / false | false |
|
||||
| size | 尺寸 | string | large / medium / small / mini | medium |
|
||||
| disabled | 是否禁用多选 | boolean | true / false | false |
|
||||
| create | 创建条目 | function(val, data), val: 搜索的数据, data: 当前下拉数据 | - | null |
|
||||
|
||||
|
||||
### prop
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ----------------- | ------------------------------ | --------------- | ------ | ------ |
|
||||
| name | 显示名称 | string | - | name |
|
||||
| value | 选中值, 当前多选唯一 | string | - | value |
|
||||
| selected | 是否选中 | string | - | selected |
|
||||
| disabled | 是否禁用 | string | - | disabled |
|
||||
| children | 分组children | string | - | children |
|
||||
| optgroup | 分组optgroup | string | - | optgroup |
|
||||
|
||||
|
||||
### 分组说明
|
||||
|
||||
如果children属性为数组, 或者optgroup=true的时候开启分组模式
|
||||
|
||||
```
|
||||
//平级结构下面的数据为一组
|
||||
{name: '城市', optgroup: true},
|
||||
|
||||
//children下的数组为一组
|
||||
{name: '销售员', children: [
|
||||
{name: '李四', value: 4, selected: true},
|
||||
{name: '王五', value: 5},
|
||||
]},
|
||||
|
||||
//可在分组上定义click属性, 来定义点击事件
|
||||
//这里以optgroup模式为例, children模式同理
|
||||
{name: '选中', optgroup: true, click: 'SELECT'},
|
||||
{name: '清空', optgroup: true, click: 'CLEAR'},
|
||||
{name: '自动', optgroup: true, click: 'AUTO'},
|
||||
{name: '自定义', optgroup: true, click: function(item){
|
||||
alert('自定义的, 想干嘛干嘛');
|
||||
}},
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
### theme
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ------------ | --------- | --------------- | ------ | ------ |
|
||||
| color | 主题颜色 | string | - | #009688 |
|
||||
| maxColor | 选中上限闪烁边框颜色 | string | - | #e54d42 |
|
||||
|
||||
|
||||
### model
|
||||
|
||||
目前仅配置label即可
|
||||
|
||||
```
|
||||
model: {
|
||||
//是否展示复选框或者单选框图标 show, hidden:变换背景色
|
||||
icon: 'show',
|
||||
label: {
|
||||
//使用方式
|
||||
type: 'block',
|
||||
//使用字符串拼接的方式
|
||||
text: {
|
||||
//左边拼接的字符
|
||||
left: '',
|
||||
//右边拼接的字符
|
||||
right: '',
|
||||
//中间的分隔符
|
||||
separator: ', ',
|
||||
},
|
||||
//使用方块显示
|
||||
block: {
|
||||
//最大显示数量, 0:不限制
|
||||
showCount: 0,
|
||||
//是否显示删除图标
|
||||
showIcon: true,
|
||||
},
|
||||
//自定义文字
|
||||
count: {
|
||||
//函数处理
|
||||
template(data, sels){
|
||||
//data: 所有的数据
|
||||
//sels: 选中的数据
|
||||
return `已选中 ${sels.length} 项, 共 ${data.length} 项`
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
```
|
||||
|
||||
|
||||
### toolbar
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ------------ | --------- | --------------- | ------ | ------ |
|
||||
| show | 是否展示工具条 | boolean | true / false | false |
|
||||
| showIcon | 是否显示工具图标 | boolean | true / false | true |
|
||||
| list | 工具条数组 (默认有 全选/清空, 可以自定义), 还有 REVERSE:反选 | array | - | [ "ALL", "CLEAR" ] |
|
||||
|
||||
> 自定义方式
|
||||
|
||||
```
|
||||
|
||||
list: [ "ALL", "CLEAR",
|
||||
{
|
||||
//显示图标, 可以是layui内置的图标, 也可以是自己引入的图标
|
||||
//传入的icon会转化为 <i class="layui-icon layui-icon-face-smile"></i>
|
||||
icon: 'layui-icon layui-icon-face-smile',
|
||||
//显示名称
|
||||
name: 'xxx',
|
||||
//点击时触发的回调
|
||||
method: function(data){
|
||||
//data 当前页面的数据
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
### 全局方法
|
||||
|
||||
|
||||
| 事件名 | 说明 | 参数 | 返回值 |
|
||||
| ------ | ------------------ | -------- | -------- |
|
||||
| render | 渲染多选 | (options: 配置项) | 实例对象 |
|
||||
| get | 获取页面中已经渲染的多选 | (filter: 过滤`el`, single: 是否返回单实例) | 符合条件的实例数组 |
|
||||
| batch | 批量操作已渲染的多选 | (filter: 过滤`el`, method: 方法, ...方法参数) | 符合条件的实例数组 |
|
||||
|
||||
```
|
||||
//render 使用方式
|
||||
xmSelect.render(OPTIONS);
|
||||
|
||||
//get 使用方式
|
||||
xmSelect.get('#demo1'); //指定某一个获取
|
||||
xmSelect.get(/.*demo1.*/); //正则获取
|
||||
//自定义方法获取
|
||||
xmSelect.get(function(el){
|
||||
return el == '#demo1' || el == '#demo2';
|
||||
});
|
||||
//单实例
|
||||
xmSelect.get('#demo2', true);
|
||||
|
||||
//batch 使用方式
|
||||
//批量执行禁用
|
||||
xmSelect.batch(/.*demo/, 'update', {
|
||||
disabled: true,
|
||||
});
|
||||
//批量执行warning
|
||||
xmSelect.batch(/.*demo/, 'warning', '#F00', true);
|
||||
```
|
||||
|
||||
|
||||
### 实例方法
|
||||
|
||||
:::warning
|
||||
xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
|
||||
:::
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| ------ | ------------------ | -------- |
|
||||
| getValue | 获取当前选中的数据 | (type: 类型), 可选值: name, nameStr, value, valueStr |
|
||||
| setValue | 动态设置数据 | (array: 选中的数据, show: 是否展开下拉,不传默认当前显示状态,取值: true/false, listenOn: 是否触发on的监听, 默认false) |
|
||||
| append | 追加赋值 | (array: 追加的数据) |
|
||||
| delete | 删除赋值 | (array: 删除的数据) |
|
||||
| opened | 主动展开下拉 | - |
|
||||
| closed | 主动关闭下拉 | - |
|
||||
| reset | 重置为上一次的render状态 | - |
|
||||
| update | 更新多选选中, reset不保留 | (options: 见配置项) |
|
||||
| warning | 警告 | (color: 默认同theme.maxColor, sustain: 是否持续显示) |
|
||||
## 配置项与方法
|
||||
|
||||
|
||||
### 配置项
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ----------------- | ------------------------------ | --------------- | ------ | ------ |
|
||||
| el | 渲染对象, css选择器 | string | - | - |
|
||||
| language | 语言选择 | string | zn / en | zn |
|
||||
| data | 显示的数据 | array | - | [ ] |
|
||||
| content | 自定义下拉框html | string | - | - |
|
||||
| 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 | - | - |
|
||||
| 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 |
|
||||
| style | 自定义样式| object | - | { } |
|
||||
| height | 默认最大高度| string | - | 200px |
|
||||
| paging | 是否开启自定义分页 | boolean | true / false | false |
|
||||
| pageSize | 分页条数 | int | - | 10 |
|
||||
| pageEmptyShow | 分页无数据是否显示 | boolean | true / false | true |
|
||||
| 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, change, isAdd }) | - | - |
|
||||
| max | 设置多选选中上限 | int | - | 0 |
|
||||
| maxMethod | 达到选中上限的回到 | function(sels, item), sels: 已选中数据, item: 当前选中的值 | - | - |
|
||||
| name | 表单提交时的name | string | - | select |
|
||||
| toolbar | 工具条, 具体看下表 | object | - | - |
|
||||
| showCount | 展示在下拉框中的最多选项数量 | int | - | 0 |
|
||||
| autoRow | 是否开启自动换行(选项过多时) | boolean | true / false | false |
|
||||
| size | 尺寸 | string | large / medium / small / mini | medium |
|
||||
| disabled | 是否禁用多选 | boolean | true / false | false |
|
||||
| create | 创建条目 | function(val, data), val: 搜索的数据, data: 当前下拉数据 | - | null |
|
||||
| tree | 树形结构, 具体看下表 | object | - | - |
|
||||
|
||||
|
||||
### prop
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ----------------- | ------------------------------ | --------------- | ------ | ------ |
|
||||
| name | 显示名称 | string | - | name |
|
||||
| value | 选中值, 当前多选唯一 | string | - | value |
|
||||
| selected | 是否选中 | string | - | selected |
|
||||
| disabled | 是否禁用 | string | - | disabled |
|
||||
| children | 分组children | string | - | children |
|
||||
| optgroup | 分组optgroup | string | - | optgroup |
|
||||
|
||||
|
||||
### 分组说明
|
||||
|
||||
如果children属性为数组的时候开启分组模式
|
||||
|
||||
```
|
||||
{name: '销售员', children: [
|
||||
{name: '李四', value: 4, selected: true},
|
||||
{name: '王五', value: 5},
|
||||
]},
|
||||
|
||||
//可在分组上定义click属性, 来定义点击事件
|
||||
{name: '选中', children: [...], click: 'SELECT'},
|
||||
{name: '清空', children: [...], click: 'CLEAR'},
|
||||
{name: '自动', children: [...], click: 'AUTO'},
|
||||
{name: '自定义', children: [...], click: function(item){
|
||||
alert('自定义的, 想干嘛干嘛');
|
||||
}},
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
### theme
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ------------ | --------- | --------------- | ------ | ------ |
|
||||
| color | 主题颜色 | string | - | #009688 |
|
||||
| maxColor | 选中上限闪烁边框颜色 | string | - | #e54d42 |
|
||||
|
||||
|
||||
### model
|
||||
|
||||
目前仅配置label即可
|
||||
|
||||
```
|
||||
model: {
|
||||
//是否展示复选框或者单选框图标 show, hidden:变换背景色
|
||||
icon: 'show',
|
||||
label: {
|
||||
//使用方式
|
||||
type: 'block',
|
||||
//使用字符串拼接的方式
|
||||
text: {
|
||||
//左边拼接的字符
|
||||
left: '',
|
||||
//右边拼接的字符
|
||||
right: '',
|
||||
//中间的分隔符
|
||||
separator: ', ',
|
||||
},
|
||||
//使用方块显示
|
||||
block: {
|
||||
//最大显示数量, 0:不限制
|
||||
showCount: 0,
|
||||
//是否显示删除图标
|
||||
showIcon: true,
|
||||
},
|
||||
//自定义文字
|
||||
count: {
|
||||
//函数处理
|
||||
template(data, sels){
|
||||
//data: 所有的数据
|
||||
//sels: 选中的数据
|
||||
return `已选中 ${sels.length} 项, 共 ${data.length} 项`
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
```
|
||||
|
||||
|
||||
### toolbar
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ------------ | --------- | --------------- | ------ | ------ |
|
||||
| show | 是否展示工具条 | boolean | true / false | false |
|
||||
| showIcon | 是否显示工具图标 | boolean | true / false | true |
|
||||
| list | 工具条数组 (默认有 全选/清空, 可以自定义), 还有 REVERSE:反选 | array | - | [ "ALL", "CLEAR" ] |
|
||||
|
||||
> 自定义方式
|
||||
|
||||
```
|
||||
|
||||
list: [ "ALL", "CLEAR",
|
||||
{
|
||||
//显示图标, 可以是layui内置的图标, 也可以是自己引入的图标
|
||||
//传入的icon会转化为 <i class="layui-icon layui-icon-face-smile"></i>
|
||||
icon: 'layui-icon layui-icon-face-smile',
|
||||
//显示名称
|
||||
name: 'xxx',
|
||||
//点击时触发的回调
|
||||
method: function(data){
|
||||
//data 当前页面的数据
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
```
|
||||
|
||||
### tree
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ------------ | --------- | --------------- | ------ | ------ |
|
||||
| show | 是否展示为树状结构 | boolean | true / false | false |
|
||||
| showFolderIcon | 是否显示节点前的三角图标 | boolean | true / false | true |
|
||||
| showLine | 是否显示虚线 | boolean | true / false | true |
|
||||
| indent | 间距 | int | - | 20 |
|
||||
| expandedKeys | 默认展开的节点数组 | array | - | [ ] |
|
||||
|
||||
|
||||
### 全局方法
|
||||
|
||||
|
||||
| 事件名 | 说明 | 参数 | 返回值 |
|
||||
| ------ | ------------------ | -------- | -------- |
|
||||
| render | 渲染多选 | (options: 配置项) | 实例对象 |
|
||||
| get | 获取页面中已经渲染的多选 | (filter: 过滤`el`, single: 是否返回单实例) | 符合条件的实例数组 |
|
||||
| batch | 批量操作已渲染的多选 | (filter: 过滤`el`, method: 方法, ...方法参数) | 符合条件的实例数组 |
|
||||
|
||||
```
|
||||
//render 使用方式
|
||||
xmSelect.render(OPTIONS);
|
||||
|
||||
//get 使用方式
|
||||
xmSelect.get('#demo1'); //指定某一个获取
|
||||
xmSelect.get(/.*demo1.*/); //正则获取
|
||||
//自定义方法获取
|
||||
xmSelect.get(function(el){
|
||||
return el == '#demo1' || el == '#demo2';
|
||||
});
|
||||
//单实例
|
||||
xmSelect.get('#demo2', true);
|
||||
|
||||
//batch 使用方式
|
||||
//批量执行禁用
|
||||
xmSelect.batch(/.*demo/, 'update', {
|
||||
disabled: true,
|
||||
});
|
||||
//批量执行warning
|
||||
xmSelect.batch(/.*demo/, 'warning', '#F00', true);
|
||||
```
|
||||
|
||||
|
||||
### 实例方法
|
||||
|
||||
:::warning
|
||||
xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
|
||||
:::
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| ------ | ------------------ | -------- |
|
||||
| getValue | 获取当前选中的数据 | (type: 类型), 可选值: name, nameStr, value, valueStr |
|
||||
| setValue | 动态设置数据 | (array: 选中的数据, show: 是否展开下拉,不传默认当前显示状态,取值: true/false, listenOn: 是否触发on的监听, 默认false) |
|
||||
| append | 追加赋值 | (array: 追加的数据) |
|
||||
| delete | 删除赋值 | (array: 删除的数据) |
|
||||
| opened | 主动展开下拉 | - |
|
||||
| closed | 主动关闭下拉 | - |
|
||||
| reset | 重置为上一次的render状态 | - |
|
||||
| update | 更新多选选中, reset不保留 | (options: 见配置项) |
|
||||
| warning | 警告 | (color: 默认同theme.maxColor, sustain: 是否持续显示) |
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
## 常见问题
|
||||
|
||||
|
||||
### formSelects 与 xm-select
|
||||
|
||||
[formSelects](https://github.com/hnzzmsf/layui-formSelects/)是作者很久以前开发的一款多选插件, 在jQuery时代还是相对比较稳定, 不过性能上有很大的问题。痛并思痛后，开始学习其他开源组件的编写方案，最后决定重新开发。
|
||||
|
||||
[xm-select](https://gitee.com/maplemei/xm-select)作者精心二次开发的组件, 在formSelects的样式基础上进行了性能优化。目前看来还是比较稳定的 ^_^
|
||||
|
||||
|
||||
### 1.在哪里下载
|
||||
|
||||
[Gitee码云下载](https://gitee.com/maplemei/xm-select/releases), 使用时引入`xm-select.js`即可, 已经内置了css, 具体请看[入门指南](/#/component/install)
|
||||
|
||||
|
||||
### 2.为什么多选不显示
|
||||
|
||||
重要的事情说三遍, 需要渲染, 需要渲染, 需要渲染
|
||||
|
||||
|
||||
### 3.渲染后还是不显示
|
||||
|
||||
- 打开控制台查看是否报错
|
||||
- 加群: 660408068, 询问
|
||||
|
||||
|
||||
### 4.占位标签为什么是div
|
||||
|
||||
演示中使用的是div, 不限制标签, 但是不建议使用`select`, 因为`layui`会渲染`select`标签
|
||||
|
||||
|
||||
### 5.动态数据渲染报错
|
||||
|
||||
|
||||
|
||||
检查设置的data数据是否为数组类型
|
||||
|
||||
```
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
data: []
|
||||
})
|
||||
|
||||
//....N多操作以后
|
||||
var arr = data;//这里的data可能是ajax返回的数据
|
||||
|
||||
//这里必须是 [object Array]
|
||||
console.log(Object.prototype.toString.call(arr));
|
||||
//如果是 [object String]
|
||||
//1. JSON数据
|
||||
arr = JSON.parse(arr);
|
||||
//2. 类似JSON的数据
|
||||
arr = eval('(' + arr + ')');
|
||||
|
||||
demo1.update({
|
||||
data: arr,
|
||||
})
|
||||
|
||||
|
||||
```
|
||||
## 常见问题
|
||||
|
||||
|
||||
### formSelects 与 xm-select
|
||||
|
||||
[formSelects](https://github.com/hnzzmsf/layui-formSelects/)是作者很久以前开发的一款多选插件, 在jQuery时代还是相对比较稳定, 不过性能上有很大的问题。痛并思痛后，开始学习其他开源组件的编写方案，最后决定重新开发。
|
||||
|
||||
[xm-select](https://gitee.com/maplemei/xm-select)作者精心二次开发的组件, 在formSelects的样式基础上进行了性能优化。目前看来还是比较稳定的 ^_^
|
||||
|
||||
|
||||
### 1.在哪里下载
|
||||
|
||||
[Gitee码云下载](https://gitee.com/maplemei/xm-select/releases), 使用时引入`xm-select.js`即可, 已经内置了css, 具体请看[入门指南](/#/component/install)
|
||||
|
||||
|
||||
### 2.为什么多选不显示
|
||||
|
||||
重要的事情说三遍, 需要渲染, 需要渲染, 需要渲染
|
||||
|
||||
|
||||
### 3.渲染后还是不显示
|
||||
|
||||
- 打开控制台查看是否报错
|
||||
- 加群: 660408068, 询问
|
||||
|
||||
|
||||
### 4.占位标签为什么是div
|
||||
|
||||
演示中使用的是div, 不限制标签, 但是不建议使用`select`, 因为`layui`会渲染`select`标签
|
||||
|
||||
|
||||
### 5.动态数据渲染报错
|
||||
|
||||
|
||||
|
||||
检查设置的data数据是否为数组类型
|
||||
|
||||
```
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
data: []
|
||||
})
|
||||
|
||||
//....N多操作以后
|
||||
var arr = data;//这里的data可能是ajax返回的数据
|
||||
|
||||
//这里必须是 [object Array]
|
||||
console.log(Object.prototype.toString.call(arr));
|
||||
//如果是 [object String]
|
||||
//1. JSON数据
|
||||
arr = JSON.parse(arr);
|
||||
//2. 类似JSON的数据
|
||||
arr = eval('(' + arr + ')');
|
||||
|
||||
demo1.update({
|
||||
data: arr,
|
||||
})
|
||||
|
||||
|
||||
```
|
||||
|
||||
@@ -1,168 +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;
|
||||
}
|
||||
/* #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 */
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,2 +1,2 @@
|
||||
import './eleTree/eleTree.js'
|
||||
import './eleTree/eleTree.js'
|
||||
import './eleTree/eleTree.css'
|
||||
237
docs/router.js
237
docs/router.js
@@ -1,118 +1,119 @@
|
||||
import Component from './components/component.vue';
|
||||
import { version } from '../package.json'
|
||||
|
||||
function importVue(path) {
|
||||
return r => require.ensure([], () => r(require(`./pages${path}.vue`)));
|
||||
}
|
||||
function importMd(path) {
|
||||
return r => require.ensure([], () => r(require(`./mds${path}.md`)));
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default [{
|
||||
path: '*',
|
||||
hidden: true,
|
||||
redirect: '/',
|
||||
},{
|
||||
path: '/',
|
||||
name: '/',
|
||||
hidden: true,
|
||||
redirect: '/component',
|
||||
}, {
|
||||
path: '/changelog',
|
||||
name: '更新日志 v' + version,
|
||||
component: importVue('/changelog'),
|
||||
}, {
|
||||
path: '/add',
|
||||
name: 'QQ群: 660408068',
|
||||
redirect: '/',
|
||||
}, {
|
||||
path: '/component',
|
||||
name: '入门指南',
|
||||
redirect: '/component/install',
|
||||
component: Component,
|
||||
children: [{
|
||||
path: '/component/install',
|
||||
name: '安装与使用',
|
||||
component: importMd('/install'),
|
||||
}, {
|
||||
path: '/component/options',
|
||||
name: '配置项与方法',
|
||||
component: importMd('/options'),
|
||||
}]
|
||||
}, {
|
||||
path: '/example',
|
||||
name: '示例',
|
||||
redirect: '/example/XM01',
|
||||
component: Component,
|
||||
children: [
|
||||
{ path: '/example/XM01', name: 'Base 基础使用', component: importMd('/XM01') },
|
||||
{ path: '/example/XM02', name: 'Language 国际化', component: importMd('/XM02') },
|
||||
{ path: '/example/XM03', name: 'InitValue 默认选中', component: importMd('/XM03') },
|
||||
{ path: '/example/XM04', name: 'Tips 修改提示', component: importMd('/XM04') },
|
||||
{ path: '/example/XM05', name: 'Filterable 搜索模式', component: importMd('/XM05') },
|
||||
{ path: '/example/XM06', name: 'Direction 下拉方向', component: importMd('/XM06') },
|
||||
{ path: '/example/XM07', name: 'Style 自定义样式', component: importMd('/XM07') },
|
||||
{ path: '/example/XM08', name: 'Paging 分页', component: importMd('/XM08') },
|
||||
{ path: '/example/XM09', name: 'Radio 单选', component: importMd('/XM09') },
|
||||
{ path: '/example/XM10', name: 'Repeat 重复选', component: importMd('/XM10') },
|
||||
{ path: '/example/XM11', name: 'Prop 自定义属性', component: importMd('/XM11') },
|
||||
{ path: '/example/XM12', name: 'Theme 主题', component: importMd('/XM12') },
|
||||
{ path: '/example/XM13', name: 'Show 显示与隐藏', component: importMd('/XM13') },
|
||||
{ path: '/example/XM14', name: 'Model 显示方式', component: importMd('/XM14') },
|
||||
{ path: '/example/XM15', name: 'Template 构建选项', component: importMd('/XM15') },
|
||||
{ path: '/example/XM16', name: 'On 监听选择', component: importMd('/XM16') },
|
||||
{ path: '/example/XM17', name: 'Test 性能测试', component: importMd('/XM17') },
|
||||
{ path: '/example/XM18', name: 'Max 多选上限', component: importMd('/XM18') },
|
||||
{ path: '/example/XM19', name: 'Toolbar 工具条', component: importMd('/XM19') },
|
||||
{ path: '/example/XM20', name: 'ShowCount 选项数量', component: importMd('/XM20') },
|
||||
{ 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/XM26', name: 'Disabled 禁用', component: importMd('/XM26') },
|
||||
{ path: '/example/XM27', name: 'Create 创建条目', component: importMd('/XM27') },
|
||||
]
|
||||
}, {
|
||||
path: '/example-custom',
|
||||
name: '进阶示例',
|
||||
redirect: '/example-custom/ZM01',
|
||||
component: Component,
|
||||
children: [
|
||||
{ path: '/example-custom/ZM01', name: '赋值与取值', component: importMd('/ZM01') },
|
||||
{ path: '/example-custom/ZM02', name: '表单提交', component: importMd('/ZM02') },
|
||||
{ path: '/example-custom/ZM03', name: '表格中多选', component: importMd('/ZM03') },
|
||||
{ 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/ZM07', name: '获取实例对象', component: importMd('/ZM07') },
|
||||
{ path: '/example-custom/ZM08', name: '批量操作', component: importMd('/ZM08') },
|
||||
]
|
||||
}, {
|
||||
path: '/example-plugin',
|
||||
name: '拓展中心',
|
||||
redirect: '/example-plugin/ZP01',
|
||||
component: Component,
|
||||
children: [
|
||||
{ path: '/example-plugin/ZP01', name: '下拉自定义', component: importMd('/ZP01') },
|
||||
{ path: '/example-plugin/ZP02', name: '下拉树 EleTree', component: importMd('/ZP02') },
|
||||
// { path: '/example-plugin/ZP03', name: '下拉树 LayuiTree', component: importMd('/ZP03') },
|
||||
]
|
||||
}, {
|
||||
path: '/question',
|
||||
name: '常见问题',
|
||||
component: importMd('/question'),
|
||||
}, {
|
||||
path: '/es6',
|
||||
name: 'es6语法说明',
|
||||
component: importMd('/es6'),
|
||||
}, {
|
||||
path: '/test',
|
||||
name: '测试',
|
||||
hidden: true,
|
||||
component: importMd('/ZTEST'),
|
||||
},
|
||||
|
||||
];
|
||||
import Component from './components/component.vue';
|
||||
import { version } from '../package.json'
|
||||
|
||||
function importVue(path) {
|
||||
return r => require.ensure([], () => r(require(`./pages${path}.vue`)));
|
||||
}
|
||||
function importMd(path) {
|
||||
return r => require.ensure([], () => r(require(`./mds${path}.md`)));
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default [{
|
||||
path: '*',
|
||||
hidden: true,
|
||||
redirect: '/',
|
||||
},{
|
||||
path: '/',
|
||||
name: '/',
|
||||
hidden: true,
|
||||
redirect: '/component',
|
||||
}, {
|
||||
path: '/changelog',
|
||||
name: '更新日志 v' + version,
|
||||
component: importVue('/changelog'),
|
||||
}, {
|
||||
path: '/add',
|
||||
name: 'QQ群: 660408068',
|
||||
redirect: '/',
|
||||
}, {
|
||||
path: '/component',
|
||||
name: '入门指南',
|
||||
redirect: '/component/install',
|
||||
component: Component,
|
||||
children: [{
|
||||
path: '/component/install',
|
||||
name: '安装与使用',
|
||||
component: importMd('/install'),
|
||||
}, {
|
||||
path: '/component/options',
|
||||
name: '配置项与方法',
|
||||
component: importMd('/options'),
|
||||
}]
|
||||
}, {
|
||||
path: '/example',
|
||||
name: '示例',
|
||||
redirect: '/example/XM01',
|
||||
component: Component,
|
||||
children: [
|
||||
{ path: '/example/XM01', name: 'Base 基础使用', component: importMd('/XM01') },
|
||||
{ path: '/example/XM02', name: 'Language 国际化', component: importMd('/XM02') },
|
||||
{ path: '/example/XM03', name: 'InitValue 默认选中', component: importMd('/XM03') },
|
||||
{ path: '/example/XM04', name: 'Tips 修改提示', component: importMd('/XM04') },
|
||||
{ path: '/example/XM05', name: 'Filterable 搜索模式', component: importMd('/XM05') },
|
||||
{ path: '/example/XM06', name: 'Direction 下拉方向', component: importMd('/XM06') },
|
||||
{ path: '/example/XM07', name: 'Style 自定义样式', component: importMd('/XM07') },
|
||||
{ path: '/example/XM08', name: 'Paging 分页', component: importMd('/XM08') },
|
||||
{ path: '/example/XM09', name: 'Radio 单选', component: importMd('/XM09') },
|
||||
{ path: '/example/XM10', name: 'Repeat 重复选', component: importMd('/XM10') },
|
||||
{ path: '/example/XM11', name: 'Prop 自定义属性', component: importMd('/XM11') },
|
||||
{ path: '/example/XM12', name: 'Theme 主题', component: importMd('/XM12') },
|
||||
{ path: '/example/XM13', name: 'Show 显示与隐藏', component: importMd('/XM13') },
|
||||
{ path: '/example/XM14', name: 'Model 显示方式', component: importMd('/XM14') },
|
||||
{ path: '/example/XM15', name: 'Template 构建选项', component: importMd('/XM15') },
|
||||
{ path: '/example/XM16', name: 'On 监听选择', component: importMd('/XM16') },
|
||||
{ path: '/example/XM17', name: 'Test 性能测试', component: importMd('/XM17') },
|
||||
{ path: '/example/XM18', name: 'Max 多选上限', component: importMd('/XM18') },
|
||||
{ path: '/example/XM19', name: 'Toolbar 工具条', component: importMd('/XM19') },
|
||||
{ path: '/example/XM20', name: 'ShowCount 选项数量', component: importMd('/XM20') },
|
||||
{ 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/XM26', name: 'Disabled 禁用', component: importMd('/XM26') },
|
||||
{ path: '/example/XM27', name: 'Create 创建条目', component: importMd('/XM27') },
|
||||
]
|
||||
}, {
|
||||
path: '/example-custom',
|
||||
name: '进阶示例',
|
||||
redirect: '/example-custom/ZM01',
|
||||
component: Component,
|
||||
children: [
|
||||
{ path: '/example-custom/ZM01', name: '赋值与取值', component: importMd('/ZM01') },
|
||||
{ path: '/example-custom/ZM02', name: '表单提交', component: importMd('/ZM02') },
|
||||
{ path: '/example-custom/ZM03', name: '表格中多选', component: importMd('/ZM03') },
|
||||
{ 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/ZM07', name: '获取实例对象', component: importMd('/ZM07') },
|
||||
{ path: '/example-custom/ZM08', name: '批量操作', component: importMd('/ZM08') },
|
||||
]
|
||||
}, {
|
||||
path: '/example-plugin',
|
||||
name: '拓展中心',
|
||||
redirect: '/example-plugin/ZP01',
|
||||
component: Component,
|
||||
children: [
|
||||
{ path: '/example-plugin/ZP01', name: '下拉自定义', component: importMd('/ZP01') },
|
||||
{ path: '/example-plugin/ZP02', name: '下拉树 Tree', component: importMd('/ZP02') },
|
||||
{ path: '/example-plugin/ZP03', name: '下拉日期多选', component: importMd('/ZP03') },
|
||||
]
|
||||
}, {
|
||||
path: '/question',
|
||||
name: '常见问题',
|
||||
component: importMd('/question'),
|
||||
}, {
|
||||
path: '/es6',
|
||||
name: 'es6语法说明',
|
||||
component: importMd('/es6'),
|
||||
}, {
|
||||
path: '/test',
|
||||
name: '测试',
|
||||
hidden: true,
|
||||
// hidden: false,
|
||||
component: importMd('/ZTEST'),
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user