trao项目怎么跨端安装vant组件库

一、安装依赖

npm install vant

二、添加 web 标签适配插件

在 config / index.js 文件

const config = {
  // ...
  plugins: [
    [
      "@tarojs/plugin-html",
      {
        // 过滤 vant 组件库的前缀：van-
        pxtransformBlackList: [/van-/],
      },
    ],
  ],
};

三、在页面中直接使用

<template>
    <view class="buyTicket-goschool">
        <view class="picker">
            <nut-cell title="请选择城市" :desc="String(val)" @click="show = true"></nut-cell>
            <nut-popup v-model:visible="show" position="bottom">
                <nut-picker v-model="val" :columns="columns" title="请选择城市" @confirm="confirm" @cancel="show = false" />
            </nut-popup>
            内容
            <van-button type="default" @click="show2==true">默认按钮</van-button>
            <van-popup v-model="show2" position="top" :overlay="false">
                内容
            </van-popup>

        </view>

    </view>
</template>
<script setup>
import { ref } from 'vue';
import {Button, Popup} from 'vant'

// 选择器
const show = ref(false);
const show2 = ref(false);
const val = ref();
const columns = ref([
    { text: '南京', value: 'Nanjing' },
    { text: '无锡', value: 'Wuxi' },
    { text: '海北', value: 'Haibei' },
    { text: '北京', value: 'Beijing' },
    { text: '连云港', value: 'Lianyungang' },
    { text: '长沙', value: 'Changsha' },
    { text: '武汉', value: 'Wuhan' }
]);

const confirm = ({ selectedValue, selectedOptions }) => {
    console.log(selectedValue[0], selectedOptions[0]);
    show.value = false;
};


</script>


<style lang="scss">
.buyTicket-goschool {
    margin-top: 20px;
    border: 1px solid #000;

    .picker {
        border: 1px solid red;
    }
}
</style>