代码拉取完成,页面将自动刷新
同步操作将从 smallwei/avue-doc 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
:::demo
<div style="position:relative;height:400px;" @mousedown="handleMouseDown">
<div class="avue-grid"></div>
<avue-draggable :width="obj.width" :height="obj.height":left="obj.left" :top="obj.top" id="draggable" ref="draggable" @focus="handleFocus" @blur="handleBlur">
<div style="width:200px;height:200px;background:red">
</div>
</avue-draggable>
<avue-draggable :width="obj1.width" :height="obj1.height":left="obj1.left" :top="obj1.top" id="draggable1" ref="draggable1" @focus="handleFocus" @blur="handleBlur">
<div style="width:200px;height:200px;background:green">
</div>
</avue-draggable>
</div>
<script>
export default {
data() {
return {
obj1:{
width:200,
height:200,
left:300,
top:200
}
}
},
methods: {
handleMouseDown(){
//调用内部方法取消选中,false取消,true激活
this.$refs.draggable1.setActive(false);
},
//获取焦点
handleFocus ({index, left, top, width, height }) {
console.log(index, left, top, width, height)
},
//失去焦点
handleBlur ({index, left, top, width, height }) {
console.log(index, left, top, width, height)
},
}
}
</script>
:::
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
disabled | 是否禁止拖动 | — | false | |
width | 元素的宽度 | — | — | |
height | 元素的高度 | — | — | |
top | 元素的x位置 | — | 0 | |
left | 元素的y位置 | — | 0 | |
z-index | 图层的序号 | - | 1 |
事件名 | 说明 | 参数 |
---|---|---|
focus | 聚焦时的回调 | - |
blur | 失去焦点的回调 | - |
方法名 | 说明 | 参数 |
---|---|---|
setActive | 改变选中不选中的状态 | - |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。