vue3.0 manual encapsulation message prompt box

1. Usage scenario

There are still many scenarios, such as common login, some functions, and ajax that fails to send can be prompted with a pop-up box

2. Prompt component message.vue

<template>
  <div class="xtx-message" :style="style[type]">
    <!-- The style is bound above -->
    <!-- Different prompt icons change -->
    <i class="iconfont" :class="[style[type].icon]"></i>
    <span class="text">{{text}}</span>
  </div>
</template>
<script>
export default {
  name: 'XtxMessage',
  props: {
    text: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      // warn warning error success success
      default: 'warn'
    }
  },
  setup () {
    // Define an object that contains three styles. The object key is the type string
    const style = {
      warn: {
        icon: 'icon-warning',
        color: '#E6A23C',
        backgroundColor: 'rgb(253, 246, 236)',
        borderColor: 'rgb(250, 236, 216)'
      },
      error: {
        icon: 'icon-shanchu',
        color: '#F56C6C',
        backgroundColor: 'rgb(254, 240, 240)',
        borderColor: 'rgb(253, 226, 226)'
      },
      success: {
        icon: 'icon-queren2',
        color: '#67C23A',
        backgroundColor: 'rgb(240, 249, 235)',
        borderColor: 'rgb(225, 243, 216)'
      }
    }
    return { style }
  }
}
</script>
<style scoped lang="less">
.xtx-message {
  width: 300px;
  height: 50px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  margin-left: -150px;
  top: 25px;
  line-height: 50px;
  padding: 0 25px;
  border: 1px solid #e4e4e4;
  background: #f5f5f5;
  color: #999;
  border-radius: 4px;
  i {
    margin-right: 4px;
    vertical-align: middle;
  }
  .text {
    vertical-align: middle;
  }
}
</style>
 Interpretation code

<div class="xtx-message" :style="style[type]">
 <i class="iconfont" :class="[style[type].icon]"></i>

adopt props From inside type The value will pass style Find the corresponding entire attribute in the object

for example div Will find the whole style Style in    i Will find style Corresponding in icon Class name

  const style = {
      warn: {
        icon: 'icon-warning',
        color: '#E6A23C',
        backgroundColor: 'rgb(253, 246, 236)',
        borderColor: 'rgb(250, 236, 216)'
      }
    }

3. Sliding effect

After being registered as a global component, the style can only be displayed, and the effect of sliding in from top to bottom is not achieved

With the help of vue official transition effect

Vue provides encapsulated components of transition. In the following cases, entry / exit transitions can be added to any element and component

  • Conditional rendering (using v-if)
  • Conditional display (using v-show)
  • Dynamic component
  • Component root node

Use steps
1. Wrap the elements you want to transition with transition

2. There will be 6 more class names after packaging. We only need to enter the class name

  • v-enter-from: defines the start state of the transition. Takes effect before the element is inserted and is removed at the next frame after the element is inserted.
  • v-enter-active: defines the state when the transition becomes effective. Applied throughout the transition phase, it takes effect before the element is inserted and removed after the transition / animation is completed. This class can be used to define the transition process time, delay and curve functions.
  • v-enter-to: defines the end state of the transition. The next frame takes effect after the element is inserted (at the same time, v-enter-from is removed) and is removed after the transition / animation is completed.
  • v-leave-from: defines the start state of the exit transition. Takes effect immediately when the exit transition is triggered and the next frame is removed.
  • v-leave-active: defines the state when the exit transition takes effect. Applied throughout the exit transition phase, it takes effect immediately when the exit transition is triggered and is removed after the transition / animation is completed. This class can be used to define exit transition process time, delay and curve functions.
  • v-leave-to: leave the end state of the transition. After the departure transition is triggered, the next frame takes effect (at the same time, v-leave-from is deleted) and is removed after the transition / animation is completed.
<template>
<Transition name="down">
  <div class="xtx-message" :style="style[type]" v-show="visible">
    <!-- The style is bound above -->
    <!-- Different prompt icons change -->
    <i class="iconfont" :class="[style[type].icon]"></i>
    <span class="text">{{text}}</span>
  </div>
</Transition>
</template>
<script>
import { onMounted, ref } from 'vue'
export default {
  name: 'XtxMessage',
  props: {
    text: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      // warn warning error success success
      default: 'warn'
    }
  },
  setup () {
    // Define an object that contains three styles. The object key is the type string
    const style = {
      warn: {
        icon: 'icon-warning',
        color: '#E6A23C',
        backgroundColor: 'rgb(253, 246, 236)',
        borderColor: 'rgb(250, 236, 216)'
      },
      error: {
        icon: 'icon-shanchu',
        color: '#F56C6C',
        backgroundColor: 'rgb(254, 240, 240)',
        borderColor: 'rgb(253, 226, 226)'
      },
      success: {
        icon: 'icon-queren2',
        color: '#67C23A',
        backgroundColor: 'rgb(240, 249, 235)',
        borderColor: 'rgb(225, 243, 216)'
      }
    }
    const visible = ref(false)
    onMounted(() => {
      visible.value = true
      setTimeout(() => {
        // visible.value = false
      }, 2000)
    })
    return { style, visible }
  }
}
</script>

Define a variable through v-show, which is false at first. Wait until the onMounted hook function performs the component mounted rendering, display it for two seconds, and then hide it

4. Call in the form of method

We don't want to call the page at the beginning, but rather call it at any time in the form of methods, such as when we judge whether ajax is correct after clicking login

// Example calling method
Message({ type: 'error', text: 'Login failed' })
  1. Import components
  2. Create a virtual node according to the component. Const vnode = createvnode (xtxmessage, {type, text})
  3. Prepare a DOM container
  4. Render virtual nodes into DOM container. render(vnode, div)
  5. Turn on the timer to remove the contents of the DOM container

Create a new message.js file

// Implement the logic of using functions to call XTX message components
//   Introduce creating virtual nodes and rendering methods
import { createVNode, render } from 'vue'
// Import information prompt component
import XtxMessage from './XtxMessage'
 
// Prepare dom container
const div = document.createElement('div')
// Add class name
div.setAttribute('class', 'xtx-message-container')
// Add to body
document.body.appendChild(div)
 
// Timer ID
let timer = null
 
export default ({ type, text }) => {
  // Implementation: render the message prompt according to xtx-message.vue
  // 1. Import components
  // 2. Create a virtual node according to the component. The first parameter is the virtual node to be created, and the second parameter is the parameter of props
  const vnode = createVNode(XtxMessage, { type, text })
  // 3. Prepare a DOM container
  // 4. Render the virtual node into the DOM container
  render(vnode, div)
  // 5. Start the timer and remove the contents of DOM container
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, 3000)
}

Using message.js

import Message from '@/components/Message'
 
Message({ type: 'error', text: 'Login failed' })

Extended global mount
In vue2, it is mounted on the Vue instance prototype object

Mount in vue3 main.js

import Message from '@/components/Message'
app.config.globalProperties.$message = Message

vue2 optional API call

  created () {
    this.$message({ type: 'error', text: 'Login failed' })
  },

vue3 composite API call

setup in vue3 does not have this

import { getCurrentInstance } from 'vue'
export default {
 
  setup () {
    const internalInstance = getCurrentInstance()
 
    internalInstance.appContext.config.globalProperties.$message({ type: 'success', text: 'xxx' })
  }
}

vue3 is still troublesome to call, so import is used to import it in turn

Original link: https://blog.csdn.net/m0_46846526/article/details/119176107

Tags: Javascript html Ajax

Posted on Thu, 23 Sep 2021 05:50:40 -0400 by zimick