最近学习了Vue.js

Vue.js官网的computed计算属性文档

找到了计算属性computed,于是写了个栗子玩玩,于是就有了下面的这些

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 开发环境版本,包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 生产环境版本,优化了尺寸和速度 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script>		 -->
		<title>可以拉长的div</title>
	</head>
	<body>
		<div id="app">
			<div :style="wh" style="background-color: green;">
				{{wh}}
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				wh:{
					width:250,
					height:250
				}
			},
			computed:{
				wh:{
					width:function(){
						return this.wh.width + "px";
					},
					height:function(){
						return this.wh.height + "px";
					}
				}
			},
			methods:{
			},
			watch: {
			}
		});
	</script>
</html>

执行的结果却是 { "width": 250, "height": 250 },???怎么没有生效,写错了??,去网上搜了一下,都是跟官网一样写的栗子,我就…
仔细分析了一下,原来里面写的是get和set方法,这样写不会识别,而且名字与data中的重复了,vue优先使用了data中的
更改了一下,

computed:{
	wh2:function(){
		return {
			width:this.wh.width + "px",
			height:this.wh.height + "px"
		}
	}
},

<div :style="wh2" style="background-color: green;">

以下是我写的Demo的半成品

<!DOCTYPE html>
<html>
	<head>
		<base href="../../">
		<meta charset="utf-8" />
		<!-- 开发环境版本,包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
		<!-- 生产环境版本,优化了尺寸和速度 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script>		 -->
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<title>vue示例</title>
		<style type="text/css">
			#app{
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="app" @mouseup="mouseUp" @mousemove="mouseMove">
			<div @mousedown="mouseDown" :style="[styleObj,styleObj2]" style="background-color: green;">
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				mouseIsClick:false,
				mouseLayerX:0,
				mouseLayerY:0,
				styleObj:{
					width:250,
					height:250,
					cursor:"auto"
				},
			},
			computed:{
				styleObj2:function(){
					return {
						width:this.styleObj.width + "px",
						height:this.styleObj.height + "px"
					}
				}
			},
			methods:{
				//鼠标按下时
				mouseDown:function(e){
					//按下的状态
					this.mouseIsClick = true;
					this.mouseLayerX = e.layerX;
					this.mouseLayerY = e.layerY;
				},
				//鼠标松开时
				mouseUp:function(e){
					//清除按下的状态
					if(this.mouseIsClick){
						this.mouseIsClick = false;
					}
				},
				//鼠标移动时
				mouseMove:function(e){
// 					e = e || window.event; // 事件    
// 					let target = e.target || e.srcElement; // 获得事件源
					let maxWidth = this.styleObj.width;
					let minWidth = this.styleObj.width - 5;
					let maxHeight = this.styleObj.height;
					let minHeight = this.styleObj.height - 5;
					if((minWidth <= e.layerX && e.layerX <= maxWidth) && (minHeight <= e.layerY && e.layerY <= maxHeight)){
						this.styleObj.cursor = "move";
						//如果出现了小手,则证明在我们规定的可拖动区
					}else if(minWidth <= e.layerX && e.layerX <= maxWidth){
						this.styleObj.cursor = "e-resize";
					}else if(minHeight <= e.layerY && e.layerY <= maxHeight){
						this.styleObj.cursor = "n-resize";
					}else{
						this.styleObj.cursor = "auto";
					}
					
					//如果鼠标按下了,则根据鼠标的移动更改宽和高
					if(this.mouseIsClick){
						// if((minWidth - 10) <= e.layerX || (minHeight - 10) <= e.layerY){
						let x = e.layerX - this.mouseLayerX;
						let y = e.layerY - this.mouseLayerY;
						this.styleObj.width += x;
						this.styleObj.height += y;
						this.mouseLayerX = e.layerX;
						this.mouseLayerY = e.layerY;
						// }
					}
				},
				out:function(e){
				}
			},
			watch: {
			}
		});
	</script>
</html>

在这里插入图片描述示例2
示例3示例4

可以拖动这个绿方块,会变大,往里拖会变小,在右边和下边会显示出左右箭头和上线箭头,和移动箭头(emm是不是叫指针能好点),但是现在有写不满意,以后有时间再改改

这是我的解决方案,欢迎补充

Logo

前往低代码交流专区

更多推荐