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.
64 lines
1.3 KiB
64 lines
1.3 KiB
<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>
|
|
|