vue3+vant4示例代码-html代码-BFW代码库

vue3+vant4示例代码

代码语言：html

所属分类：其他

代码描述：vue3+vant4示例代码更多官方组件示例用法：https://vant-ui.github.io/vant/?ref=madewithvuejs.com#/zh-CN/icon

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
    <!-- 引入样式文件 -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vant.4.index.css">

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.2.22.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vant.4.js"></script>

</head>

<body>
    <div id="app">
      

        
    </div>
    <script>
        // 在 #app 标签下渲染一个按钮组件
          const app = Vue.createApp({
               data() {
                return {
                    show: true,
                    time:30 * 60 * 60 * 1000,
                    text:"hello"
                }
            },
            template: `<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-icon name="chat-o" />
<van-image
  round
  width="10rem"
  height="10rem"
  src="//repo.bfw.wiki/bfwrepo/image/62e48410e56ae.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"
/>

<van-row>
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
</van-row>

<van-row>
  <van-col span="4">span: 4</van-col>
  <van-col span="10" offset="4">offset: 4, span: 10</van-col>
</van-row>

<van-row>
  <van-col offset="12" span="12">offset: 12, span: 12</van-col>
</van-row>
<van-cell title="展示弹出层" is-link @click="showPopup" />
<van-popup v-model:show="show" :style="{ padding: '64px' }">内容</van-popup>
<van-space>
  <van-button type="primary">按钮</van-button>
  <van-button type="primary">按钮</van-button>
  <van-button type="primary">按钮</van-button>
  <van-button type="primary&quo.........完整代码请登录后点击上方下载按钮下载查看