小编Un1*_*Un1的帖子

我从这个Vuetify的样板创建了Electron-Vuejs-Vuetify项目

我在控制台中看到了这个警告:

Electron Security Warning 
This renderer process has Node.js integration enabled and 
attempted to load remote content. This exposes users of this app to severe security risks.

For more information and help, consult https://electronjs.org/docs/tutorial/security

题:

可能的原因是什么 - Node,Vue.js,webpack的localhost配置？我该怎么办？

题:

我有一个循环显示指定数量的卡.

问题在于ma-5属性<v-flex>.在xs屏幕尺寸上,这个边距太大了.何我为不同的屏幕尺寸指定不同的保证金？

码:

   <v-container>
      <v-layout row wrap>
        <v-flex xs12 sm6 md4 ma-5 v-for="card in filteredCards" :key="card.id">
          <v-card flat class="elevation-20 test">
            <v-card-media :src="card.image" height="200px">
            </v-card-media>
            <v-card-title primary-title class="pa-4">
               <div>
                  <h3 class="headline mb-0">{{card.title}}</h3>
                  <div style="min-height:50px;">{{card.description}}</div>
               </div>
            </v-card-title>
          </v-card>
        </v-flex>
      </v-layout>
   </v-container>

尝试:

我尝试添加下面这段代码(从复制此页)

<v-flex xs12 sm6 md4 v-for="card in filteredCards" :key="card.id"
   :class="{'ma-0': $breakpoint.smAndDown, 'ma-5': $breakpoint.mdAndUp}">

我收到这些错误:

• [Vue warn]: Property or method "$breakpoint" is not defined on the instance but referenced during render

• [Vue …

我正在尝试使用Vuetify.js示例在使用Vue.js构建的网站上添加简单验证的联系表单.我是新手,所以我不确定它应该如何在Vue组件中实现.

我想实现一个简单的客户端表单验证,并使其与https://getform.org/表单一起使用.

更新:

代码| Contact.vue

(摘自Vuetify.js形式示例)

<v-form v-model="valid">
      <v-text-field
        label="Name"
        v-model="name"
        :rules="nameRules"
        :counter="10"
        required
        name="Name"
      ></v-text-field>

      <v-text-field
        label="E-mail"
        v-model="email"
        :rules="emailRules"
        required
        name="Email"
      ></v-text-field>

      <v-btn
          @click="submit"
          :disabled="!valid"
      >submit</v-btn>
  </v-form>

  <form method="post" action="https://www.getform.org/f/[MY_ID_HERE]" id="nativeForm"></form>

脚本

<script>
export default {
  name: 'contact',

  data () {
    return {
      snackbar: true, 
      valid: false,
        name: '',
        nameRules: [
          (v) => !!v || 'Name is required',
          (v) => v.length <= 10 || 'Name must be less than 10 characters'
        ],
        email: '',
        emailRules: …

我想让这张卡在悬停时缩放(包括其中的元素),但文本在转换过程中摇摆/抖动(当你悬停卡片时)并在缩放期间和之后变得模糊(有时,某些比率比其他比例更高) ,我认为是由于子像素值四舍五入).

如何在转型过程中消除这种摇晃和模糊？

• 我不关心IE浏览器,我只想让它在最新的Chrome中运行.

• 它似乎是由transition财产造成的.

Codepen#1: https ://codepen.io/x84733/pen/yEpYxX

.scalable {
  transition: 0.3s ease-in-out;
  box-shadow: 0 6px 10px rgba(0,0,0,0.14);
}
.scalable:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);  
}

.card {
  width: 100%;
  background: white;
  padding: 20px;
}

body {
  width: 50%; 
  height: 100%; 
  background: #999;
  padding: 20px;
}

<div class="card scalable">
  <div>here's some description</div>
</div>

更新:

我刚刚发现,当你以编程方式为它设置动画时,它不会抖动/抖动:

我能以某种方式使用JS吗？

Codepen: https ://codepen.io/anon/pen/LqXwOb ？editors = 1100

.anim {
  animation: scale 0.3s ease-in-out infinite alternate;
}

@keyframes scale { …

问题

我试图扫描驱动器目录（以递归方式遍历所有路径），并将所有路径写到文件中（fs.createWriteStream以便找到它们），以保持较低的内存使用率，但内存使用率却无法正常工作在扫描期间达到2GB。

预期

我期望fs.createWriteStream在任何时候都可以自动处理内存/磁盘使用情况，同时将内存使用情况保持在最低水平，并避免背压。

码

const fs = require('fs')
const walkdir = require('walkdir')

let dir = 'C:/'

let options = {
  "max_depth": 0,
  "track_inodes": true,
  "return_object": false,
  "no_return": true,
}

const wstream = fs.createWriteStream("C:/Users/USERNAME/Desktop/paths.txt")

let walker = walkdir(dir, options)

walker.on('path', (path) => {
  wstream.write(path + '\n')
})

walker.on('end', (path) => {
  wstream.end()
})

是因为我不使用.pipe()吗？我尝试创建一个new Stream.Readable({read{}})，然后在.on('path'发射器内部将路径推入其中，readable.push(path)但这并没有真正起作用。

更新：

方法2：

我尝试了在answers drain方法中提出的建议，但并没有太大帮助，它确实将内存使用量减少到500mb（对于流来说仍然太多了），但是却大大降低了代码的速度（从几秒钟到几分钟）

方法3：

我也尝试使用readdirp，它使用更少的内存（〜400mb）并且速度更快，但是我不知道如何暂停它并使用drain那里的方法来进一步减少内存使用：

const readdirp …

我需要append-icon="close"打电话@click="clearSearch()"

现在我用专用按钮实现它:

 <v-text-field 
       v-model="search" 
       class="search" 
       label="search" 
       prepend-icon="search" 
       append-icon="close">
 </v-text-field>    

 <v-btn @click="clearSearch()"></v-btn>

• 我试过添加,append-icon-cb="clearSearch()"但它不起作用,我不知道为什么
• 我也试过简单地使用clearable它,它清除输入但所有元素都保持"过滤".我不知道它是如何clearable工作的,但我的clearSearch()方法只是这样做:clearSearch() {this.search = ""}它有效,这就是我使用自定义清晰输入法的原因

题

是否可以执行以下操作？

• 打开一个新的cmd.exe或terminal（在 MacOS/Linux 上）窗口

• 传递/运行命令，例如 cd <path>

问题

我可以通过运行以下命令打开 cmd：

"$electron.shell.openItem('cmd.exe')"

但shell.openItem不允许传递参数/命令。

我尝试使用child_process但我根本无法让它工作，它不会打开一个新的终端窗口：

const { spawn, exec } = require('child_process');
spawn('C:/Windows/System32/cmd.exe');

我也尝试运行以下命令，但仍然没有：

spawn( 'cmd.exe', [ '/c', 'echo ASDASD' ], { stdio: [0, 1, 2] } )

我看到的唯一可能的解决方案是创建一个command.bat：

start cmd.exe /K "cd /D C:\test"

然后使用openItem：

"$electron.shell.openItem('command.bat')"

但这仅适用于 Windows

假设我们有一组具有混合name值的对象(nums,cyrillic,english):

(如果代码不适合你,undefined改为'ru',它也会改变排序结构)

let ascending = true

var items = [
  {name: 'c', value: ''}, 
  {name: 'b', value: ''}, 
  {name: 'a', value: ''}, 
  {name: '?', value: ''}, 
  {name: '?', value: ''}, 
  {name: '41', value: ''}, 
  {name: '?', value: ''}, 
  {name: '?', value: ''}, 
  {name: '0', value: ''}, 
  {name: '31', value: ''}, 
  {name: '4', value: ''}, 
  {name: '?', value: ''}
]

items.sort(function (a, b) {
  // ascending order
  if (ascending) {
    return a.name.localeCompare(b.name, undefined, { numeric: …

我对 JS 完全陌生，我想学习如何执行以下操作：

获取图像数据（将其转换为像素数组，以便我可以对其进行编辑），然后从像素编辑功能返回已编辑的数组，以便我可以使用这些已编辑的值来绘制已编辑的图像。

我什至不确定这是否是解决这个问题的方法，但这是我到目前为止所得到的：

  var img = new Image();
      img.src = 'img.png';
      var canvas = document.getElementById('canvas');
      var canvasEdited =  document.getElementById('canvasEdited');
      var ctx = canvas.getContext('2d');
      var arr = [];
      img.onload = function() {
          ctx.drawImage(img, 0, 0);
          function editPixels(ctx) {
             for (i of ctx) {
                 // edit pixels values 
                 arr.push(i - 10);    
             }
          }
          console.log(arr);
          function drawEditedImage() {
             var ctxEdited = canvasEdited.getContext('2d');
             ctxEdited.drawImage(img, 0, 0);
          }
     };

控制台输出显示一个带有length:0.

为什么不将编辑后的像素推送到arr？

我想要做的是在点击时缩放图像，想法是：

• 你点击一张图片
• 对话框会width=85vw打开您刚刚在其中单击的图像（因此图像现在几乎全屏显示）

我想不出更好的方法来“缩放”单击图像，而是在模式对话框中打开它（如果有更简单的方法，请告诉我）。

代码：

 <v-dialog v-model="dialog" max-width="85vw" >
     <img :src="img1" alt="" width="100%" @click.stop="dialog=false">
 </v-dialog>
                
 <img :src="img1" width="500px"  @click.stop="dialog = true">
 <img :src="img2" width="500px"  @click.stop="dialog = true">
 <img :src="img3" width="500px"  @click.stop="dialog = true">

 export default {
     data() {
         img1: "../../src/assets/pexels-photo-373912.jpg",
         img2: "../../src/assets/pexels-photo-373912.jpg",
         img3: "../../src/assets/pexels-photo-373912.jpg"
     }
 }

问题是，它没有在对话框中打开任何点击的图像，只是你在那里硬编码的图像，在这个例子中，img1无论你点击什么图像，它都会打开。

我不知道如何将:src动态传递到对话框中 -:src您单击的图像的 。

PS v-dialog 是 Vuetify.js 库中的一个组件

题：

• 有没有明显更好的方法呢？
• 如果不是真的，我如何使这个方法起作用并显示我在模态对话框中单击的图像？