Odoo 14前端框架OWL之标签

Alan

4 年前

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

🦉 标签 🦉

内容

综述
xml标签
css标签

综述

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

XML 标签

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

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;

    ...
}

import { Component } from 'owl'

const name = 'some-unique-name';

const template = `

<div>

<button t-on-click="someMethod">Click</button>

</div>

QWeb.registerTemplate(name, template);

class MyComponent extends Component {

static template = name;

...

}

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

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>
    `;

    ...
}

const { Component } = owl;

const { xml } = owl.tags;

class MyComponent extends Component {

static template = xml`

<div>

<button t-on-click="someMethod">Click</button>

</div>

...

}

CSS标签

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

class MyComponent extends Component {
    static template = xml`
        <div class="my-component">some template</div>
    `;
    static css`
      .my-component {
          color: red;
      }
    `;
}

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帮助标签进行扩展：

.my-component {
  display: block;
  .sub-component h {
    color: red;
  }
}

.my-component {

display: block;

.sub-component h {

color: red;

}

将格式化为：

.my-component {
  display: block;
}
.my-component .sub-component h {
  color: red;
}

.my-component {

display: block;

}

.my-component .sub-component h {

color: red;

}

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

.my-component {
  display: block;
  :hover {
    color: red;
  }
}

.my-component {

display: block;

:hover {

color: red;

}

但它会被格式化为：

.my-component {
  display: block;
}
.my-component :hover {
  color: red;
}

.my-component {

display: block;

}

.my-component :hover {

color: red;

}

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

.my-component {
  display: block;
  &:hover {
    color: red;
  }
}

.my-component {

display: block;

&:hover {

color: red;

}

将被格式化为：

.my-component {
  display: block;
}
.my-component:hover {
  color: red;
}

.my-component {

display: block;

}

.my-component:hover {

color: red;

}

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

在javascript 和 css之间共享值：

import { 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};
    }
  `;
}

import { 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};

}

作用域至当前组件的规则：

import { 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;
        }
    `;
}

import { 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;

}