将css加载到按钮autodesk Forge

Question

因此，我一直在使用autodesk查看器，并设法将其包含在一个vue.js项目中。

我正在使用V6查看器，并使用Vue cli-3创建了我的项目，并且一直在编写教程。

我现在的问题是，添加到查看器按钮中的css类没有加载。

我的意思是：

ToolbarExtension.prototype.createUI = function() {

 var viewer = this.viewer;

 // Button 1
 var button1 = new Autodesk.Viewing.UI.Button('my-view-front-button');
 button1.onClick = function(e) {
   viewer.setViewCube('front');
 };
 button1.addClass('my-view-front-button');
 button1.setToolTip('View front');

 // Button 2
 var button2 = new Autodesk.Viewing.UI.Button('my-view-back-button');
 button2.onClick = function(e) {
   viewer.setViewCube('back');
 };
 button2.addClass('my-view-back-button');
 button2.setToolTip('View Back');

 // SubToolbar
 this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('my-custom-view-toolbar');
 this.subToolbar.addControl(button1);
 this.subToolbar.addControl(button2);

 viewer.toolbar.addControl(this.subToolbar);
 };

使用此代码，我可以创建一个带有两个按钮的工具栏。

基本上，这些行向按钮中添加了一个css类。

 button1.addClass('my-view-front-button');
 button2.addClass('my-view-back-button');

这是我的结果

​

​

如你所见，我的纽扣是空白的，应该是红色和蓝色的。

.my-view-front-button {
  background: red;
}
.my-view-back-button {
  background: blue;
}

我试着使用另一个空白vue项目( cli-3也是如此，它确实有效)。

我想找一个解决这个问题的办法。我在这个库中遇到了很多问题，而不是很多解决方案。

谢谢你的帮助。

如果有什么遗漏，我会尽力回答你的问题。

Answer 1

因此，我查找了我的代码并找到了解决我的问题的方法。

我使用查看器作为子组件，问题是，我必须从<style lang="scss" scoped></style>指令中更改作用域属性。

删除scoped属性修复了按钮，它们现在看起来像教程一样。

很抱歉给您带来不便，希望这篇文章能帮助到其他人。