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() {},
});
</script>
</html>
初步怀疑自己改错了东西，看了好久发现没有问题啊？？？？
那就把官网拿过来试试，结果？
这什么鬼？官网复制过来竟然没有任何效果？？？？？我TM二十米的大刀呢 ？
vant官网 截图
**
<!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>
<van-cell-group>
<!-- 0、官网直接拿过来 -->
<van-field readonly clickable name="picker" :value="value" label="选择器" placeholder="点击选择城市"
@click="showPicker = true" />
<van-popup v-model="showPicker" position="bottom">
<van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
</van-popup>
</van-cell-group>
</van-form>
</div>
</div>
</body>
<script>
new Vue({
el: "#Vue",
data() {
return {
value: '',
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
showPicker: false,
}
},
methods: {
onConfirm(value) {
this.value = value;
this.showPicker = false;
},
},
created() {},
});
</script>
</html>
不知道什么鬼？做以下测试
1、单独放一个van-picker
在页面底部出现了能滑动的选择器
<!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>
<van-cell-group>
<!-- 0、官网直接拿过来 -->
<van-field readonly clickable name="picker" :value="value" label="选择器" placeholder="点击选择城市"
@click="showPicker = true" />
<!--<van-popup v-model="showPicker" position="bottom">
</van-popup> -->
</van-cell-group>
<van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
</van-form>
</div>
</div>
</body>
<script>
new Vue({
el: "#Vue",
data() {
return {
value: '',
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
showPicker: false,
}
},
methods: {
onConfirm(value) {
this.value = value;
this.showPicker = false;
},
},
created() {},
});
</script>
</html>
2、单独放一个van-poup
在页面出现了一个弹出层，“内容”正常显示
<!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>
<van-cell-group>
<!-- 0、官网直接拿过来 -->
<van-field readonly clickable name="picker" :value="value" label="选择器" placeholder="点击选择城市" @click="showPicker = true" />
</van-cell-group>
<van-popup v-model="showPicker" position="bottom">
内容
</van-popup>
</van-form>
</div>
</div>
</body>
<script>
new Vue({
el: "#Vue",
data() {
return {
value: '',
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
showPicker: false,
}
},
methods: {
onConfirm(value) {
this.value = value;
this.showPicker = false;
},
},
created() {},
});
</script>
</html>
3、将van-picker放在van-poup中
在页面正常弹出选择器
<!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>
<van-cell-group>
<!-- 0、官网直接拿过来 -->
<van-field readonly clickable name="picker" :value="value" label="选择器" placeholder="点击选择城市" @click="showPicker = true" />
</van-cell-group>
<van-popup v-model="showPicker" position="bottom">
<van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
</van-popup>
</van-form>
</div>
</div>
</body>
<script>
new Vue({
el: "#Vue",
data() {
return {
value: '',
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
showPicker: false,
}
},
methods: {
onConfirm(value) {
this.value = value;
this.showPicker = false;
},
},
created() {},
});
</script>
</html>
到这里我们就发现，使用van-popup包裹van-picker放在外面就显示了。
说明：不知各位发现没有，van-field使用了van-cell-group包裹着，如果把van-cell-group去掉，就没有任何效果【和最初一样，怀疑是van-field和van-popup一起使得什么有了冲突】，之前有次测试，van-field和van-popup一起就不会出现任何效果。
欢迎有知道原因的网友留言告知哈！
4868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
