内置标签及自定义组件的使用
内置标签的使用
内置标签与原生标签一样、只不过汉化了中文名字、方便用户使用;在编译时会输出为原生标签;例如按钮会被编译为button、输入框会被编译为input;因此在使用时与原生HTML开发一模一样;而对其数据值的操作、可以通过documen对象以及内置函数操作;
例如:对指定div设置一个id、再通过内置函数“取元素ByID”则可以获取该div标签对象、从而实现对该标签进行各项支持的操作。
设置内容、修改Style样式、设置HTML内容等等。
<容器 ID="div1">
我是DIV1的默认文本内容
</容器>
<输入框 提示文本="请输入密码" 类型="密码" />
<编辑框 提示文本="请输入多行内容"></编辑框>
在按钮被单击事件或函数中:
函数 按钮2被单击()
变量 div1 = 取元素ByID("div1")
调试输出(div1)
' 修改容器中的文本内容
div1.innerText = "我是修改的内容"
' 修改容器中的HTML内容
div1.innerHTML = "<span style='color:red;'>我是加载的HTML内容</span>"
结束 函数
注册内置标签事件
内置标签的事件、可以在页体中为其注册;也可以通过内置函数“注册事件ByID”、“注册事件By类名”、“注册事件By元素名”注册。
在页体中注册:
<按钮 被单击="按钮1被单击()">点击我</按钮>
<按钮 onclick="按钮2被单击()">点击我2</按钮>
其中被单击、onclick为事件名称、可以参考核心库/全局属性;原生英文事件名称可参考:HTML 事件 - 菜鸟教程
在函数中动态注册:
函数 动态注册事件()
' 为ID等于 div1 的元素注册被单击事件;当元素被单击时将会在控制台输出被单击的对象及事件
注册事件ByID("div1","click",(源对象,事件源)=>{
调试输出(源对象)
调试输出(事件源)
})
' 为样式类等于 myCls 的所有元素注册被单击事件;当元素被单击时将会在控制台输出被单击的对象及事件
注册事件By类名("myCls","click",(源对象,事件源)=>{
调试输出(源对象)
调试输出(事件源)
})
' 为元素名称等于按钮(button)的所有元素注册被单击事件;当元素被单击时将会在控制台输出被单击的对象及事件
注册事件By元素名("button","click",(源对象,事件源)=>{
调试输出(源对象)
调试输出(事件源)
})
结束 函数
自定义组件
自定义组件指所有非内置组件、及原生元素;例如:以LY开头的组件为封装自LayUI的自定义扩展组件;在项目中创建的自定义可视组件等等。
自定义组件的使用与原生元素略有不同;最大的区别在于事件的处理上;在页体中使用时与基础元素的定义格式基本一样;可设置默认属性值;但该属性值不支持模板变量;结尾标签必须在内部结尾、且必须包含ID;例如:
<LY按钮 ID="ly1" />
<LY编辑框 ID="bjk1" 内容="我是内容" 文本尺寸="30px" />
' 修改属性
bjk1.内容 = "修改后的内容"
bjk1.文本尺寸 = "10px"
事件注册
针对自定义组件的事件;不支持像原生标签那样注册;因为自定义组件的事件是在组件封装时独立声明的;其统一语法为:置XXX回调 ;例如:
按钮1.置被单击回调((事件源)=>{
调试输出(事件源)
})