自定义下拉框

最新推荐文章于 2022-10-23 22:09:45 发布

樱桃小丸子的樱花

最新推荐文章于 2022-10-23 22:09:45 发布

阅读量191

点赞数

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/mababy_8023/article/details/107199160

版权

Web前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了两种实现自定义下拉框的技术方案，包括详细步骤和关键代码，帮助开发者灵活定制UI和交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：

<div class="select">
    <div class="inner">
   <div class="inputWrapper" @click.stop="showOptions = !showOptions">
    <input type="text" readonly placeholder="请选择菜品" :value="selected">
    <span class="iconfont icon-zhankaishangxia"></span>
   </div>
   <ul class="options" v-show="showOptions">
    <li v-for="(item, index) in options" :key="index" @click.stop="choose(item.value)">{{item.value}}</li>
   </ul>
  </div>
 </div>

.form_select {
  height: 30px;
  display: inline-block;
  width: 80px;
  position: relative;
  color: #03081a;
}
input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  outline: none;
}
input:focus {
  border-color: #45abfe;
}
input {
  height: 30px;
  background: #f2f3f7;
  border: none;
  border-radius: 15px;
  font-size: 13px;
}
img {
  width: 9px;
  height: 30px;
  right: 15px;
  top: 0;
  cursor: pointer;
  position: absolute;
}
ul {
  width: 80px;
  background-color: #f2f3f7;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
li:first-of-type::after {
  content: "";
  position: absolute;
  border: 4px solid;
  border-color: transparent transparent #f2f3f7 #f2f3f7;
  transform: rotate(135deg);
  top: -3px;
  left: 50%;
  margin-left: -2px;
}
li {
  height: 35px;
  width: 100%;
  padding: 0 15px;
  line-height: 35px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 13px;
  position: relative;
}
li.selected {
  /* background-color: #e6f7ff; */
  /* color: #737677; */
  font-weight: bold;
}

/* 展开： */
.openlist {
  -webkit-animation: open 0.3s linear forwards;
  animation: open 0.3s linear forwards;
}

/* 收起： */
.foldlist {
  -webkit-animation: fold 0.3s linear forwards;
  animation: fold 0.3s linear forwards;
}

@-webkit-keyframes open {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(180deg);
  }
}

@keyframes open {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(180deg);
  }
}

@-webkit-keyframes fold {
  from {
    -webkit-transform: rotate(180deg);
  }

  to {
    -webkit-transform: rotate(0deg);
  }
}

@keyframes fold {
  from {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(0deg);
  }
}

data () {
    return {
      options: [
        {
          value: '西红柿鸡蛋'
        },
        {
          value: '青椒抱鸡蛋'
        },
        {
          value: '回锅肉'
        },
        {
          value: '宫保鸡丁'
        },
        {
          value: '地三鲜'
        }
      ],
      list: [
        {
          name: '张三',
        },
        {
          name: '李四',
        },
        {
          name: '王五',
        },
        {
          name: '铁柱',
        },
      ],
      showOptions: false,
      selected: ''
    }
  },
created () {
    //默认选中的值
    this.selected = this.options[0].value
  },
methods: {
    choose (value) {
      this.showOptions = false
      if (value !== this.selected) {
        this.selected = value
      }
    },
}

方法二：

<div @click="hiddenSelection" style="background:#fff;padding: 15px">
      <div class="form_select">
        <input type="text" readonly="readonly" v-model="userName" @click="showAccountList($event)" />
        <img
          src="./assets/images/arrow-down.svg"
          :class="hasClass==='1' ? 'openlist': (hasClass==='0'?'foldlist':'')"
          @click="showAccountList($event)"
        />
        <ul v-if="isShowUserList">
          <li
            :class="{'selected':item.selected===true}"
            v-for="(item,index) in list"
            :key="index"
            @click="changeUser(item)"
          >{{ item.name }}</li>
        </ul>
      </div>
    </div>

data () {
    return {
      list: [
        {
          name: '张三',
        },
        {
          name: '李四',
        },
        {
          name: '王五',
        },
        {
          name: '铁柱',
        },
      ],
      isShowUserList: false,
      hasClass: '',
      userName: ''
    }
  },
  created () {
    //默认选中的值
    this.userName = this.list[0].name;
  },
  mounted () {
    let that = this
    document.addEventListener('click', function () {
      that.showOptions = false
    });
    //   choose(options.value=1)
    selected: value[0]
  },
  methods: {
    showAccountList (e) {
      e.stopPropagation()
      this.isShowUserList = !this.isShowUserList
      if (this.isShowUserList) {
        this.hasClass = '1'
      } else {
        this.hasClass = '0'
      }
    },
    changeUser (data) {
      console.log(data)
      this.userName = data.name
      this.list.map(item => {
        item.selected = false
        if (item.value === data.value) {
          item.selected = true
        }
      })
      this.hasClass = '0'
      this.isShowUserList = false
    },
    hiddenSelection () {
      this.hasClass = '0'
      this.isShowUserList = false
    },
  },
}