小编Geo*_*bol的帖子

我想focus()在寡妇滚动后调用输入.我正在使用该scrollTo()方法的平滑行为.问题是focus方法切割顺畅的行为.解决方案是focus在滚动结束后调用该函数.

但我找不到任何关于如何检测scrollTo方法结束的文档或线程.

let el = document.getElementById('input')
let elScrollOffset = el.getBoundingClientRect().top
let scrollOffset = window.pageYOffset || document.documentElement.scrollTop
let padding = 12
window.scrollTo({
  top: elScrollOffset + scrollOffset - padding,
  behavior: 'smooth'
})
// wait for the end of scrolling and then
el.focus()

有任何想法吗？

我正在构建一个从数据生成pdf文件的工具,我需要构建两种格式:105mm*148mm和105mm*210mm.所以我得到了我的整个文档,现在是我插入分页符的时候了.我用一个简单的类来做:

.page-break { display: block; page-break-before: always; }

现在我必须将这个类插入到我的v-for循环中.所以一个基本的想法是计算一个区间,就像每个索引是6的倍数,我插入一个.但这不是最好的方法,我想在内容超过90毫米时插入一个休息时间.

为了做到这一点,我想计算2个中断之间的距离,如果距离接近90毫米,则插入一个新的中断.但是,我找不到访问动态DOM元素的方法......

所以问题很简单:如何计算这个距离？或者,如果有更好的方法来实现我的目标,我还能改进什么？

当我跑步时,我正面临着使用相对路径进行正确构建的困难npm run build.解决资产很容易,但我不知道如何配置2件事:

1/assetsPublicPath中config/index.js

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/ONLY_ABSOLUTE_PATH_ARE_ALLOWED/',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css']
  },
  dev: …

我有两个 npm 包，它们是在团体组织下托管在 gitlab.com 上的私有存储库。我的第一个包运行良好，并由同一组织的用户更新和下载。

要安装私有范围的包，文档说：

# Set URL for your scoped packages.
# For example package with name `@foo/bar` will use this URL for download
npm config set @foo:registry https://gitlab.example.com/api/v4/projects/<your_project_id>/packages/npm/

所以我的.npmrc看起来像

@mygroup:registry=https://gitlab.com/api/v4/projects/<id-project-1>/packages/npm/
//gitlab.com/api/v4/projects/<id-project-1>/packages/npm/:_authToken=<token>
//gitlab.com/api/v4/projects/<id-project-2>/packages/npm/:_authToken=<token>
//gitlab.com/api/v4/packages/npm/:_authToken=<token>

显然，第一个包一切正常，但第二个包则不然。

我不明白的是为什么作用域包应该引用唯一的项目 url？

因此，我无法安装这两个包：我的作用域包的 url 仅对其中一个有效。

我查看了 api 端点以返回我的组包列表，我发现了这个： https: //docs.gitlab.com/ee/api/packages.html#within-a-group

所以我更新了我.npmrc的

@mygroup:registry=https://gitlab.com/api/v4/groups/mygroup/packages/npm/
//gitlab.com/api/v4/projects/<id-project-1>/packages/npm/:_authToken=<token>
//gitlab.com/api/v4/projects/<id-project-2>/packages/npm/:_authToken=<token>
//gitlab.com/api/v4/packages/npm/:_authToken=<token>

但这不起作用。在group/group-id/packages路上我只得到 gitlab 信息，但没有任何 npm 友好格式的信息。

如何安装同一组下托管的多个私有范围的 npm 包？

我发现转换不是在带参数的动态路由上触发.例如下面的代码,当我进入/chapter/1并且我去的/chapter/2时候没有过渡.但是当我/chapter/1进去的时候,我去的/profile/1那里有一个!

main.js 文件

require('normalize.css')

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Panel from './components/Panel'
import Profile from './components/Profile'

window.bus = new Vue()

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
     { path: '/', redirect: '/chapter/1' },
     { name:'chapter', path: '/chapter/:id', component: Panel},
     { name:'profile', path: '/profile/:id', component: Profile}
  ]
})

new Vue({
  router,
  el: '#app',
  render: h => h(App)
})

App.vue 模板

<template>
  <div id="app">

    <transition …

我希望始终至少选中一个复选框，但我混合了v-model和的概念:checked。

该文档说：

v-model将忽略在任何表单元素上找到的初始value,checked或selected属性。它将始终将 Vue 实例数据视为真实来源。

我可以阻止我的模型被修改，但我不能阻止复选框被选中......

一些代码：

模板

<div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id">
  <input type="checkbox" :id="id" :value="id" @change="preventIfLessThanOneChecked" :checked="s.active">
  <label :for="id">{{ s.display }}</label>
</div>

该模型 userOutputSeries

data () {
  return {
    userOutputSeries: {
      foo: {
        display: 'Awesome Foo',
        active: true
      },
      bar: {
        display: 'My Bar',
        active: false
      }
    }
  }
}

该preventIfLessThanOneChecked处理器

preventIfLessThanOneChecked (event) {
  // I don't update the model so …