如何让Nipple.js操纵杆响应式？

Question

我目前正在使用 javascript 库 nipple.js 将操纵杆元素添加到我的 vue.js 网站。 操纵杆放置在可调整大小的父元素内，但其本身具有静态大小。 我想知道如何使操纵杆元素随其父元素调整大小，以便在调整父元素大小时它具有合适的大小，而且通常在不同的屏幕尺寸上也有合适的大小。

这就是我现在在 Vue 中初始化操纵杆的方式

const options = {
      zone: this.$refs.nippleRef,
      mode: 'static',
      position: { left: '25%', top: '50%' },
      dynamicPage: true, // needed because of vue
      size: 150,
      restOpacity: 0.75,
    };

我尝试使用例如大小值中 150 位置的百分比。但是那里只有数字有效。

我想知道是否有一种方法可以通过 javascript 或 css 使操纵杆响应？

这是 vue 文件的模板部分顺便说一句：

<v-col>
 <div>
   <div ref="nippleRef"></div>
 </div>
</v-col>

提前谢谢您！

Answer 1

这就是我使其响应的方式，在

static

模式下，我将其添加到我的 css 中：

.nipple {
    position: fixed !important;
}

.back {
    position: fixed !important;
    margin-left: 0px !important;
    margin-top: 0px !important;
}

.front {
    position: fixed !important;
    margin-left: 25px !important;
    margin-top: 25px !important;
    left: unset !important;
    top: unset !important;
}