标签: vue-material

假设我在我的 Vue 组件中添加了v-text-fieldVuetify 组件，例如

<v-text-field v-model="email"name="email" type="email" color="#90C143" label="Email">

当我检查该元素时，它会生成正常的 HTML，例如

<div class="v-input v-input--has-state theme--light v-text-field v-text-field--is-booted" style="">
      <div class="v-input__control">
        <div class="v-input__slot">
          <div class="v-text-field__slot">
            <label for="input-39" class="v-label theme--light" style="left: 0px; right: auto; position: absolute;">Email
            </label>
            <input name="email" id="input-39" type="email">
          </div>
          <div class="v-input__append-inner">
            <div class="v-input__icon v-input__icon--">
              <i role="button" class="v-icon notranslate v-icon--link material-icons theme--light" style="">                    
              </i>
            </div>
          </div>
        </div>
      </div>
    </div>

v-text-field如果我想在不影响功能的情况下自定义整个 CSS，我必须处理什么

我正在使用 vue-material 库开发 Vue3 项目。但使用 vue-material 库后，我收到以下错误r.default is not a constructor。我追查了一下，发现它来自于./node_module/vue-material/dist/components/index.js。我不知道我做错了什么。我的main.js文件代码如下

import {createApp,} from 'vue'
import { MdButton} from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
import App from './App.vue'

const app = createApp(App)
app.use(MdButton)
app.mount("#app");

我尽可能地尝试了所有可能的组合。

此外，如果我删除第二个导入import { MdButton} from 'vue-material/dist/components'和行app.use(MdButton). 一切都按预期工作，我猜只是 vue-material 导致了问题。我对这个主题做了一些研究，发现了这个https://github.com/vuematerial/vue-material/issues/312但不知道如何使用它。

我将感谢您在这个问题上的帮助？

我想添加一个覆盖整个页面的背景图像。然而这是它现在的样子：

我希望它跨越整个网页。这将如何在 vue.js 中完成？

我还想要一个动画工具栏，以便当页面不滚动时，工具栏是透明的，并具有背景图像的外观。当它滚动时，工具栏将具有当前的蓝色

这是我的小提琴

Vue.js 项目

这是 HTML

<template>
  <div id = "background">

            <div class = "" id = "explain">

                   <h1 class = "md-title">{{ message }}</h1>

                   <h3> Collect, analyse  and do better with data!</h3>

            </div>
<hr>
<md-layout id = "container">

            <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">

    <span class="md-headline">HOW does levi function ?</span>
            </md-layout>


<md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
  <h3>levi uses research and experimentation to provide
  'actionable knowledge' that you can use to <b>do well </b>in your environment. …

我通过将以下内容添加到我的 index.js 文件中来使用 Vue Material default-dark 主题...

// index.js Where the vue instance is instantiated

import 'vue-material/dist/theme/default-dark.css';
...
import Vue from "vue";
...
Vue.use(VueRouter);
const routes = [
    {
        path: '/',
        component: Viewport,
        ...
    }
]
...
window.app.$mount('#jg-app');

这很好用，但现在我想更改主题的颜色。为此，我将以下内容添加到我的模板中...

// viewport/Viewport.vue

<styles src="./Viewport.scss" lang="scss"></styles> 

并在 Viewport.scss （根据文档）...

# viewport/Viewport.scss

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default-dark", (
  primary: md-get-palette-color(green, A200), // The primary color of your application
  accent: md-get-palette-color(yellow, A200) // The accent or secondary color
));

@import …

我公司目前使用 Vue 和 scss 来构建我们最新的 PWA。给定某些条件（基于用户配置文件），左侧抽屉应替换为底部应用栏。

我们正在使用Vue Material，但我们的 UX 和 UI 设计师选择使用谷歌发布的最新版本的底部应用栏。

但是，这个特定组件的 CSS 尚未发布，并且不是 VueMaterial 组件库（目前支持旧版本）的一部分，我正在努力重现新栏的第二个版本。

我不能发布图片，所以这里是我所指的链接

我不明白如何使用仅使用 CSS 的解决方案来重现条形图和 FAB 之间的插图。我尝试使用 clip-path 和 mask-image 来解决这个问题，但没有取得多大成功。

任何帮助或指导将不胜感激。

我正在尝试将 vue-material 库移植到 ESM，以便我可以在项目中使用它。我正在尝试将 rollup 与 rollup-plugin-sass 一起使用。我有以下汇总配置...

import VuePlugin from 'rollup-plugin-vue';
import css from 'rollup-plugin-css-only';
import commonjs from 'rollup-plugin-commonjs';
import sass from 'rollup-plugin-sass';

// const external = Object.keys(pkg.dependencies);
const plugins = [
    commonjs(),
    VuePlugin(),
    sass(),
    css()
];
const globals = {
    vue: 'Vue'
};
module.exports = {
  plugins,
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'esm'
  }
};

但是，当我构建时，我得到...

[!]（VuePlugin 插件）错误：错误：找不到要导入的样式表。src/components/MdApp/MdApp.vue 131:9 根样式表

我检查了一下，第 131 行是...

@import "~components/MdAnimation/variables.scss";

该文件似乎确实存在于该src/components文件夹下，但未被识别。我也试过这个...

sass({
  includePaths: [ 'src/' ],
  importer(path) {
    return …

我试图找出在表格中呈现子行的最佳方式。

我正在开发本质上是桌子+手风琴的东西。也就是说，当您单击表格以显示该条目的更多详细信息时，它会添加更多行。

我的表位于 Researcher Groups 组件中，该组件有一个子组件：“app-researcher-group-entry (ResearcherGroupEntry)。

我正在使用 Vue-Material，但如果我使用普通的 .

无论如何，我的结构有点像：

   // ResearcherGroups.vue
<template>
    <md-table>
        <md-table-row>
          <md-table-head></md-table-head>
          <md-table-head>Researcher</md-table-head>
          <md-table-head>Type</md-table-head>
          <md-table-head></md-table-head>
          <md-table-head></md-table-head>
        </md-table-row>
        <app-researcher-group-entry v-for="(group, index) in researcherGroups" :key="group.label" :groupData="group" :indexValue="index"></app-researcher-group-entry>
    </md-table>
</template>

在 ResearcherGroupEntry.vue 中：

<template>
<md-table-row>
    <md-table-cell>
      <md-button class="md-icon-button md-primary" @click="toggleExpansion">
        <md-icon v-if="expanded">keyboard_arrow_down</md-icon>
        <md-icon v-else>keyboard_arrow_right</md-icon>
      </md-button>
      <md-button @click="toggleExpansion" class="index-icon md-icon-button md-raised md-primary">{{indexValue + 1}}</md-button>
    </md-table-cell>
    <md-table-cell>{{groupData.label}}</md-table-cell>
    <md-table-cell>Group</md-table-cell>
    <md-table-cell>
      <md-button @click="openTab" class="md-primary">
        <md-icon>add_box</md-icon>
        Add Client / Client Type
      </md-button>
    </md-table-cell>
    <md-table-cell>
      <md-button class="md-primary">
        <md-icon>settings</md-icon>
        Settings
      </md-button>
    </md-table-cell>
  <app-add-client-to-group-tab :indexValue="indexValue" :groupData="groupData" …

我已经成功完成了一个基本的速度打字游戏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片段功能中引发了错误,但在我的开发环境中不存在该错误.

export default {
  name: 'game',

  data () {
    return {
      disabledKeys: ['ArrowLeft', 'Home']
    }
  },

  methods: {
    /**
     * prevents pasting via 'Ctrl + V' (@keydown.ctrl.86) and 'Shift + Insert' (@keydown.shift.45)
     */
    noPaste: function (event) {
      event.preventDefault()
    },

    /**
     * Monitors every single key …

所以我现在已经在Vue.js项目上工作了几次,我遇到了一个我以前从未见过的问题.

试图将项目拉到另一台计算机上,甚至将项目作为zip文件下载,到时候npm install,vue-material模块失败并且无法运行整个项目.

它是这样的,用vie-material:

vue-material@1.0.0 postinstall C:\<my_things>\node_modules\vue-material sh build/git-hooks/install.sh

然后我看到了这个:

/usr/bin/bash: build/git-hooks/install.sh: No such file or directory

然后模块的树显示在终端中,最后,我可以看到与vue-material相关的所有错误,并带有以下声明:

Tell the author that this fails on your system: sh build/git-hooks/install.sh

顺便说一句,我试图创建一个全新的Vue项目,并尝试在内部添加vue-material,没问题,所以它与我的项目有关.

显然,/usr/bin/bash不存在,因为我正在运行Windows 10.

有关npm安装程序的任何知识吗？我没有办法解决...

我想为我的应用程序使用 vue 材料，我已经在我的应用程序中安装了 vue-material，并在我的 main.js 中执行此操作：

import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'

Vue.use(VueMaterial)

但是，当我在索引页面中使用 vue-material 中的某些组件时，如下所示：

<template>
   <md-field>
    <label>Username</label>
    <md-input v-model="username"></md-input>
   </md-field>
   <md-field>
    <label>Password</label>
    <md-input v-model="password"></md-input>
   </md-field>
</template>

我的页面显示：

当我在 codepen 中访问示例表单输入时，表单输入应该是这样的：

我的代码有什么问题？

我已经使用 vu-material 创建了一个对话框，一切正常，但是我在对话框中有一个表单，每次打开对话框时我都想清理它，问题是如果我不更改页面，我所有的 v-model在对话框内保留我在关闭对话框之前拥有的数据。我尝试使用 created/mounted/updated 钩子来清理我的 v-model 但是当我不更改页面时这些钩子不会被触发。

这是我的代码的一部分：

工具栏导航.vue :

<template>
...
<md-dialog md-open-from="#uploadBtn" ref="uploadDialog">
  <md-dialog-title>Upload file</md-dialog-title>
  <md-dialog-content>
    <upload-dialog></upload-dialog>
  </md-dialog-content>
  <md-dialog-actions class="md-align-center">
    <md-button class="md-primary" @click.native="closeUploadDialog()">Fermer</md-button>
  </md-dialog-actions>
</md-dialog>
...
</template>
<script>
...
openUploadDialog() {
    this.$refs.uploadDialog.open();
  },
  closeUploadDialog() {
    this.$refs.uploadDialog.close();
  },
...
</script>

上传Dialog.vue :

<template>
...
<md-input-container>
    <label>Nom</label>
    <md-input id="nom" v-model="nom"></md-input>
</md-input-container> 
<md-input-container>
    <label>Prénom</label>
    <md-input id="prenom" v-model="prenom"></md-input>
</md-input-container> 
<md-input-container>
    <label>Email</label>
    <md-input id="email" v-model="email"></md-input>
</md-input-container> 
...
</template>
<script>
...
name: upload-dialog',
data() {
  return {
    files: [],
    nom: '',
    prenom: '', …