You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.3 KiB
65 lines
1.3 KiB
1 year ago
|
<template>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="header">
|
||
|
|
<!-- 具名插槽： 使用name定义了插槽的名称，在父组件中可以使用此名称调用插槽 -->
|
||
|
|
<!-- 字符串"错误"是插槽的默认值,当没有传值时使用默认值 -->
|
||
|
|
<slot name="header">错误</slot>
|
||
|
|
<div class="close">关闭</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<!-- 插槽中可以使用v-bind绑定参数，可以在父组件中使用此参数 -->
|
||
|
|
<slot :types="types"></slot>
|
||
|
|
</div>
|
||
|
|
<div class="footer">
|
||
|
|
<!-- 可以使用v-bind绑定多个参数，同时需要在父组件中以对象形式按照顺序进行映射 -->
|
||
|
|
<slot name="footer" :types="types" :sources="sources"></slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
types: {
|
||
|
|
404: 'Page Not Found',
|
||
|
|
500: 'System Error',
|
||
|
|
},
|
||
|
|
sources: {
|
||
|
|
system: '系统',
|
||
|
|
page: '页面',
|
||
|
|
console: '控制台',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.wrap {
|
||
|
|
border: 1px solid #f66;
|
||
|
|
color: #f66;
|
||
|
|
padding: 10px;
|
||
|
|
position: relative;
|
||
|
|
max-width: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
font-size: 20px;
|
||
|
|
color: #333;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.close {
|
||
|
|
position: absolute;
|
||
|
|
right: 10px;
|
||
|
|
top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
color: #666;
|
||
|
|
font-size: 12px;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
</style>
|