先看效果
先要下载插件:react-draggable
全部代码:
import React, { useEffect, useRef, useState } from 'react';
import { ModalForm } from '@ant-design/pro-form';
import Draggable from 'react-draggable';
import styles from './style.less';
import SetEfficacyTwo from '../setEfficacy_two';
const addModel = (props) => {
const { isShow, getIsShow, typeData, data, addConfirmCallBack } = props;
const [bounds, setBounds] = useState({
left: 0,
top: 0,
bottom: 0,
right: 0,
});
const [disabled, setDisabled] = useState(false);
const draggleRef = useRef(null);
// 效验手机号设置_修改
const [EfficacyOneModalVisible, setEfficacyOneModalVisible] = useState(false);
const handleModalVisible = (e) => {
getIsShow(e);
};
const onStart = (_event, uiData) => {
const { clientWidth, clientHeight } = window.document.documentElement;
const targetRect = draggleRef.current?.getBoundingClientRect();
if (!targetRect) {
return;
}
setBounds({
left: -targetRect.left + uiData.x,
right: clientWidth - (targetRect.right - uiData.x),
top: -targetRect.top + uiData.y,
bottom: clientHeight - (targetRect.bottom - uiData.y),
});
};
return (
<ModalForm
title={
<div
onMouseOver={() => {
if (disabled) {
setDisabled(false);
}
}}
onMouseOut={() => {
setDisabled(true);
}}
style={{
width: '100%',
cursor: 'move',
}}
>
效验手机号设置
</div>
}
width="480px"
layout="horizontal"
visible={isShow}
modalProps={{
destroyOnClose: true,
modalRender: (modal) => {
return (
<Draggable
disabled={disabled}
bounds={bounds}
onStart={(event, uiData) => onStart(event, uiData)}
>
<div ref={draggleRef}>{modal}</div>
</Draggable>
);
},
}}
initialValues={data}
submitter={{
searchConfig: {
submitText: '修改',
resetText: '',
},
}}
// request={async ()=> {
// await waitTime(2000);
// console.log(listData())
// console.log(data)
// return data
// }}
onVisibleChange={handleModalVisible}
onFinish={async (value) => {
console.log(value, 1);
// addConfirmCallBack(value);
setEfficacyOneModalVisible(true);
}}
>
<div className="word flex flex_align_center flex_column_normal">
<div className={styles.phone_num} style={{ marginLeft: '-80px' }}>
<span className={styles.xing}>* </span>手机所属人
<span className={styles.font_weight}>李三</span>
</div>
<div className={styles.phone_num}>
<span className={styles.xing}>* </span>手机号码
<span className={styles.font_weight}>11187850121</span>
</div>
</div>
<SetEfficacyTwo
isShow={EfficacyOneModalVisible}
getShow={(e) => setEfficacyOneModalVisible(e)}
></SetEfficacyTwo>
</ModalForm>
);
};
export default addModel;