Author: Lao Jiu – technology big millet

Socializing: Zhihu

Public account: Lao Jiu School (Surprise for newcomers)

Special statement: the original is not easy, without authorization shall not be reproduced or copied, if you need to reproduce can contact the author authorized

preface

Vue. Js is popular in China, we also come to join in the fun today, to introduce a practical skills. We now give the actual combat core code, I hope to help you.

Actual code

Customize panel components

/** * function: Define a basic panel component (with close button) */

let BasePanel1 = {
    props: ['visible'].data() {
        return {
            isFirstShow: true.// Whether this is the first rendering
            isClose: false.// Whether the background selection panel is closed (for playing the closed animation)}},watch: {
        // Listen for visible changes (set first render to false)
        visible: function (newVal,oldVal) {
            // Open for the first time
            if(this.isFirstShow) {
                this.firstShow();
                this.isFirstShow = false;
            }
            // Panel display and hide
            if(newVal) {
                this.panelShow();
            }else {
                this.panelClose(); }}},methods: {
        // The logic to do when the panel first opens
        firstShow: function () {},// The logic to do when the panel opens
        panelShow: function () {},// The logic to do when the panel is closed
        panelClose: function () {},// Close the button click event
        onCloseBtnClick: function() {
            // Set the animation state to Playing (close the animation)
            this.isClose = true;
            // When the animation is finished, reset the data
            setTimeout(() = > {
                this.isClose = false;
                this.$emit('update:visible'.false);
            },400); }}},Copy the code

Customize a package component

/** * function: wrap page components */

let PackagePanel = {
    template: ` <div class="shade package-panel" v-if="! isFirstShow" v-show="visible"> <div :class="['panel-content animate__animated animate__faster',this.isClose ? 'animate__zoomOut' : 'animate__zoomIn']"> <! /imgs/ UI/btnclose2.png "Alt =" closebutton" @click="onCloseBtnClick" /> <! <div class="box-panel package-box-panel"> <div class="package-box" v-for=" I in 15" :style="{left: 136 * ((i - 1) % 5) + 'px',top: 30 + 129 * Math.floor((i - 1) / 5) + 'px'}" ></div> </div> </div> </div> `.mixins: [BasePanel1],
    methods: {
        // The logic to do when the panel first opens
        firstShow: function () {
            // Bind sound to the close button
            this.$nextTick(() = > {
                addEventBtnEffect(document.querySelector('.package-panel .close-btn')); }); }}}Copy the code

Home page import component

.<script type="text/javascript" src="./components/BasePanel1.js"></script>
<script type="text/javascript" src="./components/PackagePanel.js"></script>.Copy the code

Common Style Settings

..shade {
  width: 100%;
  height: 100%;
  background-color: rgba(0.0.0.5);
  position: absolute;
  top: 0; }...Copy the code

Package Style Settings

// Package interface.package-panel {
  pointer-events:auto;
  @include flex-center;
  .panel-content {
    background-image: url(".. /imgs/ui/package-panel.png");
    width: 899px;
    height: 564px;
    position: relative;
    .close-btn {
      position: absolute;
      right: 10px;
      top: 20px;
      z-index: 2;
    }
    .box-panel {
      position: absolute;
      width: 656px;
      height: 445px;
      left: 120px;
      top: 82px;
      overflow: hidden;
      box-sizing: border-box;
      &.package-box-panel {
        z-index: 1;
        .package-box {
          position: absolute;
          background-image: url(".. /imgs/ui/package-box.png");
          width: 106px;
          height: 109px;
        }
      }
    }
  }
}
Copy the code

Home page style introduction

. @import ".. /components/PackagePanel";Copy the code

conclusion

Detailed code and design ideas, if you are interested, please pay attention to the B station laojiu School broadcast room.

The last

Remember to give dashu ❤️ attention + like + collect + comment + forward ❤️

Author: Lao Jiu School – technology big millet

Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.