vue实现带过渡效果的下拉菜单功能


Posted in Javascript onFebruary 19, 2020

本文实例为大家分享了vue仿写下拉菜单功能,带有过渡效果(移动端),供大家参考,具体内容如下

效果图

vue实现带过渡效果的下拉菜单功能

clickOutside.js 点击目标之外的地方,下拉框隐藏

代码如下:

export const clickOutside = {
 bind(el, binding, vnode) {
 function documentHandler(e) {
 if (el.contains(e.target)) {
 return false;
 }
 if (binding.expression) {
 binding.value(e);
 }
 }
 el.__vueClickOutside__ = documentHandler;
 document.addEventListener("click", documentHandler);
 },
 update() {},
 unbind(el, binding) {
 document.removeEventListener("click", el.__vueClickOutside__);
 delete el.__vueClickOutside__;
 }
};

正文html如下:

<div class="info-select">
 <div class="select">
 <p class="select-p" @click="showSelectUl('s1')" v-clickOutside="hideSelectUl">
 <span>{{issues}}</span>
 <img :src="require('../../assets/images/support/icon_xiala.png')" alt="">
 </p>
 <transition name="slide-fade">
 <div class="select-ul" v-show="!showIssues" >
 <div v-for="(item, index) in list" :key="index" >
 <div>{{item.class}}</div>
 <div v-for="(item1, i) in item.node" :key="i" @click="getSize('s1', item1.class, index, i)">
 <p :class="{active:item == issues}">{{item1.class}}</p>
 </div>
 </div>
 </div>
 </transition>
 <transition leave-active-class="slideOutRight" enter-active-class="slideInRight">
 <p class="animated errP" style="position: absolute;margin:0.2rem 0 0 -3%;" v-show="form.issueErr" >{{form.issueMsg}}</p>
 </transition>
 </div>
 <div class="select">
 <p class="select-p" @click="showSelectUl('s2')" v-clickOutside="hideSelectUl2">
 <span>{{issues2}}</span>
 <img :src="require('../../assets/images/support/icon_xiala.png')" alt="">
 </p>
 <transition name="component-fade" mode="out-in">
 <div class="select-ul" v-show="!showIssues2">
 <p v-for="(item, index) in childList" :class="{active:item == issues2}"
 :key="index" @click="getSize('s2', item.class, index)">{{item.class}}</p>
 </div>
 </transition>
 <transition leave-active-class="slideOutUp" enter-active-class="slideInUp">
 <p class="animated errP" style="position:absolute;margin:0.2rem 0 0 -3%;" v-if="form.issueErr1" >{{form.issueMsg1}}</p>
 </transition>
 </div>
 </div>
 <div class="p-bts clearafter">
 <button @click="form.issueErr = !form.issueErr">p1</button>
 <button @click="form.issueErr1 = !form.issueErr1">p2</button>
 </div>

js 代码如下:

import { clickOutside } from 'Models/clickoutside.js';
export default {
 data(){
 return{
 catogery:'flight',
 issues:"Select Category",
 issues2:"Select Issue",
 showIssues:true,
 showIssues2:true,
 list:[
 {id:0,class:'flight',node:[
 {class:'1.1 a1111111111111 11111111111111',node:[
 {class:'问题a1?'},
 {class:'问题a2?'}
 ]},
 {class:'1.2 a2',node:[
 {class:'问题a3?'},
 {class:'问题a4?'}
 ]},
 ]},
 {id:1,class:'hotel',node:[
 {class:'1.1 b1',node:[
 {class:'问题b1?'},
 {class:'问题b2?'}
 ]},
 {class:'1.2 b2',node:[
 {class:'问题b3?'},
 {class:'问题b4?'}
 ]},
 ]},
 ],
 childList:[],
 form:{
 issueMsg:"Please select a category",issueErr:true,
 issueMsg1:"Please select a issue",issueErr1:true,
 },
 }
 },
 methods: {
 hideSelectUl(){
 this.showIssues = true;
 },
 hideSelectUl2(){
 this.showIssues2 = true;
 },
 showSelectUl(s){
 if(s == 's1'){
 this.showIssues = !this.showIssues;
 this.showIssues2 = true;
 }else{
 this.showIssues = true;
 this.showIssues2 = !this.showIssues2;
 }
 },
 getSize(s, val, index, index2){
 if(s == 's1'){
 this.issues = val;
 this.showIssues = true;
 this.catogery = this.list[index].class;
 this.childList = this.list[index].node[index2].node;
 this.issues2 = 'Select Issue';
 }else if(s == 's2'){
 this.issues2 = val;
 this.showIssues2 = true;
 }
 },
 },
 directives:{
 clickOutside,
 }
}

css代码如下:

.info-select{
 display: flex;
 justify-content: space-between;
 .select{
 width:40%;
 position: relative;
 padding:0.1rem 3% 0.1rem;
 vertical-align: top;
 font-size: 0.15rem;
 border-radius:2px;
 background: #fff;
 border-top:1px solid #ddd;
 border-bottom:1px solid #ddd;
 border-right:1px solid #ddd;
 }
 .select:last-child{
 border-right:0;
 border-top:1px solid #ddd;
 border-bottom:1px solid #ddd;
 border-left:1px solid #ddd;
 }
 .select-p{
 position: relative;
 height:0.21rem;
 line-height:0.21rem;
 span{
 font-size: 0.16rem;
 display: inline-block;
 width:90%;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
 }
 img{
 display:block;
 width:0.12rem;
 position: absolute;
 right: 0;
 top: 0;
 vertical-align: middle;
 }
 }
 .select-ul{
 width:93.5%;
 padding:0.12rem 3%;
 position: absolute;
 top: 0.42rem;
 left: 0;
 z-index: 12;
 background: #fff;
 border:1px solid #eee;
 p{
 padding:0.1rem 0 0.1rem 0.1rem;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
 }
 p:hover{
 background: #eee;
 }
 p.active{
 background: #eee;
 }
 }
 .errP{
 color:#f00;
 }
 }
 .p-bts{
 margin-top: 0.4rem;
 zoom: 1;// zoom(IE转有属性)可解决ie6,ie7浮动问题
 button{
 width:1.5rem;
 height:0.4rem;
 background: #ffa000;
 float: left;
 color:#fff;
 font-size:0.25rem;
 border-radius:2px;
 }
 button:last-child{
 float: right;
 }
 }

 .component-fade-enter-active, .component-fade-leave-active {
 transition: opacity .3s ease;
 }
 .component-fade-enter, .component-fade-leave-to
 /* .component-fade-leave-active for below version 2.1.8 */ {
 opacity: 0;
 }
 // css animate
 .slide-fade-enter-active{
 transition:all .2s ease-in;
 }
 .slide-fade-leave-active {
 transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
 }
 .slide-fade-enter, .slide-fade-leave-to{
 /* .slide-fade-leave-active for below version 2.1.8 */ 
 transform: translateY(20px);
 opacity: 0;
 }

 // bounce
 .bounce-enter-active {
 animation: bounce-in .2s;
 }
 .bounce-leave-active {
 animation: bounce-in .1s reverse;
 }
 @keyframes bounce-in {
 0% {
 transform: scale(0);
 }
 50% {
 transform: scale(1);
 }
 100% {
 transform: scale(1);
 }
 }

查看完整代码

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 字符串乘法
Aug 20 Javascript
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
jquery 插件开发备注
Aug 27 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
js+audio实现音乐播放器
Sep 13 Javascript
Vue.js仿Select下拉框效果
Feb 18 #Javascript
JavaScript中的惰性载入函数及优势
Feb 18 #Javascript
jquery实现垂直手风琴导航栏
Feb 18 #jQuery
vue微信分享插件使用方法详解
Feb 18 #Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 #jQuery
vue+ts下对axios的封装实现
Feb 18 #Javascript
ES6中Promise的使用方法实例总结
Feb 18 #Javascript
You might like
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
Python断言assert的用法代码解析
2018/02/03 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
python开发入门——列表生成式
2020/09/03 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
大学生军训广播稿
2014/01/24 职场文书
人事科岗位职责范本
2014/03/02 职场文书
年终总结会议主持词
2014/03/17 职场文书
义诊活动通知
2015/04/24 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS