nutui/sites/demo/view/demonav.vue

<template>
    <div class="demo-nav" v-if="showFlag">
        <div class="goback" @click="goback">
            <b class="go-btn"></b>
        </div>
        <div class="title">{{title}}</div>
        <a class="home" :href="'https://github.com/jdf2e/nutui/tree/master/src/packages/'+title.toLowerCase()+'/demo.vue'"></a>
    </div>
</template>

<script>
export default {
    data(){
        return{
            showPath:''
        }
    },
    methods:{
        goback(){
            location.href="./demo.html#/index";
            // if (self != top || history.length===1) { 
            //     this.$router.push('./index');
            // }else{
            //    history.back();
            //}
        },

    },
    computed:{
        showFlag(){
            if(this.showPath == '/index'){
                return false;
            }else{
                return true;
            }
        },
        title(){
            return this.showPath.substring(1);
        },
        hrefUrl(){
            return './demo.html#'+this.showPath;
        }
    },
    watch:{
        '$route':{
            immediate:true,
            handler:function(to, from){
                this.showPath = to.path;
                //document.documentElement.scrollTop = document.body.scrollTop = 0;
        }}
    },
    mounted(){     
    }
}
</script>

<style>
    .demo-nav{
        width: 100%;
        height: 40px;
        background-color: #F8F8F8;
        border-bottom: 1px solid #eee;
        display:flex;
        justify-content: center;
        align-items: center;
        padding: 0px 8px;
        position: fixed;
        top:0;
        left: 0;
        z-index: 999;
        box-sizing:border-box;
    }
    .goback{
        cursor: pointer;
        width: 45px;
        height: 40px;
        display: flex;
        align-items: center;
    }
    .go-btn{
        display: block;
        width: 26px;
        height: 26px;
        background: url("data:image/svg+xml, %3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(153,153,153)' d='M959.39 527.762c0 23.128-18.419 41.874-41.138 41.874-12.336 0-23.277-5.64-30.818-14.394L541.09 202.729a40.629 40.629 0 0 0-58.18 0L237.802 452.204c2.878 5.636 4.654 11.927 4.654 18.69v165.477c0 .328-.089.635-.097.961h.298v163.004c0 23.126 18.506 41.872 41.337 41.872h82.569v-164.47c0-22.85 18.52-41.368 41.369-41.368h206.844c22.848 0 41.369 18.518 41.369 41.369 0 22.846-18.52 41.369-41.37 41.369H449.3v165.474c0 22.427-17.875 40.583-40.142 41.246v.122h-146.01c-57.116 0-103.418-46.864-103.418-104.678v-183.94h.085c-.006-.327-.097-.634-.097-.962V531.68l-23.163 23.576c-7.542 8.745-18.476 14.38-30.808 14.38-22.719 0-41.139-18.746-41.139-41.874 0-11.862 4.896-22.52 12.688-30.141l-.237-.242L439.275 128.71c40.164-40.88 105.286-40.88 145.45 0l361.57 368.011-.3.306c8.18 7.653 13.395 18.536 13.395 30.735zM614.734 842.207c.443 0 .854.12 1.294.132v-.132h122.683c22.83 0 41.338-18.746 41.338-41.872V637.33h.534c-.016-.496-.145-.961-.145-1.464 0-23.126 18.417-41.874 41.139-41.874 22.72 0 41.137 18.748 41.137 41.874 0 .503-.126.968-.146 1.464h.406v183.94c0 57.813-46.3 104.679-103.419 104.679H616.026v-.132c-.44.014-.852.132-1.294.132-22.72 0-41.14-18.744-41.14-41.87.003-23.124 18.422-41.873 41.142-41.873z'/%3E%3C/svg%3E") no-repeat center;
        background-size: contain;
    }
    .title{
        flex:1;
        font-size: 16px;
        text-align: center;
        font-weight: bold;
        line-height: 40px;
    }
    .home{
        display:inline-block;
        width: 24px;
        height:100%;
        text-decoration:none;
        color:#000;
        padding-left:20px;
        background:url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb(153,153,153)' %3E%3Cpath d='M8 .198a8 8 0 0 0-2.529 15.591c.4.074.547-.174.547-.385 0-.191-.008-.821-.011-1.489-2.226.484-2.695-.944-2.695-.944-.364-.925-.888-1.171-.888-1.171-.726-.497.055-.486.055-.486.803.056 1.226.824 1.226.824.714 1.223 1.872.869 2.328.665.072-.517.279-.87.508-1.07-1.777-.202-3.645-.888-3.645-3.954 0-.873.313-1.587.824-2.147-.083-.202-.357-1.015.077-2.117 0 0 .672-.215 2.201.82A7.672 7.672 0 0 1 8 4.066c.68.003 1.365.092 2.004.269 1.527-1.035 2.198-.82 2.198-.82.435 1.102.162 1.916.079 2.117.513.56.823 1.274.823 2.147 0 3.073-1.872 3.749-3.653 3.947.287.248.543.735.543 1.481 0 1.07-.009 1.932-.009 2.195 0 .213.144.462.55.384A8 8 0 0 0 8.001.196z'/%3E%3C/svg%3E") no-repeat center;
        background-size:100% auto;
        background-origin:content-box;
    }
</style>