Alan Hou的个人博客

Odoo 14前端框架OWL之标签

完整目录请见Odoo 14全新前端框架 OWL(Odoo Web Library)官方文档中文版

🦉 标签 🦉

内容

综述

标签是有助于编写行内模板或样式的帮助方法。当前存在两个标签css 和 xml。借助这两个函数,可以编写出单文件组件

XML 标签

xml标签自然是最为有用的标签。可用于为组件定义定义内联QWeb模板。不借助标签,创建独立的组件会是这样:

而借助于标签,这一过程可适当简化。名称是唯一生成的,模板自动注册:

CSS标签

CSS标签用于在 JS 文件中定义css样式:

css标签在内部注册css信息。然后在创建第一个组件实例时,会在文档的<head>中添加<style>标签。

注意为像其它css预处理器那样发挥更大作用,css标签接受一些css标准的小扩展:可嵌入css作用域,其规则可由css帮助标签进行扩展:

将格式化为:

这一扩展带来了另一个有用的功能:指向父选择器的 &选择器。例如,如果希望在悬停在组件上时变为红色。会这样写:

但它会被格式化为:

可使用 & 选择器来解决这一问题:

将被格式化为:

目前css标签没有其它的附加处理。但因其是在运行时在javascript中使用,我们实际上拥有更多的功能。例如:

  1. 在javascript 和 css之间共享值:
  2. 作用域至当前组件的规则:
退出移动版