仿 taro-ui 实现 modal 组件小程序组件

时间 2019-11-10

标签 taro 实现 modal 组件程序繁體版

原文原文链接

仿 taro-ui 实现 modal 组件小程序组件.

简介:css
- 项目中使用到弹窗类的组件,从新制造了一个轮子.
- 源码地址: https://github.com/xiangxiong...
- 编写完modal组件总计花了28分钟.
效果图:react
编写组件的基本思路:git
- 一、分析组件要实现的基本功能.对组件进行拆分.肯定实现功能的前后顺序.
- 二、肯定使用方法, 在作以前应该想好输入和输出. 肯定好数据结构.
- 三、先写基本结构, 后写样式, 在追加事件和交互, 细节优化.
- 四、技术总结.

1、组件拆分

该组件能够分为三个部分.github
- 一、遮罩层,点击遮罩层能够关闭弹窗.
- 二、标题，内容，操做. 这些功能可能是能够动态配置的.
- 三、点击取消关闭弹窗,点击确承认以给父页面传值.

2、肯定使用方法

modal 参数:web

参数	说明	类型
title	元素的标题	String
content	元素的内容	String
cancelText	取消按钮的文本	String
closeOnClickOverlay	点击浮层的时候时候自动关闭	Boolean
confirmText	确认按钮的文本	String
isOpened	是否显示模态框	Boolean

modal 事件:小程序

事件名称 | 说明

onClose	触发关闭时的事件
onCancel	点击取消按钮触发的样式
onConfirm	点击确认按钮触发的事件

数据结构sass

this.state = {
      modal:{
          isOpened:false,
          title:'标题',
          content:'内容',
          cancelText:'取消',
          confirmText:'确认',
          closeOnClickOverlay:false
      }
  }

3、分步骤实施

实现 UI 功能.数据结构
- 实现modal 的结构app
  - mp-modal mp-modal--active 控制这个modal 是否显示隐藏。
  - mp-modal__overlay 通用的遮罩层.
  - mp-modal__container modal 显示区域.
  - mp-modal__title,mp-modal__content,mp-modal__footer 分别为标题，内容，事件触发.

<View className='mp-modal mp-modal--active'>
        <View className="mp-modal__overlay"> </View>
        <View className="mp-modal__container">
              <View className="mp-modal__title">标题</View>
              <View className="mp-modal__content">内容</View>
              <View  className="mp-modal__footer">
                            <View className="mp-modal__action">
                               <Button>取消</Button>
                               <Button>确认</Button> 
                            </View>
              </View>
        </View>
  </View>

实现modal 的 css 样式.(说重要的几个点)webapp

通用的遮罩层.

{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba($color: #000, $alpha: 0.3);
}

modal 居中定位

{
    position: $pos;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

这两部分能够作成公共的css 给整个项目提供使用.

react 部分功能实现.

核心点有2个:

* 一、在子组件生命周期 componentWillReceiveProps 中监听父组件状态的变化决定是否渲染子组件.

componentWillReceiveProps(nextProps){
    const {_isOpened} = this.state;

    if(_isOpened != nextProps.isOpened){
    this.setState({
        _isOpened:nextProps.isOpened
    });
    }
}

二、子组件接收父组件传递过来的属性和事件.
- 组件的代码:

```
    <Modal
    title={this.modal.title} 
    content={this.modal.content} 
    isOpened={this.modal.isOpened}
    cancelText={this.modal.cancelText}
    confirmText={this.modal.confirmText}
    closeOnClickOverlay={this.modal.closeOnClickOverlay}
    onClose={this.onClose}
    onConfirm={this.onConfirm}
    onCancel={this.onCancel}
    />
```

4、技术总结:

一、掌握sass 的写法,css 3 掌握的基础知识, css 伪类 :after ,:before , 选择器 :not(:first-child) :last-child, transition 动画, flex 布局, transform 选择. 掌握这些知识以后轻松能够写出UI.
二、掌握react 父子之间数据的传递.
三、掌握 componentWillReceiveProps 这个生命周期函数的用法。
四、其余的项目使用了 classnames 拼装样式, lodash 验证传入的属性是不是函数, PropTypes 验证父组件传入的数据格式是否正确.

5、参考文献:

仿 taro-ui 实现 modal 组件 小程序组件

仿 taro-ui 实现 modal 组件 小程序组件.

仿 taro-ui 实现 modal 组件小程序组件

仿 taro-ui 实现 modal 组件小程序组件.