显示 html 个标签的 PrimeVue Toast

Question

如何实现在 primevue toast 消息中显示 link？我不能使用 v-html 指令并且三括号不起作用。有人知道如何解决吗？

Answer 1

一个 hacky 方法是扩展 Toast 组件：

这里是一个codesandbox：https://codesandbox.io/s/extend-primevue-toast-o5o1c?file=/src/CustomToastMessage.vue

1。在你的组件上

在需要调用它的地方导入您的自定义 toast 组件。$toast:

<template>
  <div>
    <CustomToast />
    <CustomToast position="top-left" group="tl" />
    <CustomToast position="bottom-left" group="bl" />
    <CustomToast position="bottom-right" group="br" />

    <div class="card">
      <Button @click="test" label="test" />
    </div>
  </div>
</template>

<script>
import CustomToast from "./CustomToast.vue";
export default {
  components: {
    CustomToast,
  },
  data() {
    return {
      messages: [],
    };
  },
  methods: {
    test() {
      this.$toast.add({
        severity: "success",
        summary: "Test",
        detail: "<b>Test Bold</b>",
      });
    },
  },
};
</script>

2。 CustomToast.vue（扩展 primevue toast）

<template>
  <Teleport to="body">
    <div ref="container" :class="containerClass" v-bind="$attrs">
      <transition-group name="p-toast-message" tag="div" @enter="onEnter">
        <CustomToastMessage
          v-for="msg of messages"
          :key="msg.id"
          :message="msg"
          @close="remove($event)"
        />
      </transition-group>
    </div>
  </Teleport>
</template>
<script>
import Toast from "primevue/toast/Toast.vue";
import CustomToastMessage from "./CustomToastMessage.vue";

export default {
  extends: Toast,
  components: {
    CustomToastMessage,
  },
};
</script>

3。 CustomToastMessage（扩展 primevue toastmessage）

在你想要 html

的地方添加 v-html

<template>
  <div
    :class="containerClass"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
  >
    <div class="p-toast-message-content">
      <span :class="iconClass"></span>
      <div class="p-toast-message-text">
        <span class="p-toast-summary">{{ message.summary }}</span>
        <div class="p-toast-detail" v-html="message.detail"></div>
      </div>
      <button
        class="p-toast-icon-close p-link"
        @click="onCloseClick"
        v-if="message.closable !== false"
        type="button"
        v-ripple
      >
        <span class="p-toast-icon-close-icon pi pi-times"></span>
      </button>
    </div>
  </div>
</template>

<script>
import ToastMessage from "primevue/toast/ToastMessage.vue";

export default {
  extends: ToastMessage,
};
</script>

Answer 2

有一个最简单的解决方案。

只需实施您自己的模板。

示例：

 <Toast :position="toastPosition">
        <template #message="slotProps">
            <span :class="iconClass"></span>
            <div class="p-toast-message-text">
                <span class="p-toast-summary">{{slotProps.message.summary}}</span>
                <div class="p-toast-detail" v-html="slotProps.message.detail" />
            </div>
        </template>
 </Toast>

显示 html 个标签的 PrimeVue Toast

PrimeVue Toast displaying html tags

toast

vue.js

primevue

1。在你的组件上

2。 CustomToast.vue（扩展 primevue toast）

3。 CustomToastMessage（扩展 primevue toastmessage）