通过npm安装Vant

npm i vant -S

引入Vant框架

我在Vant官网看到可以按需引入组件,但是当我按照Vant官网引入Layout 布局时却没有实现行列布局

import Vue from 'vue';
import { Row, Col } from 'vant';
Vue.use(Row).use(Col);

因此我采用下面这种导入所有组件的方式(但是并不推荐,因为这样会增加代码包体积):

import Vant from 'vant';
import'vant/lib/index.css';
Vue.use(Vant)

我的仿大众点评有的导航栏需要和tab标签页一起使用,如图所示:
在这里插入图片描述
首先我们来看单独使用Tab 标签页和NavBar 导航栏的代码:

单独使用Tab标签页

<van-tabs type="card">
  <van-tab title="商户"></van-tab>
  <van-tab title="闪惠团购"></van-tab>
</van-tabs>

单独使用NavBar导航栏

<van-nav-bar left-text="返回" left-arrow>
  <van-icon name="search" slot="right" />
</van-nav-bar>

由代码可看出Vant框架所封装的元素和一般的框架不同,我不能直接在van-nav-bar里面添加代码,所以我通过使用slot插槽来实现Tab 标签页和NavBar 导航栏两个导航组件的一起使用

什么是slot

slot元素用于命名插槽,作为组件模板之中的内容分发插槽,slot元素在vue渲染之后自身将被替换

通过slot插槽将Tab 标签页和NavBar 导航栏两个导航组件一起使用

1、首先新建一个vue文件,在van-nav-bar元素里写slot元素,确定slot的name

<van-nav-bar>
      <slot slot="left" name="left"></slot>
      <slot slot="title" name="title"></slot>
    </van-nav-bar>

2、引入写van-nav-bar元素的vue组件,然后在slot="title"的div元素里面写入van-tabs元素,并加上其他的一些功能,例如返回的点击功能和商户、闪惠团购的切换功能

<v-buttonToolbar>
      <div slot="left" @click="$router.push('/home')">
        <i class="van-icon van-icon-arrow-left van-nav-bar__arrow"></i>
        <div class="van-nav-bar__text">返回</div>
      </div>
      <div slot="title">
        <van-tabs type="card" @click="show()">
          <van-tab title="商户" class="sh"></van-tab>
          <van-tab title="闪惠团购" class="shtg"></van-tab>
        </van-tabs>
      </div>
    </v-buttonToolbar>

所以通过插槽分发内容是vue中很好用的一种实现功能和代码优化的方式。我只需写入一次van-nav-bar元素,就可以在各个页面同时使用它完成不同的NavBar导航栏,例如我下面的团购详情导航栏:
在这里插入图片描述
代码是这样的:
也是通过引入vue组件,在slot="left"和slot="title"的div元素中写入实现页面的代码

<v-buttonToolbar>
      <div slot="left" @click="$router.push('/home')">
        <i class="van-icon van-icon-arrow-left van-nav-bar__arrow"></i>
        <div class="van-nav-bar__text">返回</div>
      </div>
      <div slot="title">团购详情</div>
    </v-buttonToolbar>

总结

通过slot插槽我们可以很好的实现Vant框架中各个组件的合并使用,既可以优化代码也可以实现功能,实在是很好使用的一个特殊属性。
ps:如果想要完整代码,欢迎下载我的github项目:仿大众点评
https://github.com/faimi/Fan_DAZHONGDIANPING.git

Logo

前往低代码交流专区

更多推荐