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方法来适配, 下拉等多种方法

结束

相关推荐
放逐者-保持本心,方可放逐42 分钟前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成3 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽3 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新4 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
秦jh_5 小时前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑2135 小时前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy5 小时前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪6 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞6 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-6 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript