vue3 mixins使用示例

首先要创建mixins.js 文件

import { ref } from "vue";

export default function () {
  let ztStyle = ref("light");

  // 定义一个方法来切换主题
  let toggleStyle = () => {
    ztStyle.value = ztStyle.value === "light" ? "dark" : "light";
  };

  return {
    ztStyle,
    toggleStyle,
  };
}

然后就可以在各个页面组件中使用

<template>
  <!-- 添加一个div来应用主题样式 -->
  <div :class="ztStyle"></div>
  <button @click="toggleStyle">mixins切换主题</button>
</template>

<script setup>
import themeMixin from "@/plugins/mixins";

const { ztStyle, toggleStyle } = themeMixin();

</script>

<style scoped>
.light {
  width: 100px;
  height: 100px;
  background-color: #ffb7b7;
  color: #000;
}

.dark {
  width: 100px;
  height: 100px;
  background-color: #e1f68e;
  color: #fff;
}
</style>

样式也可以提取到公共样式组件，这样每个地方使用的时候就可以省略style中的内容