vue2使用ul，li实现下拉列表

用组件库的时候样式修改起来又很麻烦，原声下拉列表options又无法添加样式，也没法做复杂处理，所以使用以下方式实现下拉列表

下拉，收起的icon自行更换

 

 

 <template>

  <div >

    <div class='team-list'>

        <div class='team-name' @click='nameClick()'>

            <div>{{message}} </div>

            < img src="https://blog.csdn.net/Leviathan_gy/article/details/@/assets/xiala.png" class='team-xiala' v-show='showNum==0'>

            < img src="https://blog.csdn.net/Leviathan_gy/article/details/@/assets/shouqi.png" class='team-shouqi' v-show='showNum==1'>

        </div>

        <ul class='team-form' v-show="showNum==1" @click='ulClick()'>

            <li v-for="(item,index) in items" :key="index" @click="changeClick(item)">{{item.name}}</li>

        </ul>

    </div>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  data(){

    return{

      items:[

        {

          num:1,

          name:'a',

        },{

          num:2,

          name:'b',

        },{

          num:3,

          name:'c',

        },{

          num:4,

          name:'d',

        },{

          num:5,

          name:'e',

        }

      ],

      message:'选择组员',

      showNum:'0'

    }

  },

  mounted(){

  },

  methods:{

     nameClick(){

          this.showNum=1

      },

      ulClick(){

          this.showNum=0

      },

      changeClick(item){

        console.log(item)

        this.message=item.name

      }

  }

}

</script>

<style scoped lang='less'>

.team-list{

    width:120px;

    height:32px;

    color:rgb(58, 57, 57);

    border:1px solid rgb(173, 171, 171);

    font-size:22px;

    line-height: 32px;

    padding:5px;

    border-radius: 5px;

    margin-right:20px;

    .team-name{

        display: flex;

        justify-content: space-between;

        padding-left:5px;

        .team-xiala , .team-shouqi{

            width:18px;

            height:18px;

            margin-right:5px;

            margin-top:8px;

        }

    }

    .team-form{

        border:1px solid rgb(168, 167, 167);

        font-size:24px;

        width:100px;

        border-radius:5px;

        margin-left:-6px;

        margin-top:6px;

        max-height:240px;

        padding-top:10px;

        padding-bottom: 10px;;

        overflow: auto;

        li{

            height:50px;

            line-height:50px;

            list-style: none;

            text-align: left;

        }

    }

}

</style>

这篇好文章是转载于：学新通技术网