s***@foxmail.com
s***@foxmail.com
  • 发布:2022-03-30 15:37
  • 更新:2022-03-30 17:54
  • 阅读:666

【报Bug】vue3 情况下 slot=“left”不显示

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win7 sp1

HBuilderX类型: 正式

HBuilderX版本号: 3.3.13

第三方开发者工具版本号: 1.05.2111300

基础库版本号: 2.21.4

项目创建方式: HBuilderX

示例代码:

<template>
<view class="container">
<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
title="自定义导航栏" @clickLeft="back" />
<uni-card is-full :isShadow="false">
<text
class="uni-h6">本导航栏为自定义组件,并非原生导航栏。除非原生导航栏无法满足需求,否则不推荐使用自定义导航栏组件。具体参考https://ask.dcloud.net.cn/article/34921</text>
</uni-card>
<uni-section title="基本用法" subTitle="使用 title 属性设置导航栏标题" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar title="标题" />
</view>
</uni-section>
<uni-section title="开启阴影" subTitle="使用 shadow 属性启用阴影" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" title="开启阴影" @clickLeft="back" />
</view>
</uni-section>
<uni-section title="开启暗黑模式" subTitle="使用 dark 属性设置暗黑模式" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" dark title="暗黑模式" @clickLeft="back" />
</view>
</uni-section>
<uni-section title="带返回箭头+右侧图标" subTitle="使用 left-icon/right-icon 设置左右图标" type="line"
style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" right-icon="cart" title="标题" />
</view>
</uni-section>
<uni-section title="左侧文字+右侧文字" subTitle="使用 left-text/right-text 设置左右文字" type="line"
style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" leftText="返回" rightText="设置" title="标题" />
</view>
</uni-section>
<uni-section title="自定义颜色" subTitle="使用 color/background-color 属性设置前景背景色" type="line"
style="margin-bottom: 3px;">
<view class="box-bg">
<view class="box-bg">
<uni-nav-bar dark color="#999" backgroundColor="#f5f5f5" shadow left-icon="left" leftText="返回"
rightText="设置" title="自定义颜色" />
</view>
</view>
</uni-section>
<uni-section title="自定义高度" subTitle="使用 height 修改组件高度" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<view class="box-bg">
<uni-nav-bar height="65px" dark shadow left-icon="left" leftText="返回" rightText="设置"
title="自定义高度" />
</view>
</view>
</uni-section>
<uni-section title="自定义内容" subTitle="使用 left/right/default 插槽自定义内容" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar>
<block slot="left">
<view class="city">
<view>
<text class="uni-nav-bar-text">{{ city }}</text>
</view>
<uni-icons type="arrowdown" color="#666" size="18" />
</view>
</block>
<view class="input-view">
<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
@confirm="confirm" />
</view>
<block slot="right">
<view class="city">
搜索
</view>
</block>
</uni-nav-bar>
</view>
</uni-section>

</view>  

</template>

操作步骤:

你看下就行

预期结果:

能正常显示

实际结果:

不显示 solt left

bug描述:

http://vue3-hellouniapp.dcloud.net.cn/pages/extUI/nav-bar/nav-bar

vue3 情况下 slot left不显示,你们demo也存在这个问题:

2022-03-30 15:37 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

Vue3 将不支持 slot="xxx" 的用法 ,请使用 v-slot:xxx 用法。详见文档说明
示例稍后更新,感谢您的反馈!

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