van-dialog 弹出框之组件调用小结 - Vue
van-dialog弹出框之组件调用方法小结,结合一些 api 中提供的属性进行组合搭配后的效果。html<button type="button" style="width: 100px; height: 30px;" @click="remarksPaperClick">备注</button><van-dialog v-model="dialogShow" :sh
·
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 样式根据实际业务场景需求自由配置即可。
以上便是此次分享的全部内容,希望能对大家有所帮助!
更多推荐
所有评论(0)