开始使用
npm i @yik_l/alert -S
局部注册组件
<template>
<div id="app">
<YikAlert v-model="show"></YikAlert>
</div>
</template>
import YikAlert from '@yik_l/alert'
export default {
data() {
return {
show: true,
}
},
components: { YikAlert },
}
全局注册组件
import YikAlertfrom "@yik_l/alert";
Vue.use(YikAlertfrom);
<template>
<div id="app">
<YikAlert v-model="show"></YikAlert>
</div>
</template>
子组件如何关闭父组件的弹出？
// 使用以下代码关闭弹出框，$parent是vue实例中的属性 this.$parent.closeScreen()
props
props: {
value: {
type: Boolean,
default: false,
},
// 标题
title: {
type: String,
default: '这是一个标题',
},
// 开启遮蔽
mask: {
type: Boolean,
default: true,
},
// 宽度
w: {
type: String,
default: '650px',
},
// 高度
h: {
type: String,
default: '450px',
},
/**
* 动画
* zoom 缩放
* top 从上往下
* left 从左往右
*/
animeType: {
type: String,
default: 'zoom',
},
/**
* 隐藏主体时，顺序
*/
sort: {
type: Number,
default: 1,
},
},