富文本渲染商品详情

最新推荐文章于 2024-07-13 15:31:22 发布

Lao乾妈官方认证唯一女友:D

最新推荐文章于 2024-07-13 15:31:22 发布

阅读量148

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_24385297/article/details/130902820

版权

文章展示了如何在Vue应用中使用自定义组件(Editor.vue)来显示商品详情数据。通过ref绑定和nextTick函数确保编辑器在数据加载后正确显示。当props记录中的productDesc存在时，会将产品描述赋值给goodsDetailData并调用showEditorFn来刷新富文本组件。

摘要由CSDN通过智能技术生成

实现效果图：
在这里插入图片描述

import Editor from "@/components/tools/Editor.vue";

<Editor :value="goodsDetailData" :estyle="'height:min-content'" class="disable" :no-toolbar="true" 
		:placeholder="''" v-if="showEditor"></Editor>

// 获取商品详情数据
const goodsDetailData = ref([] as any);

const getgoodsDetailData = () => {
  if (props?.record?.productDesc) {
    // goodsDetailData.value = JSON.parse(props?.record?.productDesc);
    goodsDetailData.value = props?.record?.productDesc;
    console.log(goodsDetailData.value, 'goodsDetailData.value');
    showEditorFn()
  }
};

//刷新富文本组件
const showEditor = ref(false)
const showEditorFn = () => {
  showEditor.value = false;
  nextTick(() => {
    showEditor.value = true;
  })
}