如何移除点击Quasar q-list项时的ripple（波纹）效果

要移除q-item点击时的半透明波纹效果，有两种直接有效的方法：

方法1：通过组件属性关闭波纹（推荐） #

Quasar的q-item组件默认自带波纹效果，只需添加ripple="false"属性即可完全禁用：

修改你的q-item代码如下：

<q-item 
  v-for="(menuItem, index) in primaryMenuArr" 
  :key="index" 
  class="curved-child-li"
  :active="activeMenuItem === menuItem.name"
  @click="activeMenuItem = menuItem.name"
  active-class="active"
  clickable
  manual-focus
  ripple="false" <!-- 新增此属性关闭波纹 -->
>
  <q-icon size="sm" :name="menuItem.icon" class="absolute-center" />
</q-item>

方法2：通过CSS强制隐藏波纹 #

如果属性方法因样式优先级问题不生效，可以用深度选择器强制隐藏波纹元素：

在你的scoped样式中添加：

<style scoped>
/* 禁用波纹效果 */
.curved-child-li ::v-deep .q-item__ripple {
  display: none !important;
}

/* 你的原有样式... */
.curved-parent-ul {
  background: #000000;
  padding: 20px 0 10px 10px;
  width: 100%;
  transition: 0.5s;
  overflow: hidden;
}

/* 其他原有样式保持不变 */
</style>

两种方法都能让你的自定义白色激活样式完全不受波纹干扰，保留侧边栏的弧形边缘设计效果。

内容的提问来源于stack exchange，提问作者Qiuzman