vant组件van-field和van-picke一起使用的采坑记录
vant组件van-field和van-picke一起使用的采坑记录
- 1、单独放一个van-picker
- 2、单独放一个van-poup
- 3、将van-picker放在van-poup中
使用vant组件写APP端form表单，从官网拿过来的van-field标签和van-popup标签，放在页面，没有任何效果。
官网拿过来的改了数据和显示文本，如下图所示。
<html lang="en"><head><meta charset="UTF-8"><title>Titletitle><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><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官网 截图
**
<html lang="en"><head><meta charset="UTF-8"><title>Titletitle><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><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
在页面底部出现了能滑动的选择器
<html lang="en"><head><meta charset="UTF-8"><title>Titletitle><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><van-field readonly clickable name="picker" :value="value" label="选择器" placeholder="点击选择城市"@click="showPicker = true" />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
在页面出现了一个弹出层，“内容”正常显示
<html lang="en"><head><meta charset="UTF-8"><title>Titletitle><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><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中
在页面正常弹出选择器
<html lang="en"><head><meta charset="UTF-8"><title>Titletitle><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><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一起就不会出现任何效果。
欢迎有知道原因的网友留言告知哈！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！