主要內(nèi)容
1 .實際功能就是父組件點擊彈出一個隱藏的下拉框,點擊選擇元素，還可以按鼠標(biāo)上下鍵切換選項。
2 .這個其實就是之前顯示文件的邏輯，但是好像這個部分的代碼是另一個程序?qū)懙?看了下github的提交人，發(fā)現(xiàn)是一個程序員，但是不知道為什么是兩種風(fēng)格，還是有更多我不知道的細(xì)節(jié)
3 .還用了一個boradcast 方法，來監(jiān)聽別的組件給的方法
created(){
this.$on('on-update-popper',this.update);
this.$on('on-destroy-popper', this.destroy);
},
//組件創(chuàng)建的時候就監(jiān)聽這倆個事件
//然后外部給派發(fā)事件
methods:{
update(){
console.log("需要更新")
},
destory(){
console.log("需要銷毀組件")
}
}
4 .源碼好像是使用給的這個部分的代碼 popper.js。我決定還是按照自己的方法實現(xiàn)。
5 .為什么他這個代碼這么復(fù)雜。。。我怎么感覺這個功能還是很簡單的。。
6 .我還是先按照自己的方法實現(xiàn)在看他的源碼是怎么個操作方法吧
7 .
里面的內(nèi)容直接slot傳進來
1 .他沒有嵌套那種復(fù)雜結(jié)構(gòu)，所以可以直接傳一個對象進來，不需要在單獨寫一個組件了吧，不知道為啥他還會有一個option的組件
{
value:"New York",
label:"Nwe York",
},
{
value:"London",
label:"London",
},
{
value:"上海",
label:"上海"
},
{
value:"hot",
label:"hot",
type:'title'
},
// 這里是標(biāo)題
{
value:"廣州",
label:"廣州",
}
//所有的都是這個樣子，如果要有標(biāo)題的話就加上一個type的字段
2 .這里并不需要雙向綁定，所以我不要在這里做v-moedel綁定.而是給一個回調(diào)事件
3 .div綁定 keydown事件，我原來以為是需要給這個div加個focus()事件，或者直接給全局掛事件，或者里面隱藏一個input來觸發(fā)，但是發(fā)現(xiàn)用的是tab-index
tabIndex 用法概述
1 .可以設(shè)置鍵盤的TAB鍵在控件種的移動順序，即焦點的順序
2 .把控件的tabIndex屬性設(shè)置為1-32767的一個值，就可以把這個控件加入TAB的序列中，當(dāng)瀏覽者使用TAB鍵在網(wǎng)頁種移動時，首先移動到最小的tabIndex屬性值上，然后在具有最大tabIndex屬性值的空間上結(jié)束
3 .默認(rèn)的index屬性為0，將排列在所有執(zhí)行tabIndex的控件之后
4 .如果把他設(shè)置為一個負(fù)值，那么這個鏈接將被排除在TAB鍵的序列之外。但是onfocus，onblur事件任然會觸發(fā)，onkeydown這些就不會觸發(fā)了。不能通過tab導(dǎo)航來訪問改元素，可以通過js獲取
5 .通常使用 tab 鍵移動焦點，使用空格鍵激活焦點
6 .指示元素是否可以聚焦，以及在何處參與順序鍵盤導(dǎo)航
7 .html5已經(jīng)支持所有元素。
8 .如果多個元素?fù)碛邢嗤膖abIndex，他的相對順序按照他們在當(dāng)前DOM中的先后順序決定
9 .document.activeElement:返回當(dāng)前頁面中獲得焦點的元素，該屬性只讀。不支持IE
10 .設(shè)置焦點
1 .使用tab鍵來根據(jù)tabindex的定義來切換焦點
2 .document.getElementById("id").focus({preventScroll:false})
3 .preventScroll默認(rèn)為false,表示當(dāng)觸犯的時候，瀏覽器會將元素滾動到視圖中
11 .判斷焦點 hasFocus()
1 .如果當(dāng)前頁面的活動元素獲得了焦點，Document.hasFocus為true,否則為false?？梢耘袛嘤脩羰欠裾诤晚撁孢M行交互
12 .focus:元素獲取焦點時觸發(fā)，不支持冒泡
13 .focusin:元素獲取焦點時觸發(fā)，支持冒泡
14 .blur:在元素失去焦點時觸發(fā)，不支持冒泡
15 .focusout:在元素失去焦點時觸發(fā)，支持冒泡
全部代碼
<template>
<div
:class="classes"
>
<div
:class="selectCls"
@blur="toggleHeaderFocus"
@focus="toggleHeaderFocus"
@click="toggleMenu"
@keydown.esc="handleKeydown"
@keydown.enter="handleKeydown"
@keydown.up.prevent="handleKeydown"
@keydown.down.prevent="handleKeydown"
@keydown.tab="handleKeydown"
@keydown.delete="handleKeydown"
@mouseenter="hasMouseHoverHead=true"
@mouseleave="hasMouseHoverHead=false"
:tabindex="selectTabindex"
>
<slot name="input">
<input type="hidden" :name="name" :value="publicValue">
<!-- <input type="text" :name="name" :value="publicValue" ref="liSelect"> -->
<SelectHeader
:filterable="filterable"
:multiple="multiple"
:values="values"
:clearable="canBeCleared"
:prefix="prefix"
:disabled="disabled"
:remote="remote"
:input-element-id="elementId"
:initial-label="initialLabel"
:placeholder="placeholder"
:query-prop="query"
:max-tag-count="maxTagCount"
:max-tag-placeholder="maxTagPlaceholder"
:allow-create="allowCreate"
:show-create-item="showCreateItem"
@on-query-change="onQueryChange"
@on-input-focus="isFocused=true"
@on-input-blur="isFocused=false"
@on-clear="clearSingleSelect"
@on-enter="handleCreateItem"
>
</SelectHeader>
</slot>
{{query}}
</div>
<transition name="transition-drop">
<Drop
:class="dropdownCls"
v-show="dropVisible"
:placement="placement"
:transfer="transform"
>
<!-- 有的就直接傳下去了，有的卻選擇了slot操作 -->
<ul
:class="[pre+'-not-found']"
v-show="showNotFoundLabel && !allowCreate">
<li>{{notFountText}}</li>
</ul>
<ul
v-show="query"
>
<li
@click="handleQueryClick(query)"
>{{query}}</li>
</ul>
<ul v-show="!this.query">
<li
v-for="(c,index) in selectOptions"
@click="handLelabelClick(c,index)"
:disabled="c.disabled===true"
:class="methodClasses(c,index)"
v-if="(!remote)||(remote&&!loading)"
>
{{c.value}}
</li>
</ul>
{{currentIndex}}
</Drop>
</transition>
</div>
</template>
<script>
// v-click-outside="handleClickOutside"
// v-click-outside.mousedown="handleClickOutside"
// v-click-outside.touchstart="handleClickOutside"
import ClickOutside from '../../../direction/outsideclick'
import SelectHeader from './selectHead'
import Emitter from '../../../utils/emitter'
import Drop from './drop'
export default {
name:'Select',
mixins:[Emitter],
data:function(){
return {
pre:"li-select",
values:[],
// 選好的
isFocused:false,
visiable:false,
// 這個現(xiàn)在也不知道是干啥的。
hasMouseHoverHead:false,
active:false,
// 這個為什么沒有定義，而且沒有人該他，應(yīng)該是別的mixins里面有定義，最后再看下代碼吧
focusIndex:-1,
query:'',
unchangeQuery:false,
filterQueryChange:false,
initialLabel:this.label,
lastRemoteQuery:'',
transform:{
left:0,
top:0,
width:200,
},
currentIndex:0,
// 當(dāng)前正在選擇的元素
indexSelectOptions:[],
}
},
props:{
capture: {
type: Boolean,
default () {
return !this.$IVIEW ? true : this.$IVIEW.capture;
}
},
// 是否開啟capture模式，目前還不支持
value:{
type:[String,Number,Array],
default:''
},
// 當(dāng)前選中項目的value值，可以使用v-model雙向綁定。單選時只接受String或Number，多選時只接受Array
label:{
type:[String,Number,Array],
default:'',
},
// remote模式下，初始化使用
multiple:{
type:Boolean,
default:true,
},
// 是否支持多選
disabled:{
type:Boolean,
default:false,
},
// 是否禁用
clearable:{
type:Boolean,
default:true,
},
// 是否可以清空選項，單選時有效
placeholder:{
type:String,
},
// 選擇框默認(rèn)文字
filterable:{
type:Boolean,
default:false,
},
// 是否支持搜索
remote:{
type:Boolean,
default:false
},
// 是否開啟遠(yuǎn)程搜索
filterMethod:{
type:Function,
},
// 遠(yuǎn)程搜索的方法
loading:{
type:Boolean,
default:false,
},
// 是否正在遠(yuǎn)程搜索
loadingText:{
type:String,
},
// 遠(yuǎn)程搜索中的文字提示
size:{
validator(value){
return ['small','large','default'].includes(value)
},
default:'default',
},
labelInValue:{
type:Boolean,
default:false,
},
// 在返回時，是否將label和value一并返回，默認(rèn)只返回value
notFountText:{
type:String,
default:'沒有匹配的選項'
},
// 下拉列表為空時顯示的內(nèi)容
placement:{
validator(value){
return ['top','bottom','top-satrt','bottom-start','bottom-end'].includes(value)
},
default:'bottom-start',
},
// 彈窗展開的方向
autoComplete:{
type:Boolean,
default:false,
},
transfer:{
type:Boolean,
default:false,
},
// 是否將彈層置放于body內(nèi)，不受父級元素影響，從而達(dá)到更好的效果
name:{
type:String,
},
elementId:{
type:String,
},
// 給表元素添加id
prefix:{
type:String,
},
// select內(nèi)顯示的圖標(biāo)
maxTagCount:{
type:Number,
},
// 多選時最多顯示幾個圖標(biāo)
maxTagPlaceholder:{
type:Function,
},
// 隱藏tag時顯示的內(nèi)容
allowCreate:{
type:Boolean,
default:true,
},
// 是否允許用戶創(chuàng)建新條目
selectOptions:{
type:Array,
default:function(){
return [
{
value:"New York",
label:"Nwe York",
},
{
value:"hot",
label:"hot",
type:'title',
disabled:true
},
// 這里是標(biāo)題
{
value:"廣州",
label:"廣州",
disabled:true,
},
{
value:"杭州",
label:"杭州",
},
{
value:"蘇州",
label:"蘇州",
}
]
}
}
},
computed:{
classes(){
return [
`${this.pre}`,
{
[`${this.pre}-visible`]:this.visiable,
[`${this.pre}-disabled`]:this.disabled,
[`${this.pre}-multiple`]:this.multiple,
[`${this.pre}-single`]:!this.multiple,
[`${this.pre}-show-clear`]:this.showCloseIcon,
[`${this.pre}-${this.size}`]:!!this.size,
}
]
},
selectCls(){
return [
{
[`${this.pre}-selection`]:!this.autoComplete,
[`${this.pre}-selection-focused`]:this.isFocused
}
]
},
publicValue(){
return ''
},
canBeCleared(){
const uiStateMatch=this.hasMouseHoverHead||this.active
const qualifiesForClear=!this.multiple&&!this.disabled&&this.clearable
return uiStateMatch&&qualifiesForClear&&this.reset
},
showCreateItem(){
let state=false
if(this.allowCreate&&this.query!==''){
state=true
}
return state;
},
dropVisible(){
let status=true;
if(!this.visiable){
status=false
}
// const noOptions=!this.selectOptions||this.selectOptions.length===0
return status;
},
dropdownCls(){
return [
`${this.pre}-list`
]
},
showNotFoundLabel(){
return this.selectOptions&&this.selectOptions.length===0&&(!this.remote||(this.remote&&!this.loading))
},
selectTabindex(){
return this.disabled||this.filterable?-1:0;
}
},
directives:{
ClickOutside
},
methods:{
handleClickOutside(e){
if(this.visiable){
console.log("點擊外部要關(guān)掉")
}else{
this.isFocused=false;
}
},
toggleHeaderFocus({type}){
if(this.disabled){
return
}
// this.isFocused=type==='focus'
this.isFocused=!this.isFocused
},
toggleMenu(e,force){
if(this.disabled)return false
this.visiable= typeof force !=='undefined'?force:!this.visiable;
if(this.visiable){
console.log("展開下面的東西")
this.getSelectPosition()
this.broadcast("li-drop",'on-update-popper')
}
},
getSelectPosition(){
let el=this.$el.getBoundingClientRect()
let top=el.top+document.documentElement.scrollTop+el.height
let left=el.left+document.documentElement.scrollLeft
let width=el.width
this.transform={top,left,width}
},
hiadeMenu(){
console.log("關(guān)閉菜單")
this.toggleMenu(null,false)
},
NavigateOptions(value){
let index=this.currentIndex
if(value>0){
console.log("向下")
if(index+1>this.selectOptions.length){
// 檢查一下一個是否能加到里面去
index=0
this.currentIndex=this.checkDisabledAndTitleDownP(index,false)
}else{
index++
console.log('lala')
this.currentIndex=this.checkDisabledAndTitleDownP(index,false)
}
}else{
console.log('向上')
if(index-1<0){
index=this.selectOptions.length
this.currentIndex=this.checkDisabledAndTitleDownP(index,true)
}else{
index--
this.currentIndex=this.checkDisabledAndTitleDownP(index,true)
}
}
},
handleKeydown(e){
const key=e.key||e.computed
if(key==='Backspace')return
if(this.visiable){
e.preventDefault()
console.log(key)
// switch (key){
// case "Tab":
// console.log('Tag')
// e.stopPropagation();
// case "Escape":
// e.stopPropagation();
// this.hideMenu()
// case "ArrowUp":
// this.NavigateOptions(-1)
// case 'ArrowDown':
// this.NavigateOptions(1)
// case 'Enter':
// console.log('enter')
// }
// 雖然看起來是可以的，但是好像沒有走全等的邏輯，滿足上面的條件，也滿足下面的條件，會兩個一起執(zhí)行
if(key==='ArrowDown'){
this.NavigateOptions(1)
}else if(key==='ArrowUp'){
this.NavigateOptions(-1)
}else if(key==="Tab"){
e.stopPropagation()
}else if(key==="Enter"){
this.handleEnter()
}else if(key=="Esc"){
console.log("關(guān)閉菜單")
this.hiadeMenu()
}
}else{
}
},
reset(){
this.query=''
this.focusIndex=-1;
this.unchangeQuery=true
this.values=[]
this.filterQueryChange=false
},
cleaSingleSelect(){
console.log("clear")
},
onQueryChange(query){
if(query.length>0&&query!==this.query){
// 重復(fù)的值不操作
if(this.autoComplete){
let isInputFocused=
document.hasFocus&&
document.hasFocus()&&
document.activeElement==this.$el.querySelector('input')
this.visiable=isInputFocused
}else{
this.visiable=true
}
}
this.query=query;
this.unchangeQuery=this.visiable;
this.filterQueryChange=true;
},
clearSingleSelect(){
this.$emit("on-clear")
this.hiadeMenu()
if(this.clearable)this.reset()
},
handleQueryClick(option){
this.handleCreateItem(option)
},
handleCreateItem(option){
if(this.allowCreate&&this.query!==''&&this.showCreateItem){
let query=''
if(option){
console.log(option)
query=option
}
query=this.query
// 他是在開了query的基礎(chǔ)上，如果發(fā)生搜索的時候自己按下enter，這個時候就會觸發(fā)進行創(chuàng)建新的item
this.$emit("on-create",query)
this.query=''
const option={
value:query,
label:query,
tag:undefined,
}
if(this.multiple){
this.onOptionClick(option)
}else{
this.$nextTick(()=>{
this.onOptionClick(option)
})
}
}else{
this.handleEnter()
}
},
onOptionClick(option){
if(this.multiple){
if(this.remote){
this.lastRemoteQuery=this.lastRemoteQuery||this.query
}else{
this.lastRemoteQuery=''
}
const valueIsSelect=this.values.find(
({value})=> value===option.value
)
const selectIsSelect=this.selectOptions.find(
({value})=>value===option.value
)
if(valueIsSelect){
this.values=this.values.filter(({value})=>{
value!==option.value
})
// 如果新加的值是之前已經(jīng)選過的,那就過濾顯示即可
}else{
this.values=[...this.values,option]
// 如果不是就直接加進去
if(selectIsSelect){
console.log('之前就有的enter不輸入了')
return
}else{
this.selectOptions.push(option)
}
console.log('emit')
}
this.isFocused=true
this.initIndexOptions()
}else{
console.log("options")
this.query=String(option.label).trim();
this.values=[option]
this.lastRemoteQuery=''
const selectIsSelect=this.selectOptions.find(
({value})=>value===option.value
)
if(selectIsSelect){
console.log('原來就有')
}else{
console.log('已添加')
this.selectOptions.push(option)
console.log(this.selectOptions)
}
this.initIndexOptions()
this.hiadeMenu();
this.query=''
}
},
handLelabelClick(e,index){
if(e.type&&e.type=='title'||e.disabled){
console.log("點擊了一個標(biāo)題，不做處理")
return false
}else{
if(this.multiple){
if(this.remote){
this.lastRemoteQuery=this.lastRemoteQuery||this.query
}else{
this.lastRemoteQuery=''
}
const valueIsSelect=this.values.find(
({value})=> value===e.value
)
if(valueIsSelect){
this.currentIndex=index
return
}else{
this.values=[...this.values,e]
// 如果不是就直接加進去
this.$emit("on-select-change",this.values)
this.currentIndex=index
}
this.isFocused=true
}else{
console.log("options")
// this.query=String(e.label).trim();
this.values=[e]
this.lastRemoteQuery=''
this.hiadeMenu();
this.$emit("on-select-change",this.values)
this.index=0
}
}
},
checkDisabledAndTitleDownP(index,isUp){
console.log(index)
let result=[]
if(!isUp){
let end=this.indexSelectOptions.slice(index,this.indexSelectOptions.length)
let start=this.indexSelectOptions.slice(0,index)
result=[...end,...start]
}else{
let end=this.indexSelectOptions.slice(index,this.indexSelectOptions.length).reverse()
let start=this.indexSelectOptions.slice(0,index+1).reverse()
result=[...start,...end]
}
console.log(result)
for(let i=0;i<result.length;i++){
if(!result[i].type&&!result[i].disabled){
console.log('輸出',result[i]['index'])
return result[i]['index']
}
}
},
initIndexOptions(){
this.indexSelectOptions=[]
if(this.indexSelectOptions.length){
this.indexSelectOptions=[]
}
for(let i=0;i<this.selectOptions.length;i++){
let item=this.selectOptions[i]
item['index']=i
this.indexSelectOptions.push(item)
}
},
handleEnter(){
if(this.allowCreate&&this.query!=='')return
console.log('enter-添加')
const options=this.selectOptions[this.currentIndex]
if(this.multiple){
if(this.remote){
this.lastRemoteQuery=this.lastRemoteQuery||this.query
}else{
this.lastRemoteQuery=''
}
const valueIsSelect=this.values.find(
({value})=> value===options.value
)
if(valueIsSelect){
return
}else{
this.values=[...this.values,options]
// 如果不是就直接加進去
this.$emit("on-select-change",this.values)
}
this.isFocused=true
}else{
this.query=String(options.label).trim();
this.values=[options]
this.lastRemoteQuery=''
this.hiadeMenu();
this.$emit("on-select-change",this.values)
this.index=0
console.log('單選')
}
},
methodClasses(c,index){
const valueIsSelect=this.values.find(
({value})=> value===c.value
)
return [
`${this.pre}-item`,
{
[`${this.pre}-item-disabled`]:!(c.type&&c.type=='title')&&c.disabled,
[`${this.pre}-item-selected`]:valueIsSelect,
[`${this.pre}-item-title`]:c.type&&c.type=='title',
[`${this.pre}-item-focus`]:this.currentIndex==index,
}
]
},
remove(e){
console.log('remove')
console.log(e)
}
},
components:{
SelectHeader,Drop,
},
mounted(){
this.initIndexOptions()
this.$on('on-remove-select',this.remove)
}
}
</script>
<style lang="less" src="./select.less">
</style>
drop組件
1 .用來裝所有在本元素下面的那個下拉元素
<template>
<div
:class="className"
:style="computedStyle"
class="li-select-drop">
<slot></slot>
</div>
</template>
<script>
export default {
name:'li-drop',
props:{
className:{
type:String,
},
placement:{
type:String,
default:'bottom-start'
},
transfer:{
type:Object,
default:{
left:100,
top:100,
width:200,
}
}
},
computed:{
},
computed:{
computedStyle(){
let left=this.transfer.left
let top=this.transfer.top
let width=this.transfer.width
return {
left:`${left}px`,
top:`${top}px`,
width:`${width}px`,
}
}
}
}
</script>
less文件
@name:.li-select;
.hover(){
border-color:#57a3f3;
}
.active(){
border-color: #57a3f3;
outline: 0;
box-shadow: 0 0 0 2px rgba(45,140,240,.2)
}
.disabled(){
background-color: #f3f3f3;
opacity: 1;
cursor: not-allowed;
color: #ccc;
}
// 這些事全局沒有搜到的樣式，從css編出來的代碼反編譯出來的
@{name}{
display: inline-block;
width: 100%;
box-sizing: border-box;
vertical-align: middle;
color:@text-color;
font-size: @font-size-base;
&-selection{
display: block;
box-sizing: border-box;
outline:none;
user-select: none;
cursor: pointer;
position: relative;
background-color: #fff;
border-radius: @btn-border-radius;
border:1px solid @border-color-base;
transition:all @transition-time @ease-in-out;
&:hover,&-focused{
.hover()
}
}
.inner-arrow(){
position: absolute;
top: 50%;
right: 8px;
line-height: 1;
transform: translateY(-50%);
font-size: @font-size-base;
color: @subsidiary-color;
transition: all @transition-time @ease-in-out;
}
&-arrow{
.inner-arrow();
}
&-visible{
@{name}-selection{
.active()
}
@{name}-arrow{
transform:translateY(-50%) rotate(-90deg);
display:block;
}
}
&-disabled{
color:red;
@{name}-selection{
.disabled();
color:red;
@{name}-arrow{
color:@slider-disabled-color;
}
&:hover{
border-color:@border-color-base;
box-shadow:none;
@{name}-arrow{
display: inline-block;
}
}
}
}
// 單個樣式
&-single &-selection{
height:@input-height-base;
position: relative;
@{name}-placeholder{
color:@input-placeholder-color;
}
@{name}-placeholder, @{name}-selected-value{
display: block;
height:@input-height-base - 2px;
line-height: @input-height-base - 2px;
font-size: @font-size-base;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left:8px;
padding-right:24px;
text-align: start;
}
}
&-single &-input{
width: 100%;
}
// 多選樣式
&-multiple &-selection{
padding: 0 24px 0 4px;
@{name}-placeholder{
display: block;
height: @input-height-base - 2px;
line-height: @input-height-base - 2px;
color:@input-placeholder-color;
font-size:@font-size-base;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 4px;
padding-right: 22px;
}
@{name}-tag{
height: 24px;
line-height: 22px;
margin: 3px 4px 3px 0;
max-width: 99%;
position: relative;
}
}
&-tag{
display: inline-block;
height: 22px;
line-height: 22px;
margin: 2px 4px 2px 0;
padding: 0 8px;
border: 1px solid #e8eaec;
border-radius: 3px;
background: #f7f7f7;
font-size: 12px;
vertical-align: middle;
opacity: 1;
overflow: hidden;
&-wrapper{
display: flex;
}
}
&-default &-multiple &selection{
min-height: @input-height-base;
}
// head部分
&-head-flex{
display: flex;
align-items: center;
}
&-prefix{
display: inline-block;
vertical-align: middle;
}
&-head-with-prefix{
display: inline-block !important;
vertical-align: middle;
}
&-input{
display: inline-block;
height: @input-height-base;
line-height: @input-height-base;
padding:0 24px 0 8px;
outline: none;
border:none;
box-sizing: border-box;
color:@input-color;
background-color: transparent;
position: relative;
cursor:pointer;
&[disabled]{
cursor:@cursor-disabled;
color:#ccc;
-webkit-text-fill-color:#ccc;
}
}
&-list{
// min-width: 100%;
list-style-type:none;
width: inherit;
max-height: 200px;
overflow: auto;
margin: 2px 0;
padding: 5px 0;
background-color: #fff;
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 1px 6px rgba(0,0,0,.2);
position: absolute;
z-index: 900;
}
&-item{
margin: 0;
line-height: normal;
padding:7px 16px;
clear:both;
color:@text-color;
font-size:@font-size-base !important;
white-space: normal;
list-style: none;
cursor: pointer;
transition: background @transition-time @ease-in-out;
text-align: start;
&:hover{
background:@background-color-select-hover;
}
&-focus{
background:@background-color-select-hover;
color:@primary-color;
}
&-disabled{
color:@btn-disable-color;
cursor:@cursor-disabled;
&:hover{
color:@btn-disable-color !important;
background-color:#fff !important;
cursor:@cursor-disabled;
}
}
&-selected,&-selected:hover{
color:@primary-color;
background:#f3f3f3;
}
&-title{
font-size: 14px;
padding-left: 8px;
color:#999;
height:30px;
line-height: 30px;
}
}
}
