BUI 事件處理

案例

1. 基本使用

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

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

<div b-click='page.getMessage'>最簡(jiǎn)單</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":"對(duì)象"})'>點(diǎn)擊輸出3個(gè)參數(shù):3,[4],{"test":"對(duì)象"}</div>

如果參數(shù)是對(duì)象,需要是一個(gè)標(biāo)準(zhǔn)JSON才能轉(zhuǎn)換, b-click 屬性值并且一定要用單引號(hào)''.

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

示例:

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

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

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

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

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

示例:

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

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

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

如果層級(jí)太深, 通過(guò)$parentIndex 都不能獲取到, 那b-target屬性就可以派上用場(chǎng)了

例如:

<ul class="bui-list">
  <li>
    <div class="bui-btn">
      <h3>標(biāo)題名</h3>
      <!-- $parentIndex 指向的是 bui-btn 而我們要?jiǎng)h除的,其實(shí)是li的索引才是跟數(shù)據(jù)一一對(duì)應(yīng)的 -->
      <div b-click="page.remove($parentIndex)" >刪除</div>
      <!-- 通過(guò)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)聽(tīng)自定義remove的時(shí)候做什么事情.
      this.on("remove",function (a) {
          console.log(a)
      })
    }
})

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

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

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

示例:

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ù)覽

查看效果

點(diǎn)擊的時(shí)候,查看chrome控制面板的輸出信息.