vue.js实现下拉框

vue.js下拉框的实现要求：1.下拉框基础功能2.清除键3.下拉框动画效果实现：1.基础功能<template><div id="main"><div id="content"

钟离85

8498人浏览 · 2022-03-21 23:42:37

钟离85 · 2022-03-21 23:42:37 发布

vue.js下拉框的实现

要求：1.下拉框基础功能 2.清除键 3.下拉框动画效果

实现：

1.基础功能

<template>
  <div id="main">
    <!-- <input type="button" id="content" @click="cot_ChangeImg" v-model="value" /> -->
    <div id="content" @click="cot_ChangeImg">{{value}}</div>
    <div id="selectImg" @click="changeImg">
      <svg
        t="1647049453168"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2011"
        width="40"
        height="40"
      >
        <path
          d="M65.409221 340.948229c42.307571-35.385928 65.340147-52.599985 106.850563-88.881306 145.652288 142.907781 145.652288 142.907781 339.739704 331.683215 120.79925-111.760386 223.503377-215.061101 339.745844-322.608535 35.456536 31.605835 69.40472 61.860906 106.844423 95.232968-150.207024 139.312906-298.090119 276.471752-448.054619 415.557484-10.259668-9.280364-19.784602-17.652032-29.03529-26.319435L65.409221 340.948229z"
          p-id="2012"
        ></path>
      </svg>
    </div>
    <div id="icon" @click="clear" v-show="judgeIcon"></div>
    <div id="selectItem" v-show="judgeItem">
      <ul>
        <li
          v-for="lis in testData"
          :key="lis.id"
          @click="write(lis.value)"
        >
          {{ lis.name }}
        </li>
      </ul>
    </div>
  </div>
</template>


      
      div写出基本框架，循环创建无序列表，充当下拉框内容，通过点击div触发功能函数

2.下拉框动画效果

#selectImg {
  position: absolute;
  top: 1px;
  right: 0px;
  cursor: pointer;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

#selectImg1 {
  position: absolute;
  top: 1px;
  right: 0px;
  cursor: pointer;
  transform: rotate(180deg);
  transition: all 0.3s ease;
}


给下拉框图标写两个css样式，用Transition实现两css样式切换过渡时的动画效果，两样式不同的地方就在于用rotate改变了旋转角度，这配合transition的切换时过渡效果可实现旋转动画

3.清除键

<div id="icon" @click="clear" v-show="judgeIcon"></div>

clear() {
      this.value=null;
      this.judgeIcon = false;
    },
    
    
    点击清除图标后调用清除函数，函数把写在下拉框中的value改为空，把清除图标的展示改为false，以此实现清除效果。

完整代码

<template>
  <div id="main">
    <!-- <input type="button" id="content" @click="cot_ChangeImg" v-model="value" /> -->
    <div id="content" @click="cot_ChangeImg">{{value}}</div>
    <div id="selectImg" @click="changeImg">
      <svg
        t="1647049453168"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2011"
        width="40"
        height="40"
      >
        <path
          d="M65.409221 340.948229c42.307571-35.385928 65.340147-52.599985 106.850563-88.881306 145.652288 142.907781 145.652288 142.907781 339.739704 331.683215 120.79925-111.760386 223.503377-215.061101 339.745844-322.608535 35.456536 31.605835 69.40472 61.860906 106.844423 95.232968-150.207024 139.312906-298.090119 276.471752-448.054619 415.557484-10.259668-9.280364-19.784602-17.652032-29.03529-26.319435L65.409221 340.948229z"
          p-id="2012"
        ></path>
      </svg>
    </div>
    <div id="icon" @click="clear" v-show="judgeIcon"></div>
    <div id="selectItem" v-show="judgeItem">
      <ul>
        <li
          v-for="lis in testData"
          :key="lis.id"
          @click="write(lis.value)"
        >
          {{ lis.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PullDown',
  data() {
    return {
      testData: [
        {
          id:100,
          name: '北京',
          value: '0',
        },
        {
          id:200,
          name: '上海',
          value: '1',
        },
        {
          id:300,
          name: '广州',
          value: '2',
        },
      ],
      judgeItem: false,
      judgeIcon: false,
      value: null,
    }
  },
  mounted() {},

  methods: {
    write(val) {
      //console.log(id , "key");
      //console.log("index" , index);
      //console.log("其实这样可以的吧",id);
      this.value = this.testData[val].name;
      if (this.judgeItem == false) {
        var selectImg = document.getElementById('selectImg')
      } else {
        var selectImg = document.getElementById('selectImg1')
      }
      //var lis = document.getElementsByTagName('li') //伪数组
      this.judgeItem = false;
      selectImg.id = 'selectImg';
      icon.innerHTML =
        '<svg  t="1647090836036" style="right:140xp"  id="selectImg2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2241" width="20" height="20"><path d="M512 32C251.4285715625 32 32 251.4285715625 32 512s219.4285715625 480 480 480 480-219.4285715625 480-480-219.4285715625-480-480-480z m205.7142853125 617.142856875c20.5714284375 20.5714284375 20.5714284375 48 0 61.714286249999994-20.5714284375 20.5714284375-48 20.5714284375-61.714285312499996 0l-137.142856875-137.1428578125L374.857143125 717.7142853125c-20.5714284375 20.5714284375-48 20.5714284375-68.5714284375 0s-20.5714284375-54.857143125 0-68.5714284375l144-144-137.1428578125-137.142856875c-20.5714284375-13.714285312500001-20.5714284375-41.142856875 0-61.714285312499996 20.5714284375-20.5714284375 48-20.5714284375 61.714286249999994 0l137.142856875 137.142856875 144-144c20.5714284375-20.5714284375 48-20.5714284375 68.5714284375 0 20.5714284375 20.5714284375 20.5714284375 48 0 68.5714284375L580.5714284375 512l137.142856875 137.142856875z" fill="#999999" p-id="2242"></path></svg>'
      this.judgeIcon = true;
    },
    changeImg() {
      if (this.judgeItem == false)
        var obj = document.getElementById('selectImg')
      else var obj = document.getElementById('selectImg1')
      if (this.judgeItem == false) {
        this.judgeItem = true
        obj.id = 'selectImg1'
      } else {
        this.judgeItem = false
        obj.id = 'selectImg'
      }
    },

    cot_ChangeImg() {
      if (this.judgeItem == false)
        var obj = document.getElementById('selectImg')
      else var obj = document.getElementById('selectImg1')

      if (this.judgeItem == false) {
        this.judgeItem = true
        obj.id = 'selectImg1'
      } else {
        this.judgeItem = false
        obj.id = 'selectImg'
      }
    },

    clear() {
      this.value=null;
      this.judgeIcon = false;
    },
  },
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#main {
  position: relative;
  width: 280px;
  height: 42px;
}

#content {
  text-align: left;
  width: 280px;
  height: 42px;
  line-height: 42px;
  padding-left: 10px;
  background: rgb(255, 255, 255);
  border-radius: 2px;
  border: 1px solid rgb(221, 221, 221);
  font-size: 16px;
  font-family: MicrosoftYaHei;
  color: rgb(51, 51, 51);
  cursor: pointer;
}

#selectImg {
  position: absolute;
  top: 1px;
  right: 0px;
  cursor: pointer;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

#selectImg1 {
  position: absolute;
  top: 1px;
  right: 0px;
  cursor: pointer;
  transform: rotate(180deg);
  transition: all 0.3s ease;
}

#selectImg2 {
  position: absolute;
  top: 10px;
  right: 50px;
  cursor: pointer;
}

#selectItem {
  display: 'none';
  border: 1px solid #eee;
  width: 290px;
  height: 100px;
}

#selectItem ul {
  list-style: none;
}

#selectItem ul li {
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  cursor: pointer;
}

#selectItem ul li:hover {
  background-color: #f5f7fa;
}
</style>

占地面积比较大的<svg>标签是图标源码，取自阿里icon

在这里插入图片描述