可以自定义选项图标
This commit is contained in:
parent
815d554f1d
commit
369ae57b85
@ -9,6 +9,7 @@ var demo1 = xmSelect.render({
|
|||||||
el: '#demo1',
|
el: '#demo1',
|
||||||
autoRow: true,
|
autoRow: true,
|
||||||
height: '300px',
|
height: '300px',
|
||||||
|
radio: true,
|
||||||
tree: {
|
tree: {
|
||||||
show: false,
|
show: false,
|
||||||
simple: true,
|
simple: true,
|
||||||
|
@ -83,7 +83,16 @@ class Cascader extends Component{
|
|||||||
|
|
||||||
const itemStyle = { backgroundColor: 'transparent' }
|
const itemStyle = { backgroundColor: 'transparent' }
|
||||||
const className = ['xm-option', (dis ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' ');
|
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){
|
if(item[value] === this.state.val){
|
||||||
itemStyle.backgroundColor = theme.hover
|
itemStyle.backgroundColor = theme.hover
|
||||||
|
@ -229,7 +229,7 @@ class General extends Component{
|
|||||||
}
|
}
|
||||||
|
|
||||||
//本地搜索
|
//本地搜索
|
||||||
if(filterable && !remoteSearch){
|
if(filterable && !(remoteSearch || pageRemote)){
|
||||||
const filterData = (item, index) => {
|
const filterData = (item, index) => {
|
||||||
const isGroup = item[optgroup];
|
const isGroup = item[optgroup];
|
||||||
if(isGroup){
|
if(isGroup){
|
||||||
@ -440,7 +440,16 @@ class General extends Component{
|
|||||||
item[disabled] && (itemStyle.backgroundColor = '#C2C2C2');
|
item[disabled] && (itemStyle.backgroundColor = '#C2C2C2');
|
||||||
}
|
}
|
||||||
const className = ['xm-option', (item[disabled] ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' ');
|
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 => {
|
const hoverChange = e => {
|
||||||
|
@ -236,7 +236,17 @@ class Tree extends Component{
|
|||||||
dis && (itemStyle.backgroundColor = '#C2C2C2');
|
dis && (itemStyle.backgroundColor = '#C2C2C2');
|
||||||
}
|
}
|
||||||
const className = ['xm-option', (dis ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' ');
|
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 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 = [];
|
const iconArray = [];
|
||||||
|
@ -152,7 +152,12 @@ export default function (lan = 'zn') {
|
|||||||
icon: 'show',
|
icon: 'show',
|
||||||
type: 'absolute',
|
type: 'absolute',
|
||||||
},
|
},
|
||||||
|
//自定义选中的图标
|
||||||
|
iconfont: {
|
||||||
|
select: 'layui-icon layui-icon-cellphone',
|
||||||
|
unselect: 'layui-icon layui-icon-cellphone',
|
||||||
|
half: 'xm-iconfont xm-icon-banxuan',
|
||||||
|
},
|
||||||
// 展开下拉框
|
// 展开下拉框
|
||||||
show(){
|
show(){
|
||||||
|
|
||||||
|
@ -239,6 +239,10 @@ xm-select{
|
|||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
&.xm-custom-icon{
|
||||||
|
color: unset;
|
||||||
|
border: unset;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&-icon.xm-icon-danx{
|
&-icon.xm-icon-danx{
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
|
Loading…
Reference in New Issue
Block a user