vant组件van-field和van-picke一起使用的采坑记录

最新推荐文章于 2024-08-13 15:47:34 发布

cxt104926

最新推荐文章于 2024-08-13 15:47:34 发布

阅读量4.6k

点赞数

分类专栏：前端文章标签： Vant Vue

本文链接：https://blog.csdn.net/Q_Q104926/article/details/115937702

版权

vant组件van-field和van-picke一起使用的采坑记录

使用vant组件写APP端form表单，从官网拿过来的van-field标签和van-popup标签，放在页面，没有任何效果。
官网拿过来的改了数据和显示文本，如下图所示。

官网拿过来的改了数据和显示文本

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	</head>
	<body>
		<div id="Vue">
			<div class="wrapper">
				<van-form>
					<van-cell-group>
						<van-field name="radio" label="性别：">
							<template #input>
								<van-radio-group v-model="radio" direction="horizontal">
									<van-radio name="1">男</van-radio>
									<van-radio name="2">女</van-radio>
									<van-radio name="3">未说明的性别</van-radio>
									<van-radio name="4">未知的性别</van-radio>
								</van-radio-group>
							</template>
						</van-field>
					</van-cell-group>
					
					<!-- 1、放在一起 -->
					<van-cell-group>
						<van-field readonly clickable name="picker" :value="cultureValue" label="文化程度："
							placeholder="点击选择文化程度" @click="showPicker=true" />
						<van-popup v-model="showPicker" position="bottom">
							<van-picker show-toolbar :columns="culture" @confirm="onConfirm" @cancel="showPicker = false" />
						</van-popup>
					</van-cell-group>				
										
				</van-form>
			</div>
		</div>
	</body>

	<script>
		new Vue({
    
			el: "#Vue",
			data() {
    
				return {
    
					radio: '1',
					cultureValue: '',
					culture: ['研究生', '大学本科', '大学专科和专科学校', '中等专业学校', '技工学校', '高中', '初中', '小学', '文盲或半文盲', '不详'],
					showPicker: false,
				}
			},
			methods: {
    					
				 onConfirm(cultureValue) {
    
				      this.cultureValue = cultureValue;
				      this.showPicker = false;
				 },
			},
			created