This is my first article on getting started

preface

Two days ago, the leader said that the width of modal on all pages should be unified, and only by clicking the close button can it be closed (the component can be closed by clicking the mask by default). At that time, I think it is not possible to change it one by one, this is not tiring, just recently learning C# WinForm form, other forms have inheritance, can unify the attribute. Then our front end directly encapsulates a component, not can unify the attribute ~~~

Advance declaration:

This article uses the Ant Design of Vue Ui library. If you have not installed it, please install it in advance.

Define the Prop

The first thing we’ll think about is defining the required Prop, with four parameters.

1.Modal.props

We introduced Modal, and then we used the extension operator to put props

<script>
    import {Modal} from 'ant-design-vue'

    export default {
      name: 'MyModal'.props: {
        ...Modal.props
      }
    }
</script>

Copy the code

2.maskClosable

Sets a property that allows the mask to be closed when clicked

    props: {
        maskClosable: {
          type: Boolean.default: false}}Copy the code

3.size

Sets the fixed size of the Modal box

    props: {
        // Set the size to mini/small/medium
        size: {
          type: String.default: ' '}}Copy the code

4.width

Set free width

props: {
    // Width 520/650/750/900
    width: {
      type: Number.default: 520}}Copy the code

Perfect fixed width Settings

Write a method for the width setWidth()

Then we can use the setWidth() method to iterate over the output with a fixed width through the constant sizeObj.

<script>
    import {Modal} from 'ant-design-vue'

    const sizeObj = { 'mini': 650.'small': 750.'medium': 900 }

    export default {
      name: 'MyModal'.props: {
        ...Modal.props,
        // Click on whether the mask is allowed to close
        maskClosable: {
          type: Boolean.default: false
        },
        // Set the size to mini/small/medium
        size: {
          type: String.default: ' '
        },
        // Width 520/650/750/900
        width: {
          type: Number.default: 520}},data() {
        return {
          customizeWidth: this.width
        }
      },
      mounted () {
        this.setWidth()
      },
      methods: {
        // Set the width
        setWidth() {
          Object.keys(sizeObj).forEach(key= > {
            if (key === this.size) this.customizeWidth = sizeObj[key]
          })
        }
      }
    }
</script>
Copy the code

Complete the attributes of the template

Finally, let’s complete the template properties.

Note the $props and $listeners here.

#vm.$props

The props object received by the current component. The Vue instance proxies access to its props object property.

#vm.$listeners

Contains v-ON event listeners in the parent scope (without the.native modifier). Internal components can be passed in via V-on =”$Listeners “– useful for creating higher-level components.

The above two attributes are introduced on the official website, which I think is not very intuitive to understand. $Listeners inherit the properties of current Modal, while $Listeners are the EMIT passes of the Modal component.

<template>
  <a-modal v-bind="$props" v-on="$listeners" :maskClosable="maskClosable" :width="customizeWidth">
    <slot></slot>
  </a-modal>
</template>
Copy the code

conclusion

The $props and $Listeners are the tools of the process, and the tools of the process are the tools of the process. Finally, if I have written wrong places, please point out more, thank you!

<template>
  <a-modal v-bind="$props" v-on="$listeners" :maskClosable="maskClosable" :width="customizeWidth">
    <slot></slot>
  </a-modal>
</template>

<script>
import {Modal} from 'ant-design-vue'

const sizeObj = { 'mini': 650.'small': 750.'medium': 900 }

export default {
  name: 'MyModal'.props: {
    ...Modal.props,
    // Click on whether the mask is allowed to close
    maskClosable: {
      type: Boolean.default: false
    },
    // Set the size to mini/small/medium
    size: {
      type: String.default: ' '
    },
    // Width 520/650/750/900
    width: {
      type: Number.default: 520}},data() {
    return {
      customizeWidth: this.width
    }
  },
  mounted () {
    this.setWidth()
  },
  methods: {
    // Set the width
    setWidth() {
      Object.keys(sizeObj).forEach(key= > {
        if (key === this.size) this.customizeWidth = sizeObj[key]
      })
    }
  }
}
</script>
Copy the code