小编Yun*_*lva的帖子

如何让滚动条覆盖 div 内容？

已经尝试使用track透明背景，但它不起作用

::-webkit-scrollbar-track {background: transparent}

保持不变，占据部分内容

::-webkit-scrollbar-track {background: transparent}

.faq-body {
  width: 250px;
  height: 400px;
  background: #fff;
  overflow: scroll;
  border: 1px solid #7b7d7f;
}

.faq-body::-webkit-scrollbar {
  width: 16px;
}
.faq-body::-webkit-scrollbar-thumb {
  background-color: #7b7d7f;
  border: 5px solid #fff;
  border-radius: 10rem;
}
.faq-body::-webkit-scrollbar-track {
  position: absolute;
  right: -3rem;
  top: -50rem;
  background: transparent;
}

.faq-question {
  padding: 20px;
  border-bottom: 1px solid #000;
  line-height: 1.3;
  color: #15191b;
  font-size: 0.8rem;
}

有人能帮我吗？

我正在建立一个网站，但我很难在 CSS 中做一个细节

我需要制作一个带有弯曲末端的圆形边框，为了您更好地理解，我将展示照片并发布我的代码

我需要什么 (Photoshop)

我想要一个 CSS 解决方案，但我不能。

这是我实际拥有的：

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

.circle {
  display: inline-block;
  position: relative;
  top: -10px;
  border-radius: 100%;
  background: #29a7e8;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}

<div class="bottom-bar">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>

我正在使用nuxt.js项目，我需要在每个更改的文件（即每个Webpack构建）上运行Shell脚本。

所以我正在使用Webpack挂钩

我创建了Webpack插件

/plugins/NamedExports.js

const pluginName = 'NamedExports'
const { exec } = require('child_process')

class NamedExports {
  apply(compiler) {
    compiler.hooks.beforeCompile.tap(pluginName, (params, callback) => {
      exec('sh plugins/shell.sh', (err, stdout, stderr) => {
        console.log(stdout)
        console.log(stderr)
      })
    })
  }
}

export default NamedExports

plugins/shell.js

parameters=$(ls components)
for item in ${parameters[*]}
do
    ls components/$item/ | grep -v index.js | sed 's#^\([^.]*\).*$#export { default as \1 } from "./&"#' > components/$item/index.js
done

echo "worked"

此脚本用于在组件目录的每个文件夹中进行命名导出，例如

components/atoms/ButtonStyled.vue components/atoms/BoxStyled.vue

然后生成 components/atoms/index.js

export { default as …

好吧，我从 nuxt 开始，我有以下路线：

/home

/dashboard

/login

我想保护 /dashboard，但仅适用于使用localStorage.

我想到的最简单的方法是创建一个 /middleware/auth.js

export default function () {
  if (!window.localStorage.getItem('token')) {
    window.location = '/login'
  }
}

并将其注册到 /dashboard/index.vue 组件中。

<script>
export default {
  middleware: 'auth',
}
</script>

但是我无法localStorage在中间件中访问，因为 LocalStorage 是客户端。

我已经尝试在created()仪表板布局中添加相同的检查，但是我无法返回未设置的窗口mounted()为时已晚，只能在页面完全组装后进行检查。

那么我怎样才能做到这一点呢？注意：我不打算在这个项目中使用任何 Vuex。

我正在开发一个 nuxt.js 项目，我需要确定属性中的样式computed并应用于divbased on screen size，如下例所示：

基本示例

<template>
  <div :style="css"></div>
</template>

<script>
export default {
  computed: {
    css () {
      let width = window.innerWidth

      // ... mobile { ... styles }
      // ... desktop { ... styles }

      // ... if width is less than 700, return mobile
      // ... if width greater than 700, return desktop
    }
  }
}
</script>

真实的例子

<template>
  <div :style="css">
    <slot />
  </div>
</template>

<script>
export default {
  props: { …

我正在使用 nuxt.js 处理一个项目，我正在按照官方文档中的建议在应用程序的上下文中注入一个函数

https://nuxtjs.org/guide/plugins/#inject-in-root-amp-context

但是当我尝试在 props 验证中调用该函数时，我收到一个错误

/plugins/check-props.js

import Vue from 'vue'

Vue.prototype.$checkProps = function(value, arr) {
  return arr.indexOf(value) !== -1
}

在组件 vue 中

export default {
  props: {
    color: {
      type: String,
      validator: function (value, context) {
        this.$checkProps(value, ['success', 'danger'])
      }
  }
}

ERROR: 无法读取未定义的属性“$checkProps”

有谁知道我如何在验证中访问“this”？

提前致谢！

我正在建立一个网站，它有一个波形的部分，像这样： PSD

我目前正在使用 PSD 图像（PNG 格式）放置在网站上，但我希望波形具有屏幕的全宽， 我的结果

我想要一个 CSS 解决方案，所以我研究了一下，并且 talez 可以使用 SVG，但是我没有成功创建

<svg viewbox="0 0 100 25">
  <path fill="#9EAFFD" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
</svg>