Vue 必备小知识-基于组件库组件进行二次封装

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前文学习了 Vue 自定义指令的几个小栗子, 这里紧跟着学习 Vue 组件化开发:

工作项目开发中都在使用一些框架库, 但是并不是所有组件都会适合我们的业务/UI, 所以有时候就需要我们对组件库的组件进行二次封装, 以满足项目开发需求

Drawer 抽屉组件的二次封装

基于 iviewUI 组件库的封装

iviewUI 还是挺不错的, 好看的颜色搭配 圆角. 看着舒服的感觉

import { Drawer } from "iview";

项目开发中用到的 iview, UI 挺不错的. 但是项目中的 UI设计并不是完全一样, 就需要对其进行定制化封装.

<template>
  <div class='x-drawer'>
    <Drawer v-bind="$attrs"
            v-on="$listeners">
      <!-- start 插槽内容 -->
      <template>
        <slot></slot>
      </template>
      <!-- end 插槽内容 -->

      <!-- trigger -->
      <div class="x-drawer-trigger-wrapper">
        <slot name="trigger"></slot>
      </div>

    </Drawer>
  </div>
</template>

<script>
import { Drawer } from "iview";
export default {
  name: "XDrawer",
  props: {},
  components: {
    Drawer,
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
</style>

Usage

在需要的页面 引入组件/ 进行注册/ 使用

<button @click="showDrawer">显示抽屉</button>

<Drawer v-model="isShow"
        placement="left"
        :closable="true"
        width="512"
        title="first-level-drawer">
  <p>第一层抽屉, 第一层抽屉的内容xxx</p>
  <button @click="showInnerDrawer">点击显示第二层抽屉界面xxx</button>
  <template v-slot:trigger>
    <button icon='edit'>{{ toutiao }}</button>
  </template>
</Drawer>
<Drawer v-model="innerShow"
        placement="left"
        :closable="true"
        title="second-level drawer">
  This is second-level-drawer.
</Drawer>

当然这里只是简单的二次封装, 项目的逻辑肯定更复杂, 还需要进一步迭代! 加入更复杂的逻辑, 满足项目工作中的需求!