Write in front

Due to the use of learning records, there are imperfections. We will improve and release the source code after all learning (should). Thank you for reading

step

1. Create base template

establish. vue file, named APL dialog vue, use the shortcut key to put on the three piece set of components (template,script,style)
In order to achieve the animation effect when the dialog box appears, wrap a layer of transition outside the template and give name

<template>
  <transition name="dialog-fade">
    <div></div>
  </transition>
</template>

2. Basic content layout and typesetting

Show the basic elements in the dialog box and make a certain layout, as well as the mask layer

3. Customize the title and content

The title uses the slot slot to transfer the user's title into the component, and the default title name is placed in the slot, so that once a value is passed in, the default value will be overwritten

          <slot name="title">
            <span class="apl-dialog_title">{{title}}</span>
          </slot>

The content is directly transmitted by using the slot

4. Click Custom mask layer and fork off

Buttons use emit to trigger and sync syntax sugar to simplify writing

	<button class="apl-dialog_headerbtn" @click="handleClose">X</button>

    handleClose () {
      this.$emit('update:visible', false)
    }

    <apl-dialog width="70%" title="reminder" :visible.sync="visible">
    	How do I know
    </apl-dialog>

5. Customize the bottom button element

Button elements can be placed in several places freely, so a slot is placed here, named footer, and whether the bottom is displayed by judging whether there is a slot or not

        <div class="apl-dialog_footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>

    <apl-dialog width="70%" title="reminder" :visible.sync="visible">How do I know
      <template v-slot:footer>
        <apl-button @click="visible=false">okay</apl-button>
      </template>
    </apl-dialog>

6. Animation effect

use keyframe Make a simple transparency display from 0 to 1, and make the dialog box move with a certain position

@keyframes fade {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

The name of the transition that just wrapped the whole component is dialog fade, so you can use the class name directly
Dialog fade enter active and dialog fade leave active

.dialog-fade-enter-active {
  animation: fade .5s;
}
.dialog-fade-leave-active {
  animation: fade .5s reverse;
}

In this way, the basic production of the whole dialog box is completed, and a component can be used

summary

1. All contents that can be changed need to be transferred through the slot
2. When transferring values, the default contents are placed between slots, which can quickly achieve the effect of hiding the default when transferring values
3. Use self can trigger the event only when you click on yourself
4. You can use sync syntax to change the attribute value of the parent component

Other contents worth recording

1.$slots.footer can get the contents of the footer slot

Study notes

4.sync Modifier 
    Grammar sugar
    When the child component wants to modify the properties of the parent component, it can be used when the names are the same sync Modifier 
5.animation transition
    use<transition></transition>The wrapped element will automatically add 6 class names when it is displayed or hidden
    v-enter         //Enter the initial state of animation
    v-enter-to      //Enter the end of animation state
    v-enter-active  //Enter the total animation state
    v-leave
    v-leave-to
    v-leave-active
    While in use name After that, v Will be replaced with name Value of
    Namely<transition name="apl"></transition>The six class names of become
    apl-enter
    apl-enter-to
    apl-enter-active
    apl-leave
    apl-leave-to
    apl-leave-active
5.scoped
    scoped A random attribute will be added to all elements in the current component template
    At the same time, a corresponding attribute selector will be added to all styles in the current component
    Because the style written in the component template cannot affect other component templates used in the component template
6.Depth selector
    Used to solve the problem scoped The style after cannot affect other component template styles used
    scss -> ::v-deep
    less -> /deep/
    css  -> >>>

Make complaints about content

I think it's really appropriate to learn this now. It's all in 3.0. I'm a little confused. I don't know if I can finish it in time. Will there be new content right away? The front end is really developing too fast