vue+taro使用4.x版本nut-toast在微信小程序内容不展示

[dai-dcx]

NutUI 包名

@nutui/nutui-taro

NutUI 版本号

4.3.13

平台

weapp

重现链接

http://xingyun.jd.com/codingRoot/jda-tamp/demo-toast-taro/

重现步骤

按钮 <script setup> import { ref } from 'vue' const show = ref(false) const onClick = () => { show.value = true } </script>

初始化项目默认的index页面，打开即可复现toast内容不展示问题

期望的结果是什么？

toast内容可以正常展示

实际的结果是什么？

toast里msg内容不展示，title内容可以展示

环境信息

👽 Taro v4.0.6

Taro CLI 4.0.6 environment info:
System:
OS: macOS 15.0
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.20.4 - ~/.nvm/versions/node/v18.20.4/bin/node
npm: 10.7.0 - ~/.nvm/versions/node/v18.20.4/bin/npm
npmPackages:
@tarojs/cli: 4.0.4 => 4.0.4
@tarojs/components: 4.0.4 => 4.0.4
@tarojs/helper: 4.0.4 => 4.0.4
@tarojs/plugin-framework-vue3: 4.0.4 => 4.0.4
@tarojs/plugin-html: 4.0.4 => 4.0.4
@tarojs/plugin-platform-alipay: 4.0.4 => 4.0.4
@tarojs/plugin-platform-h5: 4.0.4 => 4.0.4
@tarojs/plugin-platform-jd: 4.0.4 => 4.0.4
@tarojs/plugin-platform-qq: 4.0.4 => 4.0.4
@tarojs/plugin-platform-swan: 4.0.4 => 4.0.4
@tarojs/plugin-platform-tt: 4.0.4 => 4.0.4
@tarojs/plugin-platform-weapp: 4.0.4 => 4.0.4
@tarojs/runtime: 4.0.4 => 4.0.4
@tarojs/shared: 4.0.4 => 4.0.4
@tarojs/taro: 4.0.4 => 4.0.4
@tarojs/taro-loader: 4.0.4 => 4.0.4
@tarojs/webpack5-runner: 4.0.4 => 4.0.4
babel-preset-taro: 4.0.4 => 4.0.4
eslint-config-taro: 4.0.4 => 4.0.4

其他补充信息

"vue": "^3.3.0"
"pnpm: "9.10.0"
"node": "18.20.4"

[stupidream]

我也遇到了，都没有人来解决的吗

[stupidream]

@eiinu

[ptko5]

我也遇到了weapp微信小程序，Taro v4.0.7，nutui-taro v4.3.13 存在问题
Taro 版本改为v3.6.26能正常

[wcldyx]

这个项目不维护了吗？

[sunday60004]

同样的问题，"@nutui/nutui-taro": "4.3.13" , "@tarojs/taro": "4.0.8", msg传值后，渲染出来的节点里内容为空

[paytham]

@sunday60004
@ptko5

同样的问题（Taro 4.x），看了源代码，目前能通过覆盖 slot 来实现功能的可用，示例代码如下（希望对社区的各位有帮助）：

<template>
  <nut-toast
    :msg="state.msg"
    :title="state.title"
    v-model:visible="state.show"
    @closed="onClosed"
    :type="state.type"
    :duration="state.duration"
    :cover="state.cover"
  >
    <template #default>
      <view class="nut-toast-inner" style="text-align: center">
        <view v-if="hasIcon" class="nut-toast-icon-wrapper">
          <component :is="renderIcon(iconName)" color="#ffffff"></component>
        </view>
        <div v-if="state.title" class="nut-toast-title">
          {{ state.title }}
        </div>
        <view class="nut-toast-text">{{ state.msg }}</view>
      </view>
    </template>
  </nut-toast>
</template>

<script setup lang="ts">
import { Component, computed, h, nextTick, onMounted, reactive, toRefs, watchEffect } from 'vue';
import { useToastStore } from '@/store/toast';
import { Failure, Loading, Success, Tips } from '@nutui/icons-vue-taro';

const toastStore = useToastStore();
const { type, msg, duration } = toRefs(toastStore.toastState);

const state = reactive({
  msg: '',
  type: 'text',
  show: false,
  cover: false,
  title: '',
  bottom: '',
  center: true,
  duration: 3000,
});

const renderIcon = (icon: Component, props?: any) => {
  if (icon) return h(icon, props);
  return '';
};

watchEffect(() => {
  if (type?.value && msg?.value) {
    state.msg = msg.value;
    state.type = type.value;
    state.duration = duration?.value ?? 100 * 3000;
    state.show = true;
  }
});

const hasIcon = computed(() => type?.value && type?.value !== 'text');
const iconName = computed(() => {
  if (!type?.value) {
    return null;
  }

  return {
    success: Success,
    fail: Failure,
    warn: Tips,
    loading: Loading,
  }[type.value] as any;
});

const onClosed = () => {
  state.show = false;
  toastStore.setToastState({ type: undefined, msg: undefined, duration: undefined });
};

onMounted(() => {
  nextTick(() => {
    toastStore.setToastState({
      type: 'fail',
      msg: 'Hello world',
    });
  });
});
</script>
<style scoped lang="scss"></style>

[SnowmanlooksCool]

同问

[baoaruhan]

到目前为止没有更新

[zhangzheng7856]

问题提了这么久了没人解决吗，