封装一个弹出框

最新推荐文章于 2024-02-08 17:29:11 发布

hetingtingisme

最新推荐文章于 2024-02-08 17:29:11 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/hetingtingitsme/article/details/93403780

前端专栏收录该内容

14 篇文章

订阅专栏

博客提及了CSS文件和组件引用相关内容，CSS文件在前端开发中用于样式设计，组件引用则有助于提高代码复用性和开发效率，这些都是前端开发的重要方面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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' />