发布于 5年前
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
