Input 输入框
<van-input> 组件用于输入框，支持文本、数字、密码等类型的输入。
<template>
<van-input v-model="value" placeholder="请输入内容" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value = ref('');
return {
value
};
}
};
</script>
Radio 单选框
<van-radio> 组件用于单选框，支持横向和纵向布局。
<template>
<van-radio-group v-model="radioValue">
<van-radio name="apple">苹果</van-radio>
<van-radio name="banana">香蕉</van-radio>
<van-radio name="orange">橙子</van-radio>
</van-radio-group>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const radioValue = ref('apple');
return {
radioValue
};
}
};
</script>
Checkbox 复选框
<van-checkbox> 组件用于复选框，支持单个和多个选项。
<template>
<van-checkbox-group v-model="checkboxValue">
<van-checkbox name="apple">苹果</van-checkbox>
<van-checkbox name="banana">香蕉</van-checkbox>
<van-checkbox name="orange">橙子</van-checkbox>
</van-checkbox-group>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const checkboxValue = ref([]);
return {
checkboxValue
};
}
};
</script>
Switch 开关
<van-switch> 组件用于开关切换，可以表示开和关两种状态。
<template>
<van-switch v-model="switchValue" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const switchValue = ref(false);
return {
switchValue
};
}
};
</script>
Picker 选择器
<van-picker> 组件用于选择器，支持单列、多列和级联选择。
<template>
<van-picker
v-model="pickerValue"
:columns="columns"
@change="handleChange"
/>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const pickerValue = ref('');
const columns = [
{ text: '杭州', value: 'hangzhou' },
{ text: '上海', value: 'shanghai' },
{ text: '北京', value: 'beijing' }
];
const handleChange = (value, index) => {
console.log('选择的值：', value, '所在列的索引：', index);
};
return {
pickerValue,
columns,
handleChange
};
}
};
</script>
这只是 Vant4 表单组件的一小部分，Vant4 还提供了其他实用的表单组件，如 DatePicker 日期选择器、Uploader 文件上传等。你可以根据项目需要，查阅 Vant4 官方文档以获取更多详细信息和高级用法。
转载请注明出处：http://www.zyzy.cn/article/detail/5799/Vant