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

结束

相关推荐
风清扬雨1 分钟前
Vue3具名插槽用法全解——从零到一的详细指南
前端·javascript·vue.js
大熊猫今天吃什么29 分钟前
【一天一坑】空数组,使用 allMatch 默认返回true
前端·数据库
!win !1 小时前
Tailwind CSS一些你需要记住的原子类
前端·tailwindcss
前端极客探险家1 小时前
打造一个 AI 面试助手:输入岗位 + 技术栈 → 自动生成面试问题 + 标准答案 + 技术考点图谱
前端·人工智能·面试·职场和发展·vue
橘子味的冰淇淋~1 小时前
【解决】Vue + Vite + TS 配置路径别名成功仍爆红
前端·javascript·vue.js
利刃之灵2 小时前
03-HTML常见元素
前端·html
kidding7232 小时前
gitee新的仓库,Vscode创建新的分支详细步骤
前端·gitee·在仓库创建新的分支
听风吹等浪起2 小时前
基于html实现的课题随机点名
前端·html
leluckys2 小时前
flutter 专题 六十三 Flutter入门与实战作者:xiangzhihong8Fluter 应用调试
前端·javascript·flutter
kidding7232 小时前
微信小程序怎么分包步骤(包括怎么主包跳转到分包)
前端·微信小程序·前端开发·分包·wx.navigateto·subpackages