技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装

本篇文章我们封装一个卡片组件,不使用elementui中的卡片样式而仿照其逻辑制作,我们可以更深入理解并易于修改出自己想要的样式。

1.制作出我们想要的框架
<div class="card p-3 bg-white mt-3">
  <div class="card-header d-flex">
    <div class="fs-xxl flex-1 px-2">最新文章</div>
    <span class="iconfont icon-more text-gray"></span>
  </div>
  <div class="mt-3 mb-1 px-2">
    <div style="width: 100%;height:1px;" class="bg-gray2"></div>
  </div>
  <div class="card-body">
    <div class="nav nav-inverse d-flex jc-between px-2 pt-3 pb-2">
      <div class="nav-item">
        <div class="nav-link active" active-class="active">最热</div>
      </div>
      <div class="nav-item">
        <div class="nav-link" active-class="active">最新</div>
      </div>
      <div class="nav-item">
        <div class="nav-link" active-class="active">学习</div>
      </div>
      <div class="nav-item">
        <div class="nav-link" active-class="active">推荐</div>
      </div>
      <div class="nav-item">
        <div class="nav-link" active-class="active">作品</div>
      </div>
    </div>
    <swiper>
      <swiper-slide v-for="m in 5" :key="m">
        <div class="py-2 px-2 d-flex jc-around" v-for="n in 5" :key="n">
          <span class="text-primary">[最热]</span>
          <span class="px-2  text-gray">|</span>
          <span class="ellipsis">这条新闻好多人看啊啊啊啊啊啊啊啊啊啊啊</span>
          <span class="text-gray">2021-07-13</span>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</div>

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装

2.制作卡片组件

卡片组件的制作,最终要实现卡片标签,标签中有标签属性。其中属性为组件中的变量。
(1)将刚才制作的通用模板card放入Card.vue
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
(2)在主文件main.js中引入Card.vue组件

// 卡片组件
import Card from './components/Card.vue'
Vue.component('m-card', Card)

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
此时组件设置成功,因为此card是手机端,故设置标签为m-card。
(3)在Home.vue使用Card组件

<m-card></m-card>

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
此时就将组件显示在页面中了:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装

3.优化卡片组件

此时Card.vue已经成为组件,使用m-card标签就可以使用,但组件的作用是复用性,所以我们要将组件标签的属性做出,同时使用vue的slot标签进行其内容的填充(往下看就明白了)。
(1)将组件中非固定内容取出,也就是下图所指部分:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
同时用slot标签代替:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
然后将取出的内容放在m-card标签中:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
此时内容部分依旧显示:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
(2)为m-card标签添加属性
就如

标签一样,其中包括了style属性、class属性等等,我们要在标签上添加属性,从而更改组建的标题和图标等内容。
回到Card.vue:
添加prop属性
export default {
  // 设置属性接收
  props: {
    // 其中type表示属性类型,required: true表示必填    可添加默认值default: '卡片组件'
    title: {type: String, required: true},
    icon: {type: String, required: true},
  },
}

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
同时,将上方对应的标题和图标进行动态绑定。由于之前没有对标题前加iconfont,现在加一下:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
保存后,此时页面中卡片组件没有标题及图标内容:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
现在我们对m-card组件添加属性:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
页面显示标题和图标:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
成功,再添加一个标签:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
成功,效果还行:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装

4.总结

卡片组件,就是封装了一个外部轮廓到.vue组件文件中,然后使用component将其当作标签使用。定义属性的目的是将外部的值传入到.vue组件中的变量上,从而达到标签中属性的效果。

5.延申

在目前封装的卡片组件来看,我们动态绑定的就只有title和icon两项,而其中不管是轮播还是内部数据都需要我们详细写:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
如果我们就可以在m-card外再套一层组件m-list-card来动态填写其轮播框架和内容,就不需要每次详细做一个swiper来显示内容。在不需要轮播的卡片中,我们就只用m-card即可。
创建ListCard.vue组件并引用:
将m-card标签内容全部放入ListCard.vue中,并且引用ListCard.vue以m-list-card标签来使用:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
Home.vue添加m-list-card标签:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
页面依旧会呈现:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
此时我们查看外部哪些内容需要动态设置:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
所以我们需要动态绑定的数据增加了一个分类,categories,以数组形式展现
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
同时添加m-list-card外部传值:

<m-list-card icon="list" title="相关文章" :categories="articleData"></m-list-card>

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
下方js为categoryData手动添加内容,模仿后台调用的数据json格式:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
将我们之前分的五块分类内容写出来,注意此时categoryData为数组格式:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
最后,将ListCard.vue中的m-card标签内部需要动态传值的内容替换
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
此时,active功能暂时删除,待数据完成绑定后我们再给其绑定动态的active。现在观察页面:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
五个分类的标题已经呈现,现在我们需要将每个分类中的文章通过slot标签引入
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
外部使用category数据的方式:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
此时页面正常显示了:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
最后,为switer动态添加active
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
此时分类标题栏已经可以显示active效果:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
下一步,关联分类下边的内容,与标题active同步:
(1)首先给swiper挂载一个名字,方便分类标题找到其对应的swiper:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
(2)为swiper添加函数,在切换swiper时同时切换swiper的索引值,将其索引值赋值给active:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
(3)最后,利用swiper的slideTo方法,在点击分类标题时将分类标题的索引发送给swiper:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
此时当点击分类标题发送索引到swiper时,swiper接收索引并赋值给active,active变化,则分类标题的样式变化。
(4)如果第一次进入页面,active没有值,此时没有分类标题:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
所以要给active一个初始值0,使其第一次进入页面时就可以效果:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-6.卡片组件的封装

下节内容我们调用后台数据接口,获取文章数据到页面中。
上一篇:技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-1.使用sass工具搭建前台web端页面


下一篇:技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块