引子

checkbox-group及checkbox組件是開發(fā)小程序中頻繁使用的組件，當(dāng)然在vant weapp組件庫中對應(yīng)的分別是van-checkbox-group和van-checkbox。遺憾的是，官方提供的僅是組件在原生微信小程序框架下的用法，但我們所關(guān)注的是如何把這些組件改寫到mpvue框架中。有關(guān)此二組件常用屬性，在文后引用地址（官方）都有詳細(xì)介紹，在此省略。

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、做網(wǎng)站、東營區(qū)網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、東營區(qū)網(wǎng)絡(luò)營銷、東營區(qū)企業(yè)策劃、東營區(qū)品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供東營區(qū)建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：aaarwkj.com

問題1：數(shù)據(jù)綁定與模板字符串問題

這個(gè)問題困繞了我很長時(shí)間，搜索網(wǎng)絡(luò)，包括google英文搜索，幾乎沒有找到相應(yīng)的答案。首先，請看下面官方提供的組件在原生微信小程序框架下的用法：

<van-checkbox-group value="{{ result }}" bind:change="onChange">
  <van-cell-group >
    <van-cell
      wx:for="{{ list }}"
      wx:key="index"
      title="復(fù)選框 {{ item }}"
      clickable
      data-name="{{ item }}"
      bind:click="toggle"
    >
      <van-checkbox catch:tap="noop" class="checkboxes-{{ item }}" name="{{ item }}" />
    </van-cell>
  </van-cell-group>
</van-checkbox-group>

請注意上面van-cell組件的title組件與van-checkbox組件的class屬性表達(dá)方式，在轉(zhuǎn)換成mpvue框架下的表達(dá)時(shí)，我相當(dāng)然地表達(dá)成下面這樣：

<van-checkbox-group :value="result" @change="onChange">
  <van-cell-group >
    <van-cell
      v-for="item in list"
      :key="index"
      :title=`復(fù)選框${item}`
      clickable
      :data-name="item"
      @click="toggle"
    >
      <van-checkbox @tap="noop" :class=`checkboxes-${item}` :name="item" />
    </van-cell>
  </van-cell-group>
</van-checkbox-group>

結(jié)果編譯都通過不了！

解答：

通過美團(tuán)開源官方上問題集處（引用地址2）得到初步答案提示，說：
“目前是直接把 template 轉(zhuǎn)譯成 wxml ，wxml 不支持 ``，所以目前暫無法支持”
即由于微信小程序官方（時(shí)間是2018年8月，至今仍然不支持）的wxml語法中不支持ES6的模板字符串表達(dá)方式，所以mpvue官方（因?yàn)槠渥罱K也是走轉(zhuǎn)換成wxml的路子）也宣布不支持，只是沒有在醒目的文檔說明中提到（這真正是一個(gè)“坑”?。?。那么，如何修改上面非常明確的常用需求呢？經(jīng)過反復(fù)試驗(yàn)，方式如下（只寫關(guān)鍵部分）：

:title="'復(fù)選框'+item"
:class="'checkboxes-'+item"

有上述需求的同學(xué)可要好好觀察一下了！這里沒有使用到模板字符串中反向單引號，在雙引號的里面可以歸納成由單引號字符串組成的通過加號連接的字符串加法，只不過參與加法的一些部分是字符串變量而已。

問題2：selectComponent方法的使用

官方資料中提到：selectComponent用于微信小程序開發(fā)中獲取自定義子組件，詳情見引用資料3。那么，官方示例中提到的方法（如下）如何改寫呢？

toggle(event) {
    const { name } = event.currentTarget.dataset;
    const checkbox = this.selectComponent(`.checkboxes-${name}`);
    checkbox.toggle();
  }

請看下面的答案。
# 解答：

   toggle(event) {
        const {name} = event.mp.currentTarget.dataset;
        const box =this.$mp.page.selectComponent(`.checkboxes-${name}`)
        box.toggle();
      }

注意，上面使用了標(biāo)準(zhǔn)的ES6中模板字符串表達(dá)方式，因?yàn)檫@里不是wxml文件中，而是vue文件中的<script>腳本片斷中，是沒有問題的。有興趣的同學(xué)可以詳細(xì)調(diào)試分析這里提到的幾個(gè)值，例如this.$mp；恕在此不贅述。

補(bǔ)充1

van-checkbox組件默認(rèn)情況下顯示的是單選按鈕形式的圖標(biāo)，因此需要使用shape屬性修正一下為好，如下所示：

<van-checkbox v-for="item in list" :key="index" :name="item"  shape="square">
          選項(xiàng) {{ item }}
        </van-checkbox>

這里的shape屬性值默認(rèn)為circle。經(jīng)上述修改即成為常見的方形的復(fù)選框圖標(biāo)了。

補(bǔ)充2

在同學(xué)們學(xué)習(xí)官方提供的checkbox定制圖標(biāo)示例中，如果是使用本地圖標(biāo)文件，記得要使用絕對地址方式，相對地址出現(xiàn)找不到的錯(cuò)誤提示。正確方式類似如下表達(dá)：

    ```

icon: {
normal:'/static/images/custom_normal_checkbox.png',
active:'/static/images/custom_active_checkbox.png'
}

# 引用
1.https://youzan.github.io/vant-weapp/#/checkbox
2.https://github.com/Meituan-Dianping/mpvue/issues/845
3.https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html?search-key=selectComponent

文章名稱：VantWeapp小程序蹲坑之使用checkbox組件
路徑分享：http://aaarwkj.com/article42/igijec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)頁設(shè)計(jì)公司、虛擬主機(jī)、App設(shè)計(jì)、全網(wǎng)營銷推廣、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)