注册 登录
StarSky
StarSky
  • 发布：2022-03-15 14:07
  • 更新：2022-03-15 14:07
  • 阅读：551

【报Bug】slot插槽在hbuilderX编辑器vue2版本生效，切换成vue3版本，写vue2模板插槽slot不生效

分类：uni-app

产品分类： uniapp/H5

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： 12.2.1

HBuilderX类型： 正式

HBuilderX版本号： 3.3.13

浏览器平台： Chrome

浏览器版本： 99.0.4844.51

项目创建方式： HBuilderX

示例代码： 

<template>  
    <view class="content">  
        <easypnp-navbar :showGoBack="true" bgColor="#FFFFFF">  
            <view slot="goBack" class="df-row-center">  
                <image style="width: 40rpx;height: 40rpx;" src="/static/images/goBack.png"></image>  
            </view>  
            <view slot="title"><text style="color: #000;font-size: 36rpx;">商品分类</text></view>  
        </easypnp-navbar>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>  
子组件：  
<template>  
    <view class="easypnp-navbar" :class="[fixed ? 'fixed' : 'easypnp-navbar']" :style="{backgroundColor: bgColor}">  
        <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>  
        <view class="navbar" :style="{height: navBarHeight}">  
            <view class="goBack" :style="{left: goBackLeft, height: navBarHeight}" v-if="showGoBack" @click="clickGoBack"><slot name="goBack"></slot></view>  
            <view class="title"><slot name="title"></slot></view>  
            <view class="menu" :style="{right: MenuRight, height: navBarHeight}" v-if="showMenu" @click="clickMenu"><slot name="menu"></slot></view>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    components: {},  
    props: {  
        goBackLeft: {  
            type: String,  
            default: '30rpx'  
        },  
        MenuRight: {  
            type: String,  
            default: '30rpx'  
        },  
        bgColor: {  
            type: String,  
            default: '#fff'  
        },  
        fixed: {  
            type: String,  
            default: 'easypnp-navbar'  
        },  
        /* 导航栏高度 */  
        navBarHeight: {  
            type: String,  
            default: '88rpx'  
        },  
        /* 是否显示返回按钮 */  
        showGoBack: {  
            type: Boolean,  
            default: false  
        },  
        /* 是否显示菜单按钮 */  
        showMenu: {  
            type: Boolean,  
            default: false  
        }  
    },  
    data() {  
        return {  
            /* 状态栏高度 */  
            statusBarHeight: 0  
        };  
    },  
    created() {  
        this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;  
    },  
    methods: {  
        clickGoBack() {  
            uni.navigateBack({  
                delta: 1  
            });  
        },  
        clickMenu() {  
            this.$emit('clickMenu');  
        }  
    }  
};  
</script>  

<style lang="scss" scoped>  
.fixed {  
    position: fixed;  
    left: 0;  
    right: 0;  
    top: 0;  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    z-index: 99999999;  
    /* #endif */  
}  
.easypnp-navbar {  
    background-color: #fff;  
}  
.navbar {  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
    justify-content: center;  
    position: relative;  
}  
.goBack {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    display: flex;  
    z-index: 999999;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
}  
.title {  
    flex: 1;  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
    justify-content: center;  
}  
.menu {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
}  
</style>```

操作步骤： 

<template>  
    <view class="content">  
        <easypnp-navbar :showGoBack="true" bgColor="#FFFFFF">  
            <view slot="goBack" class="df-row-center">  
                <image style="width: 40rpx;height: 40rpx;" src="/static/images/goBack.png"></image>  
            </view>  
            <view slot="title"><text style="color: #000;font-size: 36rpx;">商品分类</text></view>  
        </easypnp-navbar>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>  
子组件：  
<template>  
    <view class="easypnp-navbar" :class="[fixed ? 'fixed' : 'easypnp-navbar']" :style="{backgroundColor: bgColor}">  
        <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>  
        <view class="navbar" :style="{height: navBarHeight}">  
            <view class="goBack" :style="{left: goBackLeft, height: navBarHeight}" v-if="showGoBack" @click="clickGoBack"><slot name="goBack"></slot></view>  
            <view class="title"><slot name="title"></slot></view>  
            <view class="menu" :style="{right: MenuRight, height: navBarHeight}" v-if="showMenu" @click="clickMenu"><slot name="menu"></slot></view>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    components: {},  
    props: {  
        goBackLeft: {  
            type: String,  
            default: '30rpx'  
        },  
        MenuRight: {  
            type: String,  
            default: '30rpx'  
        },  
        bgColor: {  
            type: String,  
            default: '#fff'  
        },  
        fixed: {  
            type: String,  
            default: 'easypnp-navbar'  
        },  
        /* 导航栏高度 */  
        navBarHeight: {  
            type: String,  
            default: '88rpx'  
        },  
        /* 是否显示返回按钮 */  
        showGoBack: {  
            type: Boolean,  
            default: false  
        },  
        /* 是否显示菜单按钮 */  
        showMenu: {  
            type: Boolean,  
            default: false  
        }  
    },  
    data() {  
        return {  
            /* 状态栏高度 */  
            statusBarHeight: 0  
        };  
    },  
    created() {  
        this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;  
    },  
    methods: {  
        clickGoBack() {  
            uni.navigateBack({  
                delta: 1  
            });  
        },  
        clickMenu() {  
            this.$emit('clickMenu');  
        }  
    }  
};  
</script>  

<style lang="scss" scoped>  
.fixed {  
    position: fixed;  
    left: 0;  
    right: 0;  
    top: 0;  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    z-index: 99999999;  
    /* #endif */  
}  
.easypnp-navbar {  
    background-color: #fff;  
}  
.navbar {  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
    justify-content: center;  
    position: relative;  
}  
.goBack {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    display: flex;  
    z-index: 999999;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
}  
.title {  
    flex: 1;  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
    justify-content: center;  
}  
.menu {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
}  
</style>```

预期结果： 

<template>  
    <view class="content">  
        <easypnp-navbar :showGoBack="true" bgColor="#FFFFFF">  
            <view slot="goBack" class="df-row-center">  
                <image style="width: 40rpx;height: 40rpx;" src="/static/images/goBack.png"></image>  
            </view>  
            <view slot="title"><text style="color: #000;font-size: 36rpx;">商品分类</text></view>  
        </easypnp-navbar>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>  
子组件：  
<template>  
    <view class="easypnp-navbar" :class="[fixed ? 'fixed' : 'easypnp-navbar']" :style="{backgroundColor: bgColor}">  
        <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>  
        <view class="navbar" :style="{height: navBarHeight}">  
            <view class="goBack" :style="{left: goBackLeft, height: navBarHeight}" v-if="showGoBack" @click="clickGoBack"><slot name="goBack"></slot></view>  
            <view class="title"><slot name="title"></slot></view>  
            <view class="menu" :style="{right: MenuRight, height: navBarHeight}" v-if="showMenu" @click="clickMenu"><slot name="menu"></slot></view>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    components: {},  
    props: {  
        goBackLeft: {  
            type: String,  
            default: '30rpx'  
        },  
        MenuRight: {  
            type: String,  
            default: '30rpx'  
        },  
        bgColor: {  
            type: String,  
            default: '#fff'  
        },  
        fixed: {  
            type: String,  
            default: 'easypnp-navbar'  
        },  
        /* 导航栏高度 */  
        navBarHeight: {  
            type: String,  
            default: '88rpx'  
        },  
        /* 是否显示返回按钮 */  
        showGoBack: {  
            type: Boolean,  
            default: false  
        },  
        /* 是否显示菜单按钮 */  
        showMenu: {  
            type: Boolean,  
            default: false  
        }  
    },  
    data() {  
        return {  
            /* 状态栏高度 */  
            statusBarHeight: 0  
        };  
    },  
    created() {  
        this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;  
    },  
    methods: {  
        clickGoBack() {  
            uni.navigateBack({  
                delta: 1  
            });  
        },  
        clickMenu() {  
            this.$emit('clickMenu');  
        }  
    }  
};  
</script>  

<style lang="scss" scoped>  
.fixed {  
    position: fixed;  
    left: 0;  
    right: 0;  
    top: 0;  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    z-index: 99999999;  
    /* #endif */  
}  
.easypnp-navbar {  
    background-color: #fff;  
}  
.navbar {  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
    justify-content: center;  
    position: relative;  
}  
.goBack {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    display: flex;  
    z-index: 999999;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
}  
.title {  
    flex: 1;  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
    justify-content: center;  
}  
.menu {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
}  
</style>```

实际结果： 

<template>  
    <view class="content">  
        <easypnp-navbar :showGoBack="true" bgColor="#FFFFFF">  
            <view slot="goBack" class="df-row-center">  
                <image style="width: 40rpx;height: 40rpx;" src="/static/images/goBack.png"></image>  
            </view>  
            <view slot="title"><text style="color: #000;font-size: 36rpx;">商品分类</text></view>  
        </easypnp-navbar>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>  
子组件：  
<template>  
    <view class="easypnp-navbar" :class="[fixed ? 'fixed' : 'easypnp-navbar']" :style="{backgroundColor: bgColor}">  
        <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>  
        <view class="navbar" :style="{height: navBarHeight}">  
            <view class="goBack" :style="{left: goBackLeft, height: navBarHeight}" v-if="showGoBack" @click="clickGoBack"><slot name="goBack"></slot></view>  
            <view class="title"><slot name="title"></slot></view>  
            <view class="menu" :style="{right: MenuRight, height: navBarHeight}" v-if="showMenu" @click="clickMenu"><slot name="menu"></slot></view>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    components: {},  
    props: {  
        goBackLeft: {  
            type: String,  
            default: '30rpx'  
        },  
        MenuRight: {  
            type: String,  
            default: '30rpx'  
        },  
        bgColor: {  
            type: String,  
            default: '#fff'  
        },  
        fixed: {  
            type: String,  
            default: 'easypnp-navbar'  
        },  
        /* 导航栏高度 */  
        navBarHeight: {  
            type: String,  
            default: '88rpx'  
        },  
        /* 是否显示返回按钮 */  
        showGoBack: {  
            type: Boolean,  
            default: false  
        },  
        /* 是否显示菜单按钮 */  
        showMenu: {  
            type: Boolean,  
            default: false  
        }  
    },  
    data() {  
        return {  
            /* 状态栏高度 */  
            statusBarHeight: 0  
        };  
    },  
    created() {  
        this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;  
    },  
    methods: {  
        clickGoBack() {  
            uni.navigateBack({  
                delta: 1  
            });  
        },  
        clickMenu() {  
            this.$emit('clickMenu');  
        }  
    }  
};  
</script>  

<style lang="scss" scoped>  
.fixed {  
    position: fixed;  
    left: 0;  
    right: 0;  
    top: 0;  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    z-index: 99999999;  
    /* #endif */  
}  
.easypnp-navbar {  
    background-color: #fff;  
}  
.navbar {  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
    justify-content: center;  
    position: relative;  
}  
.goBack {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    display: flex;  
    z-index: 999999;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
}  
.title {  
    flex: 1;  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
    justify-content: center;  
}  
.menu {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
    align-items: center;  
}  
</style>```

bug描述：

自定义组件navbar中使用slot插槽，在hbuilderx编辑器创建的项目vue2版本slot生效，切换成vue3版本slot不生效。

  • demo.zip
    • 2022-03-15 14:07 负责人:无 分享

    没有找到相关结果

      已邀请:
      为什么被折叠? 0 个回复被折叠

      该问题目前已经被锁定, 无法添加新回复

      退出全屏模式 全屏模式 回复
      友情链接
      优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 艾普阳科技 申请友链

      DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

      京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

      | | 违法违规信息举报