vue3+pinia实现动态类名及动态颜色

前提

store下models下有个before.ts文件

import { defineStore } from "pinia";
export const usebeforeloggininStore = defineStore("counterStore", {
  state: () => ({
    beforelogin_params: [
      {
        type: "A登录",
        color: "#000",
        flag: 1,
      },
      {
        type: "B登录",
        color: "#fff",
        flag: 2,
      },
      {
        type: "C登录",
        color: "#620",
        flag: 3,
      },
    ],
  }),
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

1. 动态类名

view页面中

<template>
  <div class="beforelogin-container">
    <div class="container-in">
      <div v-for="item in beforeData" :key="item.type" class="loginbox">
      // 动态类名在这里
        <div class="nei" :class="[`color${item.flag}`]">
          <h1 @click="login(item.type)">去登录{{ item.type }}</h1>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { usebeforeloggininStore } from "@/store/before";
const beforelogginginStore = usebeforeloggininStore();
const beforeData = beforelogginginStore.beforelogin_params;
const router = useRouter();

const login = (params: any) => {
  router.push({ path: "/login", params: params });
  console.log("params", params);
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2. 动态颜色

view页面中

<template>
  <div class="beforelogin-container">
    <div class="container-in">
      <div v-for="item in beforeData" :key="item.type" class="loginbox">
      // 动态颜色样式在这里
        <div class="nei" :style="{ backgroundColor: item.color }">
          <h1 @click="login(item.type)">去登录{{ item.type }}</h1>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { usebeforeloggininStore } from "@/store/before";
const beforelogginginStore = usebeforeloggininStore();
const beforeData = beforelogginginStore.beforelogin_params;
const router = useRouter();

const login = (params: any) => {
  router.push({ path: "/login", params: params });
  console.log("params", params);
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26