vue实现抽屉弹窗效果

2024-07-31 01:54:34

本文实例为大家分享了vue实现抽屉弹窗效果的具体代码，供大家参考，具体内容如下

以下代码比较简单。主要就是实现侧边弹窗而且不会影响页面操作的方式，求点赞！！！不多说直接贴代码。

<template>
 <div>
 <div :class='{"itemCount":true,"leftT":!leftShow,"left":leftShow}'>//这种写法是动态获取样式
 <div style="font-size:60px;">表格数据</div>
 <div>//下面就是弹框内的样式。按自己需要放样式（我这里拿表格举例吧）
  <el-table :data="tableData"
   style="width: 100%">
  <el-table-column prop="date"
    label="日期"
    width="150">
  </el-table-column>
  <el-table-column label="配送信息">
  <el-table-column prop="name"
    label="姓名"
    width="120">
  </el-table-column>
  <el-table-column label="地址">
  <el-table-column prop="province"
     label="省份"
     width="120">
  </el-table-column>
  <el-table-column prop="city"
     label="市区"
     width="120">
  </el-table-column>
  <el-table-column prop="address"
     label="地址"
     width="300">
  </el-table-column>
  <el-table-column prop="zip"
     label="邮编"
     width="120">
  </el-table-column>
  </el-table-column>
  </el-table-column>
  </el-table>
 </div>
 </div>
 </div>
</template>
export default {
 data(){
 leftShow:false
}
}
<script>
</script>

<style lang='less' scoped> //下面是设置的样式。就可以实现了。
 .itemCount {
 position: absolute;
 top: 30%;
 background: yellowgreen;
 height:600px;
 padding: 10px;
 width:1000px;
 z-index: 2
 }
 .left {
 left:0;
 transition: left 0.5s;
 }
 .leftT {
 left:-1200px;
 transition: left 0.5s;

</style>

如下图：

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

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue 实现一个简单的全局调用弹窗案例

1.实现效果图 2.第一步,新建一个.vue文件定义一个弹框的基本模板 style样式放在了文章的最底部,如果需要看效果,需要将样式放入这个vue文件里,样式是用less写的,需要你的项目引入less 注意:我这里的组件右上角关闭是一张图片需要换成你自己本地的路径 <template> <div id="tip_alertModal"> <div class="t-alert-mask"></div> <di
vue集成openlayers加载geojson并实现点击弹窗教程

本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程,供大家参考,具体内容如下第一步:安装vue-cli cnpm install -g @vue/cli 第二步:新建一个项目 1.新建项目 (vue-openlayers为项目名),并选择default模版 vue create vue-openlayers 2.安装openlayers cnpm i -S ol 第三步:写业务代码 1.删除掉HelloWorld.vue 新建 olmap.vue组件 comp
vue 解决mintui弹窗弹起来,底部页面滚动bug问题

经过dom层层注释缩小反馈终于找到问题所在. 问题经过我在弹起弹窗的时候,设置了popupVisible为true 然后触发了vue的updated生命周期钩子函数然后我在这个函数里面做了去this.$refs.container.offsetHeight导致页面重绘然后就导致了底部页面向上滚动解决办法去掉updated函数里面的重绘方法补充知识:项目总结之关于vue中使用mint-ui的mt-popup出现滚动穿透问题的解决总结说实话,使用Mint-ui这个ui组件的过程中遇到了
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部

具体代码如下所示: <template> <div> <table> <tr v-for="item in tableData" :value="item.value" :key="item"> <td> <div> <template> {{item.id}} </template> </div> </td> <td&g
Vue中关闭弹窗组件时销毁并隐藏操作

背景:在dialog弹窗组件中执行mounted钩子,将数据初始化,等取消关闭弹窗后,发现mounted钩子不执行原因:在vue的生命周期中,在页面初始化的时候mounted只会执行一次,关闭弹窗页面并没有销毁,所以不会再次执行 <select-experience-group :trialMoneyRecordID=trialMoneyRecordID :showExperienceGroup='showExperienceGroup' @closeCover="handleExper
vue打开子组件弹窗都刷新功能的实现

vue如何一打开子组件弹窗都刷新? 在父页面中给子组件同时绑定:visible.sync和v-if :visible.sync="paramAddDialog" v-if="paramAddDialog" 整体代码: <el-dialog title="绑定其他更多的账户" width="1200px" align="center" :visible.sync="paramAddDialog
Vue自定义全局弹窗组件操作

写在前面页面中会有很多时候需要弹窗提示,我们可以写一个弹窗组件,但是如果每个页面都引入这个组件,太麻烦了,所以我们将它变成全局组件,需要用的时候直接通过JS调用即可,不需要在每个页面引入了效果图弹窗组件新建一个弹窗的组件--popup.vue <template> <transition name='fade'>  <div class="mask" v-if="show" @touchmove
vue实现点击按钮“查看详情”弹窗展示详情列表操作

html: <template> <div> <Modal v-model="classStatus" width="900" title="详情:" :styles="{top: '80px'}"> <Table stripe class="task-table" :columns="columnsName4" :data="task
Vue解决移动端弹窗滚动穿透问题

一.问题描述在移动端的H5页面中,我们经常会遇到 "点击按钮-->弹窗-->选择选项" 这样的场景.而在选项过多出现滚动条时,滚动滚动条至容器的底部或者顶部.再往上或往下拖动滚动条时,滚动动作会出现穿透,这时候底部的body也会一起滚动. 问题总结:内容在滚动到容器的顶部或者底部时,再向上或向下强行滚动 ,则出现滚动穿透二.解决方案思考参考了网上一大堆的解决方法,大可分为三类方法.经过认真的思考和分析,个人的总结如下: 使用js去控制和改变css 1. 弹窗出现 1
vue实现抽屉弹窗效果

本文实例为大家分享了vue实现抽屉弹窗效果的具体代码,供大家参考,具体内容如下以下代码比较简单.主要就是实现侧边弹窗而且不会影响页面操作的方式,求点赞!!!不多说直接贴代码. <template> <div> <div :class='{"itemCount":true,"leftT":!leftShow,"left":leftShow}'>//这种写法是动态获取样式 <div style="
使用Vue组件实现一个简单弹窗效果

最近在使用element-ui框架,用到了Dialog对话框组件,大致实现的效果,跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多.然后就想着把这种弹窗组件的实现方式与大家分享一下,下面本文会带着大家手摸手实现一个弹窗组件. 本文主要内容会涉及到弹窗遮罩的实现, slot 插槽的使用方式, props . $emit 传参,具体组件代码也传上去了.如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获. 组件最后实现的效果实现步骤先搭建组件的html和css样式,遮罩层和内
vue实现内容可滚动的弹窗效果

本文实例为大家分享了vue实现内容可滚动的弹窗效果具体代码,供大家参考,具体内容如下这是第一种实现方式效果图: 弹窗代码: Popup.vue <template lang="html"> <div v-if="show" class="modal-bg" @click="closeModal"> <div class="modal_con"> <div cla
vue的toast弹窗组件实例详解

相信普通的vue组件大家都会写, 定义 -> 引入 -> 注册 -> 使用 ,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): 0. 轻量 --一个组件小于 1Kib (实际打包完不到0.8k) 1.一般都是多处使用 --需要解决每个页面重复引用+注册 1.一般都是跟js交互的 --无需在 <template> 里面写 <toast :show="true" text="弹窗消息
vue自定义弹框效果（确认框、提示框）

本文实例为大家分享了vue自定义弹框效果的具体代码,供大家参考,具体内容如下 1.自定义确认框和提示框根据传入的type来判断是确认框或提示框 <template> <transition name="confirm-fade"> <div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')"&
vue自定义弹框效果(确认框、提示框)

本文实例为大家分享了vue自定义弹框效果的具体代码,供大家参考,具体内容如下 1.自定义确认框和提示框根据传入的type来判断是确认框或提示框 <template> <transition name="confirm-fade"> <div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')"&
vue自定义气泡弹窗

本文实例为大家分享了vue自定义气泡弹窗的具体代码,供大家参考,具体内容如下 src/components/myComponents/pop/pop.vue <template> <div class="tips animation" :class="{'shake': type === 'shake'}" v-show="isShow" ref="tips"> <div
Vue.js实现拖放效果的实例

页面效果如下所示: 代码请看这里,当当当当: html: <template> <div class='drag-content'> <div class='project-content'> <div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div> </div>
bootstrap vue.js实现tab效果

本文实例为大家分享了bootstrap vue.js实现tab效果的具体代码,供大家参考,具体内容如下项目目录结构 Student.js代码 function Student(){ this.baseInfo = { tabStatus : true , name : '张三', sex : 'male' } , this.parentsInfo = { tabStatus : false, fatherName : '张全蛋', motherName : '李铁柱' } , this.stu
js点击弹出div层实现可拖曳的弹窗效果

弹出层.弹窗效果+拖曳功能 *{ margin:0px; padding:0px;} body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;} .botton{ color:#F00; cursor:pointer;} .mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; pad

vue实现抽屉弹窗效果

相关推荐

随机推荐