vue2+vant2手机端组件展示示例代码-html代码-BFW代码库

vue2+vant2手机端组件展示示例代码

代码语言：html

所属分类：其他

代码描述：vue2+vant2手机端组件展示示例代码录索引列代码

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

<!DOCTYPE html>
<html lang="en" >

<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" />

  
  
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vant.min.css">


  <style>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
  
</head>

<body >

<div id="app">
    <template>
                
    </template>
  
    
</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vant.min.js"></script>
      <script   >
new Vue({
  el: "#app",
  data() {
    return {
      username: '',
      password: '',
      active:2,
      active:1,
    };
  },
  template:`
  <div>
    <van-nav-bar
  title="标题"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
  <van-cell-group>
  <van-cell title="单元格" value="内容" />
  <van-cell title="单元格" value="内容" />
</van-cell-group>

<van-grid>
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
</van-grid>
<van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>
<van-progress :percentage="50" />
<van-tag round type="primary">标签</van-tag>
<van-steps :active="active">
  <van-step>买家下单</van-step>
  <van-step>商家接单</van-step>
  <van-step>买家提货</van-step>
  <van-step>交易完成</van-step>
</van-steps>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-butto.........完整代码请登录后点击上方下载按钮下载查看