BUI 事件處理

案例

1. 基本使用

b-click 的值的字段在 methods里定義. 在方法里面,可以通過event拿到點擊的上下文關(guān)系.

var bs = bui.store({
    scope: "page",
    methods: {
        getMessage: function() {
            console.log(event)
        }
    }
})

<div b-click='page.getMessage'>最簡單</div>

2. 事件傳參

常規(guī)參數(shù)

示例:

var bs = bui.store({
    scope: "page",
    methods: {
        getMessage: function(a,b) {
            console.log(a)  // 輸出3
            console.log(b)  // 輸出4
        }
    }
})

<div class="bui-btn" b-click='page.getMessage(3,[4],{"test":"對象"})'>點擊輸出3個參數(shù):3,[4],{"test":"對象"}</div>

如果參數(shù)是對象,需要是一個標準JSON才能轉(zhuǎn)換, b-click 屬性值并且一定要用單引號''.

復(fù)雜參數(shù)

示例:

var bs = bui.store({
    scope: "page",
    methods: {
        getMessage: function(dom) {
            // 這個名字太復(fù)雜只能通過屬性的方式獲取, 或者傳索引跟數(shù)據(jù)匹配的方式
            var name = $(dom).attr("name");
        }
    }
})

<div class="bui-btn" b-click='page.getMessage($this)' name="abc復(fù)雜名字(a).pdf">點擊輸出3個參數(shù):3,[4],{"test":"對象"}</div>

內(nèi)置參數(shù)

有些時候,我們不得不通過dom去操作的時候, 可以通過一些內(nèi)置的參數(shù)傳給方法.

• $index: 當前索引
• $parentIndex: 父層索引,只能取一層
• $text: 當前元素的文本
• $html: 當前的內(nèi)容包含html
• $this: 點擊本身的dom
• $parent: 父層的dom
• $children: 子集的$dom

示例:

var bs = bui.store({
    scope: "page",
    methods: {
        getMessage: function(a,b) {
          console.log(a)  // 當前索引
          console.log(b)  // 當前的dom對象
        },
        remove: function(index){
          console.log(index); // 拿到跟 a 一樣的索引.
        }
    }
})

<div b-click="page.getMessage($index,$this)" >
  <div b-click="page.remove($parentIndex)" >刪除</div>
</div>

示例里面的remove方法, 如果傳的是 $index, 那它永遠等于0, 而$parentIndex 是會根據(jù)父級的元素改變的.

如果層級太深, 通過$parentIndex 都不能獲取到, 那b-target屬性就可以派上用場了

例如:

<ul class="bui-list">
  <li>
    <div class="bui-btn">
      <h3>標題名</h3>
      <!-- $parentIndex 指向的是 bui-btn 而我們要刪除的,其實是li的索引才是跟數(shù)據(jù)一一對應(yīng)的 -->
      <div b-click="page.remove($parentIndex)" >刪除</div>
      <!-- 通過b-target 修改了 $index 指向 li -->
      <div b-click="page.remove($index)" b-target="li">刪除</div>
    </div>
  </li>
</ul>

3. 自定義事件傳參

示例:

var bs = bui.store({
    scope: "page",
    methods: {
        getMessage: function(index) {
          // 觸發(fā)自定義事件,參數(shù)可以自定義
          this.trigger("remove","自定義參數(shù)")
        }
    },
    mounted: function(){
      // 加載后, 監(jiān)聽自定義remove的時候做什么事情.
      this.on("remove",function (a) {
          console.log(a)
      })
    }
})

<div b-click="page.getMessage($index)" ></div>

4. 事件與數(shù)據(jù)聯(lián)動

通過點擊觸發(fā)a值的改變, 在 a 值改變的時候, 又可以處理不同的事情.

示例:

var bs = bui.store({
    scope: "page",
    data: {
      a: 1
    },
    methods: {
      changeA: function() {
        this.a++;
      }
    },
    watch: {
      a: function (newVal,oldVal) {
          console.log(newVal);  // 改變后的值
          console.log(oldVal);  // 改變前的值
      }
    }
})

<div class="bui-btn" b-click="page.changeA">改變a的值,觸發(fā)watch事件</div>

效果預(yù)覽

查看效果

點擊的時候,查看chrome控制面板的輸出信息.