vue封装一个从顶部滑出的浮层小组件, 原生和react都可以仿照做出来

先看下效果哈，相信这种效果业务中还是比较常见的，
因为吧pdf最大只能上传5M的大小，所以稍微动下就要超过了，所以录制的时候我点的很快。将就着看吧。毕竟代码才是关键哈哈。效果就凑合着看

大部分情况下。ui组件会给我们封装好的，但有些还是得需要我们自己写了
其实当你了解了简单的原理之后其实还是很简单的就实现了呢
FloatTop.vue 组件。可以直接拿去使用哈

<template><div class="container"><div class="content"><div class="slot-content" :class="[showMask ? 'show' : 'hide']"><slot></slot></div></div><div class="mask" :class="[showMask ? 'show' : 'hide']" @click="handleChange"></div></div>
</template><script>
export default {props: {showMask: {type: Boolean,default: false,},},methods: {handleChange() {this.$emit('change')}}
};
</script><style lang="scss" scoped>
.container {position: fixed;width: 100%;left: 0;top: 0;.content {position: relative;height: 0;z-index: 3;.slot-content {position: absolute;width: 100%;box-sizing: border-box;bottom: 0;background-color: white;border-radius: 0 0 10px 10px;overflow: hidden;transition: transform 0.2s ease-in-out;z-index: 9;padding: 20px;&.hide {transform: translateY(0%);}&.show {transform: translateY(100%);}}}.mask {position: absolute;z-index: 1;width: 100%;height: 100vh;top: 0px;transition: all 0.2s linear;&.show {background-color: rgba(0, 0, 0, 0.5);pointer-events: inherit;}&.hide {background-color: rgba(0, 0, 0, 0);display: none;}}
}
</style>

我们使用的时候。
直接引入然后把你需要显示的内容放在组件中间就可以了

<template><div id="app"><button @click="showMask = true">浮层</button><float-top :showMask="showMask" @change="showMask = false"> <div class="parent"><div class="child"></div><div class="child"></div><div class="child"></div></div></float-top></div>
</template>import FloatTop from "./components/FLoatTop.vue";
export default {components: {FloatTop,},data() {return {showMask: false}},
};

简单好用
原创不易点个关注行不行 ^_

关注我。持续更新前端知识

vue封装一个从顶部滑出的浮层小组件, 原生和react都可以仿照做出来相关推荐

Vue封装一个简单轻量的上传文件组件
一.之前遇到的一些问题项目中多出有上传文件的需求,使用现有的UI框架实现的过程中,不知道什么原因,总会有一些莫名其妙的bug.比如用某上传组件,明明注明(:multiple="false& ...
高仿途牛App下拉顶部滑出更多
现在旅游的App可谓已经很多了,携程,去哪,途牛.个人三个都用过,感觉途牛的体验还是比较不错的,个人体验,仅供参考. 好了,上面的一段扯淡衬托了我今天要和大家分享的一个功能效果,在途牛App的行程玩法 ...
纯js封装一个多功能弹出框
不借助其它的css代码和图片资源,可直接调用. 原创内容,请勿转载. 注意,不要直接复制文章里的封装代码,因为编辑器的原因,无论怎么编辑,它还是给修改了代码.文末提供了封装代码的下载地址(无需积分) ...
封装一个方法，找出数组中重复数大于n的元素集合
例如 [1, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4, 4],封装一个数组原型上的方法,方法返回重复数目大于2 的子元素集合,结果为[1, 2, 3] 初看并不难,循环一下就可以搞 ...
antd picker 使用如何_如何基于jsoneditor二次封装一个可实时预览的json编辑器组件?(react版)...
前言做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一 ...
前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
文章目录前言第一回合一.知识点:cookie(21/09/06) 二.知识点:节流和防抖(21/09/07) 三.知识点:var和let以及const(21/09/08) 四:知识点:深拷贝和浅 ...
Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
前言写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值简化了渲染的子组 ...
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言这次的后台管理系统项目选型用了Vue来作为主技术栈: 因为前段时间用过React来写过项目(用了antd),感觉棒棒的. 所以这次就排除了Element UI,而采用了Ant Design Vu ...
Snackbars从顶部滑出的实现
需要多个类的帮助,有需要的直接下载代码记住需要先导入依赖包:compile 'com.android.support:design:23.0.0' 主要代码的帮助类帮助类1 import java ...

vue封装一个从顶部滑出的浮层小组件, 原生和react都可以仿照做出来

vue封装一个从顶部滑出的浮层小组件, 原生和react都可以仿照做出来相关推荐

最新文章

热门文章

vue封装一个 从顶部滑出的浮层小组件, 原生和react都可以仿照做出来

vue封装一个 从顶部滑出的浮层小组件, 原生和react都可以仿照做出来相关推荐

最新文章

热门文章

vue封装一个从顶部滑出的浮层小组件, 原生和react都可以仿照做出来

vue封装一个从顶部滑出的浮层小组件, 原生和react都可以仿照做出来相关推荐