@中文描述:优化加载状态 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

GitBucket 4.6.0

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述:优化加载状态 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent afca7e4 commit 366b502547e5d5eeca1c983ecc7e374eaa2acb86 ganyi authored 2 days ago

Showing 1 changed file

Ignore Space Show notes View

project/hivuiMain/views/layout/components/tabpanel/panel.vue

<template>
    <div class="pl-tabs-panel" :title="title" v-show="active">
        <div class="pl-loading pl-loading-fixed" v-show="url && !loaded" ref="dom-loader">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

<iframe v-if="url" :src="url" @load="handleIframeLoad" :name="'iframe' + name" ref="iframe" />
        <slot v-else></slot>
    </div>
</template>

<script>
export default {
    name: 'PTabpanel',
    props: {
        close: [String, Number, Boolean],
        itemData: Object,
        title: {
            type: String,
            default: ''
        },
        name: {
            type: [String, Number],
            default: ''
        },
        url: {
            type: String,
            default: ''
        },
        index: [String, Number]
    },
    data() {
        return {
            loaded: false
        }
    },
    computed: {
        active() {
            return this.$parent.currentName === this.name
        }
    },
    watch: {
        // 监听url变更：切换地址，重置加载状态
        url(newVal) {
            if (newVal) {
                this.loaded = false
            }
        },
        // 切换tab隐藏时重置状态
        active(val) {
            if (!val && this.url) {
                this.loaded = false
            }
        }
    },
    updated() {
        this.$parent.$emit('tab-nav-update')
    },
    methods: {
        handleIframeLoad(evt) {
            this.loaded = true
            this.$emit('onIframeLoad', this, evt)
        }
    }
}
</script>

<template>
  <div class="pl-tabs-panel" :title="title" v-show="active" >
      <div class="pl-loading pl-loading-fixed" v-show="url&&!loaded" ref="dom-loader">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
      </div>
      <iframe v-if="!hasUrl" :src="url" @load="handleIframeLoad" :name="'iframe'+name" ref="iframe"></iframe>
      <slot v-if="hasUrl"></slot>
  </div>
</template>

<script>
export default {
    name:'PTabpanel',
    props:{
        close:[String,Number,Boolean],
        itemData:Object,
        title:{
            type:String,
            default:""
        },
        name:{
            type:[String,Number],
            default:""
        },
        url:{
            type:[String],
            default:""
        },
        index:[String,Number]
    },
    data(){
        return {
            loaded: false,
            loadTimer: null
        }
    },
    computed:{
        active(){
            const active = this.$parent.currentName === this.name;
            return active;
        },
        // ✅ hasUrl改为计算属性
        hasUrl(){
            return this.url == null || this.url == ''
        }
    },
    watch:{
        active(val){
            if(val && this.url){
                this.loaded = false;
                this.resetLoadTimer();
            }
        },
        // url发生变化，重置加载状态
        url(){
            if(this.active){
                this.loaded = false;
                this.resetLoadTimer();
            }
        }
    },
    updated() {
        this.$parent.$emit('tab-nav-update');
    },
    beforeDestroy(){
        this.clearTimer();
    },
    methods:{
        clearTimer(){
            if(this.loadTimer){
                clearTimeout(this.loadTimer);
                this.loadTimer = null;
            }
        },
        resetLoadTimer(){
            this.clearTimer();
            this.loadTimer = setTimeout(()=>{
                this.loaded = true;
            },12000)
        },
        handleIframeLoad(evt){
            // iframe正常触发load，清除定时器，结束loading
            this.clearTimer();
            this.loaded=true;
            this.$emit('onIframeLoad',this,evt);
        }
    }
}
</script>

Show line notes below