Astro轻应用 AstroZero-如何实现页面组件间的交互:属性绑定

时间：2023-11-01 16:25:38

Astro轻应用 AstroZero

除了值绑定外，不同组件还拥有不同的属性，例如禁用、只读、隐藏和必填等。这些属性也可以绑定到数据模型或模型中的某个字段上，类似vue中的v-bind语法。

“模态框”组件默认弹出是不可拖动的，在上例的基础上增加一个按钮，当单击该按钮让模态框变为可拖动的，以此来演示“属性绑定”，如图9所示。

图9 新增一个按钮用来控制模态框“可拖动”属性

新增一个自定义模型“modalDrag”并将该模型与“模态框”组件的“可拖动”属性绑定，如下图所示。

图10 模态框组件属性绑定

与上一个例子类似，在新增的“模态框拖动”按钮的点击事件中，将“modalDrag”设置为true。

图11 设置事件

图12 编辑代码

单击，保存页面后，单击，进入预览页面。在预览界面即可看到模态框第一次弹出时默认不可拖动，关闭模态框单击“模态框拖动”按钮后，模态框再次弹出即为可拖动效果。

图13 属性绑定演示效果

Astro轻应用 AstroZero-如何实现页面组件间的交互:属性绑定

意见反馈

0/200

提交成功！非常感谢您的反馈，我们会继续努力做到更好反馈提交失败！请稍后重试！

7*24