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

TIP 👉 The sun rises in the east and the rain falls in the west. Zhu Zhi Ci by Tang Liu Yuxi

preface

In our daily project development, we will involve the full-screen window function when we do mobile terminal, so we encapsulate this full-screen window component.

I. Full-screen window component (available only on mobile terminal)

This component is recommended to be invoked using JS

import popupFullBox from '@/components/m/fullBox'
import UserInfo from './components/UserInfo.vue'

popupFullBox({
  content: UserInfo,
  contentProps: {
    name: 'Joe'.phone: '18688886666'}})Copy the code

PopupFullBox method parameter

1. title

• The window title
• The value is a string. The default value is “”.

2. showClose

• Whether to display the close button
• The value is Boolean and the default value is true

3. content

• Content components
• The value is a Vue object, mandatory

4. contentProps

• Props for the popover content component
• Value of type Object and property named props for the component

5. contentEvents

• Popover content component events
• Value is of type Object, property name is component event name, and property value is event callback method

6. contentWrapperStyle

• Content wrapper style
• The value is of type Object, the property name is a hump style name, and the property value is a style value string

7. className

• Custom style name of the popbox
• The value is string

8. scroll

• Whether the content area requires a scroll bar
• The value is a Boolean type
• The default value is true

9. scrollContentBgColor

• The background color of the scroll wrapper (valid when scroll is true)
• The value is a color string, for example: “#F5F5F5”

10. onBoxColse

• The callback function when the close button is clicked
  • If false is returned, the window does not close
  • If there is no return value or the return value is true, the window closes
• The value is a function type
• The default value is :() => true

Tip:

• If part of the content component needs to Scroll, use the Scroll component

Examples of full-screen Windows

<template> <div class="fullbox-demo"> <ul class="form-list"> <li class="form-item" @click="popupBox1"> <div> <label> Receiving Bank: </label> <span>{{bankName}}</span> </div> <div> <Icon name="right-arrow"></Icon> </div> </li> <li class="form-item" @click="popupBox2"> <div> <label> </label> <span> <template v-if="userName && userPhone">{{userName}} / {{userPhone}}</template> </span> </div> <div> <Icon name="right-arrow"></Icon> </div> </li> </ul> </div> </template> <script> import popupFullBox from '@/components/m/fullBox' import BaseRadio from '@/components/base/radio/index.vue' import UserInfo from '. / components/the UserInfo. Vue 'const bankMap = {' 01' : 'angel violet', '02' : 'angel violet', '3' : 'angel violet', '04' : 'angel violet', '05' : Angel 'violet' and '06' : 'violet angel', '7' : 'angel violet', '08' : 'angel violet', '09' : 'angel violet', '10' : 'angel violet', '11' : 'angel violet', '12' : 'angel violet', '13' : Angel 'violet', '14' : 'angel violet', '15' : 'angel violet', '16' : 'angel violet', '17' : 'angel violet', '18' : 'angel violet'} export default {name: 'FullBoxDemo', data () { return { bankCode: null, bankName: null, userName: null, userPhone: null } }, methods: { popupBox1 () { const options = Object.keys(bankMap).map((key) => { return { value: key, text: BankMap [key]}}) const fullBox = popupFullBox({title: 'bankMap ', content: contentProps: {title: Please select Bank: ', value: this.bankCode, options}, contentEvents: {change: (v) => {this.bankCode = v this.bankName = bankMap[v] console.log(' select bank result: Close (300)}}, contentWrapperStyle: {fontSize: '18px', lineHeight: '45px'}})}, popupBox2 () {const fullBox = popupFullBox({title: 'personal info ', Scroll: false, showClose: false, content: UserInfo, contentProps: { name: this.userName, phone: this.userPhone }, contentEvents: { change: (v) => {this.userName = v.name this.userPhone = v.hone console.log(' Fill in the user information: Close (300)}}, contentWrapperStyle: {fontSize: '18px', lineHeight: '45px' } }) } } } </script>Copy the code

Implement FullBox. Vue

<! -- Full screen window component --><template>
  <transition name="pop" :duration="300">
    <div class="fullbox" v-show="visible" :class="className" @touchmove.prevent="" @mousewheel.prevent="">
      <div class="back" v-show="showClose" @click="close"><Icon name="close" flip="horizontal" class="close-icon"></Icon></div>
      <div class="fullbox-pane">
        <div class="title" v-show="title">{{title}}</div>
        <div class="content-wrap" :style="contentWrapperStyle">
          <template v-if=! "" scroll">
            <slot>
              <component ref="fullBoxContent" v-if="content" :is="content" v-bind="contentProps" v-on="contentEvents"></component>
            </slot>
          </template>
          <template v-if="scroll">
            <Scroll :bounce="false" :eventId="scrollEventId" :scrollContentBgColor="scrollContentBgColor">
              <slot>
                <component ref="fullBoxContent" v-if="content" :is="content" v-bind="contentProps" v-on="contentEvents"></component>
              </slot>
            </Scroll>
          </template>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import Scroll from '@/components/base/scroll'
export default {
  name: 'FullBox'.components: {
    Scroll
  },
  props: {
    // Whether to display the window
    value: {
      type: Boolean.default: false
    },
    / / title
    title: {
      type: String.default: 'Please select'
    },
    // Whether to display the close button
    showClose: {
      type: Boolean.default: true
    },
    // Popover content component
    content: Object.// Props for the popup content component
    contentProps: Object.// Popover content component events
    contentEvents: Object.// Content wrapper style
    contentWrapperStyle: Object./ / the style name
    className: {
      type: String.default: ' '
    },
    // Whether the content area needs scroll bars
    scroll: {
      type: Boolean.default: true
    },
    // Scroll the wrapper background color
    scrollContentBgColor: String.// The callback function when the close button is clicked (if false is returned, the window does not close; No return value or true, the window closes.)
    onBoxColse: {
      type: Function.default: () = > true
    }
  },
  data () {
    return {
      // Whether to display
      visible: this.value,
      // The scroll bar initializes the event ID
      scrollEventId: 'fullbox' + new Date().getTime()
    }
  },
  watch: {
    value (val) {
      this.visible = val
    },
    visible (val) {
      if (val && this.scroll) {
        this.$nextTick(() = > {
          this.$eventBus.$emit('init-scroll-' + this.scrollEventId)
        })
      }
    }
  },
  methods: {
    /** * Close the window *@param DelayTime delayTime (milliseconds) */
    close (delayTime) {
      if (this.onBoxColse(this.$refs.fullBoxContent) ! = =false) {
        this.doClose(delayTime)
      }
    },
    // Close the window
    doClose (delayTime) {
      if (delayTime && typeof delayTime === 'number' && delayTime > 0) {
        setTimeout(() = > {
          this.visible = false
          this.$emit('input'.this.visible)
          this.$emit('close')
        }, delayTime)
      } else {
        this.visible = false
        this.$emit('input'.this.visible)
        this.$emit('close')}}}}</script>
<style lang="scss" scoped>
.fullbox {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #FFF;
  box-shadow: 0 0 5px rgba(0.0.0.3);
  transition: all .3s ease;
  z-index: 999;
  .back {
    height: $app-title-bar-height;
    width: $app-title-bar-height;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    .close-icon {
      font-size: 30px;
      color: # 666; }}.fullbox-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    .title {
      flex: none;
      padding: 0 3em 0 1em;
      height: $app-title-bar-height;
      line-height: $app-title-bar-height;
      background-color: #f5f5f5;
      border-bottom: solid 1px #E5E5E5;
      font-size: 32px;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: # 666;
    }
    .content-wrap {
      position: relative;
      display: flex;
      flex-direction: column;
      // align-items: center;
      justify-content: center;
      flex: 1;
      overflow: hidden; }}}.pop-enter-active..pop-leave {
  transform: translateX(0);
  // transform: scale(1);
  // opacity: 1;
}
.pop-enter..pop-leave-active {
  transform: translateX(100%);
  // transform: scale(.5);
  // opacity: 0;
}
</style>
Copy the code

index.js

/** * Full-screen window component */
import Vue from 'vue'
import FullBox from './FullBox.vue'

// FullBox constructor
const FullBoxConstructor = Vue.extend({
  extends: FullBox
})

function initInstance (instance, options) {
  // Window title
  instance.title = options.title || ' '
  // Whether to display the close button
  instance.showClose = typeof options.showClose === 'boolean' ? options.showClose : true
  // Window content component
  instance.content = typeof options === 'object' && options._isVue ? options : options.content
  // Window content component parameters
  instance.contentProps = typeof options.contentProps === 'object' ? options.contentProps : {}
  // Window content component events
  instance.contentEvents = typeof options.contentEvents === 'object' ? options.contentEvents : {}
  // Content wrapper style
  instance.contentWrapperStyle = options.contentWrapperStyle
  // Customize the style name
  instance.className = options.className || ' '
  // Whether to display a scroll bar
  instance.scroll = options.scroll === false ? false : true
  // scrollcontent Background color
  instance.scrollContentBgColor = options.scrollContentBgColor
  // Close the callback function
  if (options.onBoxColse && typeof options.onBoxColse === 'function') {
    instance.onBoxColse = options.onBoxColse
  }
  / / the parent node
  let parentElement = options.parentElement || document.body

  // Remove when closed
  instance.$on('input'.visible= > {
    if(! visible) {setTimeout(() = > {
        parentElement.removeChild(instance.$el)
        instance.$destroy()
      }, 2000)
      /* / get the popBox element, if the Popop component is obtained from refs, if the Alert or Confirm component, get the Popop element first, Get in from Popop component refs let popBox = instance. $refs. PopBox | | (instance. $refs. BasePop && instance. $refs. BasePop. $refs. PopBox) popBox.addEventListener('transitionend', Event = > {/ / animation removed after the completion of the DOM node / / parentElement. RemoveChild (instance. $el) if (event. Target. ParentNode && . The event target. ParentNode. ParentNode) {. The event target. ParentNode. ParentNode. RemoveChild (event. Target. ParentNode)} / / destruction of components instance.$destroy() }) */}})// console.log('instance.$el=', instance.$el)
  // Add nodes to the document
  parentElement.appendChild(instance.$el)

  instance.visible = true
  instance.closed = false
}

// Displays a pop-up window
export function popupFullBox (options = {}, vmExtends = {}) {
  let instance = new FullBoxConstructor({
    el: document.createElement('div'),
    ...vmExtends
  })
  initInstance(instance, options)
  return instance
}

export default popupFullBox
Copy the code

“Feel free to discuss in the comments section.”

Hope to finish watching friends can give a thumbs-up, encourage once