SuperMap iClient3D for WebGL-Vue组件开发之标题栏控件

作者：桔子
本文同步发布于https://www.jianshu.com/p/197c5d0a8c0d

这一节来实现一个简单的vue组件，自定义标题名组件，可以用作于构件自定义系统名称，下面来看代码。

<template>
    <div>
        <div class="header">
            <p class="customtitle">{{this.$props.title}}</p>
        </div>
    </div>
    
</template>
<script>
export default {
    name:"customheader",
    props:{
        title:{
            type:String,
            default:"XXXXXX"
        }
    }
}
</script>
<style>
    .header{
        position: absolute;
        top: 0;
        height: 70px;
        left: 0;
        width: 100%;
        background: url('../../assets/header.png') no-repeat;
        background-size: 100% 100%;
        background-color: rgba(0, 0, 0, 0);
        text-align: center;
        color: whitesmoke;
        font-size: 18px;
        vertical-align: middle;
        z-index: 99999;
        
    }
    .customtitle{
        width: 100%;
        height: 100%;
        text-align: center;
        vertical-align: middle;
        font-size: 32px;
        color: whitesmoke;
        margin-top: 15px;
    }
</style>

这里核心是利用vue的props属性，接收来自于父组件的传递的参数，实现自定义的标题名。

<customheader title="CustomDemo"></customheader>