Skip to content

跟随自定义内容(showSlot)

这是自由度最高的组件,显示的内容完全由开发者决定。

一、场景和形态

弹框选择之一,提供快捷的交互体验,无模态,特点是:弹出位置跟随鼠标点击位置智能计算,一般用于注释性弹框。

UI效果

img

现场演示

二、使用方式

弹出用法

比如我们要弹出一个单位查看器界面

JavaScript
//导入
import {showSlot} from "axue";

//准备插槽节点
const rawNode = document.getElementById('usetomodal');  //获取动态节点
const slotContent = rawNode.cloneNode(true); // 深拷贝节点内容
let  args = {
    slot: node,
    isHiddenBorder:true
}

//在被点击元素的悬停、点击事件回调中,调用弹框
showSlot.send(args)
自动关闭

点击弹框外围,将自动关闭弹框。

主动关闭

借助点击弹框内部元素来处理逻辑,则需要主动调用接口关闭

JavaScript
showSlot.close()

参数项

内联属性说明类型默认值
slot可插入任意节点htmlNode或模板字符串null
isHiddenBorder是否隐藏边框,默认有边框boolfalse

青锋三尺,樵夫十年