preface

Message prompt pop-up box I believe we often see when browsing the web, today follow the steps of this article together to encapsulate a message prompt global components ~

A, why encapsulation?

• In order to unify the style of prompt information in the project
• Projects are developed by multiple people, packaged once, and can be used by others

Two, how to package?

1. The encapsulation

As in the previous article, place the common component under SRC/Components and create a new my-message.vue component

The code is as follows (example) :

<template>
  <Transition name="down">
    <div class="my-message" :style="style[type]" v-show='isShow'> <! --> <! -- The icon will change depending on the prompt --> < 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: 'MyMessage',
  props: {
    text: {
      type: String,
      default: ' '
    },
    type: {
      type: String, // WARN Warning Error Success default:'warn'}},setupConst 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)'} // control animation const isShow = ref(falseOnMounted (() => {isshow.value =true
    })
    return { style, isShow }
  }
}
</script>
<style scoped lang="less"> .down { &-enter { &-from { transform: translate3d(0, -75px, 0); opacity: 0; } &-active {transition: all 0.5s; } &-to { transform: none; opacity: 1; } } } .my-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: 10px;
    vertical-align: middle;
  }
  .text {
    vertical-align: middle;
  }
}
</style>
Copy the code

To create a message.js file in the my-message.vue horizontal directory (example) :

// The following method requires rendering a prompt effect
import { createVNode, render } from 'vue'
import MyMessage from './my-message.vue'

// Dynamically create a DOM container
const div = document.createElement('div')
div.setAttribute('class'.'my-meassage-container')
document.body.appendChild(div)

export default ({ text, type }) => {
  let timer = null
  // createVNode is used to create a virtual node
  // Parameter one supports components
  // Argument two represents the option passed to the component
  const vnode = createVNode(MyMessage, { text, type })
  // Render virtual nodes into the DOM of the page
  // Render function arguments
  // Parameter one: represents the content to render (virtual node)
  // Render target position (DOM element)
  render(vnode, div)

  // The message is expected to disappear after 1 second
  clearTimeout(timer)
  timer = setTimeout(() = > {
    // Empty the contents of the div
    render(null, div)
  }, 1500)}$message({text: 'login failed ', type: 'error'})
Copy the code

In the flat index.js file, add an instance method to the vue instance with the following code (example) :

import Message from '@/components/message'
import MyMessage from '@/components/my-message.vue'

export default {
  install (app) {
    app.component(MyMessage.name, MyMessage)
	// Extend an instance method
    app.config.globalProperties.$message = Message
  }
}
Copy the code

The font icon used in this component is the resources of Ali CDN. Add the following code in the head of public/index.html file

<link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
Copy the code

2. Use

The encapsulated message prompt component supports the following three notification effects

• Success
• Failed (error)
• Warn

Use the following code in any.vue ending file (example) :

<template>
 <div>
 </div>
</template>

<script>
import { getCurrentInstance } from 'vue'
export default {
  name: 'App'.setup () {
    const instance = getCurrentInstance()

    instance.proxy.$message({ text: 'Prompt message'.type: 'success' })
  }

}
</script>

<style lang="less">

</style>

Copy the code

Note: To change the prompt effect, change the value of type to the value shown above, and text is the text that needs to be reminded

Third, the effect demonstration

conclusion

notice