更新记录

1.0.2(2023-07-12)

更新已知

1.0.1(2023-07-12)

增加css

1.0.0(2023-07-12)

参照 Vant 打造的移动端组件库

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × ×

VantUI

Download dependency

首先下载依赖组件

yarn add js-base64

注意,如果yarn报错

在package.json的name不能有中文

{
    "id": "myuan-vantUI",
    "name": "Vue 3高仿vantUI组件", // 这里不支持中文
    "displayName": "Vue 3高仿vantUI组件",

}

然后在App.vue 引入 全局css

@import "./components/myuan-vantUI/index.css";
@import "./components/myuan-vantUI/iconfont.css";
@import "./components/myuan-vantUI/yangshi.css";

引入

在pages.json

"easycom": {
    "autoscan": true,
    "custom": {
        "^van-(.*)": "@/components/myuan-vantUI/$1.vue"
    }
},

交流群

微信

Alt

事例

<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

<van-cell-group>
  <van-cell title="单元格" value="内容" />
  <van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>

<van-icon name="chat-o" />

...
更多事例请看以下API

Refer to official website

API 参考网站.

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据.

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问