导入Vuetify 3函数useTheme()

Question

我正在尝试在 Google Apps 脚本应用程序中的运行时实现动态主题切换器。我的问题是我不知道如何将 vuetify 的 use theme() 函数导入到我的 Gas 项目中

如 Vuetify 文档中所述，我需要使用以下函数 useTheme() :

<template>
  <v-app>
    <v-btn @click="toggleTheme">toggle theme</v-btn>
    ...
  </v-app>
</template>

<script setup>
import { useTheme } from 'vuetify'

const theme = useTheme()

function toggleTheme () {
  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
}
</script>

但是我不知道如何在我的 Google scrip 应用程序项目中使用 import 命令

这就是我的项目的实际结构：我有两个文件带有 Vutify 脚本和模板的 Index.html 后端的 Code.gs - 仅处理 Google Sheets API

这是我的index.html 的示例

<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/3.4.8/vuetify-labs.min.js"
    integrity="sha512-5xeIAXqNP/DWGkolQzdPAL042aA4Lb8SCMy/Ju+9yzvf9SzfsbzICQwYyMrhbN8pG8m0LWhMl9BISpIDs8RquQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
....
</head>

<body>

<script setup>
Import {use theme} from vuetify;
</script>

<script type="module">
    const { createApp } = Vue;
        const { createVuetify } = Vuetify;

        const vuetify = createVuetify({
            theme: {
                defaultTheme: 'dark'
              }
            });
     
        createApp({
            template: "#app-template",

        methods: {

                  toggleTheme () {
                  this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
                    console.log(this.$vuetify.theme.dark);
                  },
}
})
.use(vuetify)
.mount("#app");
</body>

日志正确显示变量“dark”从 false 切换到 true 的布尔值

Answer 1

试试这个

代码.gs

function doGet(e) {
  return HtmlService
    .createHtmlOutputFromFile('index')
    .setTitle('Demo');
}

index.html

<!DOCTYPE html>
<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
</head>

<body>
  <div id="app"></div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
  <script type="text/x-template" id="app-template">
    <v-app>
        <v-card
          class="mx-auto"
          width="400"
          append-icon="mdi-human-greeting"
        >
          <template v-slot:title>
            Title
          </template>
          <v-card-text>
            Description
          </v-card-text>
        </v-card>
      </v-app>
    </script>
  <script>
    const { createApp } = Vue;
      const { createVuetify } = Vuetify;
      
      const vuetify = createVuetify(
        {
          theme: {
                defaultTheme: 'dark'
              }
        }
      );
      
      const app = createApp({
        template: "#app-template", 
      })
        .use(vuetify)
        .mount("#app");
  </script>
</body>

</html>

index.html 文件的代码从 answer 改编为 Vuetify 实例，cdn 不适用于 vuejs3。我刚刚改变了来自

const vuetify = createVuetify();

到

const vuetify = createVuetify(
        {
          theme: {
                defaultTheme: 'dark'
              }
        }
      );`

导入Vuetify 3函数useTheme()

问题描述投票：0回答：1

1个回答

最新问题

导入Vuetify 3函数useTheme()

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1