Explanation of Vue3 Encapsulation Message Message Prompt Instance Function
- 2021-11-24 00:54:26
- OfStack
Directory Vue3 Encapsulation Message Prompt Instance Function Style Layout Encapsulation message. vue Function Implementation message. js Registration Custom Instruction Use: Summary
Vue3 Encapsulation Message Prompt Instance Function
Vue 2.0 uses Vue.prototype.$message = function () {}
vue 3.0 uses app. config. globalProperties to mount the prototype method
app.config.globalProperties.$message = Message
Direct import functions are also supported using import Message from './Message. js
Style layout encapsulation message. vue
<template>
<Transition name="down">
<div class="my-message" :style="style[type]" v-show='isShow'>
<!-- The style is bound above -->
<!-- Different prompt icons will 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: 'myMessage',
props: {
text: {
type: String,
default: ''
},
type: {
type: String,
// warn Warning error Errors success Success
default: 'warn'
}
},
setup () {
// Definition 1 Objects containing 3 Styles, objects in this case 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)'
}
}
// Control animation
const isShow = ref(false)
// Triggered after the component template is rendered successfully
onMounted(() => {
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: 4px;
vertical-align: middle;
}
.text {
vertical-align: middle;
}
}
</style>
Function implementation message. js
// Icons
// Text
import { createVNode,render } from 'vue'
import myMessage from './message.vue'
// Dynamic creation 1 A DOM Container
const div=document.createElement('div')
div.setAttribute('class','my-message-container')
document.body.appendChild(div)
export default ({text,type})=>{
let timer=null
//createVNode Used to create 1 Virtual nodes
// Parameter 1 Support component
// Parameter 2 Represents the options passed to the component
const vnode= createVNode(myMessage,{text, type})
// Render the virtual node to the page's DOM Can be medium
// render Parameters of the function
// Parameter 1 Represents the content that needs to be rendered (virtual nodes)
// Parameter 2 Represents the target location for rendering ( DOM Element)
render(vnode,div)
// Hope 1s Post-disappearance
clearTimeout(timer)
timer=setTimeout(()=>{
// Empty div What's inside
render(null,div)
},1000)
}
// $message({ text: ' Login failed ', type: 'error'})
Register custom directives
import Message from './Message.js'
export default {
install(app){
// If you want to mount global properties, properties that can be called through component instances this.$message
// Expand 1 Instance method
app.config.globalProperties.$message = Message // Prototype function
}
}
Use:
Method 1
import Message from './message.js'
setup(){
Message({ text: ' Login failed ', type: 'error' })
}
Method 2
// setup Access the component instance object in the function
import { getCurrentInstance } from 'vue'
setup(){
const instance= getCurrentInstance()
instance.proxy.$message({ text: ' Login failed ', type: 'error' })
}
Method 3 this. $message
this.$message({ text: ' Login failed ', type: 'error' })
Summarize
This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!