小编Dan*_*dru的帖子

角度素材和Safari浏览器

我注意到Safari与Angular Material不兼容.看起来兼容性问题无处不在:样式,布局等.是否有其他人遇到过这些问题,并就如何很好地解决这些问题提出了很好的建议?

javascript safari angularjs material-design angular-material

15
推荐指数
1
解决办法
5334
查看次数

如何让Flow正常使用Vue 2(webpack)?

我正在尝试将Flow添加到Vue 2 webpack-template.为了记录,我只在运行时(文件遵循.vue格式/标准).

我的第一次尝试是使用流经cli,我意识到它不会起作用,因为它不知道如何处理.vue文件.

我的第二次尝试是添加一个webpack加载器(即 flow-status-webpack-plugin)并运行Flow check作为构建的一部分(例如,eslint作品).这没有用,所以我调查了其他选择.

我的第三次尝试是使用一个babel插件,起初它相当成功.我使用了babel-plugin-typecheck + babel-plugin-syntax-flow.Webpack中没有输出,但类型错误会破坏应用程序.我对这种方法很好; 它可以正常使用CI并打破构建.

这是我.babelrc看起来的样子:

{
  ...
  "plugins": [
    ...
    ["typecheck", {
      "disable": {
        "production": true
      }
    }],
    "syntax-flow",
    "transform-flow-strip-types"
  ],
  ...
}
Run Code Online (Sandbox Code Playgroud)

此时,Flow按预期的方式对全局方法起作用,但在Vue组件内不起作用:

<template>...</template>

<script>
/* @flow */
const flowIt = (a: number): number => {
  return a * 10
}

flowIt(20)
flowIt('bah') // Uncaught TypeError: Value of argument "a" violates contract. Expected: number Got: string

export default { …
Run Code Online (Sandbox Code Playgroud)

webpack vue.js flowtype babeljs vuejs2

14
推荐指数
2
解决办法
6340
查看次数

vue webpack模板(通过vue-cli)以后会变得更容易使用吗?

背景

从一个新的vue.js(2.0)项目开始.我曾vue-cli在其他项目(vuejs-templates/webpack)中工作,并发现在进行任何类型的更改时很难掌握构建过程.最重要的是,webpack因其缺乏文档而臭名昭着,因此即使对构建过程进行微小调整也证明了很多工作.总的来说,我相信我理解webpack和vue-loader.尽管如此,我仍然很难全面了解情况vuejs-templates/webpack.

我正在考虑为这个应用程序滚动我自己的webpack配置,但我担心我最终会得到一个与当前一样大的构建过程vuejs-templates/webpack.我的计划是从vuejs-templates/webpack-simple工作,而不是过于复杂化.我想到的是位于其间vuejs-templates/webpack-simple和之间的配置/构建过程vuejs-templates/webpack.

我很想知道其他人(或许我有更多经验)的感受vuejs-templates/webpack.不知道随着项目的发展或者最终是否有意义,它会变得更难使用.

滚动我自己的webpack配置/构建过程是否有意义,或者我应该简单地使用它vuejs-templates/webpack

javascript webpack vue.js vue-loader vuejs2

8
推荐指数
1
解决办法
1142
查看次数

ng-show expression ...如何调试

我有以下代码

<span ng-show="form.email.$error.unique">Email already exists</span>
Run Code Online (Sandbox Code Playgroud)

这可以正常工作,并且如果我们的数据库中已经存在在“电子邮件”输入字段中输入的电子邮件,我就能看到span元素。

但是,如果我进入chrome控制台。然后输入

form.email.$error
Run Code Online (Sandbox Code Playgroud)

它说未定义。

我可以输入

form.email 
Run Code Online (Sandbox Code Playgroud)

它告诉我

?<input name=?"email" ng-model=?"model.email" required class=?"ng-dirty ng-invalid ng-invalid-unique">
Run Code Online (Sandbox Code Playgroud)

所以问题是为什么我在Chrome控制台中看不到$ error?该值肯定存在,因为angular正在读取它,并基于该值决定是否显示跨度。

编辑::在进一步阅读文档后,我觉得检查电子邮件是否有效的指令...在控制器对象上设置了有效性(第四个参数。$ setValidity)

但UI会以某种方式从UI元素读取$ error。

因此,关于实际的工作流程,这是非常令人困惑的……在哪里设置了$ error以及从哪里读取了$ error。

有人可以澄清吗?

javascript debugging angularjs

5
推荐指数
2
解决办法
4591
查看次数

如何从 React 将回调函数传递给 litelement?

我正在尝试在我的 React 项目中使用 lit-element 组件,并且我想将回调函数从 React 传递给 lit-element 组件,但没有成功。

我尝试了几种不同的方法,例如更改属性类型以及将函数作为字符串传递,但它们都不起作用。

lit-element 组件代码:

import { LitElement, html } from "lit-element";

class MyButton extends LitElement {
  static get properties() {
    return {
      clickHandler: {
        type: String
      },
      bar: {
        type: String
      }
    };
  }

  render() {
    const foo = this.clickHandler; //value is undefined
    const bar = this.bar; //value is "it's bar"
    return html`
      <button @click=${this.clickHandler}>click me</button>
    `;
  }
}

customElements.define("my-button", MyButton);
Run Code Online (Sandbox Code Playgroud)

反应端代码:

<my-button clickHandler={() => alert("clicked")} bar="it's bar" />
Run Code Online (Sandbox Code Playgroud)

我在组件的渲染部分放置了一个断点,我可以看到“bar”值正确传入,但“clickHandler”的值未定义。

有谁知道如何将函数从 React …

javascript reactjs polymer lit-element

5
推荐指数
2
解决办法
5361
查看次数

检测angularjs中的输入文本长度

我是Angularjs的初学者

<div ng-app>
  <input type="text" ng-model="Number"/>
</div>
Run Code Online (Sandbox Code Playgroud)

我知道可以使用{{Number.length}}来显示输入字段长度,但是如何检测长度等.

if (length == 0) {
  // do something
} else if (length == 1) {
  // do something
}
Run Code Online (Sandbox Code Playgroud)

任何建议都将受到高度赞赏.

javascript angularjs

2
推荐指数
1
解决办法
4万
查看次数

Bootstrap 导航栏折叠不起作用

我找不到原因,当尝试使用 Bootstrap 的导航栏按钮时,它不起作用。

我认为这与我的页面加载 jQuery 库或其他内容有关,但我不明白。

这是我的代码。我将只展示头部和导航栏部分,因为我相信问题出在那里。其他一切都是简单的 HTML 结构:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1">
    <!--Boostrap jQuery-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjsmfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <!--Boostrap-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <!--Favicon-->
    <link rel="icon" type="image/png" href="media/favicon-32x32.png" sizes="32x32" />
    <!--Mi CSS-->
    <link rel="stylesheet" type="text/css" href="index.css">

    <!-- p5.js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.min.js"></script>
    <script src="js/sketch.js" type="text/javascript"></script>

    <title>Festival Sonorum</title>
</head>

<body>
    <!-- navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                    aria-controls="navbar">
            <span class="sr-only">Navegación</span>
            <span class="icon-bar"></span> …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery twitter-bootstrap

2
推荐指数
1
解决办法
8031
查看次数

在项目的后期将Vue.js从独立更改为仅运行时构建?

runtime-only新项目的Vue.js 的构建版本一起使用.我在文档中看到要切换到standalone需要为webpack添加别名的人,如下所示:

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.js'
  }
}
Run Code Online (Sandbox Code Playgroud)

目前,我的应用程序中不需要编译器.但是,在某些时候我可能需要切换到standalone构建.

我的问题是: 它是否会在之间runtime-onlystandalone之后进行无痛的切换,还是需要大量的重构?

如果确实如此,我可能会从standalone以后开始并避免重构.

javascript vue.js vuejs2

1
推荐指数
1
解决办法
2300
查看次数