theluyuan/xm-select
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.0.0.0723

Browse Source 
新增本地搜索模式
This commit is contained in:
maplemei 2019-07-23 19:35:09 +08:00
parent 2298537bb4
commit daca16b503
9 changed files with 193 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
README.md
View File

@ -36,6 +36,17 @@ QQ群: 769620939
tips: '请选择', //please selected
//空数据提示
empty: '暂无数据', //no data
//搜索延迟 ms
delay: 500,
//搜索默认提示
searchTips: '请选择', //please search
//是否开始本地搜索
filterable: false,
//本地搜索过滤方法, 返回true表示显示, false不显示, val:当前输入框搜索值, item:选项数据, index: 数组坐标, porp: 自定义属性
filterMethod: function(val, item, index, prop){
if(!val) return true;
return item[prop.name].indexOf(val) != -1;
},
//自定义属性名称
prop: {
name: 'name',
@ -151,6 +162,15 @@ xmSelect: setValue(array, show)
<h3>换一个主题</h3>
<div id="demo13"></div>
<h3>开启搜索模式</h3>
<div id="demo14"></div>
<h3>自定义搜索方法</h3>
<div id="demo15"></div>
<h3>自定义搜索延迟 和 提示</h3>
<div id="demo16"></div>
<script src="../dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
@ -336,5 +356,44 @@ xmSelect: setValue(array, show)
color: 'red',
},
})
var demo14 = xmSelect.render({
el: '#demo14',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
filterable: true, //开启搜索
})
var demo15 = xmSelect.render({
el: '#demo15',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
filterable: true, //开启搜索
filterMethod: function(val, item, index, prop){
if(!val) return true;
return item[prop.name].indexOf(val) != -1;
},
})
var demo16 = xmSelect.render({
el: '#demo16',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
filterable: true, //开启搜索
delay: 2000,
searchTips: '搜索呀 搜索呀...',
})
</script>
```

2
dist/xm-select.js vendored
View File

File diff suppressed because one or more lines are too long

52
index.html
View File

@ -52,8 +52,16 @@
<div id="demo12"></div>
<h3>换一个主题</h3>
<div id="demo13"></div>
<div id="demo13"></div>
<h3>开启搜索模式</h3>
<div id="demo14"></div>
<h3>自定义搜索方法</h3>
<div id="demo15"></div>
<h3>自定义搜索延迟 和 提示</h3>
<div id="demo16"></div>
<script src="./dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
@ -203,6 +211,7 @@
type: 'block',
block: {
showCount: 1,
showIcon: true,
}
}
}
@ -239,6 +248,45 @@
color: 'red',
},
})
var demo14 = xmSelect.render({
el: '#demo14',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
filterable: true, //开启搜索
})
var demo15 = xmSelect.render({
el: '#demo15',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
filterable: true, //开启搜索
filterMethod: function(val, item, index, prop){
if(!val) return true;
return item[prop.name].indexOf(val) != -1;
},
})
var demo16 = xmSelect.render({
el: '#demo16',
data: [
{name: '水果', value: 1, selected: true, disabled: true},
{name: '蔬菜', value: 2, selected: true},
{name: '桌子', value: 3, disabled: true},
{name: '北京', value: 4},
],
filterable: true, //开启搜索
delay: 2000,
searchTips: '搜索呀 搜索呀...',
})
</script>
</body>

1
src/components/config/language/en.js
View File

@ -1,4 +1,5 @@
export default {
tips: 'please selected',
empty: 'no data',
searchTips: 'please search',
}

1
src/components/config/language/zn.js
View File

@ -1,4 +1,5 @@
export default {
tips: '请选择',
empty: '暂无数据',
searchTips: '请选择',
}

11
src/components/config/options.js
View File

@ -19,6 +19,17 @@ export default function (lan = 'zn') {
reset: false,
//用来判断多选是否显示
isShow: false,
//搜索延迟 ms
delay: 500,
//搜索默认提示
searchTips: setting.searchTips,
//是否开始本地搜索
filterable: false,
//本地搜索过滤方法
filterMethod: function(val, item, index, prop){
if(!val) return true;
return item[prop.name].indexOf(val) != -1;
},
//自定义属性名称
prop: {
name: 'name',

7
src/components/element/framework.js
View File

@ -57,7 +57,8 @@ class Framework extends Component{
}
render({ tips, theme, data, prop, template, model, empty }, { sels, show }) {
render(config, { sels, show }) {
const { tips, theme, data, prop, template, model, empty } = config;
const borderStyle = { borderColor: theme.color };
//最外层边框的属性
const xmSelectProps = {
@ -93,8 +94,8 @@ class Framework extends Component{
}
};
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 labelProps = { ...config, sels, ck, title: sels.map(sel => sel[prop.name]).join(',') }
const bodyProps = { ...config, sels, ck, show }
//控制下拉框的显示于隐藏
const bodyClass = show ? 'xm-body' : 'xm-body dis';

38
src/components/element/model/general.js
View File

@ -7,6 +7,8 @@ class General extends Component{
constructor(options){
super(options);
this.searchCid = 0;
this.setState({ searchVal: '', });
}
optionClick(item, selected, disabled, e){
@ -15,11 +17,26 @@ class General extends Component{
e.stopPropagation();
}
render({ data, prop, template, theme, sels, empty }) {
searchInputClick(e){
e.stopPropagation();
}
searchInput(e){
clearTimeout(this.searchCid);
this.searchCid = setTimeout(() => this.setState({ searchVal: e.target.value }), this.props.delay);
}
componentWillReceiveProps(props){
if(!props.show){
this.setState({ searchVal: '', })
}
}
render({ data, prop, template, theme, sels, empty, filterable, filterMethod, delay, searchTips }) {
const { name, value, disabled } = prop;
const arr = data.map(item => {
const arr = (filterable ? data.filter((item, index) => filterMethod(this.state.searchVal, item, index, prop)) : data).map(item => {
const selected = !!sels.find(sel => sel[value] == item[value])
const iconStyle = { color: selected ? theme.color : '' }
@ -36,14 +53,25 @@ class General extends Component{
)
})
if(!data.length){
if(!arr.length){
arr.push(
<div class="xm-select-empty">{ empty }</div>
)
}
const searchClass = ['xm-search', filterable ? '':'dis'].join(' ');
const search = (
<div class={ searchClass }>
<i class="xm-iconfont xm-icon-sousuo"></i>
<input type="text" class="xm-input xm-search-input" placeholder={ searchTips } value={ this.state.searchVal } onInput={ this.searchInput.bind(this) } onClick={ this.searchInputClick.bind(this) } />
</div>
);
return (
<div> { arr } </div>
<div>
{ search }
<div>{ arr }</div>
</div>
)
}
}

33
src/style/index.less
View File

@ -200,8 +200,41 @@ xm-select{
color: @disabledColor !important;
}
}
.xm-search{
background-color: #FFF !important;
position: relative;
padding: 0 10px;
cursor: pointer;
&>i{
position: absolute;
}
&-input{
border: none;
border-bottom: 1px solid #E6E6E6;
padding-left: 27px;
cursor: text;
}
}
}
.xm-input{
cursor: pointer;
border-radius: 2px;
border-width: 1px;
border-style: solid;
border-color: #E6E6E6;
display: block;
width: 100%;
box-sizing: border-box;
background-color: #FFF;
height: 36px;
line-height: 1.3;
padding-left: 10px;
outline: 0;
}
.dis{
display: none;