Webzen-ui
搜索 K

Appearance

目录

popover ​

悬浮提示（操作）框。

使用方式 ​

html
<!-- 引入 -->
<script type="module">
    import '../components/wz-popover/index.js';
</script>
<!-- 使用 -->
<wz-button>pop confirm</wz-button>
<wz-popover>
    <!-- dom -->
    <div>自定义内容</div>
</wz-popover>

需要将悬浮内容放入<wz-popover></wz-popover>内

类型type ​

提供两种默认样式，默认是带指向箭头的，如果需要自定义，可以使用custom

html
<wz-button>default</wz-button>
<wz-popover>
    <wz-button type="flat">菜单一</wz-button>
    <wz-button type="flat">菜单二</wz-button>
    <wz-button type="flat">菜单三</wz-button>
</wz-popover>

<wz-button>custom</wz-button>
<wz-popover type="custom">
    <wz-button type="flat">菜单一</wz-button>
    <wz-button type="flat">菜单二</wz-button>
    <wz-button type="flat">菜单三</wz-button>
</wz-popover>

触发目标元素target ​

默认情况下，wz-popover是由相邻的前一个节点（previousElementSibling）控制的。如果需要自定义，可以通过target来选择，值为合法的选择器，比如#id、.class等

html
<wz-button id="t1">target1</wz-button>
<wz-button id="t2">target2</wz-button>
<wz-popover target="#t1" dir="top">
    我是 target1 触发的
</wz-popover>
<wz-popover target="#t2" dir="top">
    我是 target2 触发的
</wz-popover>

也可以指定多个.class，这样可以通过多个target来控制同一个悬浮层

html
<wz-button class="target">target1</wz-button>
<wz-button class="target">target2</wz-button>
<wz-button class="target">target3</wz-button>
<wz-popover target=".target">
    我是 .target 触发的
</wz-popover>

每个目标元素和悬浮层直接都有一个对应关系，可以通过.target和.pop 分别获取

js
悬浮层.target = 触发目标
触发目标.pop = 悬浮层

方向dir ​

通过dir可以设置悬浮层方向，可以取值top、right、bottom、left、TL、TR、RT、RB、BL、BR、LT、LB。

html
<wz-button>top</wz-button>
<wz-popover dir="top">
  <p>弹出内容</p>
  <p>弹出内容</p>
</wz-popover>

JavaScript操作get、set

js
popover.dir;
popover.dir = 'right';
//原生属性操作
popover.getAttribute('dir');
popover.setAttribute('dir','right');

除了上述 12 个方位外，还可以设置两个值，以逗号分隔，比如top,bottom，可以自动根据位置来选择一个合适的方向。默认值为TL,BL。

html
<wz-button>top,bottom</wz-button>
<wz-popover dir="top,bottom">
    <p>我会自动调整位置</p>
    <p>在空间充足的情况下朝上</p>
    <p>在上方空间不足的情况下自动朝下</p>
</wz-popover>

触发方式trigger ​

还可以通过trigger属性定义触发方式，默认为hover,focus，还可以设置为click，也可任意组合

TIP

仅用于初始化，后续修改无效。

html
<wz-button>hover</wz-button>
<wz-popover trigger="hover">
  ...
</wz-popover>
<wz-button>focus</wz-button>
<wz-popover trigger="focus">
  ...
</wz-popover>
<wz-button>click</wz-button>
<wz-popover trigger="click">
  ...
</wz-popover>

还支持关键词contextmenu，可以实现自定义右键菜单

在这里单击右键
html
<div class="contextmenu">在这里单击右键</div>
<wz-popover type="custom" trigger="contextmenu">
    <wz-button type="flat">菜单一</wz-button>
    <wz-button type="flat">菜单二</wz-button>
    <wz-button type="flat">菜单三</wz-button>
</wz-popover>

显示open ​

还可以通过open主动去控制悬浮层的出现与隐藏，建议设置trigger="none"

html
<wz-popover trigger="none" open>
    ...
</wz-popover>

JavaScript操作set

js
popover.open = true;
popover.open = false;
//原生属性操作
popover.setAttribute('open',true);
popover.setAttribute('open',false);
popover.toggleAttribute('open',[force]);

点击自动关闭close ​

每次都需要主动关闭太麻烦了，可以在需要点击关闭的按钮上添加close属性，这样在点击后悬浮层会自动关闭，无需popover.open = false

html
<wz-popover type="custom" trigger="click">
    <wz-button type="flat">不会自动关闭</wz-button>
    <wz-button type="flat" close>会自动关闭</wz-button>
</wz-popover>

自定义样式 ​

可以当成普通标签一样，直接对wz-popover进行自定义就行了，比如改变背景色

css
wz-popover{
  /* background: #333; */
  /* color: #fff */
}

事件event ​

show、hide ​

悬浮层出现/消失时触发。

由于原生并没有show、hide这两个事件，因此只能通过addEventListener监听

js
popover.addEventListener('show',function(ev){
    console.log('出现了');
})
popover.addEventListener('hide',function(ev){
    console.log('消失了');
})

change ​

悬浮层显示状态改变时触发。

虽然语义不太好，但还是比较方便，可以直接通过onchange监听

html
<wz-popover onchange="console.log(this.open)">
  ...
</wz-popover>
js
popover.onchange = function(ev){
    //获取open的方式
    console.log(this.open);
    console.log(ev.target.open);
}

popover.addEventListener('change',function(ev){
    console.log(this.open);
    console.log(ev.target.open);
})

MIT License.

Copyright © 2023～present Electrolux