iT邦幫忙

1

[Vue.js] 擴充元件(Component)

ElementUIButton 為例

這是 ElementUI 的 Button
Origin Button
預設沒有提供這樣的樣式
Full Button
該如何做到呢?


建立一個新元件,命名為 ElButtonFull.vue

ElButtonFull.vue

<template>
    <el-button class="el-button-full" v-bind="$props">
        <slot></slot>
    </el-button>
</template>

<script>
import { Button } from 'element-ui'

export default {
    name: 'ElButtonFull',
    extends: Button
};
</script>

<style scoped>
.el-button-full {
    width: 100%;
}
</style>

透過設定 extends: ButtonElButtonFull 就會繼承 Button 的 props 等所有屬性
extends

<el-button> 中加上 v-bind="$props" 後,在 <el-button-full> 設定的 prop 會同步更新到子層 <el-button> 的 prop,就不需要手動對應每一個 prop 啦。

App.vue

<template>
    ...
    <el-button-full type="primary">Button</el-button-full>
    ...
</template>
<script>
import ElButtonFull from 'components/ElButtonFull.vue'

export default {
    ...
    components: {
        ElButtonFull,
        ...
    }
    ...
}
</script>

尚未有邦友留言

立即登入留言