引用站外地址
vant ui weapp文档地址
https://vant-contrib.gitee.io/vant-weapp/#/home

hbuilderx新建项目

引入vantui

安装 vant

1
npm i @vant/weapp -S --production

新建 wxcomponents 文件夹

注意，在根目录中新建 wxcomponents 文件夹!

引入vant组件

在node_modules/@vant/dist 移动到 wxcomponents/dist/文件夹中

修改App.vue文件引入vant样式文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	/* #ifdef MP-WEIXIN */
		@import "/wxcomponents/dist/common/index.wxss"; //路径要确保正确！！！！
	/* #endif */
</style>

修改page.json引入vant相关组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents": {
			"van-config-provider": "/wxcomponents/dist/config-provider/index",
			"van-button": "/wxcomponents/dist/button/index",
			"van-circle": "/wxcomponents/dist/circle/index",
			"van-action-sheet": "/wxcomponents/dist/action-sheet/index",
			"van-area": "/wxcomponents/dist/area/index",
			"van-button": "/wxcomponents/dist/button/index",
			"van-card": "/wxcomponents/dist/card/index",
			"van-cell": "/wxcomponents/dist/cell/index",
			"van-cell-group": "/wxcomponents/dist/cell-group/index",
			"van-checkbox": "/wxcomponents/dist/checkbox/index",
			"van-checkbox-group": "/wxcomponents/dist/checkbox-group/index",
			"van-col": "/wxcomponents/dist/col/index",
			"van-dialog": "/wxcomponents/dist/dialog/index",
			"van-field": "/wxcomponents/dist/field/index",
			"van-goods-action": "/wxcomponents/dist/goods-action/index",
			"van-goods-action-icon": "/wxcomponents/dist/goods-action-icon/index",
			"van-goods-action-button": "/wxcomponents/dist/goods-action-button/index",
			"van-icon": "/wxcomponents/dist/icon/index",
			"van-loading": "/wxcomponents/dist/loading/index",
			"van-nav-bar": "/wxcomponents/dist/nav-bar/index",
			"van-notice-bar": "/wxcomponents/dist/notice-bar/index",
			"van-notify": "/wxcomponents/dist/notify/index",
			"van-panel": "/wxcomponents/dist/panel/index",
			"van-popup": "/wxcomponents/dist/popup/index",
			"van-progress": "/wxcomponents/dist/progress/index",
			"van-radio": "/wxcomponents/dist/radio/index",
			"van-radio-group": "/wxcomponents/dist/radio-group/index",
			"van-row": "/wxcomponents/dist/row/index",
			"van-search": "/wxcomponents/dist/search/index",
			"van-slider": "/wxcomponents/dist/slider/index",
			"van-stepper": "/wxcomponents/dist/stepper/index",
			"van-steps": "/wxcomponents/dist/steps/index",
			"van-submit-bar": "/wxcomponents/dist/submit-bar/index",
			"van-swipe-cell": "/wxcomponents/dist/swipe-cell/index",
			"van-switch": "/wxcomponents/dist/switch/index",
			// "van-switch-cell": "/wxcomponents/dist/switch-cell/index",
			"van-tab": "/wxcomponents/dist/tab/index",
			"van-tabs": "/wxcomponents/dist/tabs/index",
			"van-tabbar": "/wxcomponents/dist/tabbar/index",
			"van-tabbar-item": "/wxcomponents/dist/tabbar-item/index",
			"van-tag": "/wxcomponents/dist/tag/index",
			"van-toast": "/wxcomponents/dist/toast/index",
			"van-transition": "/wxcomponents/dist/transition/index",
			"van-tree-select": "/wxcomponents/dist/tree-select/index",
			"van-datetime-picker": "/wxcomponents/dist/datetime-picker/index",
			"van-rate": "/wxcomponents/dist/rate/index",
			"van-collapse": "/wxcomponents/dist/collapse/index",
			"van-collapse-item": "/wxcomponents/dist/collapse-item/index",
			"van-picker": "/wxcomponents/dist/picker/index"
		}

	},
	"uniIdRouter": {}
}

使用vant

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<template>
	<view class="content">
		<van-button type="default">默认按钮</van-button>
		<van-button type="primary">主要按钮</van-button>
		<van-button type="info">信息按钮</van-button>
		<van-button type="warning">警告按钮</van-button>
		<van-button type="danger">危险按钮</van-button>
		<view style="margin-top: 30rpx;">
			<van-circle :value="value" :color="gradientColor" text="渐变色" />
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	let value = ref(90);
	let gradientColor = ref({
		'0%': '#ffd01e',
		'50%': '#aa55ff',
		'100%': '#ee0a24'
	});
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

使用toast警告问题

代码中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
	<view class="shopping-box">
		<!-- <van-toast id="van-toast" /> -->

		<view class="shopping-list">
			<van-card
			  v-for="item in shoppingList"
			  :key="item.id"
			  num="2"
			  tag="标签"
			  price="10.00"
			  :desc="item.desc"
			  :title="item.name"
			  :thumb="imageURL"
			>
			  <view slot="footer">
			    <van-button size="mini">取消</van-button>
			    <van-button size="mini" type="danger" @click="handleRemove(item)">删除</van-button>
			  </view>
			</van-card>
		</view>
	</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Toast from '@/wxcomponents/dist/toast/toast.js';
import { onMounted, ref, reactive } from 'vue';	
let imageURL = ref("https://img01.yzcdn.cn/vant/ipad.jpeg")
let shoppingList = ref([
	{ name: "小米", id: "51827381272", desc: "小米手机" },
	{ name: "华为", id: "41827381276", desc: "华为电脑" },
	{ name: "魅族", id: "21827381275", desc: "魅族手机"  }
])
function handleRemove ( item ){
	shoppingList.value = shoppingList.value.filter( i => i.id !== item.id );
	Toast.success("删除成功!");
}
onMounted(()=> {
	console.log("shoppingList", shoppingList, Toast)
})

当点击删除调用 toast 时警告问题!

1
toast.js? [sm]:29 未找到 van-toast 节点，请确认 selector 及 context 是否正确!

正确需要在模版中加入 van-toast id 节点!

1
2
3
4
5
<template>
	<view class="shopping-box">
         <van-toast id="van-toast" />
    </view>
</template>

在当前使用的 vue 文件 template 中加入 van-toast 节点!

vantui中不支持v-model

uniapp 中的 van-field 组件是基于 Vant Weapp 组件库的，并不是原生的 Vue 组件，因此它不支持 v-model 指令。v-model 是 Vue 中用于双向数据绑定的语法糖，它等价于 value 和 input 事件的结合。
为了解决这个问题，你需要手动绑定 value 和 input 事件来实现数据的双向绑定。
以下是一个示例代码

vant-field
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <view>
    <van-field
      value="inputValue"
      @input="onInput"
      placeholder="请输入内容"
    />
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    onInput(event) {
      this.inputValue = event.target.value;
    }
  }
};
</script>