参考@官网文档
代码:
<template> <div> <van-field readonly="" is-link @click="show = true" v-model="inputval" name="测试单选" label="测试单选" /> <van-action-sheet v-model="show" :actions="actions" @select="onSelect" /> </div> </template> <script> export default { data() { return { inputval: '', show: false, actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }], }; }, methods: { onSelect(item) { // 默认情况下点击选项时不会自动收起 // 可以通过 close-on-click-action 属性开启自动收起 this.show = false; this.inputval = item.name }, }, }; </script> <style> </style>View Code
效果: