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

v1.0.4

Browse Source
This commit is contained in:
maplemei
2019-09-27 19:10:51 +08:00
parent cdce32f11f
commit 6feee42b47
21 changed files with 871 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
src/components/common/util.js
View File

@@ -1,67 +1,147 @@
/**
* 选中dom元素
*/
/**
* 选中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]";
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 isFunction(obj) {
return Object.prototype.toString.call(obj) == "[object Function]";
}
/**
* 转化为数字
*/
export function toNum(obj) {
obj -= 0;
isNaN(obj) && (obj = 0);
return obj;
}
/**
* 简单的深度合并
*/
export function deepMerge(obj1, obj2) {
let key;
for (key in obj2) {
// 如果target(也就是obj1[key])存在，且是对象的话再去调用deepMerge，否则就是obj1[key]里面没这个对象，需要与obj2[key]合并
// 如果obj2[key]没有值或者值不是对象，此时直接替换obj1[key]
obj1[key] =
obj1[key] &&
obj1[key].toString() === "[object Object]" &&
(obj2[key] && obj2[key].toString() === "[object Object]") ?
deepMerge(obj1[key], obj2[key]) :
(obj1[key] = obj2[key]);
}
return obj1;
}
/**
* 数组合并
*/
export function mergeArr(arr1, arr2, prop) {
let value = prop.value;
let result = [...arr2];
for (let i in arr1) {
let item = arr1[i];
if (!arr2.find(a => a[value] == item[value])) {
result.push(item);
}
}
return result;
}
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;
}
}
});
}
});
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;
}
}
});
}
});
}
export function checkUserAgent() {
const ua = navigator.userAgent;
if (ua.indexOf('Mac OS') != -1) {
return 'mac';
}
return 'win';
}
export function IEVersion() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion == 7) {
return 7;
} else if (fIEVersion == 8) {
return 8;
} else if (fIEVersion == 9) {
return 9;
} else if (fIEVersion == 10) {
return 10;
} else {
return 6; //IE版本<=7
}
} else if (isEdge) {
return 'edge'; //edge
} else if (isIE11) {
return 11; //IE11
} else {
return -1; //不是ie浏览器
}
}
export function checkUserAgent(){
const ua = navigator.userAgent;
if(ua.indexOf('Mac OS') != -1){
return 'mac';
}
return 'win';
}

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

@@ -5,10 +5,12 @@ const lanSetting = { zn, en }
export default function (lan = 'zn') {
let setting = lanSetting[lan] || zn;
return {
//多选数据
data: [],
//表单提交的name
name: 'select',
//默认选中数据, 优先级大于selected
initValue: null,
//默认提示
@@ -48,6 +50,15 @@ export default function (lan = 'zn') {
repeat: false,
//是否点击选项后自动关闭下拉框
clickClose: false,
//多选上限
max: 0,
maxMethod: function(sels, item){},
//工具条
toolbar: {
show: false,
showIcon: true,
list: [ 'ALL', 'CLEAR' ],
},
//自定义属性名称
prop: {
name: 'name',
@@ -57,7 +68,8 @@ export default function (lan = 'zn') {
},
//主题配置
theme: {
color: '#009688',
color: '#009688', //默认主题颜色
maxColor: '#e54d42', //多选上限边框闪烁颜色
},
//模型
model: {
@@ -79,22 +91,22 @@ export default function (lan = 'zn') {
},
},
},
// 展开下拉框
show(){
},
// 隐藏下拉框
hide(){
},
// 模板组成, 当前option数据, 已经选中的数据, name, value
// 模板组成, 当前option数据, 已经选中的数据, name, value
template({ item, sels, name, value }){
return name;
},
//监听选中事件
on({ arr, item, selected }){
}
}
}
}

35
src/components/core/index.js
View File

@@ -1,6 +1,6 @@
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 { selector, warn, listenerClose, watch, safety, isArray, deepMerge } from '@/components/common/util'
import defaultOptions from '@/components/config/options'
@@ -30,15 +30,15 @@ class xmOptions {
//定义默认值
this.options = defaultOptions(options.language);
//开始渲染数据
this.update(options, true);
this.update(options);
}
/**
* 更新数据 + 重新渲染
*/
update(options = {}, isNew){
update(options = {}){
//记录最新的配置项
this.options = {...this.options, ...options};
this.options = deepMerge(this.options, options);
//如果dom不存在, 则不进行渲染事项
let dom = selector(this.options.el);
@@ -46,16 +46,10 @@ class xmOptions {
warn(`没有找到渲染对象: ${options.el}, 请检查`)
return ;
}
//如果是历史渲染过的数据, 重置一下数据
isNew && childs[this.options.el] && childs[this.options.el].reset();
let isRender = false;
const onRef = (ref) => childs[this.options.el] = ref;
const onReset = result => {
this.options.data = result;
}
render(<Framework { ...this.options } onReset={ onReset } onClose={ onClose } onRef={ onRef } />, dom);
render(<Framework { ...this.options } onClose={ onClose } onRef={ onRef } />, dom);
//记录数据
data[this.options.el] = this;
@@ -98,8 +92,23 @@ class xmOptions {
/**
* 获取多选选中的数据
*/
getValue(){
return safety(childs[this.options.el].state.sels);
getValue(type){
let arr = safety(childs[this.options.el].state.sels);
if(type === 'name'){
return arr.map(item => item[this.options.prop.name]);
}else
if(type === 'nameStr'){
return arr.map(item => item[this.options.prop.name]).join(',');
}else
if(type === 'value'){
return arr.map(item => item[this.options.prop.value]);
}else
if(type === 'valueStr'){
return arr.map(item => item[this.options.prop.value]).join(',');
}
return arr;
}
/**

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

@@ -1,5 +1,5 @@
import { h, Component, render } from '@/components/preact'
import { checkUserAgent } from '@/components/common/util'
import { checkUserAgent, isFunction, toNum } from '@/components/common/util'
//渲染类
import Tips from './tips';
@@ -10,31 +10,33 @@ import General from './model/general';
* 框架渲染类, 渲染基础的外边框 + 属性变化监听
*/
class Framework extends Component{
constructor(options){
super(options);
//初始化多选数据
this.reset();
this.reset(this.props);
//回传子组件
this.props.onRef(this);
this.bodyView = null;
}
reset(){
let selected = this.props.prop.selected;
this.value(this.props.initValue ? this.props.initValue : this.props.data.filter(item => item[selected]), false);
this.resetDate(this.props.data);
reset(props){
//用于多选上限的边框颜色变化
this.updateBorderColor('');
this.resetDate(props.data);
let selected = props.prop.selected;
this.value(props.initValue ? props.initValue : this.state.data.filter(item => item[selected]), false);
}
resetDate(data = []){
this.setState({ data });
}
value(sels, show){
let data = this.props.data;
let data = this.state.data;
let value = this.props.prop.value;
let direction = this.props.direction;
this.setState({
this.setState({
sels: sels.map(sel => typeof sel === 'object' ? sel[value] : sel).map(val => data.find(item => item[value] == val)).filter(a => a),
//下拉框是否展开
show,
@@ -43,36 +45,47 @@ class Framework extends Component{
directionVal: '',
})
}
onReset(data){
this.resetDate(data);
updateBorderColor(tmpColor){
this.setState({ tmpColor });
}
onReset(data, type){
//重置数据
if(type === 'data'){
this.resetDate(data);
}else
//重置选中数据
if(type === 'sels'){
this.setState({ sels: data });
}
}
onClick(e){
let show = !this.state.show;
if(show){
if(this.props.show && this.props.show() == false){
return;
}
//事件互斥原则, 打开一个多选, 关闭其他所有多选
this.props.onClose(this.props.el);
let direction = this.state.direction;
if(direction === 'auto'){
//用于控制js获取下拉框的高度
this.bodyView.style.display = 'block';
this.bodyView.style.visibility = 'hidden';
//获取下拉元素的高度
let bodyViewRect = this.bodyView.getBoundingClientRect();
let bodyViewHeight = bodyViewRect.height;
//还原控制效果
this.bodyView.style.display = '';
this.bodyView.style.visibility = '';
//确定下拉框是朝上还是朝下
let clientHeight = document.documentElement.clientHeight;
let rect = this.base.getBoundingClientRect();
@@ -87,20 +100,20 @@ class Framework extends Component{
//如果产生滚动条, 关闭下拉后回到顶部
this.bodyView.scroll && this.bodyView.scroll(0, 0);
}
this.setState({ show });
//阻止其他绑定事件的冒泡
e && e.stopPropagation();
}
componentWillReceiveProps(props){
this.resetDate(props.data);
this.reset(props)
}
render(config, { sels, show }) {
const { tips, theme, prop, style, radio, repeat, clickClose, on } = config;
const borderStyle = { borderColor: theme.color };
const { tips, theme, prop, style, radio, repeat, clickClose, on, max, maxMethod } = config;
const borderStyle = { borderColor: this.state.tmpColor || theme.color };
//最外层边框的属性
const xmSelectProps = {
style: {
@@ -120,18 +133,29 @@ class Framework extends Component{
}
//普通多选数据
const valueProp = prop.value;
//选项, 选中状态, 禁用状态, 是否强制删除:在label上点击删除
const ck = (item, selected, disabled, mandatoryDelete) => {
//如果是禁用状态, 不能进行操作
if(disabled) return;
//查看是否设置了多选上限
let maxCount = toNum(max);
if(maxCount > 0 && sels.length >= maxCount){
this.updateBorderColor(theme.maxColor);
//恢复正常
setTimeout(() => this.updateBorderColor(''), 300);
//查看是否需要回调
maxMethod && isFunction(maxMethod) && maxMethod(sels, item);
return ;
}
//如果现在是选中状态
if(selected && (!repeat || mandatoryDelete)){
let index = sels.findIndex(sel => sel[valueProp] == item[valueProp])
if(index != -1){
sels.splice(index, 1);
this.setState(sels);
this.setState({ sels });
}
}else{
//如果是单选模式
@@ -141,20 +165,25 @@ class Framework extends Component{
this.setState({ sels: [...sels, item] });
}
}
on && on({ arr: this.state.sels, item, selected: !selected });
//检查是否为选择即关闭状态, 强制删除情况下不做处理
clickClose && !mandatoryDelete && this.onClick();
};
const select = (
<input class="xm-select-default" name={ config.name } value={ sels.map(item => item[prop.value]).join(',') }></input>
)
const labelProps = { ...config, data: this.state.data, sels, ck, title: sels.map(sel => sel[prop.name]).join(',') }
const bodyProps = { ...config, data: this.state.data, sels, ck, show, onReset: this.onReset.bind(this) }
//控制下拉框的显示于隐藏
const bodyClass = ['xm-body', this.state.directionVal, show ? '' : 'dis'].join(' ');
return (
<xm-select { ...xmSelectProps } >
{ select }
<i class={ iconClass } />
<Tips { ...tipsProps } />
<Label { ...labelProps } />
@@ -166,4 +195,4 @@ class Framework extends Component{
}
}
export default Framework;
export default Framework;

0
src/components/element/header.js
View File

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

@@ -1,36 +1,37 @@
import { h, Component, render } from '@/components/preact'
import { isFunction, safety, mergeArr, IEVersion } from '@/components/common/util'
/**
* 普通的多选渲染
*/
class General extends Component{
constructor(options){
super(options);
this.searchCid = 0;
this.setState({
this.setState({
searchValue: '',
filterValue: '',
remote: true,
loading: false,
pageIndex: 1,
pageSize: 10,
inputOver: true,
});
}
optionClick(item, selected, disabled, e){
this.props.ck(item, selected, disabled);
//阻止父组件上的事件冒泡
this.blockClick(e);
}
blockClick(e){
e.stopPropagation();
}
pagePrevClick(e){
let index = this.state.pageIndex;
if(index <= 1){
@@ -45,51 +46,53 @@ class General extends Component{
}
this.changePageIndex(index + 1);
}
changePageIndex(index){
this.setState({
pageIndex: index
})
}
searchInput(e){
let v = e.target.value;
console.log(v, this.state.searchValue)
setTimeout(() => {
if(this.state.inputOver){
//保证输入框内的值是实时的
this.setState({ searchValue: v });
//让搜索变成异步的
clearTimeout(this.searchCid);
this.searchCid = setTimeout(() => this.setState({
filterValue: this.state.searchValue,
remote: true,
}), this.props.delay);
}
}, 0)
if(v === this.state.searchValue){
return ;
}
clearTimeout(this.searchCid);
if(this.state.inputOver){
//保证输入框内的值是实时的
this.setState({ searchValue: v });
//让搜索变成异步的
this.searchCid = setTimeout(() => this.setState({
filterValue: this.state.searchValue,
remote: true,
}), this.props.delay);
}
}
focus(){
this.searchInputRef && this.searchInputRef.focus();
}
blur(){
this.searchInputRef && this.searchInputRef.blur();
}
handleComposition(e){
let type = e.type;
if(type === 'compositionstart'){
this.setState({ inputOver: false })
clearTimeout(this.searchCid);
}else if(type === 'compositionend'){
this.setState({ inputOver: true })
this.searchInput(e);
}
}
componentWillReceiveProps(props){
if(this.props.show != props.show){
if(!props.show){
@@ -101,13 +104,13 @@ class General extends Component{
}
}
}
render(config) {
let { data, prop, template, theme, radio, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips } = config
const { name, value, disabled } = prop;
let arr = data;
//是否开启了搜索
if(filterable){
@@ -119,89 +122,123 @@ class General extends Component{
remoteMethod(this.state.filterValue, result => {
//回调后可以重新聚焦
this.focus();
this.setState({ loading: false });
this.props.onReset(result);
this.props.onReset(result, 'data');
});
}
}else{
arr = data.filter((item, index) => filterMethod(this.state.filterValue, item, index, prop));
}
}
const searchClass = ['xm-search', filterable ? '':'dis'].join(' ');
const search = (
<div class={ searchClass }>
<div class='xm-search'>
<i class="xm-iconfont xm-icon-sousuo"></i>
<input type="text" class="xm-input xm-search-input" placeholder={ searchTips } value={ this.state.searchValue }
ref={ (input) => { this.searchInputRef = input; } }
onClick={ this.blockClick.bind(this) }
onInput={ this.searchInput.bind(this) }
<input type="text" class="xm-input xm-search-input" placeholder={ searchTips } value={ this.state.searchValue }
ref={ input => this.searchInputRef = input }
onClick={ this.blockClick.bind(this) }
onInput={ this.searchInput.bind(this) }
onCompositionStart={ this.handleComposition.bind(this) }
onCompositionUpdate={ this.handleComposition.bind(this) }
onCompositionEnd={ this.handleComposition.bind(this) }
/>
</div>
);
let paging = '';
if(config.paging){
//计算当前分页的总页码
const size = Math.floor((arr.length - 1) / config.pageSize) + 1;
//如果当前页码大于总页码, 重置一下
if(this.state.pageIndex > size){
this.changePageIndex(size);
}
//如有总页码>1, 但是因为搜索造成的页码=0的情况
if(size > 0 && this.state.pageIndex <= 0){
this.changePageIndex(1);
}
//实现简单的物理分页
let start = (this.state.pageIndex - 1) * config.pageSize;
let end = start + config.pageSize;
arr = arr.slice(start, end);
const disabledStyle = {cursor: 'no-drop', color: '#d2d2d2'};
let prevStyle = {}, nextStyle = {};
this.state.pageIndex <= 1 && (prevStyle = disabledStyle);
this.state.pageIndex == size && (nextStyle = disabledStyle);
const defaultCurrClass = {
position: 'relative',
borderRadius: '1px',
}
const pagingClass = 'xm-paging';
// {
// ''.padEnd(size, ' ').split('').map((s, i) => (
// <span style={
// this.state.pageIndex == i + 1 ? {
// ...defaultCurrClass,
// backgroundColor: theme.color,
// this.state.pageIndex == i + 1 ? {
// ...defaultCurrClass,
// backgroundColor: theme.color,
// borderColor: theme.color,
// color: '#FFF',
// } : defaultCurrClass
// } : defaultCurrClass
// }>{ i + 1 }</span>
// ))
// }
paging = (
<div class={ pagingClass }>
<div class='xm-paging'>
<span style={ prevStyle } onClick={ this.pagePrevClick.bind(this) }>上一页</span>
<span>{ this.state.pageIndex } / { size }</span>
<span style={ nextStyle } onClick={ e => this.pageNextClick.bind(this, e, size)() }>下一页</span>
</div>
)
}
let safetyArr = safety(arr);
//工具条操作
const toolbar = (
<div class='xm-toolbar'>
{ config.toolbar.list.map(tool => {
const toolClass = 'toolbar-tag';
let info;
if(tool === 'ALL'){
info = { icon: 'xm-iconfont xm-icon-quanxuan', name: '全选', method: (data) => {
this.props.onReset(mergeArr(data, sels, prop), 'sels');
} };
}else if(tool === 'CLEAR'){
info = { icon: 'xm-iconfont xm-icon-qingkong', name: '清空', method: (data) => {
this.props.onReset([], 'sels');
} };
}else {
info = tool
}
const hoverChange = e => {
if(e.type === 'mouseenter') e.target.style.color = theme.color;
if(e.type === 'mouseleave') e.target.style.color = '';
}
return (<div class={ toolClass } onClick={ () => {
isFunction(info.method) && info.method(safetyArr)
} } onMouseEnter={ hoverChange } onMouseLeave={ hoverChange }>
{ config.toolbar.showIcon && <i class={ info.icon }></i> }
<span>{ info.name }</span>
</div>)
}).filter(a => a) }
</div>
)
arr = arr.map(item => {
const selected = !!sels.find(sel => sel[value] == item[value])
const iconStyle = selected ? {
color: theme.color,
@@ -212,26 +249,27 @@ class General extends Component{
};
const className = ['xm-option', (item[disabled] ? ' disabled' : ''), (selected ? ' selected' : '')].join(' ');
const iconClass = ['xm-option-icon xm-iconfont', radio ? 'xm-icon-danx' : 'xm-icon-duox'].join(' ');
return (
<div class={className} value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled]) }>
<i class={ iconClass } style={ iconStyle }></i>
<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template({ data, item, arr: sels, name: item[name], value: item[value] }) }}></div>
</div>
)
})
})
if(!arr.length){
arr.push(
<div class="xm-select-empty">{ empty }</div>
)
}
return (
<div onClick={ this.blockClick }>
<div onClick={ this.blockClick }>
<div>
{ search }
<div style={ {maxHeight: config.height, overflow: 'auto'} }>{ arr }</div>
{ config.toolbar.show && toolbar }
{ filterable && search }
<div class="scroll-body" style={ {maxHeight: config.height} }>{ arr }</div>
{ config.paging && paging }
</div>
{ this.state.loading && <div class="loading" >
@@ -242,4 +280,4 @@ class General extends Component{
}
}
export default General;
export default General;

137
src/style/index.less
View File

@@ -36,19 +36,19 @@
xm-select{
*{
margin: 0;
padding: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 14px;
font-weight: 400;
color: @fontColor;
// color: @fontColor;
text-overflow: ellipsis;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
background-color: #FFF;
position: relative;
border: @border;
@@ -58,18 +58,18 @@ xm-select{
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;
@@ -86,12 +86,12 @@ xm-select{
transition: all .3s;
-webkit-transition: all .3s
}
& > .xm-icon-expand{
margin-top: -9px;
transform: rotate(180deg);
}
& > .xm-label{
// padding: 0 30px 0 10px;
position: absolute;
@@ -100,10 +100,10 @@ xm-select{
left: 10px;
right: 30px;
overflow: auto hidden;
.scroll{
overflow-y: hidden;
.label-content{
height: calc(100% - 20px);
display: flex;
@@ -114,7 +114,7 @@ xm-select{
}
}
}
.xm-label-block{
display: flex;
position: relative;
@@ -125,13 +125,13 @@ xm-select{
border-radius: 3px;
align-items: baseline;
color: #FFF;
& > span{
display: flex;
color: #FFF;
white-space: nowrap;
}
& > i{
color: #FFF;
margin-left: 8px;
@@ -139,7 +139,7 @@ xm-select{
cursor: pointer;
display: flex;
}
&.disabled{
background-color: @disabledColor !important;
cursor: no-drop !important;
@@ -149,7 +149,7 @@ xm-select{
}
}
}
& > .xm-body {
position: absolute;
left: 0;
@@ -167,23 +167,38 @@ xm-select{
animation-name: xm-upbit;
animation-duration: .3s;
animation-fill-mode: both;
.scroll-body{
overflow: auto;
.scrollBorder() {
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-ms-border-radius: 2em;
border-radius:2em;
}
&::-webkit-scrollbar{ width: 8px; }
&::-webkit-scrollbar-track{ .scrollBorder(); background-color: #FFF; }
&::-webkit-scrollbar-thumb{ .scrollBorder(); background-color: #C2C2C2; }
}
&.up{
top: auto;
bottom: 42px;
}
.xm-option{
display: flex;
align-items: center;
position: relative;
padding: 0 10px;
cursor: pointer;
&:hover{
background-color: #f2f2f2;
}
&-icon{
color: transparent;
display: flex;
@@ -197,7 +212,7 @@ xm-select{
&-icon.xm-icon-danx{
border-radius: 100%;
}
&-content{
display: flex;
position: relative;
@@ -205,16 +220,16 @@ xm-select{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #666;
color: @fontColor;
width: calc(100% - 20px);
}
}
.xm-select-empty{
text-align: center;
color: #999;
}
.disabled{
cursor: no-drop;
&:hover{
@@ -226,23 +241,24 @@ xm-select{
.xm-option-content{
color: @disabledColor !important;
}
&.selected>.xm-option-icon{
color: @disabledColor !important;
}
}
.xm-search{
background-color: #FFF !important;
position: relative;
padding: 0 10px;
margin-bottom: 5px;
cursor: pointer;
&>i{
position: absolute;
color: @fontColor;
}
&-input{
border: none;
border-bottom: 1px solid #E6E6E6;
@@ -250,19 +266,19 @@ xm-select{
cursor: text;
}
}
.xm-paging{
padding: 0 10px;
display: flex;
margin-top: 5px;
&>span:first-child{
border-radius: 2px 0 0 2px;
}
&>span:last-child{
border-radius: 0 2px 2px 0
}
&>span{
display: flex;
flex: auto;
@@ -278,8 +294,39 @@ xm-select{
border: 1px solid #e2e2e2;
}
}
.xm-toolbar{
padding: 0 10px;
display: flex;
margin: -3px 0;
cursor: default;
.toolbar-tag{
cursor: pointer;
display: flex;
margin-right: 20px;
color: @fontColor;
align-items: baseline;
&:hover{
opacity: .8;
}
&:active{
opacity: 1;
}
&>i{
margin-right: 2px;
font-size: 14px;
}
&:last-child{
margin-right: 0;
}
}
}
}
.xm-input{
cursor: pointer;
border-radius: 2px;
@@ -295,11 +342,11 @@ xm-select{
padding-left: 10px;
outline: 0;
}
.dis{
display: none;
}
.loading{
position: absolute;
top: 0;
@@ -310,15 +357,15 @@ xm-select{
display: flex;
align-items: center;
justify-content: center;
.loader{
border: .2em dotted currentcolor;
border-radius: 50%;
-webkit-animation: 1s loader linear infinite;
animation: 1s loader linear infinite;
display: inline-block;
width: 1em;
height: 1em;
@@ -327,7 +374,11 @@ xm-select{
pointer-events: none;
}
}
.xm-select-default{
display: none !important;
}
}
// xm-select[ua='win']{
@@ -335,4 +386,4 @@ xm-select{
// margin-top: 0px;
// margin-bottom: -2px;
// }
// }
// }