cssのpointer-eventsプロパティ(divクリック禁止)

859 ワード

css 3ラベルの無効なプロパティ httml+css js。

以前はアイテムを書くときにコンポーネントの無効化が必要な要求によく遭遇しましたが、保存ボタンのクリック状態の代わりに変数を使っていましたが、今日css 3の新しい属性が見つかりました.ついでに試してみました.

最近ちょうどvueを研究しているので、直接vueを案列にしましょう.

従来の方法:

//html
     

//js
data:{
    isclick: 0,
}

//                        (                        )
    click() {
      var that = this;
      if (that.isclick == 1) return;  
      setTimeout(() => {
        that.isclick = 1;
      }, 1000);
    }

ダイナミックにアトリビュートを追加してコンポーネントの無効化を設定する

//html
      


//css

.btn.disable {
  pointer-events: none;
}

//js

data:{
   isclick:0,
}


 //        
    click() {
      console.log("   ,1         ");
      var that = this;
      setTimeout(() => {
        that.isclick = 1;
      }, 1000);
    },

最初に雲Firestoreのセキュリティルールを取る

NGRXでの状態とアクションの強い入力