ant-Mobile的popover冒泡组件

这是一段关于下方点击div,弹出气泡的功能代码。
其中用到了关于一个自己封装的组件为Page。是上放Tabbar的一种。
主要功能通过气泡点击跳入其他页面。

//Popover主要实现通过气泡进行跳转这个功能
import {InputItem, List,Popover} from "antd-mobile";
import React, {Component} from "react";
import {bindActionCreators} from 'redux'
import {connect} from "react-redux";
import {Page} from 'component-reactjs-test'

class Info extends Component {
  componentWillMount() {
    const {action} = this.props.location;
    if (action === 'PUSH') {
      const {initEquipInfo,getEquipInfoDetail} = this.props;
      const {equipId} = this.props.location.state;
      initEquipInfo();
      getEquipInfoDetail(equipId);
    }
  }
  handleVisibleChange = (visible) => {
    this.setState({
      visible,
    });
  };
  state = {
    visible: false,
    selected: '',
  };

  onSelect = (opt) => {
    this.setState({
      visible: false,
      selected: opt.props.value,
    });
  };
  ondoc = (doc) => {
    console.log(doc)
    const  {equipId} = this.props.location.state;
    let path = '';
    if (doc == 'EQUIP_STATE') {
      path = {
        pathname: 'equip/listpart',
        state: {
          equipId: equipId
        }
      }
      this.props.router.push(path);
    } else if (doc == 'DEFECT') {
      path = {
        pathname: 'equip/listpart',
        state: {
          equipId: equipId
        }
      }
      this.props.router.push(path);
    }

  }

  render() {
    //TODO  1:抽取input组件,2:lebal对不齐的问题
    let body = (
      <div >
              <Popover mask
                       overlayClassName="fortest"
                       overlayStyle={{ color: 'currentColor' }}
                       visible={this.state.visible}
                       overlay={[
                         (<div onClick={this.ondoc.bind(this,'DEFECT')} >DEFECT</div>),
                         (<div onClick={this.ondoc.bind(this,'EQUIP_STATE')}>EQUIP_STATE</div>)
                       ]}
                       align={{
                         overflow: { adjustY: 1, adjustX: 1 },
                         offset: [0, 0],
                       }}
                       onVisibleChange={this.handleVisibleChange}
                       onSelect={this.onSelect}
              >
                <div style={{
                  height: '100%',
                  padding: '15px',
                  textAlign:'center'
                }} >更多信息
                </div>
              </Popover>
        </div>
    );
    return <Page title='Popover'>{body}</Page>
  }
}

export default Info;



// Page.js
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _navBar = require('antd-mobile/lib/nav-bar');

var _navBar2 = _interopRequireDefault(_navBar);

var _icon = require('antd-mobile/lib/icon');

var _icon2 = _interopRequireDefault(_icon);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

require('antd-mobile/lib/nav-bar/style/css');

require('antd-mobile/lib/icon/style/css');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactRouter = require('react-router');

var _Toast = require('../Toast/Toast');

var _Toast2 = _interopRequireDefault(_Toast);

require('./styles/Page.scss');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * 页面头部导航栏
 */
var PageHead = function (_Component) {
  (0, _inherits3.default)(PageHead, _Component);

  function PageHead() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, PageHead);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = PageHead.__proto__ || Object.getPrototypeOf(PageHead)).call.apply(_ref, [this].concat(args))), _this), _this.onLeftClick = function () {
      var _this$props = _this.props,
          backLevel = _this$props.backLevel,
          isIndex = _this$props.isIndex,
          router = _this$props.router;

      if (isIndex) {
        return;
      }
      if (backLevel) {
        router.go(-1 * backLevel);
      } else {
        router.goBack();
      }
      _Toast2.default.hide(true);
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(PageHead, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          title = _props.title,
          isIndex = _props.isIndex,
          onRightClick = _props.onRightClick;

      return _react2.default.createElement(
        _navBar2.default,
        {
          mode: 'dark',
          icon: isIndex ? '' : _react2.default.createElement(_icon2.default, { type: 'left', size: 'lg', className: 'zk_navbar-hd_margin' }),
          leftContent: isIndex ? '' : _react2.default.createElement(
            'div',
            { className: 'zk_navbar-hd_margin' },
            '\u8FD4\u56DE'
          ),
          onLeftClick: this.onLeftClick,
          rightContent: onRightClick ? _react2.default.createElement(_icon2.default, { key: '1', type: 'ellipsis', onClick: onRightClick }) : ''
        },
        title
      );
    }
  }]);
  return PageHead;
}(_react.Component);

/**
 * 页脚部分
 */
/**
 * 页面容器组件,页头、身体、页脚三部分组成
 */


var PageFoot = function (_Component2) {
  (0, _inherits3.default)(PageFoot, _Component2);

  function PageFoot() {
    (0, _classCallCheck3.default)(this, PageFoot);
    return (0, _possibleConstructorReturn3.default)(this, (PageFoot.__proto__ || Object.getPrototypeOf(PageFoot)).apply(this, arguments));
  }

  (0, _createClass3.default)(PageFoot, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        null,
        this.props.foot
      );
    }
  }]);
  return PageFoot;
}(_react.Component);

/**
 * 页面布局
 */


var Page = function (_Component3) {
  (0, _inherits3.default)(Page, _Component3);

  function Page() {
    (0, _classCallCheck3.default)(this, Page);
    return (0, _possibleConstructorReturn3.default)(this, (Page.__proto__ || Object.getPrototypeOf(Page)).apply(this, arguments));
  }

  (0, _createClass3.default)(Page, [{
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          title = _props2.title,
          isIndex = _props2.isIndex,
          router = _props2.router,
          backLevel = _props2.backLevel,
          onRightClick = _props2.onRightClick,
          foot = _props2.foot,
          children = _props2.children;

      return _react2.default.createElement(
        'div',
        { className: 'zk-page zk_div-animation' },
        title ? _react2.default.createElement(PageHead, {
          title: title,
          isIndex: isIndex,
          router: router,
          backLevel: backLevel,
          onRightClick: onRightClick
        }) : '',
        _react2.default.createElement(
          'div',
          { className: 'zk_page-bd_bg' },
          children
        ),
        _react2.default.createElement(PageFoot, { foot: foot })
      );
    }
  }]);
  return Page;
}(_react.Component);

Page.propTypes = {
  // 页面标题
  title: _propTypes2.default.string,
  // 是否是首页
  isIndex: _propTypes2.default.bool,
  // 导航栏右侧功能按钮点击事件
  onRightClick: _propTypes2.default.func,
  // 返回的层级
  backLevel: _propTypes2.default.number,
  // 底部内容
  foot: _propTypes2.default.element
};
exports.default = (0, _reactRouter.withRouter)(Page);
//# sourceMappingURL=Page.js.map

版权声明:著作权归作者所有。

相关推荐

Vuejs兄弟组件之间的通信通信

vuejs兄弟组件之间的通信可以使用事件发射器。最简洁的方式使用Vue的root实例来作为全局的事件仓库。示例ComponentAthis.$root.$emit('myevent', data); ComponentBmounted() {     this.$root.$on('myevent', data =&g

应该知道Vue UI组件(2018年)

Element这是饿了么前端团队开源桌面端的Vue UI组件。Github star 24k+。Github地址:https://github.com/ElemeFE/element中文文档:http://element-cn.eleme.io/#/zh-CNVux国内开源的专注于移动设备端的UI组件,基于Vue和微信的WeUI开发。Github star&

Angular入口组件(entry component)和声明式组件的区别

Angular的声明式组件和入口组件的区别体现在两者的加载方式不同。声明式组件是通过组件声明的selector加载入口组件(entry component)是通过组件的类型动态加载声明式组件声明式组件会在模板里通过组件声明的selector加载组件。示例@Component({   selector: 'a-cmp',   templat

Angular 4选择组件模板DOM元素(DOM操作)的方式

Angular提供了多种方式让我们获取页面的元素。主要分为两种:基于Decorator:@ViewChild,@ViewChildren,@ContentChild,@ContentChildren使用ElementRef以及querySelectorDecorator:@ViewChild,@ViewChildren,@ContentChild,@ContentChildren@ViewChil