首页 > 其他分享 >vue 带箭头下拉框

vue 带箭头下拉框

时间:2022-12-08 16:48:06浏览次数:40  
标签:flex vue color height 箭头 rem font border 下拉框

css 代码
.droplist-content {
display: flex;
flex-direction: column;
font-size: 0.12rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #6D89AF;
line-height: 0.32rem;
position: absolute;
top: 0.68rem;
background-color: white;
left: 0.8rem;
border: 1px solid #F0F0F0;
/*overflow: scroll;*/
width: 2.65rem;
height: 0.98rem;
background: #FFFFFF;
box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
border-radius: 2px;


}

 

.droplist-item {
border-bottom: 1px solid #EFEFF4;
height: 0.32rem;
padding-left: 0.08rem;
font-size: 0.14rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #3389FF;
}

.droparrowbg {
position: relative;
height: 100%;

}

.droparrowbg::after {
content: '';
position: absolute;
width: 0;
height: 0;
top: -0.1rem;
left: 0.5rem;
border-left: 0.1rem solid transparent;
border-right: 0.1rem solid transparent;
border-bottom: 0.1rem solid white;
}


.input-companyname {
display: flex;
flex: 1;
flex-direction: row;
height: 0.67rem;
align-items: center;
width: 100%;
background: #fff;
padding: 0 0.24rem;
font-size: .14rem;
font-family: PingFangSC-Regular, PingFang SC;
}

.ipt-companyname-title {
color: #6D89AF;
width: 1rem;
flex-shrink: 0;
font-weight: 500;
}

.ipt-companyname-holder {
display: flex;
flex: 1 1;
height: 100%;
align-items: center;
color: #113260;
}

.ipt-companyname {
display: flex;
flex: 1 1;
height: 0.5rem;
color: #113260;
font-weight: 400;
}



<div style="position: relative;"> <div class="input-companyname"> <div class="ipt-companyname-title">公司名称</div> <div class="ipt-companyname-holder"> <input class="ipt-companyname" v-model="legalpersoninfo.busname" @input="companynameinput" placeholder="请输入公司名称" /> </div> </div> <div class="droplist-content" v-show="showdroplist"> <div class="droparrowbg"> <div style="overflow: scroll;height: 100%;"> <div class="droplist-item" v-for="(city,index) in companyList" :key="index" @click="droplistItemClick(city)"> {{city}} </div> </div> </div> </div> <com-spline></com-spline> </div>

 

标签:flex,vue,color,height,箭头,rem,font,border,下拉框
From: https://www.cnblogs.com/sgdkg/p/16966492.html

相关文章

  • vuex中的this.$store.commit...
    Vue的项目中,如果项目简单,父子组件之间的数据传递可以使用 props或者$emit等方式进行传递但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并......
  • css 带箭头下拉框
    引用这里http://t.zoukankan.com/yhhBKY-p-12196510.html<divclass="row-1">clip-path:我是row-1</div><divclass="row-2">我是row-2</div><divclass......
  • vue2 插槽20 slot 作用域插槽 具名插槽
    vue官方规定:每一个slot插槽,都要有一个name名称如果省略了slot的name属性,则有一个默认名称叫做default组件中使用:<slotname="default"><h6>这是def......
  • k8s+harbor部署jar包和vue项目
    前置工作:k8s部署docker镜像需要拉取docker镜像,一般企业都是使用的局域网,所以需要在本地搭建一个docker私有仓库。​​将jar包、vue项目打成docker镜像并推送到Harbor本地......
  • 将jar包、vue项目打成docker镜像并推送到Harbor本地仓库
    ​​Centos7下harbor的安装部署​​先制作自己的docker镜像,使用commit方式也可以制作镜像,我这里采用通过编写Dockerfile命令脚本进行生成镜像。​​利用Dockerfile制作自己......
  • Vue动态增添表单并赋予增删上下移动等操作
    Vue动态增添表单并赋予增删上下移动等操作开发需求:前端设计一个表单,依据题目类型,判断是否需要添加内容,若需添加,则可以动态增删、上下移动调整顺序等开发难点:需根据实际逻......
  • vue3 el-pagination 将 英文 修改 为 中文
    当前视图:我要做的是将Total类似的英文改为中文 1. 在组件里引入 ElConfigProvider组件和中文包//ElConfigProvider组件import{ElConfigProvider}f......
  • vue table表格实现无缝滚动 鼠标进入可悬停
    <el-tableref="table":data="tableData":header-cell-style="{background:'#F0F2F7',colo......
  • Vue3中 v-model 语法糖运用
    一、介绍在Vue2.0发布后,开发者使用v-model指令时必须使用名为value的prop。如果开发者出于不同的目的需要使用其他的prop,就不得不使用v-bind.sync。此外,由于v-mo......
  • 在线直播系统源码,vue+audio 有新消息时加提示音
    在线直播系统源码,vue+audio有新消息时加提示音<audiocontrols="controls"hiddensrc="./static/tip.mp3"ref="audio"></audio>​有新消息时,用以下代码即可播放指定......