Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Learning Vue custom instructions, here to follow the study of Vue componentization development:

Framework libraries are used in work project development, but not all components are suitable for our business /UI, so sometimes we need to re-wrap the components of the component library to meet project development needs

Secondary packaging of Drawer components

Based on theiviewUIComponent library encapsulation

IviewUI is still pretty good, nice color with rounded corners. It feels good to look at

import { Drawer } from "iview";
Copy the code

The iView UI used in the project development is quite good. However, the UI design in the project is not exactly the same, so it needs to be customized and encapsulated.

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

      <! -- 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>
Copy the code

Usage

Import components/register/use them on required pages

<button @click="showDrawer"</button><Drawer v-model="isShow"
        placement="left"
        :closable="true"
        width="512"
        title="first-level-drawer">
  <p>The first drawer, the contents of the first drawer XXX</p>
  <button @click="showInnerDrawer">Click the display second drawer interface 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>
Copy the code

Of course, this is only a simple secondary encapsulation, the logic of the project must be more complex, and need further iteration! Add more complex logic to meet the needs of project work!