bz-root 挂载根节点

基本用法

小程序不能操作 dom, 一般无法将元素挂载到根节点上供页面(当前页面维度)使用，fixed 元素也还只是在原文档流，甚至会受到父级元素的影响，所以添加该组件以支持业务场景。

挂载元素到根节点，适用于 弹窗，蒙层等元素场景。 1.0.1 版本开始支持此组件。

扫码预览

用BoosHi扫码或PC端点击

<template>
  <view class="demo-ui-page">
    <view class="demo-content">
      <view class="demo-title">bz-root 挂载全局</view>
      <demo-cell>
        <bz-root>
          <view class="fix1">固定该顶部80</view>
        </bz-root>
      </demo-cell>
      <demo-cell>
        <button @click="visibleMask=!visibleMask">触发蒙层</button>
        <bz-root>
          <view v-if="visibleMask" class="mask" @click="visibleMask=false"></view>
        </bz-root>
      </demo-cell>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        visibleMask: false
			}
		},
	}
</script>

<style lang="scss" scoped>
.fix1 {
  position: fixed;
  right: 0;
  top: 80px;
  background-color: #5d68e8;
  padding: 5px 6px;
  border-radius: 4px;
  color: #fff;
  font-size: 13px;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.3);
}
</style>

展开 刷新 关闭

属性说明

属性名	类型	默认值	说明
appendRoot	Boolean	true	是否挂载到根元素