问题标签 [vue-material]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
597 浏览

vue.js - VueJs Material 插件无法正常工作

我想在我的应用程序中使用 vue-material 包。我拥有文档建议的所有内容,但我的组件没有正确呈现。我正在使用 VueJs 2.xx

这是我的 main.js 文件:

这是 App.vue:

以及使用插件的页面:

0 投票
2 回答
4154 浏览

vue.js - Vue Material - 为表格按钮设计样式?

我正在玩VueVue Material组件,特别是Table 组件

我想做的是更改标题为表示例中的搜索图标/按钮的颜色,Within cards with Pagination and Inline Edit但似乎我必须遗漏一些东西,因为我无法让它从默认的灰色颜色改变,我是努力理解为什么会这样。

我有一个基本页面,其中包含 Vue 以及 Vue 材料所需的字体和图标以及它工作所需的 Javascript 和 CSS 文件。

索引.html

应用程序.js

当我加载页面时,我会像示例一样获得带有表格的应用程序。当我单击搜索图标时,我可以从该方法中看到控制台日志,toggleSearch()并且它按预期在布尔值之间变化,但是,搜索图标的颜色没有改变。

查看搜索按钮的组件 HTML:

我使用 if / else 条件在重音类和我假设的默认灰色之间切换,具体取决于布尔值searchEnabled,这适用于独立按钮,但不适用于表格内部。

任何人都可以提出一个为什么会发生这种情况的原因,或者我应该如何在表格中设置这个按钮的样式。任何输入或反馈将不胜感激,非常感谢!

(如果您可以建议 Vue 中是否有一种方法可以有条件地应用一个类,即代替使用v-ifv-else复制图标元素,那么我是否有另一种方法可以基于布尔值应用该类并只使用一个图标元素?)

0 投票
0 回答
279 浏览

vuejs2 - 如何创建自动折叠侧导航

vue-material 的站点有一个非常好的side-nav,当窗口变窄时它会崩溃。这是怎么做到的?

side-nav当窗口很宽时: 在此处输入图像描述

side-nav窗口窄时 折叠:在此处输入图像描述

0 投票
1 回答
710 浏览

vuejs2 - 将 vue-material 组件扩展为我自己的组件

我想扩展 Vue-Material 组件,以便我可以在我的项目中抽象它们;例如,有一个名为“my-icon”的图标组件,它会简单地继承/扩展 md-icon 组件。所以在我的项目中我可以使用它,它只会使用 md-icon。

我尝试使用以下方法创建 MyIcon/index.js:

并得到错误:

[Vue 警告]:无法挂载组件:未定义模板或渲染函数。

我真的很希望能够扩展这些组件,而不必为每个组件定义模板,因为那样会重复很多工作。在一个完美的世界里,我可以使用现有的 vue-material 组件,将它们重命名为我想要的,并有能力通过覆盖模板来扩展功能。这样,我可以在大部分工作中使用 vue-material 组件,并在需要时添加/替换,而无需在上游修改我的工作。

有人对此有任何建议/想法吗?

0 投票
0 回答
1440 浏览

javascript - 如何在vue材料的工具栏下方制作一个sidenav?

所以我将 vuejs 与vue-material一起使用,但我遇到了问题。

所以这就是没有固定侧导航的样子。

在此处输入图像描述

当我添加一个sidenav ..

在此处输入图像描述

如您所见,工具栏位于导航栏下方,这不是我想要做的。我想要工具栏下的sidenav。

我当前的代码:

任何帮助将非常感激。

0 投票
2 回答
339 浏览

node.js - 无法使用 vue-cli 和 webpack 获取“./MongoDB”

我有一些问题要添加 mongodb,我的 git 是:

https://github.com/yoavshtainer/NodeWebpackTest

我的错误是:

找不到模块'./MongoDB'

我正在windows 10使用vue-cliwebpack

我的包裹:

我检查了我的package.jsonmongo在其中尝试更改路径,但没有任何效果。

0 投票
1 回答
241 浏览

html - 如何模拟 Google 应用程序模式?

在 Google 的所有应用程序上,它们都有一个小apps按钮 ( https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_apps_black_24px.svg ),可以打开如下模式:

模态图像

我将如何模拟这种模式类型(模式和带标签的图标)?我正在使用 VueJS 和Vue Material,但我有一种强烈的感觉,这超出了两者的范围。

0 投票
2 回答
1659 浏览

vue.js - Vue 和 Vue Material 的缓慢输入

我正在使用 VueJs 2.0 和Vue Material。我正在渲染一个包含多个输入字段和/或选择字段(VueMaterial 组件)的行的表格。

当将数据输入输入时,组件变得非常慢。这是JSFiddle 上的现场演示,以更好地演示该问题。

在输入文本输入时尝试保留一个字母。随着更多的行,即使是正常的打字也会变得很慢。

知道如何解决这个问题吗?

0 投票
1 回答
47874 浏览

javascript - VueJS:@keydown、@keyup 和 this.$refs 适用于输入,但不适用于 md-textarea

我已经使用vue.js. 对于“打字框”,我使用了<input>,一切正常。然而,当我在我的游戏中添加更多关卡,让用户输入更长的句子时,我已经确定需要将我的<input>元素更改为<md-textarea>- 一个vue.js组件。

问题:

以下可以正常使用的属性<input>将无法按预期使用<md-textarea>

  • @keyup="checkAnswer()"
  • @keydown="keymonitor"
  • @keydown.ctrl.86="noPaste"(防止粘贴通过Ctrl+V
  • @keydown.shift.45="noPaste"(防止粘贴通过Shift+Insert
  • ref="typeBox"(允许通过 关注元素this.$refs.typeBox[0].focus()

请参考下面的代码。

我错过了什么吗?请帮我调试一下。谢谢你。

注意:我知道它会在 SO 片段功能中引发错误,但我的开发环境中不存在该错误。

0 投票
1 回答
829 浏览

webpack - 我如何使用功能齐全的 Webpack 在 Vue js 中做静态页面

我正在使用:
- 功能齐全的 Webpack。
- vue-material(材料设计)

我的应用是 SPA(单页应用)。

我需要创建一个带有营销和区域的主页以登录和链接以创建新用户。在这个初始页面中,我不需要工具栏、Sidenav 等......

在此页面中,我需要 SEO。

我想到了一些混合... SPA + 一些页面。

我应该在静态文件夹中创建一个页面(html)吗?我不知道如何为此配置路由...

解决这个问题的最佳方法是什么?