小编Ezr*_*ab_的帖子

我正在尝试解决有关滑块组件上所选颜色的打字稿错误：

<Slider
  color="brown"
/>

错误是：Type '"brown"' is not assignable to type '"primary" | "secondary" | undefined'.

我通过增强 createPalette 文件在我的主题上设置了棕色。

declare module '@mui/material/styles/createPalette' {
    interface Palette {
        brown: PaletteColor
    }

    interface PaletteOptions {
        brown: PaletteColorOptions
    }
}

所以现在我仍然遇到错误，我在文件中查找Slider.d.ts并找到了一个接口：SliderPropsColorOverrides。

export interface SliderPropsColorOverrides {}
...
color?: OverridableStringUnion<'primary' | 'secondary', SliderPropsColorOverrides>;

我尝试将它与我的棕色合并：

declare module '@mui/material/Slider' {
    interface SliderPropsColorOverrides {
        darkest_blue: PaletteColorOptions
    }
}

但没有运气。要么我的 IDE (PhpStorm 2021.3) 没有编译新的打字稿代码，要么我遗漏了一些东西。

nuxt.js 始终默认为，localhost尽管主机被定义frontend.gradez.loc 为nuxt.config.js

内容nuxt.config.js：

server: {
  host: 'frontend.gradez.loc',
  port: 3000
},

内容package.json：

"config": {
  "nuxt": {
    "host": "frontend.gradez.loc",
    "port": "3000"
  }
}

nuxt启动脚本为dev：

"dev": "nuxt --hostname frontend.gradez.loc --port 3000",

由于某些奇怪的原因，启动开发脚本时它总是默认为：Listening on: http://localhost:3000/

我尝试在 React 上做同样的事情，我唯一要做的就是创建一个.env文件，并在其中添加host=frontend.gradez.loc，它的工作原理就像这样。

我一直在寻找这个问题的解决方案很长一段时间，但我似乎找不到这个问题的最佳解决方案。基本上我有一个手风琴，当用户打开它时，它应该轻轻地向下滑动，并有一个很好的过渡。

我很确定仅使用 css 就可以做到这一点。如果我错了，请纠正我，但 css 过渡的性能比 js 过渡更好。

现在我面临的问题的 HTML 是：

<transition name="slide-down">
  <ul v-if="isDisplayingOpeningHours" class="mt-2 text-sm flex flex-col space-y-2">
    <li v-for="i in 10" :key="i"> <!-- just for testing purposes -->
      element
    </li>
  </ul>
</transition>

CSS 是：

<transition name="slide-down">
  <ul v-if="isDisplayingOpeningHours" class="mt-2 text-sm flex flex-col space-y-2">
    <li v-for="i in 10" :key="i"> <!-- just for testing purposes -->
      element
    </li>
  </ul>
</transition>

这导致过渡不流畅。滑下来看上去没什么问题，但是滑上去的时候就真的很卡顿，一点也不流畅！如果我设置了max-height: 10rem它并不会使它变得更好。我希望有人可以调试帮助我解决这个问题，也许可以教我更多关于 vue 转换和 js 与 css 转换的知识。

编辑：
只是为了澄清，过渡本身应该仅由 css 组成。手风琴的开场是用js，没问题。另外，如果能看到一个与原生 vue-transition 组件一起使用的转换示例，那就太好了。

编辑2：
这是一个与我有同样问题的codesandbox。 https://codesandbox.io/s/frosty-bash-lmc2f?file=/src/components/HelloWorld.vue

这个问题之前可能已被问过并回答了一千次,但我不知道是不是因为SEO,我找不到合适的解决方案.我在Chrome中获得未定义或空白文本.

$('input[type="text"]').on('input', (a, b) => {
    console.log(this.value);
});

这仍然在控制台中返回undefined我也尝试过:

$('input[type="text"]').on('input', (a, b) => {
       console.log(b);
    });

$('input[type="text"]').on('input', (a, b) => {
       console.log($(this).val());
    });

$('input[type="text"]').on('input', (a, b) => {
       console.log(a.value);
    });

$('input[type="text"]').on('input', (a, b) => {
       console.log(b.value);
    });

任何想法都将非常感激.

我很难理解将这个很棒的插件安装到 nuxt 的文档。据我了解，我很难相信，您必须导出插件文件中的所有规则。我尝试导出一些规则，但 nuxt 不知道 ValidationObserver 组件是什么。