Tuya Developer Forum

Code: Select all

"@ray-js/components-ty-popover": "^0.1.0",
"@ray-js/panel-sdk": "^1.10.0",
"@ray-js/ray": "^1.5.29",

- 相关代码：

Code: Select all

    <View className={styles.box} >
            <Popover
          visible={visibleIcon}
          content={contentIcon}
          placement="bottom-right"
          overlay
          onClickOverlay={handleMaskTab}
          popoverClassName={styles.demoBtn}
        >
          {/* <View className={styles.demoBtn} onClick={handleClickIcon}>
            展示图标
          </View> */}
        </Popover>
        </View>

Code: Select all

.box {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%; /* 调整为100% */
  height: 100%;
  background: linear-gradient(to bottom, #e5e5e7, #fffeff); /* 使用线性渐变 */
  align-items: center; /* 垂直居中 */
  background-repeat: repeat;
}
.demoBtn {
  position: absolute;
  top: 100rpx;
  right: 100rpx;
  z-index: 999; /* 确保在最上层 */
  background-color: #fff;
}

Code: Select all

- 预期结果：我希望气泡在页面右上角显示。

- 实际结果：气泡在top：0，right：0这个样式的时候，气泡生成在页面正中间，而right为负的时候，才是往右移动。且往右移动一定程度，该组件气泡箭头和文本分离

Code: Select all

.demoBtn {
  z-index: 999; /* 确保在最上层 */
  background-color: #fff;
}