init
This commit is contained in:
maplemei
parent
5dd011eaec
commit
f27ae9ba9f
5
.babelrc
Normal file
5
.babelrc
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"plugins": [
|
||||||
|
["transform-react-jsx", { "pragma":"h" }]
|
||||||
|
]
|
||||||
|
}
|
||||||
27
.gitignore
vendored
27
.gitignore
vendored
@ -1,26 +1,3 @@
|
|||||||
# General
|
|
||||||
.DS_Store
|
.DS_Store
|
||||||
.AppleDouble
|
node_modules/*
|
||||||
.LSOverride
|
yarn.lock
|
||||||
|
|
||||||
# Icon must end with two \r
|
|
||||||
Icon
|
|
||||||
|
|
||||||
# Thumbnails
|
|
||||||
._*
|
|
||||||
|
|
||||||
# Files that might appear in the root of a volume
|
|
||||||
.DocumentRevisions-V100
|
|
||||||
.fseventsd
|
|
||||||
.Spotlight-V100
|
|
||||||
.TemporaryItems
|
|
||||||
.Trashes
|
|
||||||
.VolumeIcon.icns
|
|
||||||
.com.apple.timemachine.donotpresent
|
|
||||||
|
|
||||||
# Directories potentially created on remote AFP share
|
|
||||||
.AppleDB
|
|
||||||
.AppleDesktop
|
|
||||||
Network Trash Folder
|
|
||||||
Temporary Items
|
|
||||||
.apdisk
|
|
||||||
2
LICENSE
2
LICENSE
@ -186,7 +186,7 @@
|
|||||||
same "printed page" as the copyright notice for easier
|
same "printed page" as the copyright notice for easier
|
||||||
identification within third-party archives.
|
identification within third-party archives.
|
||||||
|
|
||||||
Copyright [yyyy] [name of copyright owner]
|
Copyright [2019] [maplemei@aliyun.com]
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
you may not use this file except in compliance with the License.
|
you may not use this file except in compliance with the License.
|
||||||
|
|||||||
31
README.en.md
31
README.en.md
@ -3,34 +3,3 @@
|
|||||||
#### Description
|
#### Description
|
||||||
基于Layui, 下拉选择框的多选解决方案
|
基于Layui, 下拉选择框的多选解决方案
|
||||||
|
|
||||||
#### Software Architecture
|
|
||||||
Software architecture description
|
|
||||||
|
|
||||||
#### Installation
|
|
||||||
|
|
||||||
1. xxxx
|
|
||||||
2. xxxx
|
|
||||||
3. xxxx
|
|
||||||
|
|
||||||
#### Instructions
|
|
||||||
|
|
||||||
1. xxxx
|
|
||||||
2. xxxx
|
|
||||||
3. xxxx
|
|
||||||
|
|
||||||
#### Contribution
|
|
||||||
|
|
||||||
1. Fork the repository
|
|
||||||
2. Create Feat_xxx branch
|
|
||||||
3. Commit your code
|
|
||||||
4. Create Pull Request
|
|
||||||
|
|
||||||
|
|
||||||
#### Gitee Feature
|
|
||||||
|
|
||||||
1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
|
|
||||||
2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
|
|
||||||
3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
|
|
||||||
4. The most valuable open source project [GVP](https://gitee.com/gvp)
|
|
||||||
5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
|
|
||||||
6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
|
|
||||||
343
README.md
343
README.md
@ -4,34 +4,335 @@
|
|||||||
基于Layui, 下拉选择框的多选解决方案
|
基于Layui, 下拉选择框的多选解决方案
|
||||||
|
|
||||||
#### 软件架构
|
#### 软件架构
|
||||||
软件架构说明
|
1. 引入第三方[preact](https://preactjs.com/)库, 利用jsx渲染页面结构
|
||||||
|
2. 使用[webpack](https://www.webpackjs.com/)进行打包
|
||||||
|
|
||||||
#### 安装教程
|
#### 安装教程
|
||||||
|
```
|
||||||
1. xxxx
|
1. git clone https://gitee.com/maplemei/xm-select.git
|
||||||
2. xxxx
|
2. cd xm-select
|
||||||
3. xxxx
|
3. yarn 或者 npm install
|
||||||
|
```
|
||||||
|
|
||||||
#### 使用说明
|
#### 使用说明
|
||||||
|
|
||||||
1. xxxx
|
> 历史版本
|
||||||
2. xxxx
|
|
||||||
3. xxxx
|
|
||||||
|
|
||||||
#### 参与贡献
|
[formSelectes](https://github.com/hnzzmsf/layui-formSelects)
|
||||||
|
|
||||||
1. Fork 本仓库
|
> 联系方式
|
||||||
2. 新建 Feat_xxx 分支
|
|
||||||
3. 提交代码
|
QQ群: 769620939
|
||||||
4. 新建 Pull Request
|
|
||||||
|
> 默认配置项
|
||||||
|
|
||||||
|
```
|
||||||
|
{
|
||||||
|
//多选数据
|
||||||
|
data: [],
|
||||||
|
//默认选中数据, 优先级大于selected
|
||||||
|
initValue: null,
|
||||||
|
//默认提示
|
||||||
|
tips: '请选择', //please selected
|
||||||
|
//空数据提示
|
||||||
|
empty: '暂无数据', //no data
|
||||||
|
//自定义属性名称
|
||||||
|
prop: {
|
||||||
|
name: 'name',
|
||||||
|
value: 'value',
|
||||||
|
selected: 'selected',
|
||||||
|
disabled: 'disabled',
|
||||||
|
},
|
||||||
|
//主题配置
|
||||||
|
theme: {
|
||||||
|
color: '#009688',
|
||||||
|
},
|
||||||
|
//模型
|
||||||
|
model: {
|
||||||
|
label: {
|
||||||
|
type: 'block',
|
||||||
|
text: {
|
||||||
|
left: '',
|
||||||
|
right: '',
|
||||||
|
separator: ', ',
|
||||||
|
},
|
||||||
|
block: {
|
||||||
|
showCount: 0,
|
||||||
|
showIcon: true,
|
||||||
|
},
|
||||||
|
count: {
|
||||||
|
template(data, sels){
|
||||||
|
return "已选中 " + sels.length + " 项, 共 " + data.length + " 项"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 展开下拉框, return false; 代表组件受控
|
||||||
|
show(){
|
||||||
|
|
||||||
|
},
|
||||||
|
// 隐藏下拉框, return false; 代表组件受控
|
||||||
|
hidn(){
|
||||||
|
|
||||||
|
},
|
||||||
|
// 模板组成, 当前option数据, 已经选中的数据, name, value
|
||||||
|
template(item, sels, name, value){
|
||||||
|
return name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
> 默认方法
|
||||||
|
|
||||||
|
```
|
||||||
|
//更新组件
|
||||||
|
xmSelect: update(options)
|
||||||
|
|
||||||
|
//重置组件
|
||||||
|
xmSelect: reset()
|
||||||
|
|
||||||
|
//重新渲染
|
||||||
|
xmSelect: render(options)
|
||||||
|
|
||||||
|
//主动关闭
|
||||||
|
xmSelect: opened()
|
||||||
|
|
||||||
|
//主动关闭
|
||||||
|
xmSelect: closed()
|
||||||
|
|
||||||
|
//获取已选中数据
|
||||||
|
xmSelect: getValue()
|
||||||
|
|
||||||
|
//设置选中数据, array: 选中数据, show: 是否展开下拉框
|
||||||
|
xmSelect: setValue(array, show)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 示例
|
||||||
|
|
||||||
|
```
|
||||||
|
<h3>这是一个多选</h3>
|
||||||
|
<div id="demo1"></div>
|
||||||
|
|
||||||
|
<h3>这是一个国际版多选</h3>
|
||||||
|
<div id="demo2"></div>
|
||||||
|
|
||||||
|
<h3>有基础数据</h3>
|
||||||
|
<div id="demo3"></div>
|
||||||
|
|
||||||
|
<h3>有选中, 禁用的</h3>
|
||||||
|
<div id="demo4"></div>
|
||||||
|
|
||||||
|
<h3>自定义key</h3>
|
||||||
|
<div id="demo5"></div>
|
||||||
|
|
||||||
|
<h3>使用template自己构建选项1</h3>
|
||||||
|
<div id="demo6"></div>
|
||||||
|
|
||||||
|
<h3>使用template自己构建选项2</h3>
|
||||||
|
<div id="demo7"></div>
|
||||||
|
|
||||||
|
<h3>简单的展示形式1</h3>
|
||||||
|
<div id="demo8"></div>
|
||||||
|
|
||||||
|
<h3>简单的展示形式2</h3>
|
||||||
|
<div id="demo9"></div>
|
||||||
|
|
||||||
|
<h3>自定义展示</h3>
|
||||||
|
<div id="demo10"></div>
|
||||||
|
|
||||||
|
<h3>多余的用 +隐藏</h3>
|
||||||
|
<div id="demo11"></div>
|
||||||
|
|
||||||
|
<h3>不显示删除图标</h3>
|
||||||
|
<div id="demo12"></div>
|
||||||
|
|
||||||
|
<h3>换一个主题</h3>
|
||||||
|
<div id="demo13"></div>
|
||||||
|
|
||||||
|
|
||||||
#### 码云特技
|
<script src="../dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
var demo1 = xmSelect.render({
|
||||||
|
el: '#demo1',
|
||||||
|
language: 'zn',
|
||||||
|
isShow: true,
|
||||||
|
})
|
||||||
|
|
||||||
1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
|
var demo2 = xmSelect.render({
|
||||||
2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com)
|
el: '#demo2',
|
||||||
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
|
language: 'en'
|
||||||
4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
|
})
|
||||||
5. 码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
|
|
||||||
6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
|
var demo3 = xmSelect.render({
|
||||||
|
el: '#demo3',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1},
|
||||||
|
{name: '蔬菜', value: 2},
|
||||||
|
{name: '桌子', value: 3},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo4 = xmSelect.render({
|
||||||
|
el: '#demo4',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo5 = xmSelect.render({
|
||||||
|
el: '#demo5',
|
||||||
|
data: [
|
||||||
|
{label: '水果', val: 1, sel: true, dis: true},
|
||||||
|
{label: '蔬菜', val: 2, sel: true},
|
||||||
|
{label: '桌子', val: 3, dis: true},
|
||||||
|
{label: '北京', val: 4},
|
||||||
|
],
|
||||||
|
prop: {
|
||||||
|
name: 'label',
|
||||||
|
value: 'val',
|
||||||
|
selected: 'sel',
|
||||||
|
disabled: 'dis'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo6 = xmSelect.render({
|
||||||
|
el: '#demo6',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
],
|
||||||
|
template: function(item, sels, name, value){
|
||||||
|
return name + '<span style="color: red; margin-left: 20px;">'+value+'</span>'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo7 = xmSelect.render({
|
||||||
|
el: '#demo7',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
],
|
||||||
|
template: function(item, sels, name, value){
|
||||||
|
return name + '<span style="position: absolute; right: 10px; color: red">'+value+'</span>'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo8 = xmSelect.render({
|
||||||
|
el: '#demo8',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
],
|
||||||
|
model: {
|
||||||
|
label: {
|
||||||
|
type: 'text',
|
||||||
|
text: {
|
||||||
|
left: '<',
|
||||||
|
right: '>',
|
||||||
|
separator: ', ',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo9 = xmSelect.render({
|
||||||
|
el: '#demo9',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
],
|
||||||
|
model: {
|
||||||
|
label: {
|
||||||
|
type: 'count',
|
||||||
|
count: {
|
||||||
|
template(data, sels){
|
||||||
|
return "已选中 " + sels.length + " 项, 共 " + data.length + " 项"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo10 = xmSelect.render({
|
||||||
|
el: '#demo10',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
],
|
||||||
|
model: {
|
||||||
|
label: {
|
||||||
|
type: 'count',
|
||||||
|
count: {
|
||||||
|
template(data, sels){
|
||||||
|
return "我是自定义的... 已选中 " + sels.length + " 项, 共 " + data.length + " 项"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo11 = xmSelect.render({
|
||||||
|
el: '#demo11',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
],
|
||||||
|
model: {
|
||||||
|
label: {
|
||||||
|
type: 'block',
|
||||||
|
block: {
|
||||||
|
showCount: 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo12 = xmSelect.render({
|
||||||
|
el: '#demo12',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
],
|
||||||
|
model: {
|
||||||
|
label: {
|
||||||
|
type: 'block',
|
||||||
|
block: {
|
||||||
|
showCount: 1,
|
||||||
|
showIcon: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo13 = xmSelect.render({
|
||||||
|
el: '#demo13',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
color: 'red',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|||||||
1
dist/index.html
vendored
Normal file
1
dist/index.html
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
<!DOCTYPE html><html><head><link rel="preload" href="xm-select.js" as="script"><meta charset="utf-8"><title>xm-select</title></head><body><div id="demo1"></div><script type="text/javascript" src="xm-select.js"></script></body></html>
|
||||||
1
dist/xm-select.js
vendored
Normal file
1
dist/xm-select.js
vendored
Normal file
File diff suppressed because one or more lines are too long
240
docs/index.html
Normal file
240
docs/index.html
Normal file
@ -0,0 +1,240 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title></title>
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
||||||
|
<style>
|
||||||
|
body{padding-bottom: 300px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h3>这是一个多选</h3>
|
||||||
|
<div id="demo1"></div>
|
||||||
|
|
||||||
|
<h3>这是一个国际版多选</h3>
|
||||||
|
<div id="demo2"></div>
|
||||||
|
|
||||||
|
<h3>有基础数据</h3>
|
||||||
|
<div id="demo3"></div>
|
||||||
|
|
||||||
|
<h3>有选中, 禁用的</h3>
|
||||||
|
<div id="demo4"></div>
|
||||||
|
|
||||||
|
<h3>自定义key</h3>
|
||||||
|
<div id="demo5"></div>
|
||||||
|
|
||||||
|
<h3>使用template自己构建选项1</h3>
|
||||||
|
<div id="demo6"></div>
|
||||||
|
|
||||||
|
<h3>使用template自己构建选项2</h3>
|
||||||
|
<div id="demo7"></div>
|
||||||
|
|
||||||
|
<h3>简单的展示形式1</h3>
|
||||||
|
<div id="demo8"></div>
|
||||||
|
|
||||||
|
<h3>简单的展示形式2</h3>
|
||||||
|
<div id="demo9"></div>
|
||||||
|
|
||||||
|
<h3>自定义展示</h3>
|
||||||
|
<div id="demo10"></div>
|
||||||
|
|
||||||
|
<h3>多余的用 +隐藏</h3>
|
||||||
|
<div id="demo11"></div>
|
||||||
|
|
||||||
|
<h3>不显示删除图标</h3>
|
||||||
|
<div id="demo12"></div>
|
||||||
|
|
||||||
|
<h3>换一个主题</h3>
|
||||||
|
<div id="demo13"></div>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="../dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
var demo1 = xmSelect.render({
|
||||||
|
el: '#demo1',
|
||||||
|
language: 'zn',
|
||||||
|
isShow: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo2 = xmSelect.render({
|
||||||
|
el: '#demo2',
|
||||||
|
language: 'en'
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo3 = xmSelect.render({
|
||||||
|
el: '#demo3',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1},
|
||||||
|
{name: '蔬菜', value: 2},
|
||||||
|
{name: '桌子', value: 3},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo4 = xmSelect.render({
|
||||||
|
el: '#demo4',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo5 = xmSelect.render({
|
||||||
|
el: '#demo5',
|
||||||
|
data: [
|
||||||
|
{label: '水果', val: 1, sel: true, dis: true},
|
||||||
|
{label: '蔬菜', val: 2, sel: true},
|
||||||
|
{label: '桌子', val: 3, dis: true},
|
||||||
|
{label: '北京', val: 4},
|
||||||
|
],
|
||||||
|
prop: {
|
||||||
|
name: 'label',
|
||||||
|
value: 'val',
|
||||||
|
selected: 'sel',
|
||||||
|
disabled: 'dis'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo6 = xmSelect.render({
|
||||||
|
el: '#demo6',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
],
|
||||||
|
template: function(item, sels, name, value){
|
||||||
|
return name + '<span style="color: red; margin-left: 20px;">'+value+'</span>'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo7 = xmSelect.render({
|
||||||
|
el: '#demo7',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
],
|
||||||
|
template: function(item, sels, name, value){
|
||||||
|
return name + '<span style="position: absolute; right: 10px; color: red">'+value+'</span>'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo8 = xmSelect.render({
|
||||||
|
el: '#demo8',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
],
|
||||||
|
model: {
|
||||||
|
label: {
|
||||||
|
type: 'text',
|
||||||
|
text: {
|
||||||
|
left: '<',
|
||||||
|
right: '>',
|
||||||
|
separator: ', ',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo9 = xmSelect.render({
|
||||||
|
el: '#demo9',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
],
|
||||||
|
model: {
|
||||||
|
label: {
|
||||||
|
type: 'count',
|
||||||
|
count: {
|
||||||
|
template(data, sels){
|
||||||
|
return "已选中 " + sels.length + " 项, 共 " + data.length + " 项"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo10 = xmSelect.render({
|
||||||
|
el: '#demo10',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
],
|
||||||
|
model: {
|
||||||
|
label: {
|
||||||
|
type: 'count',
|
||||||
|
count: {
|
||||||
|
template(data, sels){
|
||||||
|
return "我是自定义的... 已选中 " + sels.length + " 项, 共 " + data.length + " 项"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo11 = xmSelect.render({
|
||||||
|
el: '#demo11',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
],
|
||||||
|
model: {
|
||||||
|
label: {
|
||||||
|
type: 'block',
|
||||||
|
block: {
|
||||||
|
showCount: 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo12 = xmSelect.render({
|
||||||
|
el: '#demo12',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
],
|
||||||
|
model: {
|
||||||
|
label: {
|
||||||
|
type: 'block',
|
||||||
|
block: {
|
||||||
|
showCount: 1,
|
||||||
|
showIcon: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var demo13 = xmSelect.render({
|
||||||
|
el: '#demo13',
|
||||||
|
data: [
|
||||||
|
{name: '水果', value: 1, selected: true, disabled: true},
|
||||||
|
{name: '蔬菜', value: 2, selected: true},
|
||||||
|
{name: '桌子', value: 3, disabled: true},
|
||||||
|
{name: '北京', value: 4},
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
color: 'red',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
28
package.json
Normal file
28
package.json
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"name": "xm-select",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "node_modules/.bin/webpack-dev-server",
|
||||||
|
"build": "webpack"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/core": "^7.4.0",
|
||||||
|
"@babel/preset-env": "^7.4.2",
|
||||||
|
"babel-loader": "^8.0.5",
|
||||||
|
"babel-plugin-transform-react-jsx": "^6.24.1",
|
||||||
|
"css-loader": "^2.1.1",
|
||||||
|
"less": "^3.9.0",
|
||||||
|
"less-loader": "^4.1.0",
|
||||||
|
"style-loader": "^0.23.1",
|
||||||
|
"webpack": "^4.29.6",
|
||||||
|
"webpack-cli": "^3.3.0",
|
||||||
|
"webpack-dev-server": "^3.2.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"html-webpack-plugin": "^3.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
59
src/components/common/util.js
Normal file
59
src/components/common/util.js
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
/**
|
||||||
|
* 选中dom元素
|
||||||
|
*/
|
||||||
|
export function selector(el) {
|
||||||
|
return document.querySelector(el);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 警告提示
|
||||||
|
*/
|
||||||
|
export function warn() {
|
||||||
|
let arr = [];
|
||||||
|
for (var i = 0; i < arguments.length; i++) {
|
||||||
|
arr.push(`${i + 1}. ${arguments[i]}`);
|
||||||
|
}
|
||||||
|
console.warn(arr.join('\n'));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 全局监听点击事件
|
||||||
|
*/
|
||||||
|
export function listenerClose(data, handler){
|
||||||
|
window.addEventListener('click', (e) => handler(e));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 安全拷贝数据
|
||||||
|
*/
|
||||||
|
export function safety(data){
|
||||||
|
return JSON.parse(JSON.stringify(data));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检测对象是否为数组
|
||||||
|
*/
|
||||||
|
export function isArray(obj){
|
||||||
|
return Object.prototype.toString.call(obj) == "[object Array]";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function watch(data) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
for (let key in data) {
|
||||||
|
let value = data[key];
|
||||||
|
Object.defineProperty(data, key, {
|
||||||
|
configurable: false, // 该状态下的属性描述符不能被修改和删除
|
||||||
|
enumerable: false, // 该状态下的属性描述符中的属性不可被枚举
|
||||||
|
get() {
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
set(newVal) {
|
||||||
|
if (newVal !== value) {
|
||||||
|
resolve(key, newVal, value);
|
||||||
|
value = newVal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
4
src/components/config/language/en.js
Normal file
4
src/components/config/language/en.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export default {
|
||||||
|
tips: 'please selected',
|
||||||
|
empty: 'no data',
|
||||||
|
}
|
||||||
4
src/components/config/language/zn.js
Normal file
4
src/components/config/language/zn.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export default {
|
||||||
|
tips: '请选择',
|
||||||
|
empty: '暂无数据',
|
||||||
|
}
|
||||||
67
src/components/config/options.js
Normal file
67
src/components/config/options.js
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import zn from './language/zn'
|
||||||
|
import en from './language/en'
|
||||||
|
|
||||||
|
const lanSetting = { zn, en }
|
||||||
|
|
||||||
|
export default function (lan = 'zn') {
|
||||||
|
let setting = lanSetting[lan] || zn;
|
||||||
|
|
||||||
|
return {
|
||||||
|
//多选数据
|
||||||
|
data: [],
|
||||||
|
//默认选中数据, 优先级大于selected
|
||||||
|
initValue: null,
|
||||||
|
//默认提示
|
||||||
|
tips: setting.tips,
|
||||||
|
//空数据提示
|
||||||
|
empty: setting.empty,
|
||||||
|
//是否重置多选
|
||||||
|
reset: false,
|
||||||
|
//用来判断多选是否显示
|
||||||
|
isShow: false,
|
||||||
|
//自定义属性名称
|
||||||
|
prop: {
|
||||||
|
name: 'name',
|
||||||
|
value: 'value',
|
||||||
|
selected: 'selected',
|
||||||
|
disabled: 'disabled',
|
||||||
|
},
|
||||||
|
//主题配置
|
||||||
|
theme: {
|
||||||
|
color: '#009688',
|
||||||
|
},
|
||||||
|
//模型
|
||||||
|
model: {
|
||||||
|
label: {
|
||||||
|
type: 'block',
|
||||||
|
text: {
|
||||||
|
left: '',
|
||||||
|
right: '',
|
||||||
|
separator: ', ',
|
||||||
|
},
|
||||||
|
block: {
|
||||||
|
showCount: 0,
|
||||||
|
showIcon: true,
|
||||||
|
},
|
||||||
|
count: {
|
||||||
|
template(data, sels){
|
||||||
|
return `已选中 ${sels.length} 项, 共 ${data.length} 项`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// 展开下拉框
|
||||||
|
show(){
|
||||||
|
|
||||||
|
},
|
||||||
|
// 隐藏下拉框
|
||||||
|
hidn(){
|
||||||
|
|
||||||
|
},
|
||||||
|
// 模板组成, 当前option数据, 已经选中的数据, name, value
|
||||||
|
template(item, sels, name, value){
|
||||||
|
return name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
113
src/components/core/index.js
Normal file
113
src/components/core/index.js
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
import { h, Component, render } from '@/components/preact'
|
||||||
|
import Framework from '@/components/element/framework'
|
||||||
|
import { selector, warn, listenerClose, watch, safety, isArray } from '@/components/common/util'
|
||||||
|
import defaultOptions from '@/components/config/options'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 保留初始化的数据
|
||||||
|
*/
|
||||||
|
const initData = {};
|
||||||
|
const data = {};
|
||||||
|
const onClose = (el) => Object.keys(data).filter(a => a != el).forEach(el => data[el].closed());
|
||||||
|
listenerClose(data, onClose);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 子组件集合
|
||||||
|
*/
|
||||||
|
const childs = {};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 对外提供的处理方法
|
||||||
|
*/
|
||||||
|
class xmOptions {
|
||||||
|
|
||||||
|
constructor(options) {
|
||||||
|
//保留初始化时的数据
|
||||||
|
initData[options.el] = options;
|
||||||
|
//定义默认值
|
||||||
|
this.options = defaultOptions(options.language);
|
||||||
|
//开始渲染数据
|
||||||
|
this.update(options);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新数据 + 重新渲染
|
||||||
|
*/
|
||||||
|
update(options = {}){
|
||||||
|
//记录最新的配置项
|
||||||
|
this.options = {...this.options, ...options};
|
||||||
|
|
||||||
|
//如果dom不存在, 则不进行渲染事项
|
||||||
|
let dom = selector(this.options.el);
|
||||||
|
if(!dom){
|
||||||
|
warn(`没有找到渲染对象: ${options.el}, 请检查`)
|
||||||
|
return ;
|
||||||
|
}
|
||||||
|
const onRef = (ref) => childs[this.options.el] = ref;
|
||||||
|
|
||||||
|
render(<Framework { ...this.options } onClose={ onClose } onRef={ onRef } />, dom);
|
||||||
|
|
||||||
|
//记录数据
|
||||||
|
data[this.options.el] = this;
|
||||||
|
//返回多选对象
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置多选, 回到初始化的状态
|
||||||
|
*/
|
||||||
|
reset(){
|
||||||
|
let initVal = this.options;
|
||||||
|
//设置options的默认数据
|
||||||
|
this.options = defaultOptions(initVal.language);
|
||||||
|
//更新渲染
|
||||||
|
this.update({ ...initData[initVal.el]});
|
||||||
|
//子组件初始化
|
||||||
|
childs[this.options.el].reset();
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 主动打开多选
|
||||||
|
*/
|
||||||
|
opened(){
|
||||||
|
let ref = childs[this.options.el];
|
||||||
|
!ref.state.show && ref.onClick();
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 主动关闭多选
|
||||||
|
*/
|
||||||
|
closed(){
|
||||||
|
let ref = childs[this.options.el];
|
||||||
|
ref.state.show && ref.onClick();
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取多选选中的数据
|
||||||
|
*/
|
||||||
|
getValue(){
|
||||||
|
return safety(childs[this.options.el].state.sels);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置多选数据
|
||||||
|
*/
|
||||||
|
setValue(sels, show){
|
||||||
|
if(!isArray(sels)){
|
||||||
|
warn('请传入数组结构...')
|
||||||
|
return ;
|
||||||
|
}
|
||||||
|
childs[this.options.el].value(sels, !!show);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default xmOptions;
|
||||||
114
src/components/element/framework.js
Normal file
114
src/components/element/framework.js
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
import { h, Component, render } from '@/components/preact'
|
||||||
|
|
||||||
|
//渲染类
|
||||||
|
import Tips from './tips';
|
||||||
|
import Label from './label';
|
||||||
|
import General from './model/general';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 框架渲染类, 渲染基础的外边框 + 属性变化监听
|
||||||
|
*/
|
||||||
|
class Framework extends Component{
|
||||||
|
|
||||||
|
constructor(options){
|
||||||
|
super(options);
|
||||||
|
//初始化多选数据
|
||||||
|
this.reset();
|
||||||
|
//回传子组件
|
||||||
|
this.props.onRef(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
reset(){
|
||||||
|
let selected = this.props.prop.selected;
|
||||||
|
this.value(this.props.initValue ? this.props.initValue : this.props.data.filter(item => item[selected]), false);
|
||||||
|
}
|
||||||
|
|
||||||
|
value(sels, show){
|
||||||
|
let data = this.props.data;
|
||||||
|
let value = this.props.prop.value;
|
||||||
|
this.setState({
|
||||||
|
sels: sels.map(sel => typeof sel === 'object' ? sel[value] : sel).map(val => data.find(item => item[value] == val)).filter(a => a),
|
||||||
|
//下拉框是否展开
|
||||||
|
show
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onClick(e){
|
||||||
|
let show = !this.state.show;
|
||||||
|
|
||||||
|
if(show){
|
||||||
|
if(this.props.show && this.props.show() == false){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//事件互斥原则, 打开一个多选, 关闭其他所有多选
|
||||||
|
this.props.onClose(this.props.el);
|
||||||
|
}else{
|
||||||
|
if(this.props.hidn && this.props.hidn() == false){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({ show })
|
||||||
|
//阻止其他绑定事件的冒泡
|
||||||
|
e && e.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillReceiveProps(props){
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
render({ tips, theme, data, prop, template, model, empty }, { sels, show }) {
|
||||||
|
const borderStyle = { borderColor: theme.color };
|
||||||
|
//最外层边框的属性
|
||||||
|
const xmSelectProps = {
|
||||||
|
style: show ? borderStyle : '',
|
||||||
|
onClick: this.onClick.bind(this)
|
||||||
|
}
|
||||||
|
//右边下拉箭头的变化class
|
||||||
|
const iconClass = show ? 'xm-icon xm-icon-expand' : 'xm-icon';
|
||||||
|
//提示信息的属性
|
||||||
|
const tipsProps = {
|
||||||
|
tips,
|
||||||
|
//没有已选择数据, 则显示提示
|
||||||
|
show: !sels.length
|
||||||
|
}
|
||||||
|
//普通多选数据
|
||||||
|
const valueProp = prop.value;
|
||||||
|
|
||||||
|
const ck = (item, selected, disabled) => {
|
||||||
|
//如果是禁用状态, 不能进行操作
|
||||||
|
if(disabled) return;
|
||||||
|
|
||||||
|
//如果现在是选中状态
|
||||||
|
if(selected){
|
||||||
|
let index = sels.findIndex(sel => sel[valueProp] == item[valueProp])
|
||||||
|
if(index != -1){
|
||||||
|
sels.splice(index, 1);
|
||||||
|
this.setState(sels);
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
this.setState({
|
||||||
|
sels: [...sels, item]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const labelProps = { data, prop, model, theme, sels, ck, title: sels.map(sel => sel[prop.name]).join(',') }
|
||||||
|
const bodyProps = { data, prop, template, theme, sels, ck, empty }
|
||||||
|
//控制下拉框的显示于隐藏
|
||||||
|
const bodyClass = show ? 'xm-body' : 'xm-body dis';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<xm-select { ...xmSelectProps }>
|
||||||
|
<i class={ iconClass } />
|
||||||
|
<Tips { ...tipsProps } />
|
||||||
|
<Label { ...labelProps } />
|
||||||
|
<div class={ bodyClass }>
|
||||||
|
<General { ...bodyProps } />
|
||||||
|
</div>
|
||||||
|
</xm-select>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Framework;
|
||||||
0
src/components/element/header.js
Normal file
0
src/components/element/header.js
Normal file
76
src/components/element/label.js
Normal file
76
src/components/element/label.js
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
import { h, Component, render } from '@/components/preact'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 标签的渲染
|
||||||
|
*/
|
||||||
|
class Label extends Component{
|
||||||
|
|
||||||
|
constructor(options){
|
||||||
|
super(options);
|
||||||
|
}
|
||||||
|
|
||||||
|
iconClick(item, selected, disabled, e){
|
||||||
|
this.props.ck(item, selected, disabled);
|
||||||
|
//阻止父组件上的事件冒泡
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
render({ data, prop, theme, model, sels }) {
|
||||||
|
//获取变换属性
|
||||||
|
const { name, disabled } = prop;
|
||||||
|
|
||||||
|
//获取配置项
|
||||||
|
const label = model.label;
|
||||||
|
const type = label.type;
|
||||||
|
const conf = label[type];
|
||||||
|
|
||||||
|
//渲染结果
|
||||||
|
let html = '';
|
||||||
|
|
||||||
|
if(type === 'text'){
|
||||||
|
html = sels.map(sel => `${conf.left}${sel[name]}${conf.right}`).join(conf.separator)
|
||||||
|
}else if(type === 'block'){
|
||||||
|
//已选择的数据
|
||||||
|
let arr = [...sels];
|
||||||
|
|
||||||
|
const style = { backgroundColor: theme.color }
|
||||||
|
//显示的个数
|
||||||
|
const count = conf.showCount <= 0 ? arr.length : conf.showCount;
|
||||||
|
|
||||||
|
html = arr.splice(0, count).map(sel => {
|
||||||
|
const styleProps = { width: conf.showIcon ? 'calc(100% - 20px)' : '100%', }
|
||||||
|
const className = ['xm-label-block', sel[disabled] ? 'disabled':''].join(' ');
|
||||||
|
return (
|
||||||
|
<div class={className} style={ style }>
|
||||||
|
<span style={ styleProps }>{ sel[name] }</span>
|
||||||
|
{ conf.showIcon && <i class="xm-iconfont icon-close" onClick={ this.iconClick.bind(this, sel, true, sel[disabled]) }></i> }
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
//剩余没显示的数据
|
||||||
|
if(arr.length){
|
||||||
|
html.push(
|
||||||
|
<div class="xm-label-block" style={ style }>
|
||||||
|
+ { arr.length }
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
if(sels.length && conf && conf.template){
|
||||||
|
html = conf.template(data, sels);
|
||||||
|
}else{
|
||||||
|
html = sels.map(sel => sel[name]).join(',')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="xm-label">
|
||||||
|
{ html }
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Label;
|
||||||
51
src/components/element/model/general.js
Normal file
51
src/components/element/model/general.js
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
import { h, Component, render } from '@/components/preact'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 普通的多选渲染
|
||||||
|
*/
|
||||||
|
class General extends Component{
|
||||||
|
|
||||||
|
constructor(options){
|
||||||
|
super(options);
|
||||||
|
}
|
||||||
|
|
||||||
|
optionClick(item, selected, disabled, e){
|
||||||
|
this.props.ck(item, selected, disabled);
|
||||||
|
//阻止父组件上的事件冒泡
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
render({ data, prop, template, theme, sels, empty }) {
|
||||||
|
|
||||||
|
const { name, value, disabled } = prop;
|
||||||
|
|
||||||
|
const arr = data.map(item => {
|
||||||
|
|
||||||
|
const selected = !!sels.find(sel => sel[value] == item[value])
|
||||||
|
const iconStyle = { color: selected ? theme.color : '' }
|
||||||
|
// const className = 'xm-option' + (item.disabled ? ' disabled' : '');
|
||||||
|
const className = ['xm-option', (item[disabled] ? ' disabled' : ''), (selected ? ' selected' : '')].join(' ');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class={className} value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled]) }>
|
||||||
|
<div class="xm-option-icon" style={ { borderColor: theme.color, } }>
|
||||||
|
<i class="xm-iconfont icon-duox" style={ iconStyle }></i>
|
||||||
|
</div>
|
||||||
|
<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template(item, sels, item[name], item[value]) }}></div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
if(!data.length){
|
||||||
|
arr.push(
|
||||||
|
<div class="xm-select-empty">{ empty }</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div> { arr } </div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default General;
|
||||||
20
src/components/element/tips.js
Normal file
20
src/components/element/tips.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import { h, Component, render } from '@/components/preact'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 默认提示
|
||||||
|
*/
|
||||||
|
class Tips extends Component{
|
||||||
|
|
||||||
|
constructor(options){
|
||||||
|
super(options);
|
||||||
|
}
|
||||||
|
|
||||||
|
render({ tips, show }) {
|
||||||
|
const tipsClass = show ? 'xm-tips' : 'xm-tips dis';
|
||||||
|
return (
|
||||||
|
<div class={ tipsClass }>{ tips }</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Tips;
|
||||||
311
src/components/preact/index.js
Normal file
311
src/components/preact/index.js
Normal file
@ -0,0 +1,311 @@
|
|||||||
|
var e = function() {},
|
||||||
|
t = {},
|
||||||
|
n = [],
|
||||||
|
o = [];
|
||||||
|
|
||||||
|
function r(t, r) {
|
||||||
|
var i, l, a, s, p = arguments,
|
||||||
|
u = o;
|
||||||
|
for (s = arguments.length; s-- > 2;) n.push(p[s]);
|
||||||
|
for (r && null != r.children && (n.length || n.push(r.children), delete r.children); n.length;)
|
||||||
|
if ((l = n.pop()) && void 0 !== l.pop)
|
||||||
|
for (s = l.length; s--;) n.push(l[s]);
|
||||||
|
else "boolean" == typeof l && (l = null), (a = "function" != typeof t) && (null == l ? l = "" : "number" == typeof l ?
|
||||||
|
l = String(l) : "string" != typeof l && (a = !1)), a && i ? u[u.length - 1] += l : u === o ? u = [l] : u.push(l), i =
|
||||||
|
a;
|
||||||
|
var c = new e;
|
||||||
|
return c.nodeName = t, c.children = u, c.attributes = null == r ? void 0 : r, c.key = null == r ? void 0 : r.key, c
|
||||||
|
}
|
||||||
|
|
||||||
|
function i(e, t) {
|
||||||
|
for (var n in t) e[n] = t[n];
|
||||||
|
return e
|
||||||
|
}
|
||||||
|
|
||||||
|
function l(e, t) {
|
||||||
|
null != e && ("function" == typeof e ? e(t) : e.current = t)
|
||||||
|
}
|
||||||
|
var a = "function" == typeof Promise ? Promise.resolve().then.bind(Promise.resolve()) : setTimeout,
|
||||||
|
s = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,
|
||||||
|
p = [];
|
||||||
|
|
||||||
|
function u(e) {
|
||||||
|
!e._dirty && (e._dirty = !0) && 1 == p.push(e) && a(c)
|
||||||
|
}
|
||||||
|
|
||||||
|
function c() {
|
||||||
|
for (var e; e = p.pop();) e._dirty && U(e)
|
||||||
|
}
|
||||||
|
|
||||||
|
function f(e, t) {
|
||||||
|
return e.normalizedNodeName === t || e.nodeName.toLowerCase() === t.toLowerCase()
|
||||||
|
}
|
||||||
|
|
||||||
|
function d(e) {
|
||||||
|
var t = i({}, e.attributes);
|
||||||
|
t.children = e.children;
|
||||||
|
var n = e.nodeName.defaultProps;
|
||||||
|
if (void 0 !== n)
|
||||||
|
for (var o in n) void 0 === t[o] && (t[o] = n[o]);
|
||||||
|
return t
|
||||||
|
}
|
||||||
|
|
||||||
|
function v(e) {
|
||||||
|
var t = e.parentNode;
|
||||||
|
t && t.removeChild(e)
|
||||||
|
}
|
||||||
|
|
||||||
|
function h(e, t, n, o, r) {
|
||||||
|
if ("className" === t && (t = "class"), "key" === t);
|
||||||
|
else if ("ref" === t) l(n, null), l(o, e);
|
||||||
|
else if ("class" !== t || r)
|
||||||
|
if ("style" === t) {
|
||||||
|
if (o && "string" != typeof o && "string" != typeof n || (e.style.cssText = o || ""), o && "object" == typeof o) {
|
||||||
|
if ("string" != typeof n)
|
||||||
|
for (var i in n) i in o || (e.style[i] = "");
|
||||||
|
for (var i in o) e.style[i] = "number" == typeof o[i] && !1 === s.test(i) ? o[i] + "px" : o[i]
|
||||||
|
}
|
||||||
|
} else if ("dangerouslySetInnerHTML" === t) o && (e.innerHTML = o.__html || "");
|
||||||
|
else if ("o" == t[0] && "n" == t[1]) {
|
||||||
|
var a = t !== (t = t.replace(/Capture$/, ""));
|
||||||
|
t = t.toLowerCase().substring(2), o ? n || e.addEventListener(t, m, a) : e.removeEventListener(t, m, a), (e._listeners ||
|
||||||
|
(e._listeners = {}))[t] = o
|
||||||
|
} else if ("list" !== t && "type" !== t && !r && t in e) {
|
||||||
|
try {
|
||||||
|
e[t] = null == o ? "" : o
|
||||||
|
} catch (e) {}
|
||||||
|
null != o && !1 !== o || "spellcheck" == t || e.removeAttribute(t)
|
||||||
|
} else {
|
||||||
|
var p = r && t !== (t = t.replace(/^xlink:?/, ""));
|
||||||
|
null == o || !1 === o ? p ? e.removeAttributeNS("http://www.w3.org/1999/xlink", t.toLowerCase()) : e.removeAttribute(
|
||||||
|
t) : "function" != typeof o && (p ? e.setAttributeNS("http://www.w3.org/1999/xlink", t.toLowerCase(), o) : e.setAttribute(
|
||||||
|
t, o))
|
||||||
|
} else e.className = o || ""
|
||||||
|
}
|
||||||
|
|
||||||
|
function m(e) {
|
||||||
|
return this._listeners[e.type](e)
|
||||||
|
}
|
||||||
|
var _ = [],
|
||||||
|
y = 0,
|
||||||
|
g = !1,
|
||||||
|
b = !1;
|
||||||
|
|
||||||
|
function C() {
|
||||||
|
for (var e; e = _.shift();) e.componentDidMount && e.componentDidMount()
|
||||||
|
}
|
||||||
|
|
||||||
|
function x(e, t, n, o, r, i) {
|
||||||
|
y++ || (g = null != r && void 0 !== r.ownerSVGElement, b = null != e && !("__preactattr_" in e));
|
||||||
|
var l = function e(t, n, o, r, i) {
|
||||||
|
var l = t,
|
||||||
|
a = g;
|
||||||
|
if (null != n && "boolean" != typeof n || (n = ""), "string" == typeof n || "number" == typeof n) return t && void 0 !==
|
||||||
|
t.splitText && t.parentNode && (!t._component || i) ? t.nodeValue != n && (t.nodeValue = n) : (l = document.createTextNode(
|
||||||
|
n), t && (t.parentNode && t.parentNode.replaceChild(l, t), N(t, !0))), l.__preactattr_ = !0, l;
|
||||||
|
var s, p, u = n.nodeName;
|
||||||
|
if ("function" == typeof u) return function(e, t, n, o) {
|
||||||
|
for (var r = e && e._component, i = r, l = e, a = r && e._componentConstructor === t.nodeName, s = a, p = d(t); r &&
|
||||||
|
!s && (r = r._parentComponent);) s = r.constructor === t.nodeName;
|
||||||
|
return r && s && (!o || r._component) ? (B(r, p, 3, n, o), e = r.base) : (i && !a && (L(i), e = l = null), r = S(
|
||||||
|
t.nodeName, p, n), e && !r.nextBase && (r.nextBase = e, l = null), B(r, p, 1, n, o), e = r.base, l && e !== l &&
|
||||||
|
(l._component = null, N(l, !1))), e
|
||||||
|
}(t, n, o, r);
|
||||||
|
if (g = "svg" === u || "foreignObject" !== u && g, u = String(u), (!t || !f(t, u)) && (s = u, (p = g ? document.createElementNS(
|
||||||
|
"http://www.w3.org/2000/svg", s) : document.createElement(s)).normalizedNodeName = s, l = p, t)) {
|
||||||
|
for (; t.firstChild;) l.appendChild(t.firstChild);
|
||||||
|
t.parentNode && t.parentNode.replaceChild(l, t), N(t, !0)
|
||||||
|
}
|
||||||
|
var c = l.firstChild,
|
||||||
|
m = l.__preactattr_,
|
||||||
|
_ = n.children;
|
||||||
|
if (null == m) {
|
||||||
|
m = l.__preactattr_ = {};
|
||||||
|
for (var y = l.attributes, C = y.length; C--;) m[y[C].name] = y[C].value
|
||||||
|
}
|
||||||
|
return !b && _ && 1 === _.length && "string" == typeof _[0] && null != c && void 0 !== c.splitText && null == c.nextSibling ?
|
||||||
|
c.nodeValue != _[0] && (c.nodeValue = _[0]) : (_ && _.length || null != c) && function(t, n, o, r, i) {
|
||||||
|
var l, a, s, p, u, c, d, h, m = t.childNodes,
|
||||||
|
_ = [],
|
||||||
|
y = {},
|
||||||
|
g = 0,
|
||||||
|
b = 0,
|
||||||
|
C = m.length,
|
||||||
|
x = 0,
|
||||||
|
w = n ? n.length : 0;
|
||||||
|
if (0 !== C)
|
||||||
|
for (var k = 0; k < C; k++) {
|
||||||
|
var S = m[k],
|
||||||
|
P = S.__preactattr_;
|
||||||
|
null != (B = w && P ? S._component ? S._component.__key : P.key : null) ? (g++, y[B] = S) : (P || (void 0 !== S.splitText ?
|
||||||
|
!i || S.nodeValue.trim() : i)) && (_[x++] = S)
|
||||||
|
}
|
||||||
|
if (0 !== w)
|
||||||
|
for (k = 0; k < w; k++) {
|
||||||
|
var B;
|
||||||
|
if (u = null, null != (B = (p = n[k]).key)) g && void 0 !== y[B] && (u = y[B], y[B] = void 0, g--);
|
||||||
|
else if (b < x)
|
||||||
|
for (l = b; l < x; l++)
|
||||||
|
if (void 0 !== _[l] && (c = a = _[l], h = i, "string" == typeof(d = p) || "number" == typeof d ? void 0 !== c.splitText :
|
||||||
|
"string" == typeof d.nodeName ? !c._componentConstructor && f(c, d.nodeName) : h || c._componentConstructor ===
|
||||||
|
d.nodeName)) {
|
||||||
|
u = a, _[l] = void 0, l === x - 1 && x--, l === b && b++;
|
||||||
|
break
|
||||||
|
} u = e(u, p, o, r), s = m[k], u && u !== t && u !== s && (null == s ? t.appendChild(u) : u === s.nextSibling ?
|
||||||
|
v(s) : t.insertBefore(u, s))
|
||||||
|
}
|
||||||
|
if (g)
|
||||||
|
for (var k in y) void 0 !== y[k] && N(y[k], !1);
|
||||||
|
for (; b <= x;) void 0 !== (u = _[x--]) && N(u, !1)
|
||||||
|
}(l, _, o, r, b || null != m.dangerouslySetInnerHTML),
|
||||||
|
function(e, t, n) {
|
||||||
|
var o;
|
||||||
|
for (o in n) t && null != t[o] || null == n[o] || h(e, o, n[o], n[o] = void 0, g);
|
||||||
|
for (o in t) "children" === o || "innerHTML" === o || o in n && t[o] === ("value" === o || "checked" === o ? e[o] :
|
||||||
|
n[o]) || h(e, o, n[o], n[o] = t[o], g)
|
||||||
|
}(l, n.attributes, m), g = a, l
|
||||||
|
}(e, t, n, o, i);
|
||||||
|
return r && l.parentNode !== r && r.appendChild(l), --y || (b = !1, i || C()), l
|
||||||
|
}
|
||||||
|
|
||||||
|
function N(e, t) {
|
||||||
|
var n = e._component;
|
||||||
|
n ? L(n) : (null != e.__preactattr_ && l(e.__preactattr_.ref, null), !1 !== t && null != e.__preactattr_ || v(e), w(e))
|
||||||
|
}
|
||||||
|
|
||||||
|
function w(e) {
|
||||||
|
for (e = e.lastChild; e;) {
|
||||||
|
var t = e.previousSibling;
|
||||||
|
N(e, !0), e = t
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var k = [];
|
||||||
|
|
||||||
|
function S(e, t, n) {
|
||||||
|
var o, r = k.length;
|
||||||
|
for (e.prototype && e.prototype.render ? (o = new e(t, n), T.call(o, t, n)) : ((o = new T(t, n)).constructor = e, o.render =
|
||||||
|
P); r--;)
|
||||||
|
if (k[r].constructor === e) return o.nextBase = k[r].nextBase, k.splice(r, 1), o;
|
||||||
|
return o
|
||||||
|
}
|
||||||
|
|
||||||
|
function P(e, t, n) {
|
||||||
|
return this.constructor(e, n)
|
||||||
|
}
|
||||||
|
|
||||||
|
function B(e, n, o, r, i) {
|
||||||
|
e._disable || (e._disable = !0, e.__ref = n.ref, e.__key = n.key, delete n.ref, delete n.key, void 0 === e.constructor
|
||||||
|
.getDerivedStateFromProps && (!e.base || i ? e.componentWillMount && e.componentWillMount() : e.componentWillReceiveProps &&
|
||||||
|
e.componentWillReceiveProps(n, r)), r && r !== e.context && (e.prevContext || (e.prevContext = e.context), e.context =
|
||||||
|
r), e.prevProps || (e.prevProps = e.props), e.props = n, e._disable = !1, 0 !== o && (1 !== o && !1 === t.syncComponentUpdates &&
|
||||||
|
e.base ? u(e) : U(e, 1, i)), l(e.__ref, e))
|
||||||
|
}
|
||||||
|
|
||||||
|
function U(e, t, n, o) {
|
||||||
|
if (!e._disable) {
|
||||||
|
var r, l, a, s = e.props,
|
||||||
|
p = e.state,
|
||||||
|
u = e.context,
|
||||||
|
c = e.prevProps || s,
|
||||||
|
f = e.prevState || p,
|
||||||
|
v = e.prevContext || u,
|
||||||
|
h = e.base,
|
||||||
|
m = e.nextBase,
|
||||||
|
g = h || m,
|
||||||
|
b = e._component,
|
||||||
|
w = !1,
|
||||||
|
k = v;
|
||||||
|
if (e.constructor.getDerivedStateFromProps && (p = i(i({}, p), e.constructor.getDerivedStateFromProps(s, p)), e.state =
|
||||||
|
p), h && (e.props = c, e.state = f, e.context = v, 2 !== t && e.shouldComponentUpdate && !1 === e.shouldComponentUpdate(
|
||||||
|
s, p, u) ? w = !0 : e.componentWillUpdate && e.componentWillUpdate(s, p, u), e.props = s, e.state = p, e.context =
|
||||||
|
u), e.prevProps = e.prevState = e.prevContext = e.nextBase = null, e._dirty = !1, !w) {
|
||||||
|
r = e.render(s, p, u), e.getChildContext && (u = i(i({}, u), e.getChildContext())), h && e.getSnapshotBeforeUpdate &&
|
||||||
|
(k = e.getSnapshotBeforeUpdate(c, f));
|
||||||
|
var P, T, M = r && r.nodeName;
|
||||||
|
if ("function" == typeof M) {
|
||||||
|
var W = d(r);
|
||||||
|
(l = b) && l.constructor === M && W.key == l.__key ? B(l, W, 1, u, !1) : (P = l, e._component = l = S(M, W, u), l.nextBase =
|
||||||
|
l.nextBase || m, l._parentComponent = e, B(l, W, 0, u, !1), U(l, 1, n, !0)), T = l.base
|
||||||
|
} else a = g, (P = b) && (a = e._component = null), (g || 1 === t) && (a && (a._component = null), T = x(a, r, u, n ||
|
||||||
|
!h, g && g.parentNode, !0));
|
||||||
|
if (g && T !== g && l !== b) {
|
||||||
|
var D = g.parentNode;
|
||||||
|
D && T !== D && (D.replaceChild(T, g), P || (g._component = null, N(g, !1)))
|
||||||
|
}
|
||||||
|
if (P && L(P), e.base = T, T && !o) {
|
||||||
|
for (var E = e, V = e; V = V._parentComponent;)(E = V).base = T;
|
||||||
|
T._component = E, T._componentConstructor = E.constructor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (!h || n ? _.push(e) : w || e.componentDidUpdate && e.componentDidUpdate(c, f, k); e._renderCallbacks.length;) e._renderCallbacks
|
||||||
|
.pop().call(e);
|
||||||
|
y || o || C()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function L(e) {
|
||||||
|
var t = e.base;
|
||||||
|
e._disable = !0, e.componentWillUnmount && e.componentWillUnmount(), e.base = null;
|
||||||
|
var n = e._component;
|
||||||
|
n ? L(n) : t && (null != t.__preactattr_ && l(t.__preactattr_.ref, null), e.nextBase = t, v(t), k.push(e), w(t)), l(e.__ref,
|
||||||
|
null)
|
||||||
|
}
|
||||||
|
|
||||||
|
function T(e, t) {
|
||||||
|
this._dirty = !0, this.context = t, this.props = e, this.state = this.state || {}, this._renderCallbacks = []
|
||||||
|
}
|
||||||
|
i(T.prototype, {
|
||||||
|
setState: function(e, t) {
|
||||||
|
this.prevState || (this.prevState = this.state), this.state = i(i({}, this.state), "function" == typeof e ? e(this
|
||||||
|
.state, this.props) : e), t && this._renderCallbacks.push(t), u(this)
|
||||||
|
},
|
||||||
|
forceUpdate: function(e) {
|
||||||
|
e && this._renderCallbacks.push(e), U(this, 2)
|
||||||
|
},
|
||||||
|
render: function() {}
|
||||||
|
});
|
||||||
|
var M = function(e, t, n, o) {
|
||||||
|
for (var r = 1; r < t.length; r++) {
|
||||||
|
var i = t[r++],
|
||||||
|
l = "number" == typeof i ? n[i] : i;
|
||||||
|
1 === t[r] ? o[0] = l : 2 === t[r] ? (o[1] = o[1] || {})[t[++r]] = l : 3 === t[r] ? o[1] = Object.assign(o[1] || {},
|
||||||
|
l) : o.push(t[r] ? e.apply(null, M(e, l, n, ["", null])) : l)
|
||||||
|
}
|
||||||
|
return o
|
||||||
|
},
|
||||||
|
W = function(e) {
|
||||||
|
for (var t, n, o = 1, r = "", i = "", l = [0], a = function(e) {
|
||||||
|
1 === o && (e || (r = r.replace(/^\s*\n\s*|\s*\n\s*$/g, ""))) ? l.push(e || r, 0) : 3 === o && (e || r) ? (l.push(
|
||||||
|
e || r, 1), o = 2) : 2 === o && "..." === r && e ? l.push(e, 3) : 2 === o && r && !e ? l.push(!0, 2, r) : 4 ===
|
||||||
|
o && n && (l.push(e || r, 2, n), n = ""), r = ""
|
||||||
|
}, s = 0; s < e.length; s++) {
|
||||||
|
s && (1 === o && a(), a(s));
|
||||||
|
for (var p = 0; p < e[s].length; p++) t = e[s][p], 1 === o ? "<" === t ? (a(), l = [l], o = 3) : r += t : i ? t ===
|
||||||
|
i ? i = "" : r += t : '"' === t || "'" === t ? i = t : ">" === t ? (a(), o = 1) : o && ("=" === t ? (o = 4, n = r,
|
||||||
|
r = "") : "/" === t ? (a(), 3 === o && (l = l[0]), o = l, (l = l[0]).push(o, 4), o = 0) : " " === t || "\t" ===
|
||||||
|
t || "\n" === t || "\r" === t ? (a(), o = 2) : r += t)
|
||||||
|
}
|
||||||
|
return a(), l
|
||||||
|
},
|
||||||
|
D = "function" == typeof Map,
|
||||||
|
E = D ? new Map : {},
|
||||||
|
V = D ? function(e) {
|
||||||
|
var t = E.get(e);
|
||||||
|
return t || E.set(e, t = W(e)), t
|
||||||
|
} : function(e) {
|
||||||
|
for (var t = "", n = 0; n < e.length; n++) t += e[n].length + "-" + e[n];
|
||||||
|
return E[t] || (E[t] = W(e))
|
||||||
|
};
|
||||||
|
|
||||||
|
function A(e, t) {
|
||||||
|
! function(t, n, o) {
|
||||||
|
x(o, e, {}, !1, n, !1)
|
||||||
|
}(0, t, t.firstElementChild)
|
||||||
|
}
|
||||||
|
var H = function(e) {
|
||||||
|
var t = M(this, V(e), arguments, []);
|
||||||
|
return t.length > 1 ? t : t[0]
|
||||||
|
}.bind(r);
|
||||||
|
export {
|
||||||
|
r as h, H as html, A as render, T as Component
|
||||||
|
};
|
||||||
19
src/index.ejs
Normal file
19
src/index.ejs
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<% 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">
|
||||||
|
<title>xm-select</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="demo1"></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
26
src/index.js
Normal file
26
src/index.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import { name, version } from '../package.json'
|
||||||
|
import Core from '@/components/core'
|
||||||
|
import '@/style/index.less'
|
||||||
|
import '@/style/iconfont.less'
|
||||||
|
|
||||||
|
|
||||||
|
const xmSelect = {
|
||||||
|
name,
|
||||||
|
version,
|
||||||
|
render(options) {
|
||||||
|
return new Core(options);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {
|
||||||
|
module.exports = xmSelect;
|
||||||
|
} else if (typeof define === 'function' && define.amd) {
|
||||||
|
define(xmSelect);
|
||||||
|
} else if (window.layui && layui.define) {
|
||||||
|
layui.define(function(exports) {
|
||||||
|
exports('xmSelect', xmSelect);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
window.xmSelect = xmSelect;
|
||||||
|
}
|
||||||
61
src/style/iconfont.less
Normal file
61
src/style/iconfont.less
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
/* 阿里巴巴矢量图标库 */
|
||||||
|
@font-face {
|
||||||
|
font-family: "xm-iconfont";
|
||||||
|
src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831');
|
||||||
|
/* IE9*/
|
||||||
|
src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831#iefix') format('embedded-opentype'),
|
||||||
|
/* IE6-IE8 */
|
||||||
|
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
|
||||||
|
url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.ttf?t=1534240067831') format('truetype'),
|
||||||
|
/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||||
|
url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.svg?t=1534240067831#iconfont') format('svg');
|
||||||
|
/* iOS 4.1- */
|
||||||
|
}
|
||||||
|
|
||||||
|
.xm-iconfont {
|
||||||
|
font-family: "xm-iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-quanxuan:before {
|
||||||
|
content: "\e62c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-caidan:before {
|
||||||
|
content: "\e610";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-fanxuan:before {
|
||||||
|
content: "\e837";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-pifu:before {
|
||||||
|
content: "\e668";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-qingkong:before {
|
||||||
|
content: "\e63e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-sousuo:before {
|
||||||
|
content: "\e600";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-danx:before {
|
||||||
|
content: "\e62b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-duox:before {
|
||||||
|
content: "\e613";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-close:before {
|
||||||
|
content: "\e601";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-expand:before {
|
||||||
|
content: "\e641";
|
||||||
|
}
|
||||||
209
src/style/index.less
Normal file
209
src/style/index.less
Normal file
@ -0,0 +1,209 @@
|
|||||||
|
@fontColor: #666;
|
||||||
|
@defaultBorderColor: #E6E6E6;
|
||||||
|
@disabledColor: #C2C2C2;
|
||||||
|
@border: 1px solid @defaultBorderColor;
|
||||||
|
@height: 36px;
|
||||||
|
|
||||||
|
@-webkit-keyframes xm-upbit {
|
||||||
|
from {-webkit-transform: translate3d(0, 30px, 0);opacity: .3}
|
||||||
|
to {-webkit-transform: translate3d(0, 0, 0);opacity: 1}
|
||||||
|
}
|
||||||
|
@keyframes xm-upbit {
|
||||||
|
from {transform: translate3d(0, 30px, 0);opacity: .3}
|
||||||
|
to {transform: translate3d(0, 0, 0);opacity: 1}
|
||||||
|
}
|
||||||
|
|
||||||
|
xm-select{
|
||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: @fontColor;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
border: @border;
|
||||||
|
border-radius: 2px;
|
||||||
|
height: @height;
|
||||||
|
line-height: @height;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
border-color: #C0C4CC;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
& > .xm-tips{
|
||||||
|
color: #999999;
|
||||||
|
padding: 0 10px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .xm-icon{
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
right: 10px;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -3px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 6px dashed transparent;
|
||||||
|
border-top-color: #C2C2C2;
|
||||||
|
border-top-style: solid;
|
||||||
|
transition: all .3s;
|
||||||
|
-webkit-transition: all .3s
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .xm-icon-expand{
|
||||||
|
margin-top: -9px;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .xm-label{
|
||||||
|
padding: 0 10px;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: hidden;
|
||||||
|
|
||||||
|
.xm-label-block{
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
padding: 0px 5px;
|
||||||
|
margin: 2px 5px 2px 0;
|
||||||
|
height: 22px;
|
||||||
|
line-height: 22px;
|
||||||
|
border-radius: 3px;
|
||||||
|
vertical-align: middle;
|
||||||
|
color: #FFF;
|
||||||
|
max-width: calc(100% - 20px);
|
||||||
|
|
||||||
|
& > span{
|
||||||
|
display: inline-block;
|
||||||
|
color: #FFF;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > i{
|
||||||
|
color: #FFF;
|
||||||
|
margin-left: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 20px;
|
||||||
|
position: relative;
|
||||||
|
top: -6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled{
|
||||||
|
background-color: @disabledColor !important;
|
||||||
|
cursor: no-drop !important;
|
||||||
|
&>i{
|
||||||
|
cursor: no-drop !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .xm-body {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 42px;
|
||||||
|
padding: 5px 0;
|
||||||
|
z-index: 999;
|
||||||
|
width: 100%;
|
||||||
|
border: @border;
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 2px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
|
||||||
|
animation-fill-mode: both;
|
||||||
|
animation-name: xm-upbit;
|
||||||
|
animation-duration: .3s;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
|
||||||
|
.xm-option{
|
||||||
|
position: relative;
|
||||||
|
padding: 0 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
|
||||||
|
&>.xm-option-icon>i{
|
||||||
|
color: #f2f2f2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-icon{
|
||||||
|
color: #FFF;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
position: absolute;
|
||||||
|
top: 9px;
|
||||||
|
border: @border;
|
||||||
|
border-radius: 5px;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
& > i {
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
top: -10px;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-content{
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 15px 0 30px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
color: #666;
|
||||||
|
line-height: 36px;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.xm-select-empty{
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled{
|
||||||
|
cursor: no-drop;
|
||||||
|
&:hover{
|
||||||
|
background-color: #FFF;
|
||||||
|
&>.xm-option-icon>i{
|
||||||
|
color: #FFF !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.xm-option-icon{
|
||||||
|
border-color: @disabledColor !important;
|
||||||
|
}
|
||||||
|
.xm-option-content{
|
||||||
|
color: @disabledColor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected>.xm-option-icon>i{
|
||||||
|
color: @disabledColor !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.dis{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
52
webpack.config.js
Normal file
52
webpack.config.js
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
const path = require('path');
|
||||||
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: "./src/index.js",
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
filename: "xm-select.js"
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: 'css-loader'
|
||||||
|
}, {
|
||||||
|
test: /\.less$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
loader: 'style-loader!css-loader!less-loader'
|
||||||
|
}, {
|
||||||
|
test: /\.m?js$/,
|
||||||
|
exclude: /(node_modules|bower_components)/,
|
||||||
|
use: {
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: {
|
||||||
|
presets: ['@babel/preset-env']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, "src"),
|
||||||
|
'components': path.resolve(__dirname, "src/components"),
|
||||||
|
'style': path.resolve(__dirname, "src/style"),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: './src/index.ejs',
|
||||||
|
minify: {
|
||||||
|
collapseWhitespace: true
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
devServer: {
|
||||||
|
contentBase: path.join(__dirname, "./dist"),
|
||||||
|
compress: true,
|
||||||
|
host: '0.0.0.0',
|
||||||
|
port: 9000,
|
||||||
|
open: true,
|
||||||
|
hot: true,
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user