显示PrimeVue标记的html Toast

Question

如何实现在原始吐司消息中显示链接？我不能使用v-html指令，并且三元括号不起作用。有没有人有别的办法解决这个问题？

Answer 1

一种老套的方法是扩展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吐司)

<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>