FT/foton-laws-system-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
zhutianqi
2021-08-06 10:16:20 +08:00
parent 143e25daa6
commit e6c9e97d9b
7 changed files with 92 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mySelect/index.vue
+27 -62
View File
@@ -3,7 +3,7 @@
<el-dropdown placement="bottom" @command="handleCommand" trigger="click">
<div class="my-select-input__wrap">
<input class="el-input__inner" type="text" v-model.lazy="selectVal" v-show="false">
<input class="el-input__inner" type="text" v-model.lazy="showLabel" readonly="readonly">
<input class="el-input__inner mySelect" type="text" v-model.lazy="showLabel" readonly="readonly">
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
@@ -11,6 +11,7 @@
:key="index"
:command="item">{{ item.label }}</el-dropdown-item>
</el-dropdown-menu>
<i class="el-icon-arrow-down myIcon"></i>
</el-dropdown>
</div>
</template>
@@ -76,65 +77,29 @@
.active {
background-color: rgb(245, 247, 250);
}
/*ul {*/
/* position: absolute;*/
/* z-index: 9999;*/
/* background-color: rgb(255, 255, 255);*/
/* box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;*/
/* box-sizing: border-box;*/
/* border-width: 1px;*/
/* border-style: solid;*/
/* border-color: rgb(228, 231, 237);*/
/* border-image: initial;*/
/* border-radius: 4px;*/
/* box-sizing: border-box;*/
/* list-style: none;*/
/* padding: 6px 0px;*/
/* margin: 0px;*/
/* display: block;*/
/* list-style-type: disc;*/
/* margin-block-start: 1em;*/
/* margin-block-end: 1em;*/
/* margin-inline-start: 0px;*/
/* margin-inline-end: 0px;*/
/* width: 100%;*/
/* li {*/
/* list-style:none;*/
/* height: 34px;*/
/* line-height: 34px;*/
/* padding: 0 20px;*/
/* }*/
/* li:hover {*/
/* background-color: rgb(245, 247, 250);*/
/* }*/
/*}*/
/*.mySelect {*/
/* width: 100%;*/
/* position: relative;*/
/* option {*/
/* height: 34px;*/
/* line-height: 34px;*/
/* padding: 0 20px;*/
/* }*/
/*}*/
/*.mySelect:focus + .myIcon{*/
/* transform:rotate(180deg);*/
/* -ms-transform:rotate(180deg); !* IE 9 *!*/
/* -moz-transform:rotate(180deg); !* Firefox *!*/
/* -webkit-transform:rotate(180deg); !* Safari 和 Chrome *!*/
/* -o-transform:rotate(180deg);*/
/*}*/
/*.mySelect:focus-within + .myIcon{*/
/* transform:rotate(180deg);*/
/* -ms-transform:rotate(180deg); !* IE 9 *!*/
/* -moz-transform:rotate(180deg); !* Firefox *!*/
/* -webkit-transform:rotate(180deg); !* Safari 和 Chrome *!*/
/* -o-transform:rotate(180deg);*/
/*}*/
/*.myIcon {*/
/* position: absolute;*/
/* right: 7px;*/
/* top: calc(~'50% - 7px');*/
/* transition: all .3s;*/
/*}*/
.mySelect {
width: 100%;
position: relative;
}
.mySelect:focus + .myIcon{
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg);
}
.mySelect:focus-within + .myIcon{
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg);
}
.myIcon {
cursor: pointer;
position: absolute;
right: 7px;
top: calc(~'50% - 7px');
transition: all .3s;
}
</style>