【问题标题】:Disable edit is not working禁用编辑不起作用
【发布时间】:2018-01-20 13:06:49
【问题描述】:

我正在使用ion-searchbar,我需要禁用ion-searchbar 的编辑模式。

我的代码 sn-p -

<ion-searchbar  [disabled]="true"  style="padding: 0" class="add-place-item-divider" [(ngModel)]="mainTrail.source"></ion-searchbar>

但是上面的代码没有按预期工作。

【问题讨论】:

    标签: javascript css ionic-framework ionic2 searchbar


    【解决方案1】:

    请使用css属性pointer-events: none;,我修改了你的代码。请用下面的替换它

    <ion-searchbar  style="pointer-events: none;padding: 0" class="add-place-item-divider" [(ngModel)]="mainTrail.source"></ion-searchbar>
    

    【讨论】:

    • 这是一个很好的答案,它有效。你知道如何从组件中启用/禁用搜索栏吗?
    • 对于组件的启用和禁用意味着需要明确的信息或发布新问题并在评论中添加该链接,我会调查并帮助您修复它
    【解决方案2】:

    搜索栏上的禁用属性未传递给内部input 元素。我想我们可以破解 ViewChildren 的 DOM 视图 ViewChild ...

    但也有一种方法可以利用 Ganesh Pediredla 的想法,实现一种基于 pointer-events CSS 属性启用/禁用组件的方法。

    使用属性来启用或禁用声明 pointer-events: none;padding: 的 CSS 类

    HTML

    <ion-searchbar [ngClass]="{ 'no-pointer-events': disableSearchbar }" class="add-place-item-divider" [(ngModel)]="mainTrail.source"></ion-searchbar>
    

    CSS

    .no-pointer-events {
        pointer-events: none;
    }
    

    组件

    public disableSearchbar: boolean = true;
    
    toggleSearchbar(status: boolean): void {
        this.disableSearchbar = !this.disableSearchbar;
    }
    

    See in in action on stackblitz

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-08-18
      • 2014-07-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-05
      • 1970-01-01
      相关资源
      最近更新 更多