小编use*_*189的帖子

我想我在这里错过了很简单的东西.我有一个简单的单页node.js应用程序,它使用nodemailer将任何表单数据通过电子邮件发送到我的收件箱.

我的index.js文件:

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var nodemailer = require('nodemailer');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

var transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: 'myemail@gmail.com',
        pass: 'mypassword'
    }
});

app.use(express.static('public')); //public folder with my html files
app.get('', function (req, res) {
    res.sendFile(__dirname + "/");
})

app.post('/', function (req, res) {
    response = {
        name: req.body.name,
        email: req.body.email,
        message: req.body.message
    };
    var mailClient = {
        from: 'myemail@gmail.com',
        to: 'myemail@gmail.com',
        subject: `Message from ${response.name}`, …

在我的网站中,我希望有一个淡入淡出的标题,然后使用不同的文本,然后输出,然后恢复正常(循环).以下是我希望它的工作方式:

h1 {
    font-size: 600%;
    animation-name: head;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
@keyframes head {
0% {font-size:600%; opacity:1;}
25% {font-size:570%; opacity:0;}
50% {font-size:600%; opacity:1;}
65% {font-size:570%; opacity:0;}
80% {font-size:600%; opacity:1; innerHtml="Changed Text"}
90% {font-size:570%; opacity:0;}
100% {font-size:600%;opacity:1; innerHtml="Original Text"}
}

但是,我还没有找到任何方法来改变CSS3动画中的文本.这可能吗？

选择器的Vuetify组件是:

<v-select
:items="items"
label="Standard"
></v-select>

但是当选择器处于活动状态时,会出现许多嵌套组件(在检查时),例如,下拉菜单本身,menu__content.我该怎么做造型呢？对于"可见"Vuetify组件v-select,我可以手动添加一个类,并直接在css中设置它.但是,我无法为隐藏的组件执行此操作.

我试着用检查给定的类".menu__content"来设置样式,但它似乎不起作用:https://jsfiddle.net/agreyfield91/tgpfhn8m/936/ .

我如何在css中手动设置这些组件的样式？我错过了什么关于vuetify的根本性的东西？

我正在使用 Vuetify 选择器输入组件，v-select我想自定义样式。由于组件v-select在 html 中只呈现一个并且没有必要的子项，我转向通过在 chrome 中检查并复制那里的类来设置组件的样式。例如，要更改活动值的字体大小，我使用了：

.v-select__selections {
    font-size: 20px;
}

这工作得很好，直到我意识到我的样式以这种方式在（通常隐藏的）导航抽屉的任何部分都不起作用。例如，

.v-menu__content {
    height: 500px;
}

不会以任何方式影响样式。奇怪的是，这不仅仅是我的样式被 Vuetify 样式覆盖（！important 没有效果）——看起来我的 CSS 根本没有到达组件。检查时没有任何我的写作风格的痕迹。如何？

我相信这是由于选择器组件的抽屉部分的基于活动的性质。我应该用另一种方式来处理 CSS 中的这些元素吗？我希望我可以提供一个 Jsfiddle，但是（在我找到的模板上），Vuetify 的呈现方式完全不同。我正在使用 Vuetify 1.1.7。

我的样式直接包含在组件 .vue 文件中，无作用域。Vuetify 和 vuetify 样式在 main.js 中导入：

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

文件结构（来自 的默认结构vue init webpack -myProject）：

src/
    -main.js 
    -app.vue 
    -components/
        -problematicComponent.vue
index.html

编辑：我也尝试使用深度选择器，但问题仍然存在于隐藏菜单组件中：

>>>.v-menu__content {
    height: 500px;
}

因此，我遇到的问题与这里的问题不同：

Vuetify - CSS 在组件内不起作用（生效）

我有以下代码:

HTML

<div id="app">
  <h1>
  Hello {{superscript('hello')}}
  </h1>
</div>

JS

new Vue({
  el: "#app",
  data: {
  },
  methods: {
    superscript(input) {
        return '<sup>' + input + '</sup>'
    }
  }
})

我希望这个呈现:

你好,^你好

但相反,它会自动渲染标记,而不会将其转换为上标.JSfiddle:http://jsfiddle.net/agreyfield91/eywraw8t/188244/

有没有办法通过Vue.js方法添加html标签？

我想要一个带有缩放宽度的可视化“临时导航抽屉”。vuetify组件默认情况下具有300px的宽度，因此我将其覆盖（使用https://vuetifyjs.com/en/components/navigation-drawers “ Temporary”示例）

<template>
  <v-layout
    wrap
    style="height: 200px;"
  >
    <v-container>
      <v-layout justify-center>
        <v-btn
          color="pink"
          dark
          @click.stop="drawer = !drawer"
        >
          Toggle
        </v-btn>
      </v-layout>
    </v-container>

    <v-navigation-drawer
      v-model="drawer"
      absolute
      temporary
      style="width: 13vw"                //I change width to 13vw here
    >

    </v-navigation-drawer>
  </v-layout>
</template>

问题是，当菜单未激活时，它隐藏在视口左侧300px。在较大的显示器上，我缩放的13vw宽度将变得大于300px，因此左侧导航菜单中的一小部分未被隐藏。如何更改导航菜单的默认隐藏？

Jsfiddle：https ://jsfiddle.net/agreyfield91/tgpfhn8m/957/ 在未激活导航抽屉的情况下进行缩小以查看我在说什么

我有一个需要居中的 div - 但使用

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

导致 div 中的所有内容都变得模糊。我知道这个问题在这里被问了很多次，但是没有一个解决方案（在 4 或 5 个帖子上）对我有用。目前是否有任何解决方案或什至另一种方法可以使 div 正确居中？

我试图实现当您将鼠标悬停在图像上时，它会放大边框的效果。我试图通过在悬停时为缩放设置 CSS3 过渡来实现这一点，溢出：隐藏在图像上：

.portrait {
width: 20%;
overflow: hidden;
transition: transform 0.5s linear;
}
.portrait:hover {
transform: scale(1.1);
}

但是当图像悬停时，仍然会显示多余的部分。我如何使这项工作？