Skip to main content

MoveModel

基础使用​

function App() {
  const [visiable, setVi] = useState(false)
  const [move, setMove] = useState(false)
  const style = {
    background: '#ebedf3',
    borderRadius: '2px 2px 0 0',
    color: '#333',
    fontSize: '16px',
    height: '48px',
    justifyContent: 'space-between',
    padding: '13px 20px',
    cursor: 'grab',
    display: 'flex'
  }
  return (
    <div className="ykui-demo-row">
      <Button type="primary" onClick={() => setVi(true)}>展示弹窗</Button>
      <MoveModel
        visible={visiable}
        initPosition={[0, 0]}
        miniHeight={280}
        miniWidth={480}
        move={move}
        zIndex={2000}
        onMoveEnd={() => setMove(false)}
      >
       <div className="yzf-move" style={{background: '#fff', height: '100%'}}>
        <div className="yzf-move_header" onMouseDown={() => setMove(true)} style={style}>
          <span className="yzf-move_title">移动弹窗</span>
          <span>
            <span className="option-item--icon" onClick={() => setVi(false)}>
              X
            </span>
          </span>
        </div>
        <div className="yzf-move_content">只能在move_header中可以移动</div>
       </div>
    </MoveModel>
    </div>
  );
}

可缩放​

reset : 设置为 true

function App() {
  const [visiable, setVi] = useState(false)
  const [move, setMove] = useState(false)
  const style = {
    background: '#ebedf3',
    borderRadius: '2px 2px 0 0',
    color: '#333',
    fontSize: '16px',
    height: '48px',
    justifyContent: 'space-between',
    padding: '13px 20px',
    cursor: 'grab'
  }
  return (
    <div className="ykui-demo-row">
      <Button type="primary" onClick={() => setVi(true)}>展示弹窗</Button>
      <MoveModel
        visible={visiable}
        initPosition={[0, 0]}
        miniHeight={280}
        miniWidth={480}
        move={move}
        zIndex={2000}
        onMoveEnd={() => setMove(false)}
        reset
      >
       <div className="yzf-move" style={{background: '#fff', height: '100%'}}>
        <div className="yzf-move_header" onMouseDown={() => setMove(true)} style={style}>
          <span className="yzf-move_title">移动弹窗</span>
          <span>
            <span className="option-item--icon" onClick={() => setVi(false)}>
              <i className="iconfont icon-395 " style={{ color: '#8e8e8e' }} />
            </span>
          </span>
        </div>
        <div className="yzf-move_content">只能在move_header中可以移动</div>
       </div>
    </MoveModel>
    </div>
  );
}

MoveModel API​

属性说明类型默认值
visible弹窗是否显示booleanfalse
miniWidth宽度number--
children显示的主要内容ReactNode--
className弹窗类名string--
miniHeight高度number--
zIndex显示层级number--
move是否可移动boolean--
reset是否可重置booleanfalse
initPosition初始显示位置[number, number]--
onChange位置改变时触发Function--
onMoveStart开始移动时触发Function--
onMoveEnd结束移动时触发Function--
onResetStart开始重置时触发Function--
onResetEnd结束重置时触发Function--