手机网站表单页面制作,在线手机动画网站模板下载,建立个人博客wordpress,10有免费建网站项目中需求#xff0c;要求给商品图片添加促销标签#xff0c;并且可拉伸大小#xff0c;和拖拽位置 最后选择用react-rnd来实现 话不多说#xff0c;直接上代码#xff01;#xff01;#xff01;
1.在项目根目录下执行以下代码#xff0c;引入react-rnd
yarn add r…项目中需求要求给商品图片添加促销标签并且可拉伸大小和拖拽位置 最后选择用react-rnd来实现 话不多说直接上代码
1.在项目根目录下执行以下代码引入react-rnd
yarn add react-rnd2.在项目中直接引用以下是最简单的示例
import React, { Component } from react;
import { Rnd } from react-rnd;interface State {/*** 正在操作中*/isDragging: boolean;/*** 拉伸大小*/size: {width: number;height: number;};/*** 位置*/position: {x: number;y: number;};
}
export class ProductMainImageWatermarkRulePreview extends Componentunknown, State {constructor(props: any) {super(props);this.state {isDragging: false,size: {width: 100,height: 100,},position: {x: 0,y: 0,},};}handleDragStart () {this.setState({isDragging: true,});};handleDragStop (e: any, d: any) {this.setState({isDragging: false,position: {x: d.x,y: d.y,},});};handleResizeStart () {this.setState({isDragging: true,});};handleResizeStop (e: any, direction: any, ref: any, delta: any, position: any) {this.setState({isDragging: false,size: {width: ref.style.width,height: ref.style.height,},position: position,});};render() {const { position, isDragging, size } this.state;return (div style{{ width: 375, height: 375, backgroundColor: gray }}Rnd// default{{ x: position.x, y: position.y, width: size.width, height: size.height }}// minHeight{1}// maxHeight{375}// minWidth{1}// maxWidth{375}size{size}position{position}boundsparentonDragStart{this.handleDragStart}onDragStop{this.handleDragStop}onResizeStart{this.handleResizeStart}onResizeStop{this.handleResizeStop}resizeParentMore{true} // 如果需要阻止父容器跟随大小变化可以设置为falseenableResizing{{top: true,right: true,bottom: true,left: true,topRight: true,bottomRight: true,bottomLeft: true,topLeft: true,}}resizeHandles{[se, sw, ne, nw]}style{{ opacity: isDragging ? 0.8 : 1 }}onClick{(e: any) e.stopPropagation()}divimgsrchttps://b-puzhehei-cdn.co-mall.net/global/magic-backend/invitation-activity/button-picture.pngaltstyle{{ width: 100%, height: 100% }}//div/Rnd/div);}
}
实现效果如下
还有一些属性罗列出来希望对大家有帮助
default: { x: number; y: number; width?: number | string; height?: number | string;}; 设定默认的一些属性如初始坐标和宽高
size?: { width: (number | string), height: (number | string) }; 组件的大小即宽度与高度
position?: { x: number, y: number }; 组件的坐标即横坐标与纵坐标
resizeGrid?: [number, number]; 重置大小时的增量默认为[1, 1]
dragGrid?: [number, number]; 拖拽时的增量默认为[1, 1]
lockAspectRatio?: boolean | number; 锁定纵横比可设置为布尔值或数字值当设置为true时组件会锁定纵横比并且该值为组件初始宽高的比值而设置为数字时组件调整大小时会以该值作为纵横比来调整
enableResizing?: ?Enable 用以设置是否可调整大小可从组件各个方向上或整体来设置
disableDragging?: boolean; 是否禁用拖拽
dragAxis?: x | y | both | none 设置组件的拖拽方向
bounds?: string; 组件的边界可设置为父组件的名称或者window、body或者一个选择器的名称(需要带上符号. or #)方法
onResizeStart?: RndResizeStartCallback; // 开始调整大小时调用onResize?: RndResizeCallback; // 组件调整大小时调用onResizeStop?: RndResizeCallback; // 组件停止调整大小时调用onDragStart: DraggableEventHandler; // 组件开始拖拽时调用onDrag: DraggableEventHandler; // 组件拖拽时调用onDragStop: DraggableEventHandler; // 组件停止拖拽时调用
