在没有引进element-ui组件的项目中，某个页面需要实现类似于el-select的功能及样式，如果引入element-ui的样式和js文件，会导致内容过大，页面加载比较慢。所以我手写了一个差不多的组件，在pc和移动端简单区分了个别样式，效果图如下：
注：样式中涉及的“×"、"勾”及“上下翻转”符号我是从阿里巴巴矢量图库中下载生成的svg的图片格式
直接上代码：
样式部分
<style>
.info_desc {
font-size: 14px;
}
.inputBox {
position: relative;
margin: 8px 0 15px;
}
@media (max-width: 740px) {
.inputBox input {
width: 100%;
max-width: 100%;
}
.select-dropdown {
min-width: 315px;
}
.select .contentSelect {
width: 100%;
overflow: scroll;
max-width: 283px;
}
.submitError {
width: 70%;
}
}
@media (min-width: 741px) {
.inputBox {
width: 300px;
}
.inputBox input {
width: 300px;
}
.last {
width: 100%;
}
.select .contentSelect {
/* overflow: hidden;
max-width: 265px; */
width: max-content;
min-width: 240px;
}
.select-dropdown {
min-width: 300px;
}
.submitError {
width: 40%;
}
}
.inputBox input {
-webkit-appearance: none;
background-color: #FFF;
background-image: none;
border-radius: 4px;
border: 1px solid #DCDFE6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: 14px;
height: 40px;
line-height: 40px;
outline: 0;
padding: 0 15px 0 40px;
-webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
}
.inputBox .server {
padding: 0 35px 0 15px;
}
.inputBox .server {
padding: 0 35px 0 15px;
}
.inputBox img {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.select {
width: 100%;
display: inline-block;
position: relative;
}
.select .contentSelect {
/* max-width: 283px; */
flex-wrap: nowrap;
/* overflow: scroll; */
top: calc(50% - 3px);
position: absolute;
line-height: normal;
white-space: normal;
z-index: 1;
transform: translateY(-50%);
display: flex;
-webkit-box-align: center;
align-items: center;
}
.select__tags .tag--info {
display: inline-block;
background-color: #f4f4f5;
border-color: #e9e9eb;
color: #909399;
box-sizing: border-box;
margin: 2px 0 2px 6px;
height: 24px;
padding: 0 8px;
line-height: 22px;
font-size: 12px;
border-width: 1px;
border-style: solid;
border-radius: 4px;
white-space: nowrap;
}
.tag--info .tag__close {
display: inline-block;
background-color: #C0C4CC;
right: -7px;
top: 50%;
transform: translateY(-50%) scale(.8);
border-radius: 50%;
position: relative;
margin-top: -2px;
cursor: pointer;
height: 16px;
width: 16px;
}
.tag__close img {
position: absolute;
width: 8px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.select .input {
margin: 8px 0 15px;
}
.input__suffix {
width: 25px;
right: 5px;
transition: all .3s;
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 20px;
color: #C0C4CC;
pointer-events: none;
border-left: 1px solid #E6E6E6;
}
.input__suffix img {
position: absolute;
width: 13px;
left: 5px;
top: 50%;
}
.select-dropdown {
display: none;
border: 1px solid #E4E7ED;
border-radius: 4px;
background-color: #FFF;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
box-sizing: border-box;
margin: 5px 0;
margin-top: -5px;
}
.select-dropdown .scrollbar {
overflow: hidden;
position: relative;
}
.scrollbar__wrap {
/* overflow: scroll; */
height: 100%;
max-height: 274px;
}
.select-dropdown__list {
list-style: none;
padding: 6px 0;
margin: 0;
box-sizing: border-box;
}
.dropdown__item {
font-size: 14px;
padding: 0 20px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 34px;
line-height: 34px;
box-sizing: border-box;
cursor: pointer;
list-style: none;
}
.dropdown__item.selected {
color: #30B07D;
font-weight: 700;
background-color: #FFF;
}
.dropdown__item.selected::after {
position: absolute;
width: 15px;
height: 15px;
top: 50%;
transform: translateY(-50%);
content: '';
background-image: url('./img/ok.svg');
background-size: cover;
right: 20px;
font-size: 12px;
font-weight: 700;
-webkit-font-smoothing: antialiased;
}
.dropdown__item.hover {
background-color: #F5F7FA;
}
.popper__arrow {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
top: -12px;
margin-right: 3px;
border-top-width: 0;
/* border-bottom-color: #EBEEF5; */
border-bottom-color: #FFF;
border-width: 6px;
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
}
.popper__arrow::after {
content: " ";
border-width: 6px;
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #FFF;
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
textarea {
/* width: 100%;
box-sizing: border-box;
border: 1px solid #DCDFE6;
outline: none;
padding: 5px 15px;
border-radius: 4px; */
display: block;
resize: vertical;
padding: 5px 15px;
line-height: 1.5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
font-size: inherit;
color: #606266;
outline: none;
background-color: #FFF;
background-image: none;
border: 1px solid #DCDFE6;
border-radius: 4px;
-webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
}
.formItemBox {
position: relative;
margin-bottom: 37px;
}
.el-form-item__error {
display: none;
color: #F56C6C;
font-size: 12px;
line-height: 1;
padding-top: 4px;
position: absolute;
top: 100%;
left: 0;
}
.select .el-form-item__error {
top: calc(100% - 15px);
}
.formButton {
margin-bottom: 22px;
text-align: center;
}
.formItemBox button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #FFF;
border: 1px solid #DCDFE6;
color: #fff;
-webkit-appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
margin: 0;
-webkit-transition: .1s;
transition: .1s;
font-weight: 500;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
background: #30B07D;
background-color: #30B07D;
border-color: #30B07D;
}
.submitError {
display: none;
height: 50px;
line-height: 50px;
position: fixed;
top: 30%;
left: 50%;
transform: translateX(-50%);
border: 1px solid #F56C6C;
color: #F56C6C;
border-radius: 5px;
text-align: center;
background: #fef0f0;
}
.server::-webkit-input-placeholder {
/* WebKit browsers */
color: #ccc;
}
.server:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #ccc;
}
.server::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #ccc;
}
.server:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #ccc;
}
</style>
元素部分
<div class="formItemBox">
<p class="info_title">
<span>*</span>希望使用的服务
</p>
<div class="select">
<div class="select__tags" style="width: 100%; max-width: 283px;">
<span class="contentSelect">
<!-- <span class="tag--info">
<span class="el-select__tags-text">综合支付</span>
<i class="tag__close">
<img src="./img/del.svg" alt="">
</i>
</span> -->
</span>
</div>
<div class="inputBox serverBox">
<input type="text" readonly="readonly" autocomplete="off" placeholder="请选择产品"
class="server">
<span class="input__suffix">
<img src="./img/down.svg" alt="">
</span>
</div>
<div class="el-form-item__error">
请选择需要的服务
</div>
</div>
<div class="select-dropdown"
style="position: absolute;transform-origin: center top; z-index: 2010;"
x-placement="bottom-start">
<div class="scrollbar">
<div class="scrollbar__wrap">
<ul class="select-dropdown__list">
<li class="dropdown__item">
<span>综合支付</span>
</li>
<li class="dropdown__item">
<span>分账系统</span>
</li>
<li class="dropdown__item">
<span>二清解决方案</span>
</li>
<li class="dropdown__item">
<span>税务筹划</span>
</li>
<li class="dropdown__item">
<span>银行金融科技</span>
</li>
</ul>
</div>
<div class="el-scrollbar__bar is-horizontal">
<div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
</div>
<div class="el-scrollbar__bar is-vertical">
<div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
</div>
</div>
<div x-arrow="" class="popper__arrow" style="left: 35px;"></div>
</div>
</div>
js部分
<script src="./js/jquery-3.1.1.min.js"></script>
$('.select').click(function(e){
e.stopPropagation();
$('.select-dropdown').slideToggle(function(){
if($('.select-dropdown').css('display') != 'none'){
$('.input__suffix img').attr('src','./img/up.svg')
}else {
$('.input__suffix img').attr('src','./img/down.svg')
}
})
})
$('.select-dropdown').click(function(e){
e.stopPropagation();
$(this).css('display','block')
})
$(document).click(function(){
$('.select-dropdown').slideUp(function(){
$('.input__suffix img').attr('src','./img/down.svg')
})
});
$(".dropdown__item").click(function(){
$(this).css('background-color','#F5F7FA').siblings().css('background-color','#fff')
if(!$(this).is('.selected')){
$(this).addClass('selected')
$('.contentSelect').append(`<span class='tag--info'>
<span class='el-select__tags-text'>${$(this).text()}</span>
<i class='tag__close'>
<img src="./img/del.svg" alt="">
</i>
</span>`)
}else {
$(this).removeClass('selected')
for(var i = 0; i < $('.tag--info').length; i++){
if($('.tag--info').eq(i).text().trim() == $(this).text().trim()){
$('.tag--info').eq(i).remove()
}
}
}
if(!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)|MicroMessenger/i))){
$('.serverBox').css('width',$('.contentSelect').width()+60+'px')
$('.serverBox .server').css('width',$('.serverBox').width()+'px')
$('.select-dropdown').css('width',$('.serverBox').width()+'px')
}
$(".tag__close").click(function(e){
e.stopPropagation();
$(this).parents('.tag--info').remove()
for(var i = 0; i < $(".dropdown__item").length; i++){
if($(".dropdown__item").eq(i).text().trim() == $(this).parents('.tag--info').text().trim()){
$(".dropdown__item").eq(i).css('background-color','#fff').removeClass('selected')
}
}
if(!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)|MicroMessenger/i))){
$('.serverBox').css('width',$('.contentSelect').width()+60+'px')
$('.serverBox .server').css('width',$('.serverBox').width()+'px')
$('.select-dropdown').css('width',$('.serverBox').width()+'px')
}
})
})
注：样式中有多余的其他样式，我直接从项目中复制过来了，如果你们有需要可以自行删除多余样式
1769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
