vuejs2 相关问题

（Vue 版本 - 2、Vuetify 和 Storybook - 最新）考虑以下简单的按钮组件：（Vue 版本 - 2、Vuetify 和 Storybook - 最新）考虑以下简单的按钮组件： <template> <v-btn round color="primary"> <slot></slot> </v-btn> </template> <script> export default { name: "test-button", } </script> 在App组件文件中，调用方式如下： <v-app> <v-layout column justify-center> <v-layout row justify-center align-center> <test-button @click="testBtnClicked"> Click It </test-button> </v-layout> </v-layout> </v-app> Vuetify 设置在 main.js 中如下所示： import Vue from 'vue'; import 'vuetify/dist/vuetify.min.css'; import Vuetify from "vuetify"; import colors from 'vuetify/es5/util/colors'; Vue.use(Vuetify, { theme: { primary: colors.indigo.base, info: colors.blue.lighten2, accent: colors.green.lighten1, error: colors.red.darken2 } }); 到目前为止，一切顺利 - 我在框架中间看到了一个漂亮的靛蓝色按钮，这正是我所期望的。现在，在 Storybook 配置中，我使用与 main.js 中相同的行来设置 Vuetify，我的 Storybook 文件如下所示： import { storiesOf } from "@storybook/vue"; import TestButton from "./TestButton.vue"; storiesOf("TestButton", module) .add("button template", () => ({ template: '<test-button :rounded="true">round</test-button>', components: {TestButton} })) 这会在 Storybook 中呈现按钮，但主题设置不会发生，即：按钮不是靛蓝色，而是白色。 Vuetify 的其余属性似乎都很好 - 它看起来像一个带有白色文本的 Vuetify 圆形按钮。我不确定这是 Vuetify 问题、Vue 问题还是 Storybook 问题（或者我的用户错误问题）。如果有人这样做过，我会很感激一些见解。这是我的 webpack.config.js （在 .storybook 中）： module.exports = (baseConfig, env, defaultConfig) => { defaultConfig.plugins.push(new VueLoaderPlugin()); return defaultConfig; }; 我也有这个问题读完vuetify的代码后，似乎CSS的生成，以及主题的注入都是在位于此处的VApp mixin app-theme中进行的。所以，我认为问题与故事书无关，而是与 vuetify 有关。通过用 v-app 包装我想要测试的组件，就可以了。所以，现在，请尝试在 config.js 中添加一个装饰器，如下所示： import { configure, addDecorator } from '@storybook/vue'; import 'vuetify/dist/vuetify.css'; import Vue from 'vue'; import Vuetify from 'vuetify'; Vue.use(Vuetify, { theme: { // your colors }, }); addDecorator(() => ({ template: '<v-app><story/></v-app>', })); ... 听起来不错吗？（也在 github 上回答：https://github.com/storybooks/storybook/issues/4256#issuecomment-440065778）我几个月前遇到了这个问题，所以它在我的脑海中并不是最新鲜的。您需要导入将 Vuetify 添加到 Vue 的插件。这是我的 config.js 文件夹中的 .storybook 文件。 // #### /.storybook/config.js import { configure } from '@storybook/vue'; import Vue from 'vue'; import Vuex from 'vuex'; // Vue plugins import '@/plugins/allPlugins'; // Install Vue plugins. Vue.use(Vuex); const req = require.context('../src', true, /\.stories\.js$/) function loadStories() { req.keys().forEach((filename) => req(filename)) } configure(loadStories, module); 插件/所有插件 import Vue from 'vue'; // <---- important import './vuetify'; // <---- important import WebCam from 'vue-web-cam'; import Chat from '@/libs/vue-beautiful-chat/index'; import './styles'; import './ellipsis'; import 'viewerjs/dist/viewer.css'; import Viewer from 'v-viewer'; Vue.use(WebCam); Vue.use(Chat); Vue.use(Viewer); 插件/vuetify import Vue from 'vue'; import { Vuetify, VApp, ... } from 'vuetify'; import colors from 'vuetify/es5/util/colors'; Vue.use(Vuetify, { components: { VApp, ... }, theme: { primary: colors.blue.lighten1, ... }, }); 我分离出所有插件的原因是因为自定义样式和其他插件在导入时我可以更好地控制。如果您需要自定义样式，则需要导入 Vuetify 插件和自定义样式。我正在使用 Vuetify 3，如何在 StoryBook 中启用主题默认值 export default createVuetify({ theme: { defaultTheme: 'light', themes: { light, dark, }, }, blueprint: md3, defaults: { VCheckbox: { color: 'primary', }, VTextField: { density: 'default', hideDetails: 'auto', }, VTextarea: { density: 'default', hideDetails: 'auto', rows: 1, rowHeight: 10, // autoGrow, }, VAutocomplete: { density: 'default', hideDetails: 'auto', }, VSelect: { density: 'default', hideDetails: 'auto', }, }, components: { ...labs, // vuetify beta components ...components, }, directives, })

vuejs2 vuetify.js storybook

回答 3 投票 0

Vue js3：如何在数组项目中添加路由器链接和图标

我有一系列导航项，包括我已添加到我正在制作的仪表板中的侧边栏组件中的子导航。我想为数组中的每个项目添加带有不同图标的路由器链接。我是...

vue.js vuejs2 vuejs3

回答 1 投票 0

如何从 v-select 访问对象？

这是我的规则。值数组看起来像 “价值观”：[ { "value_display": "碎云", “值”：“803” }, { ”

vue.js vuejs2 vue-component vuetify.js

回答 3 投票 0

Vuetify 2 x Vue.js 2 - 无法显示在文本字段中输入的预期值

我有一个包含自动单词的文本字段。这意味着在文本字段中输入的任何字母或字符都将自动替换。正如在文本字段中看到的，您无法自由输入任何内容...

vue.js vuejs2 vuetify.js

回答 1 投票 0

获取b表的上下文（排序值）

我想获取我的b表的上下文信息。该表是从我的组件中调用的：我想获取我的b表的上下文信息。该表是像我的组件中那样调用的： <b-table ... :sticky-header="true" :responsive="true" striped ... > 我可以在 vue devtool 中看到，当我单击排序时，我的 b 表的“上下文”包含我需要的信息：如何将这些信息获取到我的组件中？谢谢你也许我不清楚，但我可以找到我想要的：为了获取我的 b 表的上下文，我必须像这样实例化它： <b-table @context-changed="onContextChange($event)" > 并拥有这样的功能： onContextChange(event: any){ console.log(event) } 当我单击表格的排序箭头时，它会调用我的函数并向我显示排序的“上下文”：

vuejs2 bootstrap-vue

回答 1 投票 0

我使用 Vue Js 创建了一个 Img 组件。但 Img 没有显示

我使用 Vue Js 创建了一个 Img 组件。并且该组件被传递到位于同一目录中的头文件，Img组件包含一个父div。当我通过 Img 组件时...

vue.js vuejs2 vuejs3 vue-component vuetify.js

回答 1 投票 0

vuejs2 相关问题

最新问题