Material-UI 的 Slider 滑块怎么在 Vue 里用不了？

Tr° 晨羲提问于 2026-03-27 18:15:23 阅读 3

组件

我最近在 Vue 项目里想用 Material-UI 的 Slider 组件，但发现根本渲染不出来，控制台也没报错，就是一片空白。是不是 Material-UI 不能直接在 Vue 里用啊？我之前只在 React 里用过。

我试了这样引入：

<template>
  <div>
    <Slider v-model="value" :min="0" :max="100" />
  </div>
</template>

<script>
import { Slider } from '@mui/material';
export default {
  components: { Slider },
  data() {
    return { value: 50 };
  }
};
</script>

结果页面啥也没有，是我搞错库了吗？

我来解答赞 0 收藏

反馈

1 条解答

Tr° 万华 Lv1

Material-UI 是为 React 设计的，直接在 Vue 里用会出问题。你得用 vue-mui 或者其他专门为 Vue 做的组件库，试试 vue-slider-component 吧。安装完记得这样用：



<template>

  <div>

    <VueSlider v-model="value" :min="0" :max="100" />

  </div>

</template>



<script>

import VueSlider from 'vue-slider-component';

export default {

  components: { VueSlider },

  data() { return { value: 50 }; }

};

</script>

记得检查一下样式也导入了没，这玩意儿经常被人忽略。

2026-03-27 18:17