动态获取后台自定义颜色赋值给前端

在这里插入图片描述

<template>
  <div class="info-wrapper">
    <div class="info text-center d-flex">
      <img v-if="businessInfo.logo" :src="businessInfo.logo" class="avatar" />
      <div class="name" :style="{color:fontColor}">{{businessInfo.company}}</div>
    </div>
    <div class="info d-flex justify-space-between">
      <div
        class="d-flex address"
        @click="$router.push(`/map/${businessInfo.longitude}/${businessInfo.latitude}`)"
      >
        <i class="iconfont iconditu-dibiao" :style="{color:buttonColor}"></i>
        <span class="line-clamp-1 address-text" :style="{color:fontColor}">{{businessInfo.address}}</span>
      </div>
      <div class="border-left info-item tel" @click="makePhoneCall">
        <i class="iconfont iconweb-icon- phone" :style="{color:buttonColor}"></i>
        <span class="tel-text" :style="{color:fontColor}">电话</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { mapGetters } from 'vuex';
import getHomeLayoutConfig, { getFollowList } from '@/API/home';

export default Vue.extend({
  data() {
    return {
      fontColor: '#000',
      buttonColor: '#ff6a01',
    };
  },
  methods: {
    makePhoneCall() {
      window.location.href = `tel:${this.businessInfo.compTel}`;
    },
  },
  computed: {
    ...mapGetters('business', {
      businessInfo: 'info',
    }),
  },
  created() {
    getHomeLayoutConfig().then(({ data: layoutItems }) => {
      const list = layoutItems.pack;
      list.forEach((item: { fontColor: any }, index: any) => {
        if (item.fontColor) {
          this.fontColor = item.fontColor;
        }
      });
      list.forEach((item: { buttonColor: any }, index: any) => {
        if (item.buttonColor) {
          this.buttonColor = item.buttonColor;
        }
      });
    });
  },
});
</script>

<style lang="scss" scoped>
.info-wrapper {
  position: relative;
  // background: red;
  padding: 30px 40px ;
  // margin-top: 1.4rem;
  .name {
    color: #323232;
    font-weight: 700;
  }
}
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 4px;
  margin-right: 20px;
}
.info {
  font-size: 14px;
}
.address-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 6rem;
  display: inline-block;
  font-size: 12px;
  line-height: 40px;
}
.address {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tel {
  margin-top: 20px;
  padding-left: 60px;
  border-left: 1px solid #efefef;
  flex-shrink: 0;
  .tel-text {
    margin-left: 10px;
  }
}
</style>

在Vue.js中,如果你需要根据后台返回的动态月份天数动态渲染一个日历,可以采用以下步骤: 1. **数据绑定**: 创建一个计算属性或使用`v-model`将后端返回的月份数组和总天数绑定到组件的状态中。假设你有一个名为`monthlyDates`的对象,它包含月份和对应天数。 ```javascript data() { return { monthlyDates: [], currentMonth: { // 当前显示的月份 name: '', days: [] } }; }, async created() { const response = await fetchYourMonthsData(); // 异步获取数据 this.monthlyDates = response.data; // 将数据赋值给每月日期数组 } ``` 2. **模板结构**: 使用Vue的`v-for`指令遍历每个月份,展示每一天,并在必要时更新当前显示的月份。 ```html <template> <div> <ul v-for="(month, index) in monthlyDates" :key="index"> <li :class="{ active: month.name === currentMonth.name }">{{ month.name }}</li> <!-- 列表项显示月份 --> <calendar :days="month.days" :current-month="currentMonth" /> <!-- 动态传入天数和月份信息 --> </ul> </div> </template> ``` 3. **日历组件**: 编写一个自定义的日历组件,接收`days`和`currentMonth`作为props,并根据这些数据渲染日历。 ```html <template> <div class="calendar"> <ul> <li v-for="(day, index) in days" :key="index" :class="{ selected: day === currentDay }">{{ day }}</li> </ul> </div> </template> <script> export default { props: { days: Array, currentMonth: Object }, data() { return { currentDay: 1 // 初始化当天为第一个日 }; } }; </script> ``` 4. **状态管理**: 如果你需要在用户交互时切换月份,可以在组件内部维护`currentMonth`的状态,或者通过事件系统从父组件传递。 完成上述步骤后,你应该就能根据后台返回的数据动态地渲染出日历了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值