向按钮 autodesk Forge 发出加载 css

Question

所以我一直在使用 Autodesk 查看器并设法将其包含在 vue.js 项目中。

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

我现在的问题是未加载添加到查看器按钮的 css classes。

我的意思是：

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 class。

 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 属性修复按钮，它们现在看起来像教程。

对于给您带来的不便，我们深表歉意，希望post对其他人有所帮助。

向按钮 autodesk Forge 发出加载 css

Issue loading css to button autodesk Forge

autodesk-viewer

autodesk-forge