小编Mer*_*erc的帖子

我可以用逻辑运算符OR搜索github标签吗?

我试图在github上过滤我的所有问题,如下所示:

label:bug OR label:enhancement
Run Code Online (Sandbox Code Playgroud)

但显然这不起作用.我发现这个页面 https://help.github.com/articles/searching-issues/ 我觉得它必须写在那里,但我无法弄清楚如何去做.

难道真的是那个人不能过滤两个标签的问题吗?我的意思是,这将是一项基本任务,不是吗?

好吧,如果有人能给我一个提示,我会很高兴听到它.

github filter

47
推荐指数
3
解决办法
1万
查看次数

使用lodash按值排序数组(整数)

我真的在努力,但我找不到解决方案.

我有一个数组,我想按值(所有整数)排序​​.我想,好吧,让我们使用lodash,肯定必须有一个方便的功能.

不知何故,我无法想出这样做.

到目前为止我得到了这个:

myArray = [3, 4, 2, 9, 4, 2]
Run Code Online (Sandbox Code Playgroud)

如果我使用这段代码,我得到了一个结果:

myArray = _(myArray).sort();
Run Code Online (Sandbox Code Playgroud)

但不幸的是,返回值似乎不再是一个数组.排序后myArray.length未定义.

我找到了成千上万的lodash排序数组的例子,但总是通过密钥. https://lodash.com/docs#sortBy

有人可以告诉我如何将以下返回结果作为数组?:

[2, 2, 3, 4, 4, 9]
Run Code Online (Sandbox Code Playgroud)

它不会那么困难,但不知怎的,我没有完成它......

有时候我认为lodash文档有点复杂.我可能只是错过了一个重要的细节......

arrays sorting return lodash

42
推荐指数
1
解决办法
7万
查看次数

Navigator.permissions.query:Geolocation onChange 在 Firefox 中不起作用

我正在尝试使用 Permissions API:https : //developer.mozilla.org/en-US/docs/Web/API/Permissions/query Firefox 应该支持它。(我目前使用的是Firefox Developer Edition 66.0b14)。

我有一个页面,我最初在其中检查用户权限。就像是;

if (navigator.permissions) {
  navigator.permissions.query({ name: 'geolocation' }).then(result => {
    if (result.state === 'granted') {
      this.getCurrentPosition()
    } else if (result.state === 'prompt') {
      this.getCurrentPosition()
      console.log('Permissions requested. Waiting for user input...')
    } else if (result.state === 'denied') {
      this.locationError = true
    }
    result.onchange = event => {
      if (event.target.state === 'granted') {
        this.locationError = false
        this.getCurrentPosition()
        console.log('Thanks for letting us know...')
      } else if (event.target.state === 'denied') { …
Run Code Online (Sandbox Code Playgroud)

javascript firefox geolocation navigator

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

Nuxt.js:包括字体文件:使用/ static或/ assets

我知道nuxt.js github存储库中的一些文章对此做了一些介绍,但是我想知道在nuxt.js中使用字体文件的正确方法是什么。

到目前为止,我们已经将它们保存在/static/fonts目录中,但是其他人assets用来存储字体文件。有什么区别?一种选择更好吗?如果是,为什么?

也有不同的方法来包含它们。这样的路径是否正确:

@font-face {
  font-family: 'FontName';
  font-weight: normal;
  src: url('~static/fonts/font.file.eot'); /* IE9 Compat Mode */
  src: url('~static/fonts/font.file.woff') format('woff'),
       url('~static/fonts/font.file.otf') format('otf'),
       url('~static/fonts/font.file.eot') format('eot');
}
Run Code Online (Sandbox Code Playgroud)

感谢您在这里的一些澄清:D。干杯

Ĵ

fonts assets font-face vue.js nuxt.js

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

Nuxt.js:如何在 nuxt 构建后调试服务器端(记录一些信息)

我正在将 nuxt.js 用于我的前端应用程序。我目前遇到一个问题,asyncData尤其是第一次运行时(在服务器上)。

在构建我的应用程序($ nuxt build并通过 提供服务$ serve)时,我目前无法真正从服务器上运行的代码中 console.log 输出一些信息。在我的客户端上运行代码之前,如何调试该部分?

这是一种方法吗: https ://codeburst.io/debugging-nuxt-js-with-visual-studio-code-724920140b8f 所以我会手动启动 nuxtnode.js并尝试检查那里的东西?

或者,还有更好的方法?nuxt 构建属性(https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin)仅用于分析构建,对吗?像包大小等,而不是在服务器上运行的实际代码?

我希望我能弄清楚我在寻找什么,如果没有,我很乐意回答进一步的问题。任何提示都非常受欢迎。先感谢您。

干杯

javascript vue.js server-side-rendering nuxt.js asyncdata

8
推荐指数
0
解决办法
3978
查看次数

单击时删除链接上的蓝色轮廓,但保留TAB选择的大纲(辅助功能)

我有一个汉堡菜单按钮,可通过TAB选择.当我点击它并打开菜单时,汉堡有这个蓝色轮廓,以表明它是聚焦的.我不想删除那个蓝色轮廓,因为它有助于视障人士和标签选择它也很棒,但只有当有人通过鼠标点击蓝色轮廓时才有一种聪明的方法来删除蓝色轮廓.只是美学......

感谢您的回答.

干杯

css accessibility focus selection outline

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

Vue.js:如果值为空(例如:to =“”或type =“”),则不呈现属性

我有一个Button组件,它根据您提供的属性(例如to还是)呈现一个nuxt-link或一个按钮type

<div class="Btn">
  <component
    :class="['Btn__button', createAppearanceClasses]"
    v-on:click="click"
    :disabled="disabled"
    :is="type"
    :to="to"
    :href="external ? to : false"
    :target="target"
    :type="buttonType"
    >
    <slot />
  </component>
</div>
Run Code Online (Sandbox Code Playgroud)

(而则typenuxt-link用于为内部链接返回的计算属性,a如果是外部链接则为标签,或者button如果未定义这些属性则为标签)。

现在,我们有时渲染一些打开模态或提交的按钮。那里我们没有传递任何类型或属性:

<Btn :class="'FlexContent__button'" 
  :appearance="['rounded-corners']"
  v-on:click.native="openOverlay" 
>    
 {{ component.text }}
</Btn>
Run Code Online (Sandbox Code Playgroud)

在呈现的HTML中,我得到:

<button disabled to="" target="" type="" class="Btn__button Btn__button--rounded-corners">

如果我对此进行验证,则会收到有关以下空属性的错误: Attribute to not allowed on element button at this point.

to=""仅当我将实际值传递给Btn组件时,才如何渲染属性?

我当时正在考虑类似的事情,但这是行不通的: (to ? ':to="to"' : '') 因此,我需要其他解决方案。

在此先感谢您的提示。

干杯

javascript properties vue.js vue-component

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

在列表的初始渲染上对列表项进行动画处理(交错)

我正在尝试构建一个导航,当显示菜单/导航时,该导航会错开所包含列表项的外观。

我有一个汉堡符号,单击时它会呈现导航(全屏)。我现在想要一个动画,其中不同的列表项(实际链接)出现时彼此有一些延迟,顶部的第一个是第一个,底部的最后一个。

我以为我可以使用 vue<transition-group>列表转换来做到这一点,但所有示例都是关于添加和删除列表项的,而我从一开始就有所有这些。

然后我读到了这篇文章:Vue.js: Staggering List Transitions 我想可能就是这样了。不幸的是我也无法让它工作。

您有任何提示我可以如何做到这一点吗?

到目前为止,我使用 v-if 渲染导航:

<transition name="u-anim-fade" mode="in-out">
  <Navigation v-if="navMenuOpen" />
</transition>
Run Code Online (Sandbox Code Playgroud)

在导航组件内:

<nav>
    <ul class="Navigation__list">
      <li
        v-for="(item, key) in menu.items"
        class="Navigation__item"
        :key="`nav-item-${key}`">
        <nuxt-link>
          <span v-html="item.title" />
        </nuxt-link>
    </ul>
</nav>
Run Code Online (Sandbox Code Playgroud)

(我在这里遗漏了一些东西来简化代码)

当我添加此处建议的 Enter/leave/onEnter 函数时:Vue.js: Staggering List Transitions

v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
Run Code Online (Sandbox Code Playgroud)

就像这样:

<nav>
    <transition-group
      name="staggered-fade"
      tag="ul"
      class="Navigation__list"
      v-bind:css="false"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
    >
      <li
        v-for="(item, key) in menu.items"
        class="Navigation__item"
        :key="`nav-item-${key}`">
        <nuxt-link>
          <span v-html="item.title" />
        </nuxt-link>
    </transition-group>
</nav> …
Run Code Online (Sandbox Code Playgroud)

javascript css transition vue.js vuejs2

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

Nuxt.js:如何为单个路由更改覆盖 scrollBehaviour

我有一个 nuxt 页面,每次更改路由器时我都会滚动到顶部。我们在 nuxt.config.js 中定义了这个

scrollBehavior (to, from, savedPosition) {
  return ({ x: 0, y: 0 })
}
Run Code Online (Sandbox Code Playgroud)

现在我有一个单独的导航链接,它有点特别:«Contact» 不会引导到一个只有联系信息的新页面,而是应该转到页脚,在每个页面上都写有联系方式。所以我添加了一个链接(不是 nuxtlink)来链接到#contact页脚中的锚点。

  <a class="Submenu__link Submenu__link--contact" href="#contact">
    Contact
  </a>
Run Code Online (Sandbox Code Playgroud)

但是这不起作用,因为它注册了路由更改并将页​​面再次设置为顶部。(至少这是我的假设)。我试图执行一些函数来设置 scrollTop 属性,但随后我看到了一个闪烁,它滚动了一点,但随后被重置到顶部:

  <li class="Submenu__item">
    <a @click="closeNavAndScroll" class="Submenu__link Submenu__link--contact" href="#contact">
      Contact
    </a>
  </li>
Run Code Online (Sandbox Code Playgroud)

我声明了一个方法(关闭导航工作):

closeNavAndScroll () {
  this.closeNavMenu()
  window.scrollTop(400)
}
Run Code Online (Sandbox Code Playgroud)

所以我想我在这里找到了一些信息:https : //nuxtjs.org/api/configuration-router#scrollBehavior

但据我所知,只有一个声明用于为所有路由设置 scrollBehaviour。我可以以某种方式说每当路线包括#contact我不希望应用程序弄乱我的滚动位置吗?

感谢您对此的任何帮助。

干杯

javascript scroll vue.js vue-router nuxt.js

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

Vue/Nuxt 异步元标记生成

我们有一个使用 vue.js 和 nuxt 构建的网页。我们nuxt generate用来生成静态 html 文件,其中还应该包含 SEO 和 og 标签。这就是我们使用nuxthead ()生成元信息的原因。

到目前为止,一切都很好。但现在我们有一个页面可以将帖子异步加载到嵌套路由中。如果您转到该页面,它会通过 ajax 调用加载帖子的数据。然后它将使用帖子的元来填充<head>.

一段时间后(加载帖子后)元信息会正确更新,但是当我们使用nuxt generate帖子的数据时,因此当我们使用 生成元信息时,它的元信息不存在head ()

这就是为什么我们的静态 html 不包含必要的元信息。对此可能有哪些解决方案?理想的情况是生成过程等待帖子加载。能用承诺来解决吗?或者还有其他一些想法吗?

这里this.post先设置为false。我们的辅助函数generateMetaInfo被调用,但显然没有正确的数据。

head () {
  this.log('this.post: ', this.post)
  if (this.post) {
   return generateMetaInfo(this.post)
  }
}
Run Code Online (Sandbox Code Playgroud)

当调用 url 时,我们像这样加载帖子:

getPost () {
  // Only if postSlug is present
  if (this.$route.params.postSlug) {
    // If postslug > try to get it from store
    if (this.getCompletePostBySlug(this.$route.params.postSlug)) { …
Run Code Online (Sandbox Code Playgroud)

javascript meta vue.js vuejs2 nuxt.js

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