如何在vaadin流中禁用组合框中的清除按钮?

我想最简单的方法就是使用CSS,至少我是这么做的。

您要做的是扩展 VaadinComboBox web组件(请参见 https://github.com/vaadin/vaadin-themable-mixin/wiki/2.-Adding-Styles-to-Local-Scope ),因此可以使用以下方法:

1. 首先,选择一个CSS类名,比如 my-combobox
2. 接下来,创建一个HTML文件,该文件将包含vaadincomboxweb组件的默认主题模块的扩展名。给它起个名字 my-combobox-theme.html 把它放进 src/main/resources/META-INF/resources (是的,是 resources 两次)

3. 将以下内容放入HMTL文件中:

   <dom-module id="my-combobox-theme" theme-for="vaadin-combo-box">
       <template>
           <style>
               :host(.my-combobox) [part="clear-button"] {
                   display:none !important
               }
           </style>
       </template>
   </dom-module>
   

在第一行中,您声明下面的CSS应该补充为vaadincomboxweb组件定义的任何样式。

然后,存在的唯一CSS规则定义了每当存在具有CSS类的VaadinComboBox时 我的组合框 这个 clear-button 不应显示web组件的一部分。

4. 将自定义模块导入到具有 @HtmlImport("frontend://my-combobox-theme.html") . 注意:您需要在所有要在中使用修改后的组合框的视图中添加此批注。另一种选择见第6点

5. 现在你差不多准备好了。每当你想拥有一个 ComboBox 不带delete按钮,只需添加一个类名 comboBox.addClassName("my-combobox")

6. 您可能希望在多个地方使用组合框,因此最好创建自己的类。这为您提供了一个可重用的组件,并始终为自定义样式提供正确的HTML导入:

   @HtmlImport("frontend://my-combobox-theme.html")
   public class MyCombobox extends ComboBox {
   
       public MyCombobox() {
           addClassName("my-combobox");
   
           // Adding the following code registers a listener which
           // resets the old value in case the user clears the
           // combo box editor manually, e.g. by entering "".
           //
           // addValueChangeListener(listener -> {
           //     if(listener.getValue() == null) {
           //         setValue(listener.getOldValue());
           //     }
           // });
       }
   
   }
   

目前这是不可能的,但作为功能讨论。参见Github问题 No way to disallow clearing selected value . 你可以在那个问题上竖起大拇指来强调它的重要性。IMO这是一个必须具备的特性,应该从一开始就实现。

这个 roadmap 说了一些关于即将在第三季度在瓦丁11的“下拉菜单”。这可能很有趣。