diff --git a/docs/mds/ZTEST.md b/docs/mds/ZTEST.md index 057b799..51efe59 100644 --- a/docs/mds/ZTEST.md +++ b/docs/mds/ZTEST.md @@ -9,6 +9,7 @@ var demo1 = xmSelect.render({ el: '#demo1', autoRow: true, height: '300px', + radio: true, tree: { show: false, simple: true, diff --git a/src/components/plugin/cascader.js b/src/components/plugin/cascader.js index 7cb7822..7d5b5ab 100644 --- a/src/components/plugin/cascader.js +++ b/src/components/plugin/cascader.js @@ -83,7 +83,16 @@ class Cascader extends Component{ const itemStyle = { backgroundColor: 'transparent' } const className = ['xm-option', (dis ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' '); - const iconClass = ['xm-option-icon xm-iconfont', radio ? 'xm-icon-danx' : cascader.strict && half ? 'xm-icon-banxuan' : 'xm-icon-duox'].join(' '); + const iconClass = ['xm-option-icon', (() => { + //如果是半选状态,但是没有配置半选图标就用默认的 + if(half){ + return config.iconfont.half ? config.iconfont.half + ' xm-custom-icon' : 0; + } + if(selected){ + return config.iconfont.select ? config.iconfont.select : 0; + } + return config.iconfont.unselect ? config.iconfont.unselect + ' xm-custom-icon' : 0; + })() || ('xm-iconfont ' + (radio ? 'xm-icon-danx' : cascader.strict && half ? 'xm-icon-banxuan' : 'xm-icon-duox'))].join(' '); if(item[value] === this.state.val){ itemStyle.backgroundColor = theme.hover diff --git a/src/components/plugin/general.js b/src/components/plugin/general.js index 18ce2e4..2818c7d 100644 --- a/src/components/plugin/general.js +++ b/src/components/plugin/general.js @@ -229,7 +229,7 @@ class General extends Component{ } //本地搜索 - if(filterable && !remoteSearch){ + if(filterable && !(remoteSearch || pageRemote)){ const filterData = (item, index) => { const isGroup = item[optgroup]; if(isGroup){ @@ -440,7 +440,16 @@ class General extends Component{ item[disabled] && (itemStyle.backgroundColor = '#C2C2C2'); } const className = ['xm-option', (item[disabled] ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' '); - const iconClass = ['xm-option-icon xm-iconfont', radio ? 'xm-icon-danx' : 'xm-icon-duox'].join(' '); + const iconClass = ['xm-option-icon', (() => { + let selectICON = config.iconfont.select; + let unselectICON = config.iconfont.unselect; + if(selectICON){ + return !selected && unselectICON ? unselectICON + ' xm-custom-icon' : selectICON; + } + return 0; + })() || ('xm-iconfont ' + (radio ? 'xm-icon-danx' : 'xm-icon-duox'))].join(' '); + + console.log(iconClass) //处理鼠标选择的背景色 const hoverChange = e => { diff --git a/src/components/plugin/tree.js b/src/components/plugin/tree.js index 9bedad8..176704a 100644 --- a/src/components/plugin/tree.js +++ b/src/components/plugin/tree.js @@ -236,7 +236,17 @@ class Tree extends Component{ dis && (itemStyle.backgroundColor = '#C2C2C2'); } const className = ['xm-option', (dis ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' '); - const iconClass = ['xm-option-icon xm-iconfont', radio ? 'xm-icon-danx' : tree.strict && half ? 'xm-icon-banxuan' : 'xm-icon-duox'].join(' '); + const iconClass = ['xm-option-icon', (() => { + //如果是半选状态,但是没有配置半选图标就用默认的 + if(half){ + return config.iconfont.half ? config.iconfont.half + ' xm-custom-icon' : 0; + } + if(selected){ + return config.iconfont.select ? config.iconfont.select : 0; + } + return config.iconfont.unselect ? config.iconfont.unselect + ' xm-custom-icon' : 0; + })() || ('xm-iconfont ' + (radio ? 'xm-icon-danx' : tree.strict && half ? 'xm-icon-banxuan' : 'xm-icon-duox'))].join(' '); + const treeIconClass = ['xm-tree-icon', expand ? 'expand':'', item[children] && (item[children].length > 0 || (tree.lazy && item.__node.loading !== false)) ? 'xm-visible':'xm-hidden'].join(' '); const iconArray = []; diff --git a/src/config/options.js b/src/config/options.js index edfe0c0..25b9491 100644 --- a/src/config/options.js +++ b/src/config/options.js @@ -151,8 +151,13 @@ export default function (lan = 'zn') { }, icon: 'show', type: 'absolute', + }, + //自定义选中的图标 + iconfont: { + select: 'layui-icon layui-icon-cellphone', + unselect: 'layui-icon layui-icon-cellphone', + half: 'xm-iconfont xm-icon-banxuan', }, - // 展开下拉框 show(){ diff --git a/src/style/index.less b/src/style/index.less index e225f00..a0e530d 100644 --- a/src/style/index.less +++ b/src/style/index.less @@ -239,6 +239,10 @@ xm-select{ border-radius: 3px; justify-content: center; align-items: center; + &.xm-custom-icon{ + color: unset; + border: unset; + } } &-icon.xm-icon-danx{ border-radius: 100%;