文档
https://cn.vuejs.org/v2/guide/components-slots.html
虽然Vue的文档大多数言之不详,但是这次插槽真的是把事情都说清楚了,我就不多说了。
今天练习一个空状态组件的编写方法,为了简化代码,使用了vue-element-admin作为环境。
空状态组件Empty组件编写
-
代码非常简单,利用了flex布局。
-
传入了一些字符串变量,以及一个函数。
-
图标允许自定义,图标是从iconfont上下载的,由于vue-element-admin使用了svg自动编译(这个功能Element UI本身没有),所以传入图片名就可以得到一个svg图标。实在不懂可以看vue-element-admin的官方文档,或者跳过这个知识,因为本文主要说具名插槽。
-
下面使用了2个具名插槽。
<template>
<div class="empty-container" :style="{ 'height': height }">
<svg-icon :icon-class="iconName" class="empty-icon" />
<p class="el-link el-link--default"><slot name="description">什么也没有</slot></p>
<el-button v-if="clickButton" :type="buttonType" @click="clickButton"><slot name="button">确定</slot></el-button>
</div>
</template>
<script>
export default {
name: 'Empty',
props: {
height: {
type: String,
default: '100%'
},
iconName: {
type: String,
default: 'empty'
},
buttonType: {
type: String,
default: 'primary'
},
clickButton: {
type: Function,
default: undefined
}
}
}
</script>
<style lang="scss" scoped>
.empty-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 200px;
.empty-icon {
font-size: 100px;
}
}
</style>
父组件编写
template如下,其中#description
和#button
就是具名插槽,当然这是缩写形式,全写形式是v-slot:description
和v-slot:button
。
<empty height="320px" :icon-name="iconName" :click-button="clickButton">
<template #description>
一行说明文字
</template>
<template #button>
按钮文字
</template>
</empty>
script如下,传入一些data和一个method。
data() {
return {
iconName: 'empty',
aaa: '1'
}
},
methods: {
clickButton() {
alert(this.aaa)
}
}
网友评论