Vue3+TS+VIte 动态路径

最新推荐文章于 2024-08-01 17:19:13 发布

原创最新推荐文章于 2024-08-01 17:19:13 发布 · 386 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

文章讲述了如何在Vue应用中处理后端返回的数据，包括从JSON文件中匹配SVG文件路径，动态加载并渲染SVG图像。主要涉及数据解析、匹配操作和组件间的通信。

      

for (let i = 0; i < c.esSourceData!.length; i++) {
        if (c.esSourceData !== undefined && c.esSourceData) {
          const responseData: any = c.esSourceData[i].tcpdata
          const htmlTagIndex = responseData.indexOf('<');
          let dataBeforeHTML: any
          if (htmlTagIndex !== -1) {
            dataBeforeHTML = responseData.substring(0, htmlTagIndex);
            c.esSourceData[i].tcpdata = dataBeforeHTML
          }
        }


        const activeCountryName = c.esSourceData[i].ipsdat_data_country;
        console.log(activeCountryName);

        if (activeCountryName) {
          const matchedCountry = allCountries.find((item) => item.name === activeCountryName);

          if (matchedCountry) {
      // 直接在当前搜索结果对象上添加svgFile字段
      c.esSourceData[i].svgFile = matchedCountry.svgFile;
      console.log('Matched country SVG:', matchedCountry.svgFile);
       }else {
      console.log('No matching country found for:', activeCountryName);
          }
        }
        // countryInfo.value = countryInfoList


        const son = c.esSourceData![i];
        const newItem = { _score: c.esSourceData![i] };
        SearchList.value.push(newItem);
        console.log(SearchList.value);

allCountries为json文件，去拿后端获取到的数据跟json的name相匹配，如果匹配就把json的svgFile也就是路径传到SearchList.value里面

ManiContainer.vue

  <img :src="countrySvgSrc">


const countrySvgSrc = ref('');


watchEffect(() => {
    for (const item of SearchList.value) {
        if (item._score && item._score.svgFile) { // 检查 _score 和 svgFile 是否存在
            getCountrySvgSrc(item._score.svgFile);
        }
    }
});

async function getCountrySvgSrc(value:string) {
    try {
        const imageModule = await import(`/@/assets/country_img/${value}.svg`);
        countrySvgSrc.value = imageModule.default;
    } catch (error) {
        console.error(`Failed to import SVG file for ${value}:`, error);
        // 如果导入失败，则设置默认的图片URL
        countrySvgSrc.value = require('/@/assets/country_img/China_CN.svg');
    }
}

另外一个页面接收到数据就去把数据进行判断，如果有svgfile的话再进行渲染，无的话就下一个

async把路径变为动态能显示的