完整目录请见Odoo 14全新前端框架 OWL(Odoo Web Library)官方文档中文版
🦉 标签 🦉
内容
综述
标签是有助于编写行内模板或样式的帮助方法。当前存在两个标签css 和 xml。借助这两个函数，可以编写出单文件组件。
XML 标签
xml标签自然是最为有用的标签。可用于为组件定义定义内联QWeb模板。不借助标签，创建独立的组件会是这样：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { Component } from 'owl' const name = 'some-unique-name'; const template = ` <div> <span t-if="somecondition">text</span> <button t-on-click="someMethod">Click</button> </div> `; QWeb.registerTemplate(name, template); class MyComponent extends Component { static template = name; ... } |
而借助于标签，这一过程可适当简化。名称是唯一生成的，模板自动注册：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const { Component } = owl; const { xml } = owl.tags; class MyComponent extends Component { static template = xml` <div> <span t-if="somecondition">text</span> <button t-on-click="someMethod">Click</button> </div> `; ... } |
CSS标签
CSS标签用于在 JS 文件中定义css样式：
|
1 2 3 4 5 6 7 8 9 10 |
class MyComponent extends Component { static template = xml` <div class="my-component">some template</div> `; static css` .my-component { color: red; } `; } |
css标签在内部注册css信息。然后在创建第一个组件实例时，会在文档的<head>中添加<style>标签。
注意为像其它css预处理器那样发挥更大作用，css标签接受一些css标准的小扩展：可嵌入css作用域，其规则可由css帮助标签进行扩展：
|
1 2 3 4 5 6 |
.my-component { display: block; .sub-component h { color: red; } } |
将格式化为：
|
1 2 3 4 5 6 |
.my-component { display: block; } .my-component .sub-component h { color: red; } |
这一扩展带来了另一个有用的功能：指向父选择器的 &选择器。例如，如果希望在悬停在组件上时变为红色。会这样写：
|
1 2 3 4 5 6 |
.my-component { display: block; :hover { color: red; } } |
但它会被格式化为：
|
1 2 3 4 5 6 |
.my-component { display: block; } .my-component :hover { color: red; } |
可使用 & 选择器来解决这一问题：
|
1 2 3 4 5 6 |
.my-component { display: block; &:hover { color: red; } } |
将被格式化为：
|
1 2 3 4 5 6 |
.my-component { display: block; } .my-component:hover { color: red; } |
目前css标签没有其它的附加处理。但因其是在运行时在javascript中使用，我们实际上拥有更多的功能。例如：
- 在javascript 和 css之间共享值：
1234567891011import { theme } from "./theme";class MyComponent extends Component {static template = xml`<div class="my-component">...</div>`;static style = css`.my-component {color: ${theme.MAIN_COLOR};background-color: ${theme.SECONDARY_color};}`;} - 作用域至当前组件的规则：
123456789101112import { generateUUID } from "./utils";const uuid = generateUUID();class MyComponent extends Component {static template = xml`<div data-o-${uuid}="">...</div>`;static style = css`[data-o-${uuid}] {color: red;}`;}
