odoo17 owl 前端 顶部导航栏右侧添加自定义按钮

odoo17 前端 顶部导航栏右侧添加自定义按钮

先看图

很多时候都想要在这添加个自定义按钮或图标, 无穷下手添加

这里将展示如何在顶部header添加自定义

添加自定义模块 demo

目录结构如下

复制代码
└─demo
    │  __init__.py
    │  __manifest__.py
    │
    ├─static
    │  └─src
    │      ├─systray_demo
    │      │      systray_demo.js
    │      │      systray_demo.xml

这个比较简单, 本次只做添加并响应, 不做任何逻辑处理

添加上来后显示如图

上代码

systray_demo.js 文件

js 复制代码
/** @odoo-module **/

import {registry} from "@web/core/registry";
import {Component} from "@odoo/owl";

export class DemoItem extends Component {
    static template = "demo.SystrayDemoItem";  // 指定渲染的模板
    static props = {};

    setup() {
        this.Dmmessage = 'hello world';
    }
	// 点击后执行的方法
    onClick() {
        alert(this.Dmmessage);
    }
}
// 必须要使用这个, 然后继承操作, 不然不会显示在首页
// 当然如果有需求显示, 可在isDisplayed 方法中判断,符合条件再显示
export const systrayItem = {
    Component: DemoItem,
    isDisplayed: function (env) {
        return true;
    },
};

// 在systray 类别中添加自己定义的
registry.category("systray").add("SystrayDemoItem", systrayItem);

systray_demo.xml 这个文件就比较简单了, 制作简单的显示

xml 复制代码
<?xml version="1.0" encoding="utf-8"?>
<templates xml:space="preserve">
    <t t-name="demo.SystrayDemoItem">
        <div>
            <span t-on-click="onClick">hello</span>
        </div>
    </t>
</templates>

好了, 当点击hello后执行js方法操作

如需应变各种需求, 还需要写xml和js方法来适配, 下拉等多种方法

结束

相关推荐
布列瑟农的星空18 分钟前
大话设计模式——观察者模式和发布/订阅模式的区别
前端·后端·架构
龙在天19 分钟前
Vue3 实现 B站 视差 动画
前端
KenXu21 分钟前
F2C Prompt to Design、AI 驱动的设计革命
前端
小鱼儿亮亮23 分钟前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
@大迁世界24 分钟前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
伍哥的传说25 分钟前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first
小鱼儿亮亮29 分钟前
使用Redux的combineReducers对数据拆分
前端·react.js
定栓35 分钟前
Typescript入门-类型断言讲解
前端·javascript·typescript
码间舞39 分钟前
你不知道的pnpm!如果我的电脑上安装了nvm,切换node版本后,那么pnpm还会共享一个磁盘的npm包吗?
前端·代码规范·前端工程化
用户15129054522042 分钟前
itoa函数
前端