气泡卡片组件位置异常，无法正常控制显示的位置

[silverlight]

• Tuya MiniApp IDE 版本信息：Node: v18.20.1 Tools: 0.7.1 Ray: 1.5.20

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为负的时候，才是往右移动。且往右移动一定程度，该组件气泡箭头和文本分离

[xuanyi]

样式 box 里的 align-items 去掉试下呢

[silverlight]

样式 box 里的 align-items 去掉试下呢

去掉之后，位置是这样的

[xuanyi]

position: absolute;
top: 100rpx;
right: 100rpx;
把这几行去掉试下

[silverlight]

position: absolute;
top: 100rpx;
right: 100rpx;
把这几行去掉试下

Code: Select all

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

此时位置如下

其中的几个组件的位置属性如下
view组件

三角位置

文本框

[Ron]

Popover是根据父级节点做定位，因此最好是将 .box 这层做文本靠右处理
方法有很多

1. 如你的例子中用绝对定位

   

2. 文本靠右

   

   ...

[silverlight]

Popover是根据父级节点做定位，因此最好是将 .box 这层做文本靠右处理
方法有很多

1. 如你的例子中用绝对定位
   企业微信20241030-145521@2x.png
2. 文本靠右
   22@2x.png
   ...

好的，谢谢讲解

[Ron]

Popover是根据父级节点做定位，因此最好是将 .box 这层做文本靠右处理
方法有很多

1. 如你的例子中用绝对定位
   企业微信20241030-145521@2x.png
2. 文本靠右
   22@2x.png
   ...

好的，谢谢讲解

客气