問(wèn)題

Dialog組件支持函數(shù)調(diào)用和組件調(diào)用兩種形式，而一般的組件僅支持后者。顯然，函數(shù)調(diào)用方式的支持增加了組件使用的靈活性，但是也隨之出現(xiàn)另外幾個(gè)值得注意的問(wèn)題。

成都創(chuàng)新互聯(lián)公司提供高防服務(wù)器租用、云服務(wù)器、香港服務(wù)器、成都移動(dòng)機(jī)房托管等

兩種方式使用舉例

在我的mpvue工程測(cè)試中，針對(duì)dialog組件我專(zhuān)門(mén)創(chuàng)建了一個(gè)測(cè)試文件夾test_dialog，其中包含如下三個(gè)文件：

• index.vue
• main.js
• main.json

上述三個(gè)文件的作用相信各位都明白。注意，我把vant-weapp組件庫(kù)×××后存放到static目錄下：
/static/vant/各個(gè)組件對(duì)應(yīng)子文件夾。

其中，main.json內(nèi)容如下：

{
  "navigationBarTitleText": "test_tabbar_page",
  "usingComponents": {
    "van-button": "/static/vant/button/index",
    "van-icon": "/static/vant/icon/index",
    "van-area": "/static/vant/area/index",
    "van-dialog":"/static/vant/dialog/index",
    "van-field": "/static/vant/field/index"
  }
}

main.js文件內(nèi)容固定不變。
index.vue文件內(nèi)容如下：

<template>
  <div>
    <div>
      <van-button
        plain
        type="primary"
        class="demo-margin-right"
        @click="onClickAlert"
      >
        消息提示
      </van-button>
      <van-dialog id="van-dialog" />
    </div>

    <div >
        <van-button
          plain
          type="danger"
          @click="showCustomDialog"
        >
          組件調(diào)用
        </van-button>
      <van-dialog
        use-slot
        async-close
        :show="show"
        show-cancel-button
        confirm-button-open-type="getUserInfo"
        @close="onClose"
        @getuserinfo="getUserInfo"
      >
        <van-field
          :value="username"
          label="用戶名"
          placeholder="請(qǐng)輸入用戶名"
        />
        <van-field
          :value="password"
          type="password"
          label="密碼"
          border="false"
          placeholder="請(qǐng)輸入密碼"
        />
      </van-dialog>
    </div>
  </div>
</template>

<script>
  import Dialog from '@/../static/vant/dialog/dialog'
  const message = '有贊是一家零售科技公司，致力于成為商家服務(wù)領(lǐng)域里最被信任的引領(lǐng)者'
  export default {
    data: {
      show: false,
      username: '',
      password: ''
    },
    methods:{
      onClickAlert(){
        Dialog.alert({
          title: '標(biāo)題',
          message
        })
      },
      showCustomDialog() {
        this.show=true
      },
      getUserInfo(event) {
        console.log(event.mp.detail)
      },
      onClose(event) {
        if (event.mp.detail === 'confirm') {
          // 異步關(guān)閉彈窗
          setTimeout(() => {
            this.show=false
          }, 1000);
        } else {
          this.show=false
        }
      }
    }
  }
</script>

為了對(duì)比方便，我在上述頁(yè)面中既使用了組件調(diào)用方式又使用了函數(shù)調(diào)用方式。其中，組件調(diào)用方式大家都熟悉，不必贅述。
值得注意的是后者。

函數(shù)調(diào)用方式使用注意事項(xiàng)

有如下幾點(diǎn)：

1，必須放置一個(gè)dialog的聲明方式定義：
<van-dialog id="van-dialog" />

2，使用import命令中不能使用絕對(duì)路徑方式：

import Dialog from '@/../static/vant/dialog/dialog'

這里的@代表項(xiàng)目中的src目錄。

然后就可以使用更靈活的函數(shù)調(diào)用方式了：
Dialog.alert({
title: '標(biāo)題',
message
})

名稱(chēng)欄目：VantWeapp的dialog組件在mpvue小程序中使
網(wǎng)頁(yè)路徑：http://jinyejixie.com/article8/jjehip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、定制開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)公司、、外貿(mào)建站、網(wǎng)站改版

廣告

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