基于taro封装底下浮动弹窗组件

先看效果图:

jsx:

import Taro, { Component } from ‘@tarojs/taro‘
import { View, Image } from ‘@tarojs/components‘
import closeImg from ‘../../images/icons/close.png‘
import ‘./FloatLayout.scss‘

interface IProps {
    isOpened: boolean,
    onClose: Function,
    title: string,
}

class FloatLayout extends Component<IProps, {}> {

    state = {
    }

    handleClose () {
        this.props.onClose()
    }

    render () {
        const {isOpened, title} = this.props
        return (
            <View className={isOpened ? "float-layout active" : "float-layout"}>
                <View className=‘float-layout__overlay‘ onClick={this.handleClose.bind(this)}></View>
                <View className=‘float-layout__container layout‘>
                    <View className=‘layout-header  xmg-border-b‘>
                        {title}
                        <Image src={closeImg} className=‘close-img‘/>
                    </View>
                    <View className=‘layout-body‘>
                        {this.props.children}
                    </View>
                </View>
            </View>
        )
    }
}

export { FloatLayout }

scss:

.flolayout {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    visibility: hidden;
    z-index: 810;
    transition: visibility 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
    &.active {
        visibility: visible;
        .flolayout__overlay {
            opacity: 1;
        }
        .flolayout__container {
            transform: translate3d(0, 0, 0);
        }
    }
}
.flolayout__overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 150ms ease-in;
}
.flolayout__container {
    position: absolute;
    bottom: 0;
    width: 100%;
    min-height: 600px;
    max-height: 950px;
    background-color: #fff;
    border-radius: 32px 32px 0px 0px;
    transform: translate3d(0, 100%, 0);
    transition: -webkit-transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
    transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
    transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1),
        -webkit-transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
}

.flolayout .layout-header {
    position: relative;
    padding: 30px 0;
    text-align: center;
    .close-img {
        position: absolute;
        right: 28px;
        top: 36px;
        width: 36px;
        height: 36px;
    }
}
.flolayout .layout-header__title {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    font-size: 32px;
    display: block;
    padding-right: 80px;
}
.flolayout .layout-header__icon {
    line-height: 1;
    position: absolute;
    top: 50%;
    right: 18px;
    padding: 10px;
    transform: translate(0, -50%);
}

.flolayout .layout-body {
    font-size: 28px;
    padding: 20px;
    height: 602px;
}
.flolayout .layout-body__content {
    position: relative;
    height: 500px;
    overflow-y: scroll;
}

组件必须传三个参数,

isOpened: boolean, //控制显示
onClose: Function, //处理关闭弹窗逻辑
title: string //标题

原文地址:https://www.cnblogs.com/pjl43/p/10589456.html

时间: 2024-10-10 00:12:23

基于taro封装底下浮动弹窗组件的相关文章

用类封装一个pop弹窗组件

下面的弹出框组件使用的是类来封装的.一个弹窗组件通过new一个实例来生成. 下面直接上代码: html结构: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> /*基本的样式*/ button{width: 1.6rem;height: 0.5rem;font-

基于JQ的自定义弹窗组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基于JQ的自定义弹窗组件</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" h

vue + elementui 中的弹窗组件封装成公共组件

如果一个弹窗比较简单,可以直接放在页面中,通过visible属性的true,false控制显示隐藏就可以了,我们今天要说的是将个比较复杂的弹窗组件封装成全局组件,然后可以在项目中的任何一个页面引用~~下面走起 1.首先要注册个全局组件,用下面的全局API  Vue.component('my-component', { /* ... */ }) 在js文件中首先引入这个弹窗组件,组件名称是iesPersonRadioDialog,项目中会引入一个js文件,这个js文件中在分别引入其他的js,模块

使用element-ui二次封装一个可复用弹窗组件

源码链接:可复用弹窗组件 组件: <template> <transition name="el-fade-in"> <div v-if="modalCfg.visible" style="width:100%;height:100%;position:fixed;top:0px;left:0px;z-index:8;"> <!-- 遮罩 --> <div class="ces-ma

基于ElementUI封装可复用的表格组件

<template> <section class="ces-table-page"> <!-- 表格操作按钮 --> <section class="ces-handle" v-if='isHandle'> <el-button v-for='item in tableHandles' :key='item.label' :size="size || item.size" :type=&qu

基于Taro与Typescript开发的网易云音乐小程序

基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可以帮助你快速使用Taro开发一个属于你自己的小程序- 源码地址:taro-music,感兴趣的话可以star关注下,功能会进行持续完善 快速开始 首先需要在src目录下创建一个config.ts,可以根据自己的需要将其替换成线上地址,接口服务是使用的NeteaseCloudMusicApi expo

C#进阶系列——一步一步封装自己的HtmlHelper组件:BootstrapHelper(二)

前言:上篇介绍了下封装BootstrapHelper的一些基础知识,这篇继续来完善下.参考HtmlHelper的方式,这篇博主先来封装下一些常用的表单组件.关于BootstrapHelper封装的意义何在,上篇评论里面已经讨论得太多,这里也不想过多纠结.总之一句话:凡事有得必有失,就看你怎么去取舍.有兴趣的可以看看,没兴趣的权当博主讲了个“笑话”吧. 本文原创地址:http://www.cnblogs.com/landeanfen/p/5746166.html BootstrapHelper系列

JS组件系列——封装自己的JS组件

前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一个$("#id").MyJsControl({})做我们自己的组件,我们该如何去做呢,别急,我们慢慢来看看过程. 一.扩展已经存在的组件 1.需求背景 很多时候,我们使用jquery.ajax的方式向后台发送请求,型如 $.ajax({ type: "post", ur

JS组件系列——封装自己的JS组件,你也可以!

前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一个$("#id").MyJsControl({})做我们自己的组件,我们该如何去做呢,别急,我们慢慢来看看过程. 一.扩展已经存在的组件 1.需求背景 很多时候,我们使用jquery.ajax的方式向后台发送请求,型如 $.ajax({ type: "post", ur