我要评论1、定义一个message.vue组件
其内容如下
<template>
<transition name="down">
<div class="xtx-message" :style="style[type]" v-show="visible">
<!-- 上面绑定的是样式 -->
<!-- 不同提示图标会变 :class="{'icon-warning':true}" :class="['icon-warning']" -->
<!--这个需要用到https://www.iconfont.cn/的图片库-->
<!-- <i class="iconfont" :class="[style[type].icon]"></i>-->
<span class="text">{{text}}</span>
</div>
</transition>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'message',
props: {
type: {
type: string,
default: 'warn'
},
text: {
type: string,
default: ''
}
},
setup () {
// 定义一个对象，包含三种情况的样式，对象key就是类型字符串
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)
const visible = ref(true)// 这个感觉可以不用，即不用v-show
// onmounted(() => {
// visible.value = true
// })
return { style, visible }
}
}
</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;
}
}
}
.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>2、创建一个叫message.js的文件
其内容如下：
// 提供一个能够显示message组件的函数
// 这个函数将来：导入直接使用，也可以挂载在vue实例原型上
import { createvnode, render } from 'vue'
import helloworld from "@/components/message.vue";
// dom容器
const div = document.createelement('div')
div.setattribute('class', 'xtx-msssage-container')
document.body.appendchild(div)
// 定时器标识
let timer = null
export default ({ type, text }) => {
// 渲染组件
// 1. 导入消息提示组件
// 2. 将消息提示组件编译为虚拟节点(dom节点)
// createvnode(组件,属性对象（props）)
const vnode = createvnode(helloworld, { type, text })
// 3. 准备一个装载消息提示组件的dom容器
// 4. 将虚拟节点渲染再容器中
// render(虚拟节点,dom容器)
render(vnode, div)
// 5. 3s后销毁组件
cleartimeout(timer)
timer = settimeout(() => {
render(null, div)
}, 3000)
}
3、在app.vue中导入并使用
<template>
<div class="btn" @click="btn">点击弹出消息提示框</div>
</template>
<script setup>
import message from "@/message";
import {onmounted} from "vue";
const btn = ()=>{
message({type:'warn', text:"hello world"})
}
// 这种方式虽然也可以但是不推荐
// onmounted(()=>{
// this.$message({type:'warn', text:"hello world"})
// })
</script><style lang="less" scoped>
.btn{
width: 300px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: deeppink;
}
</style>4、效果如下
当点击左边按钮后会弹出一个消息提示框，3秒后关闭
5、如果想使用this.$message这种方式
则需定义一个ui.js文件用来挂载message.js
其内容如下：
import message from "@/message";
export default {
install (app) {
// 定义一个原型函数
app.config.globalproperties.$message = message
}
}6、在main.js中导入并使用use挂载到app上
如下所示：
import { createapp } from 'vue'
import app from './app.vue'
import ui from "@/ui";
// 导入自己ui组件库
// import ui from './ui'
// 插件的使用，在main.js使用app.use(插件)
createapp(app).use(ui).mount('#app')
这种方式的缺点是还是得在选项式上才方便使用，在组合式方式上不推荐
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论