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/

重现步骤

初始化项目默认的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]

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

[hechengxixi]

Taro 4.0.9 解决办法： https://github.com/NervJS/taro/issues/16408#issuecomment-2322827691

[kiinlam]

Taro 4.0.9 解决办法： NervJS/taro#16408 (comment)

我试了添加这个alias，微信小程序开发者工具里直接报错了。是我写法不对？

import path from "path"

    alias: {
      '@tarojs/runtime': path.resolve(__dirname, '..','node_modules/@tarojs/runtime/dist/runtime.esm.js')
    },

微信开发者工具报错信息：

[hechengxixi]

Taro 4.0.9 解决办法： NervJS/taro#16408 (comment)

我试了添加这个alias，微信小程序开发者工具里直接报错了。是我写法不对？

import path from "path"

    alias: {
      '@tarojs/runtime': path.resolve(__dirname, '..','node_modules/@tarojs/runtime/dist/runtime.esm.js')
    },

微信开发者工具报错信息：

我是这么写的

[MeiEnHao]

     更改Toast.js的190行原码, 改为如下内容好使:
     createElementVNode("view", {
        class: "nut-toast-text"
      }, [
        createTextVNode(_ctx.msg)
      ], 8, _hoisted_3)

[wendingbao]

现在还没修复吗

[wcldyx]

现在还没修复吗

去东哥那里告状

[zhangzheng7856]

散了吧，这真的是KPI项目，提了两个issue，一个是构建成品把console去掉，一个是在某个组件手动引入另一个组件以规避控制台报的一个warning，结果被质疑了，我真的笑了，看来我的水平只能加入东哥的外卖团队

---- 回复的原邮件 ---- | 发件人 | @.> | | 日期 | 2025年04月23日 11:39 | | 收件人 | @.> | | 抄送至 | @.>@.> | | 主题 | Re: [jd-opensource/nutui] vue+taro使用4.x版本nut-toast在微信小程序内容不展示 (Issue #3210) |

现在还没修复吗

去东哥那里告状

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

wcldyx left a comment (jd-opensource/nutui#3210)

现在还没修复吗

去东哥那里告状

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>