小编Mat*_*ich的帖子

所以我已经把它带到了“拖动调整大小”的地方 - 它只是感觉有点滞后......有谁知道这可能是为什么，以及如何解决它？

我曾尝试使用强制刷新，vm.$forceUpdate()但这似乎没有做任何事情..

CodePen 可以在这里找到。

编辑：为此问题/帖子添加了演示代码工作解决方案。这样，如果 CodePen 出现问题，我们仍然可以使用演示代码。

new Vue({
  el: "#app",
  data: () => {
    return {
      navigation: {
        shown: false,
        width: 200,
        borderSize: 3
      }
    };
  },
  computed: {
    direction() {
      return this.navigation.shown === false ? "Open" : "Closed";
    }
  },
  methods: {
    setBorderWidth() {
      let i = this.$refs.drawer.$el.querySelector(
        ".v-navigation-drawer__border"
      );
      i.style.width = this.navigation.borderSize + "px";
      i.style.cursor = "ew-resize";
      i.style.backgroundColor = "red";
    },
    setEvents() {
      const minSize = this.navigation.borderSize;
      const el = …

我来这里是为了解决这个问题：我已经安装node (Ver. 12.13.1)在我的电脑上，然后我使用node -v看看是否node安装好，是的，是的。

后来，我使用npm install @vue/cli，它安装了框架，但是当 a do a 时vue --version抛出了一个错误。

我在 Visual Studio Code 的终端中尝试过，也抛出了错误。我尝试卸载并安装节点，然后再次执行之前的操作，但它不起作用，错误仍然存​​在

我能做什么？为什么会发生这种情况？

英文错误：

Cannot load file C:\Users\halva\AppData\Roaming\npm\vue.ps1. 
The file C:\Users\halva\AppData\Roaming\npm\vue.ps1 is not digitally signed.
You cannot run this script on the current system. 
For more information about the execution of scripts and execution policy settings, 
see about_Execution_Policies at https: /go.microsoft.com/fwlink/?LinkID = 135170

代码照片： PS终端和 Visual Studio Code终端

我正在使用 Vee-validate ( https://baianat.github.io/vee-validate/ ) 来验证我的所有表单。现在我想做以下事情：

在我的表单中，“值”字段是一个动态组件，具体取决于type当前对象的。类型可以是integer,string等decimal。

因此，如果类型发生变化，输入也会发生变化。

我就是这样做的：

   <component
     :name="'attribute-value'"
     v-model="attribute.value"
     :is="attribute.type">
   </component>

和

import string from '@/components/fields/String'
import integer from '@/components/fields/Integer'
import decimal from '@/components/fields/Decimal'

export default {
  name: 'edit',
  metaInfo: {
    title: 'Edit'
  },
  components: {
    string, integer, decimal
  },
}

好吧 - 每个字段都应该有自己的验证。-字段integer应该只允许数字。所以我想这样做：

<template>
    <b-input
      :id="name"
      :name="name"
      type="number"
      v-validate="{ required: true, numeric: true }"
      :state="errors.has(name) ? 'invalid' : ''"
      :value="value"
      v-on:input="$emit('input',$event)"/>
</template>
<script>
export default { …

我正在使用 Material-UI 创建一个 Web 应用程序。主要就是页面在3个格，每一个分开height的500px。我想在中间网格内显示一个带有一些操作选项的抽屉。那可能吗？到目前为止，我只能在整个屏幕上显示它。

这是我的网格元素的主要组件：

import React, { Fragment } from 'react';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

const style = {
    Paper: {
        padding: 10,
        marginTop: 5,
        marginBottom: 5,
        height: 500,
        overflowY: 'auto',
        position: 'relative',
    },
    Fab: {
        position: 'absolute',
        top: 5,
        left: 5
    },
}

export default () => {
    return (
        <Fragment>
            <Grid container spacing={1}>
                <Grid item xs={12} sm={4} md={4} lg={2}>
                    <Paper style={style.Paper}>

                    </Paper>
                </Grid>

                <Grid item xs={12} sm={8} md={8} …

我正在尝试创建一个布局，它允许您通过拖动侧边栏的一个边缘来调整它的大小。这种行为可以在 CodePen/CodeSandbox 等中看到。 - 你可以拖动每个“代码窗口”来调整它的大小。我正在寻找与页面布局相同的行为。

我想出的东西允许我拖动来调整大小，但是如果“主要”区域（不是侧边栏的区域）中有很多内容，它就会摆脱拖动。

我希望能够一直拖动到屏幕边缘，而不管里面的内容如何。

我认为展示这个问题的最好方法是通过一个演示：

原始演示：

const resizer = document.querySelector("#resizer");
const sidebar = document.querySelector("#sidebar");

resizer.addEventListener("mousedown", (event) => {
  document.addEventListener("mousemove", resize, false);
  document.addEventListener("mouseup", () => {
    document.removeEventListener("mousemove", resize, false);
  }, false);
});

function resize(e) {
  const size = `${e.x}px`;
  sidebar.style.width = size;
}

/** 
 * Helpers 
 */

sidebar.style.width = '325px';
const mainContent = document.querySelector("#main-content");

function addContent() {
  const mainContentStr = [...Array(10).keys()].map(i => "Main Content");
  mainContent.innerHTML += mainContentStr.join(' ') + '<br /><br /><h1>Now drag to see how difficult it …