vue3+ts，自定义下拉框与时间

Vue3+TS 实现自定义下拉框与时间选择

最新推荐文章于 2025-09-25 11:05:37 发布

原创最新推荐文章于 2025-09-25 11:05:37 发布 · 654 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #css

vue 同时被 2 个专栏收录

36 篇文章

订阅专栏

项目实战遇到的问题

25 篇文章

订阅专栏

本文介绍了如何在Vue3中结合TypeScript实现自定义下拉框组件，并提供了时间选择功能的示例。通过展示下拉框展开与收起的效果，以及相关的时间选择代码，帮助开发者理解组件的实现过程。

部署运行你感兴趣的模型镜像

效果图

下拉框未点击展开
在这里插入图片描述
下拉框点击展开

时间

下拉框代码：

<template>
	<div
        class="user-menu d-flex align-items-center flex-wrap"
        :class="open ? 'show' : 'hide'"
        @click="dianji"
      >
        <div class="option ps-1">
          <div class="user d-flex align-items-center">
            <div class="user-name">admin</div>
            <div :class="open ? 'up' : 'down'"></div>
          </div>
        </div>
        <div class="option ps-1">
          <div class="user d-flex align-items-center">
            <div class="user-name">退出</div>
          </div>
        </div>
      </div>
</template>
<script setup lang="ts">
import {ref} from 'vue';
const open=ref<boolean>(false);
const dianji=()=>{
  open.value=!open.value;
}
</script>
<style lang="less">
.user-menu {
  width: 95px;
  margin: 0 60px 0 0;
  position: relative;
  color: #373a39;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #b9bdc0;
  line-height: 32px;
  transition: max-height 0.3s ease-in-out;
  z-index: 2;
}

.user-menu.show {
  height: 68px;
  margin-top: 35px;
  background-color: #eee;
  color: #373a39;
  fill: #373a39;
  border-color: #a2aaaf transparent;
}

.user-menu.hide {
  height: 32px;
  color: #a2aaaf;
  fill: #a2aaaf;
}
.option {
  width: 95px;
  // height: 100%;
  // color: #a2aaaf;
  // background-color: var(--xp-primary-9);
  cursor: pointer;
  height: 34px;
  line-height: 32px;
  overflow: hidden;
}
.user {
  // padding: 9px 30px 9px 9px;
  background-color: transparent;

  .user-icon {
    pointer-events: none;
    display: block;
    width: 16px;
    height: 16px;
    margin-left: 3px;
    margin-right: 8px;
  }
}

.option .down {
  position: absolute;
  top: 16px;
  right: 9px;
  margin-top: -3px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #a2aaaf transparent;
}
.option:hover {
  background-color: #b9bdbf;
  color: #373a39;
  fill: #373a39;
  .down{
   border-color: #373a39 transparent;
  }
  .up{
    border-color: #373a39 transparent;
  }
}
.option .up {
  position: absolute;
  top: 16px;
  right: 9px;
  margin-top: -3px;
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: #a2aaaf transparent;
}
<style>

时间代码：

<template>
<div class="right-menu-time">{{currentTime}}</div>
</template>
<script setup lang="ts">
import {ref,onBeforeUnmount} from 'vue';
import moment from 'moment';
const currentTime=ref<string>('');
let timer:any=null;
timer=setInterval(()=>{
  let ctime=new Date();
  //parseDate2Str将时间转为YYYY.MM.DD HH:mm格式
  currentTime.value=moment(ctime).format("YYYY.MM.DD HH:mm");
},1000)
onBeforeUnmount(()=>{
  clearInterval(timer);
  timer=null;
})
</script>

您可能感兴趣的与本文相关的镜像