vuejs2 相关问题

vue.js 和 laravel scorm 集成

我们正在尝试在我们的平台上实施 Articulate SCORM 文件。 我们的环境由用于 API 的 Laravel 和用于前端的 vue.js 组成。 我们设法将文件正确存储在数据库中...

将数据从父组件传递到子组件

我正在通过youtube视频在线学习vuejs，我了解到为了将数据从父组件传递到子组件，我们在父组件中使用v-bind，在子组件中使用props，但是在我创建了我的第一个项目之后...

Vuetify 主题设置在 Storybook 中不起作用

（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, })

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

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

如何从 v-select 访问对象？

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

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

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

获取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) } 当我单击表格的排序箭头时，它会调用我的函数并向我显示排序的“上下文”：

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

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

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

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

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

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

使用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">。

在路线更改时更新 VueJs 组件

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

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

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

将文本复制到剪贴板：无法读取未定义的读取“writeText”的属性

我有一个按钮 当我点击复制时 copyImageLinkText({ mouseenter, mouseleave }, e) { this.showCopiedText = !this.showCopiedText navigator.clipboard.writeText(this.imageLink) 清除超时(

更改element-ui工具提示的背景颜色

我正在使用 vue.js 2.6.10 和 element-ui 2.15.1。 我有以下 element-ui 组件： 黑暗 我正在使用 vue.js 2.6.10 和 element-ui 2.15.1。 我有以下 element-ui 组件： <el-tooltip content="Top center" placement="top"> <span>Dark</span> </el-tooltip> 默认情况下，我会得到一个黑色背景的工具提示。 从文档我看到有effect属性，其可接受的值为dark/light。 请问有没有办法改变el-tooltip的背景颜色？ 编辑： 尝试过： <el-tooltip content="Top center" placement="top" effect="light" class="custom-tooltip"> <span>Dark</span> </el-tooltip> <style scoped> .custom-tooltip { background-color: #ffcc00; color: #000; } </style> 并得到： 也尝试过（按照示例）： <el-tooltip content="Top center" placement="top" effect="light" effect="customized"> <span>Dark</span> </el-tooltip> <style> .el-popper.is-customized { /* Set padding to ensure the height is 32px */ padding: 6px 12px; background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129)); } .el-popper.is-customized .el-popper__arrow::before { background: linear-gradient(45deg, #b2e68d, #bce689); right: 0; } </style> 并得到： 您可能需要覆盖原始 CSS，例如： <template> <el-tooltip content="Top center" placement="top" effect="light" class="custom-tooltip"> <span>Dark</span> </el-tooltip> </template> <style scoped> .custom-tooltip { background-color: #ffcc00; color: #000; } </style> 只要您知道要选择正确的元素，就始终可以使用 CSS 来实现自定义样式。我使用 Vue 2 和 Element UI v2 创建了一个 codepen 并检查了 DOM 以确定需要应用哪些 CSS。这是我想到的： <el-tooltip content="Top center" placement="top" effect="customized"> <el-button>Custom Tooltip</el-button> </el-tooltip> /* tooltip body */ .el-tooltip__popper.is-customized { background: #50C878; } /* tooltip arrow body */ .el-tooltip__popper.is-customized .popper__arrow { border-top-color: #50C878; } /* tooltip arrow border */ .el-tooltip__popper.is-customized .popper__arrow::after { border-top-color: #50C878; } 上面的代码仅适用于带有 placement="top" 的工具提示。对于其他展示位置，您需要更改 border-{placement}-color 进行匹配。例如： placement="bottom"需要改变border-bottom-color placement="left"需要改变border-left-color 如果您需要自定义多个不同位置的工具提示，则需要为每个工具提示指定一个唯一的 effect 名称，这会更改 .el-tooltip__popper.is-{effectName} 的 CSS 选择器，这样 CSS 就不会发生冲突。

VueJS：选择同一文件时未触发输入文件选择事件

我们如何在 Vue Js 中文件输入检测相同文件输入的更改

如何通过VueJS应用程序在Google Analytics 4中传递自定义用户维度？

我有一个 VueJS SPA，其中有用户特定信息，我希望在用户登录后将其作为每次点击的自定义维度在 GA 中发送。 我已经使用VueGtag插件来集成GA...

如何获取嵌套的金额数组，将它们除以月和日，然后返回一个新值？

我有一个获取用户列表的后端。每个用户每月支付订阅费用，有时可能会因其他因素而有所不同。 在前端我可以看到每个用户拥有的总金额...

如何在Vue JS中动态渲染组件？

我正在制作一个表单生成器，它使用其中的组件作为输入字段、按钮等。我希望能够根据我传递给它的选项来生成表单。 但我无法让它渲染...

在 VueJS 2.x 中使用“脚本设置”

是一种编译时语法糖，用于在 VueJS 3.x 中使用的单文件组件 (SFC) 中使用 Composition API。我正在尝试让它在 VueJS 2.x 中工作。组合 API 是 </desc> <question vote="2"> <p><pre><code>&lt;script setup&gt;</code></pre> 是一种编译时语法糖，用于在 VueJS 3.x 中使用的单文件组件 (SFC) 中使用 <a href="https://v3.vuejs.org/api/composition-api.html#setup" rel="nofollow noreferrer">Composition API</a>。我正在尝试让它在 VueJS 2.x 中工作。 Composition API 作为一个单独的模块提供，可以安装在 Vue 2.x 项目中。我安装了该包并编译并运行，但我的绑定在输出中没有显示任何内容。即使是最简单的，例如：</p> <pre><code>&lt;script setup&gt; const msg = &#39;Hello!&#39; &lt;/script&gt; &lt;template&gt; &lt;div&gt;{{ msg }}&lt;/div&gt; &lt;/template&gt; </code></pre> <p>不在网页上显示任何内容。我是否遗漏了什么或者它不支持 Vue 2.x 项目？</p> </question> <answer tick="true" vote="4"> <p>根据 github 存储库，<pre><code>script setup</code></pre> 不是组合 api 的一部分，实现它是编译器的工作。 <a href="https://github.com/vuejs/composition-api/issues/785" rel="noreferrer">您可以在这个 Git Issue 中阅读更多内容</a></p> <p>创建了一个包来实现此功能，您可以在<a href="https://github.com/antfu/unplugin-vue2-script-setup" rel="noreferrer">here</a>找到它，但是它并没有完全实现规范，并且如果您浏览存储库，似乎还存在一些功能问题。</p> <p>总之，在生产环境中使用这个似乎不值得。</p> </answer> <answer tick="false" vote="0"> <p>Vue 2.7 支持<pre><code>&lt;script setup&gt;</code></pre>；请参阅<a href="https://blog.vuejs.org/posts/vue-2-7-naruto" rel="nofollow noreferrer">发布博客文章</a></p> </answer> </body></html>