封装一个弹出框

1.js文件
import Taro, {Component} from '@tarojs/taro';
import { View, Image } from '@tarojs/components';
import PropTypes from "prop-types";
import './imageModal.less';

export default class ImageModal extends Component {
  static propTypes = {
    prefixClass: PropTypes.string,
    visible: PropTypes.bool.isRequired,
    src: PropTypes.any.isRequired,
  };

  static defaultProps = {
    prefixClass: 'show-tutorial-modal',
  };

  constructor(props) {
    super(props);
    this.state = {
      visible: props.visible,
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      visible: nextProps.visible,
    })
  }

  closeImageModal = () => {
    this.setState({
      visible: false,
    });
  }

  render() {
    let { visible } = this.state;
    let { src, prefixClass } = this.props;
    return (
      <View className={`${prefixClass}`}>
        {
          visible ? (
            <View>
              <View className='show-tutorial'>
                <Image src={src} className='show-tutorial-img' />
              </View>
              <View className='mask' onClick={this.closeImageModal} />
            </View>
          ) : null
        }
      </View>
    )
  }
}


2.css文件

@name: show-tutorial-modal;

.@{name}{
  height: 100vh;
  .show-tutorial{
    width: 500px;
    height: 800px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2000;
    border-radius: 2px;
    display:flex;
    justify-content:center;
    align-items:center;
    .show-tutorial-img{
      width: 100%;
      height: 100%;
    }
  }
  .mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0.6;
    z-index: 1000;
  }
}


3.组件引用
<ImageModal visible={isShowImageModal} src={Tutorial} className='image-modal' />复制代码

转载于:https://juejin.im/post/5d3c4ea06fb9a07eeb13ef7b