介绍 vue是什么软件 & lt; template>
,& lt; transition name=皊lide"比;
& lt;才能div 类=癿essage-wrap",:类=皌ype", v=皏isible"比;
,,& lt; div 类=癱ontent"在{{内容}}& lt;/div>
& lt;才能/div>
,& lt;/transition>
& lt;/template>
& lt; script lang=& # 39; ts # 39;比;
import {,组件,Vue,,,, Prop },得到“vue-property-decorator";
@ component ({
,组件:{}
})
export default class extends Vue {
,private 内容:string =,““
,private 可见:boolean =,假;
,private 类型:string =,“info",,//, & # 39;成功# 39;& # 39;错误# 39;
,private 开始时间(),{
window.setTimeout才能((),=祝辞,{
,,this.visible =,假;
,,},3000);
,}
,private 安装(),{
this.startTimer才能();
,}
｝
& lt;/script>
& lt; style scoped lang=皊css"比;
.message-wrap {
位置:大敌;固定;
,背景颜色:# 44 b0f3;
,颜色:# ffffff;
,左:40%;
,宽度:20%;
上图:大敌;25 px;
40岁,身高:px;
,z - index: 1001;
,这个特性:4 px;
,text-align:中心;
,边界:1 px solid # ebeef5;
,.content {
,,行高:40像素;
,}
｝
.error {
,背景颜色:# fef0f0;
,颜色:# f56c6c;
｝
.success {
,背景颜色:# f0f9eb;
,颜色:# 67 c23a;
｝
.slide-enter-active,
.slide-leave-active {
,转型:all 0.3 s cubic-bezier (0.8 0.5 1,,,,,, 1);
,转型:all 0.2 s 缓解;
｝
.slide-enter,
.slide-leave-to {
,变换:translateY (-20 px);
,不透明度:0;
｝
& lt;/style> import Vue 得到& # 39;vue # 39;
import BlogMessage 得到& # 39;。/BlogMessage.vue& # 39;
const MessageBox =, Vue.extend (BlogMessage),//,创建的是一个组件构造器,不是实例
const Message =, {
安装:大敌;(类型,选项,还以为;持续时间),=祝辞,{
if 才能;(options ===, undefined | |, options ===, null), {
,,options =, {
,,,内容:,& # 39;& # 39;
,,}
,,},else if (typeof options ===, & # 39;字符串# 39;,| |,typeof options ===, & # 39;数字# 39;),{
,,options =, {
,,,内容:选项
,,}
,,if (type !=, undefined ,,, options !=, null), {
,,,options.type =,类型;
,,}
,,}
let 才能;instance =, new 对话框({
,,数据:选项
美元,})。山()
document.body.appendChild才能(实例。el美元),//,添加dom元素
Vue.nextTick才能((),=祝辞,{,//dom元素渲染完成后执行回调
,,instance.visible =,真的
})才能
,}
｝
Vue.prototype message 美元;=,Message.install;
[& # 39;成功# 39;,,& # 39;错误# 39;].forEach (type =祝辞,{
Vue.prototype。美元消息(类型),=,(内容),=祝辞,{
,return Vue.prototype。美元消息(内容,类型)
,}
})
export default 消息 import Vue 得到& # 39;vue # 39;;
import Message 得到& # 39;@/组件/共同/消息# 39;;
Vue.use(消息); , private test1 (), {
这才能。美元消息(“这是一条普通消息“);
,}
,private test2 (), {
这才能。message.success美元(“这是一条成功消息“);//才能,美元。消息(“这是一条成功消息,,,“success");
,}
,private test3 (), {
这才能。message.error美元(“这是一条失败消息“);//才能,美元。消息(“这是一条失败消息,,,“error");
,}
这篇文章将为大家详细讲解有关使用vue怎么实现一个全局消息组件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。
全局组件需要一个索引。js文件去注册
BlogMessage。vue
这里的脚本是用ts写的。大家只需将这里稍做修改就可以了
索引。js
<强>使用组件
1。全局注册
2。调用方法
