时间戳

首页 > 解决方案 > 如何使禁用的 v-select 中的芯片可点击？

vue.js - 如何使禁用的 v-select 中的芯片可点击？

问题描述

我有一个在内部用 sv-select表示所选项目的 a。v-chip我希望在用户不编辑选择时将芯片用作按钮，但是v-select当用户不编辑选择时禁用。由于v-select禁用了，@click我没有绑定到v-chip工作的任何事件，因为禁用行为级联到v-chips. 由于v-select需要禁用以防止下拉行为，我怎样才能在元素上启用我的@click事件。v-chip

请参阅此 CodePen 了解我的粗略设置：https ://codepen.io/anon/pen/orLxMz

标签： vue.jsvuetify.js

解决方案

它看起来像的disable属性v-select增加了一个

pointer-events: none;

风格给它的所有后代。这就是阻止@click事件触发的原因。

要重新启用v-chips 进行单击，请添加样式

pointer-events: all;

到 v-chip 声明。

请参阅此工作 CodePen：https ://codepen.io/anon/pen/QXEKLN

推荐阅读