可以自定义选项图标
This commit is contained in:
parent
815d554f1d
commit
369ae57b85
@ -9,6 +9,7 @@ var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
autoRow: true,
|
||||
height: '300px',
|
||||
radio: true,
|
||||
tree: {
|
||||
show: false,
|
||||
simple: true,
|
||||
|
@ -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
|
||||
|
@ -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 => {
|
||||
|
@ -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 = [];
|
||||
|
@ -152,7 +152,12 @@ 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(){
|
||||
|
||||
|
@ -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%;
|
||||
|
Loading…
Reference in New Issue
Block a user