van-dialog 弹出框之组件调用方法小结，结合一些 api 中提供的属性进行组合搭配后的效果。

html

<button type="button" style="width: 100px; height: 30px;" @click="remarksPaperClick">备注</button>
<van-dialog v-model="dialogShow" :show-cancel-button="true" :before-close="beforeClose">
    <div style="width: 100%; height: 200px; display: flex; flex-direction: column; align-items: center;">
    <span style="width: 100%; height: 30px; font-size: 20px; color: #ffffff; font-weight: bold; text-align: center; background-color: #37AAEA;">备注</span>
    <van-field
        v-model="remarkValue"
        placeholder="请输入备注内容"
        clearable
        autosize
        type="textarea"
        rows="1"
        maxlength="230"
        show-word-limit
    />
    </div>
</van-dialog>

js

remarksExamClick :function (item) { // 点击事件 - 是否加载备注框组件 - 题目备注
    console.log(item);
},
beforeClose : function (action, done) { // 点击事件 - 备注按钮提示框
    if (action === 'confirm') { // 确认
      console.log('[点击事件 - 备注] - 确认');

      done(); // 关闭提示框
    } else if (action === 'cancel') { // 取消
      console.log('[点击事件 - 备注] - 取消');
      done(); // 关闭提示框
    }
},

css 样式根据实际业务场景需求自由配置即可。

以上便是此次分享的全部内容，希望能对大家有所帮助！