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 相关文章推荐
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
Vue实现多标签选择器
Nov 28 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之readdir函数用法实例
2014/11/13 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
详解php的socket通信
2015/08/11 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
javascript延时加载之defer测试
2012/12/28 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
javascript常用对话框小集
2013/09/13 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
Python如何获取文件指定行的内容
2020/05/27 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
英文版销售经理个人求职信
2013/11/20 职场文书
初三学生个人自我评定
2014/04/06 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
优质护理心得体会
2016/01/22 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python