logo-close

一、场景和形态

构建窗口页面的顶条，左侧是logo、名称，右侧是备注和关闭能力。

现场演示

下面这个顶条，是由axue-logo-close组件渲染

演示代码如下：

<!--在vitepress中的.md文件中直接引入下面的代码-->
<div id="container"></div>
<script setup>
  import('axue').then(({showTip}) => {
    const componentName ='axue-logo-close'
    const el = document.createElement(componentName);
    el.args = {
        name:"启动器",
        marker:"第一步 连接配置数据"
    };
    el.addEventListener('click-close', () => {
      showTip.send("你点击了关闭！");
    });
    document.getElementById('container')?.appendChild(el);
  });
</script>

或者更简单的使用

<axue-logo-close></axue-logo-close>

二、使用方式

至简默认

只有左logo右close图标，没有名称和备注，默认的关闭事件处理——关闭父容器，无提示

<axue-logo-close></axue-logo-close>

定义属性参数

<axue-logo-close .args=${{name:"启动器",marker:"第一步 连接想定配置"}} ></axue-logo-close>

覆盖close事件响应

<axue-logo-close  @click-close=${this._close} ></axue-logo-close>

定义logo双击事件响应

使用this._showDevTools来处理logo的双击事件，默认不处理

<axue-logo-close @dbclick-logo=${this._showDevTools}></axue-logo-close>

属性项

内联属性	说明	类型	默认值
logo	图标url	string	内置图标
name	窗口左侧标题	string	""
marker	窗口右侧注释	string	""
close	关闭图标url	string	内置图标
@dbclick-logo	logo图标双击事件回调	function	null
@click-close	close图标单击事件回调	function	默认关闭当前标签的父容器null