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

Vue2 在扩展表 vuetify 中看不到对象的更新

我在 Vue2 中遇到反应性问题我在 Vuex 中有一个对象数组，这些对象显示在 v-data-table 中，在每个对象内部我有一个数组，当行展开时，该数组填充了数据，我...

javascript vuejs2 vuetify.js vuex vuetify2

回答 1 投票 0

使用 JEST 对 Vue.js 路由器进行单元测试 - 如何模拟页面？

我正在尝试对我的路由器路由进行单元测试，并且根据各种示例，我提出了一些测试用例。我已将路由器分成单独的模块，用于路由、防护装置和路由器......

javascript vuejs2 jestjs

回答 2 投票 0

使用VueJS在另一个窗口中打开PDF文件

在我之前的 Angular 应用程序中，我能够在另一个窗口中打开我的简历，如下所示：在我之前的 Angular 应用程序中，我可以在另一个窗口中打开我的简历，如下所示： <a class="link popup" href="javascript:void(0);" onclick="javascipt:window.open('./../../assets/Resume_Christopher_Kade.pdf');">Resume</a> 在用 Vue 重写我的网站时，我注意到它没有按预期工作，将其更改为： <a class="link popup" href="javascript:void(0);" v-on:click="openPdf()">Resume</a> 在我的组件方法中使用 openPdf()： openPdf () { javascipt:window.open('./../assets/Resume_Christopher_Kade.pdf'); } 单击链接时，将打开一个新页面，并显示以下 URL： http://localhost:8080/assets/Resume_Christopher_Kade.pdf 同时在屏幕上显示空路线，而不是在浏览器的 pdf 查看器中显示 pdf。这个问题可能与我在 Vue 中处理路由的方式有关： export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Home', component: Home }, { path: '/work', name: 'Work', component: Work }, { path: '/posts', name: 'Posts', component: Posts }, { path: '*', component: Home } ] }) 为什么它不像 Angular 那样简单？我是不是错过了什么？你想出来了吗？我的解决方案适用于使用本地运行的 Vue CLI 3 创建的项目（我还没有构建我的项目）。我的问题和你的类似。我只是想要 <a> 链接在新选项卡上打开我的 pdf 文件，但我的 url 将单个哈希连接到我的路径并将我重定向到我的主页。这是一个非常简单的修复： <a href="./resume.pdf" target="_blank">resume</a> 只是一个点、正斜杠和我的文件名。我的文件位于 root > public 文件夹下。相对路径导入当您使用相对路径引用静态资源时（必须以 .) 在 JavaScript、CSS 或 *.vue 文件中，资源将被包含进入 webpack 的依赖关系图... https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports 当我尝试做同样的事情时，出现以下错误：暴露我的简历 ./src/assets/resume/Gabriel_Teixeira_Soares_de_Almeida_Resume.pdf 中的错误 1:0 模块解析失败：意外的标记 (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders （此二进制文件省略源代码）为了简化这个过程，我看到一些页面重定向到谷歌驱动器链接，所以你仍然可以href，但到你的域之外的链接 <v-btn v-bind:href="resumeLink" target="_blank" color="primary" > <label class="primaryText--text font-weight-light"> Resume </label> </v-btn> “resumeLink”与我的驱动器 PDF 的链接相同对于云中的项目，您可能会获得 Blob 文件 URL 假设您有 Vue CLI 默认生成的 static 文件夹，您可以简单地将 PDF 放在那里并按如下方式操作 <a href="./../static/file.pdf" target="_blank">。

pdf vue.js vuejs2

回答 3 投票 0

在路线更改时更新 VueJs 组件

有没有办法在路由更改时重新渲染组件？我正在使用 Vue Router 2.3.0，并且在多个路由中使用相同的组件。第一次使用效果很好，或者如果我导航到的路线

vue.js vuejs2 vue-component

回答 7 投票 0

获取当前显示的v-data-table页面中显示的值列表

我在项目中使用了 vuejs2 中的 v-data-table 和多个用户页面，在一组列中显示他们的信息（每页显示 25 个用户，总共 60 000 多个用户）。我想得到

javascript vue.js vuejs2 vuetify.js v-data-table

回答 1 投票 0

vuejs2 相关问题

最新问题