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