封装一个不同小标题对应不同的文字颜色

 我们在做列表渲染的时候 经常会根据额后端给的数据字典来判断属于什么  如果说文字都是一个颜色 我们可以不用判断，但是想么麻烦的 不能在页面每个都要判断 这样就太麻烦了 ，所以要封装一个类型 

 封装一个 style.js 文件

export function getStyle(text) {
  let style = {};
  switch (text) {
    case '公园游乐园':
      style = {
        height: '28rpx',
        background: '#4ccfff',
        borderRadius: '6rpx',
        fontSize: '20rpx',
        color: '#fff',
        width: '106rpx',
        lineHeight: '28rpx',
        textAlign: 'center'
      };
      break;
    case '名胜古迹':
      style = {
        height: '28rpx',
        background: '#FFAB19',
        borderRadius: '6rpx',
        fontSize: '20rpx',
        color: '#fff',
        width: '98rpx',
        lineHeight: '28rpx',
        textAlign: 'center'
      };
      break;
    case '度假观光':
      style = {
        height: '28rpx',
        background: '#299CED',
        borderRadius: '6rpx',
        fontSize: '20rpx',
        color: '#fff',
        width: '98rpx',
        lineHeight: '28rpx',
        textAlign: 'center'
      };
      break;
    case '宗教圣地':
      style = {
        height: '28rpx',
        background: '#FF5400',
        borderRadius: '6rpx',
        fontSize: '20rpx',
        color: '#fff',
        width: '98rpx',
        lineHeight: '28rpx',
        textAlign: 'center'
      };
      break;
    case '红色经典':
      style = {
        height: '28rpx',
        background: '#FF1919',
        borderRadius: '6rpx',
        fontSize: '20rpx',
        color: '#fff',
        width: '98rpx',
        lineHeight: '28rpx',
        textAlign: 'center'
      };
      break;
    case '自然风光':
      style = {
        height: '28rpx',
        background: '#15AF00',
        borderRadius: '6rpx',
        fontSize: '20rpx',
        color: '#fff',
        width: '98rpx',
        lineHeight: '28rpx',
        textAlign: 'center'
      };
      break;
    case '名胜推荐':
      style = {
        height: '28rpx',
        background: '#AE00FF',
        borderRadius: '6rpx',
        fontSize: '20rpx',
        color: '#fff',
        width: '98rpx',
        lineHeight: '28rpx',
        textAlign: 'center'
      };

      break;
    case '动植物园':
      style = {
        height: '28rpx',
        background: '#00AF88',
        borderRadius: '6rpx',
        fontSize: '20rpx',
        color: '#fff',
        width: '98rpx',
        lineHeight: '28rpx',
        textAlign: 'center'
      };

      break;
    case '影视基地':
      style = {
        height: '28rpx',
        background: '#8A6959',
        borderRadius: '6rpx',
        fontSize: '20rpx',
        color: '#fff',
        width: '98rpx',
        lineHeight: '28rpx',
        textAlign: 'center'
      };

      break;
    case '特色街区':
      style = {
        height: '28rpx',
        background: '#B63C00',
        borderRadius: '6rpx',
        fontSize: '20rpx',
        color: '#fff',
        width: '98rpx',
        lineHeight: '28rpx',
        textAlign: 'center'
      };

      break;
    case '博物馆':
      style = {
        height: '28rpx',
        background: '#1d71fc',
        borderRadius: '6rpx',
        fontSize: '20rpx',
        color: '#fff',
        width: '98rpx',
        lineHeight: '28rpx',
        textAlign: 'center'
      };
      break;
    case '故居纪念馆':
      style = {
        height: '28rpx',
        background: '#741E1E',
        borderRadius: '6rpx',
        fontSize: '20rpx',
        color: '#fff',
        width: '98rpx',
        lineHeight: '28rpx',
        textAlign: 'center'
      };
      break;
  }
  return style;
}

 

<template>
  <view>
    <view class="Attractions_box" v-for="(item,index) in HotList" :key="index" @click="onMapClick(item.id)">
      <view class="Attractions_hot">
        <image src="../../../static/homePage/hot.png" mode="" class="hot_icon" v-if="item.isHot"></image>
      </view>
      <view class="Attractions_box_left">
        <image :src="item.coverImg" mode="" class="Attractions_icon"></image>
      </view>
      <view class="Attractions_box_right">
        <view class="Content_details">
          <view class="Content_details_up">
            <text class="details_name">{{item.name}}</text>
            <view class="distance" v-if="item.distance">
              <image src="../../../static/homePage/navigation.png" mode="" class="navigation_iocn"></image>
              <text class="km_distance">{{ getIntegerDistance(item.distance) }}</text>
            </view>
          </view>
          <view class="particulars">{{item.description}}</view>
          <view class="distance distance_tag">
            <!-- 样式修改 如果没有几级景区 ,单独写一个样式 -->
            <view class="label_box_level" v-if="item.level">{{item.level}}A</view>
            <!-- #ifdef APP -->
            <view :style="getDynamicStyle(item.tag)">{{item.tag}}</view>
            <!-- #endif -->
          </view>
          <view class="distance">
            <view class="explain_box">
              <image src="../../../static/homePage/listine.png" mode="" class="listine_icon"></image>
              <text class="listine_text"><text class="demo1">{{item.markerNum}}</text>处讲解</text>
              <image src="../../../static/homePage/line.png" mode="" class="line_cion"></image>
              <text class="go_explain"><text class="demo1">{{item.viewNum?item.viewNum:'10'}}</text>w人去过</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getStyle
  } from '../../../utils/style.js'
  export default {
    props: {
      ScenicListArry: {
        type: Array
      }
    },
    data() {
      return {
        HotList: [],
        expireDate: '',
        style: {}
      }
    },
    watch: {
      ScenicListArry: {
        deep: true,
        handler(nVal, oVal) {
          if (nVal) {
            this.HotList = nVal

          }
        },
      },
    },
    computed: {
      getDynamicStyle() {
        return function(tag) {
          return getStyle(tag);
        };
      }
    },
    methods: {
      getIntegerDistance(distance) {
        // 将距离从米转换为千米并保留一位小数
        const kmDistance = (distance / 1000).toFixed(1); // 将距离除以1000并保留一位小数
        return kmDistance + 'km';
      }


    }
  }
</script>