Question

首先让我说mdc文档很难像我这样的非专业人士。

我正在使用Elixir Phoenix和Brunch。我导入，一切都很好。

import {MDCTab, MDCTabFoundation} from '@material/tabs'; import
{MDCTabBar, MDCTabBarFoundation} from '@material/tabs'; import
{MDCTabBarScroller, MDCTabBarScrollerFoundation} from
'@material/tabs';

我在我导出的单独函数中手动实例化标签栏

export var Tabbable = {
  run: function(MDCTabBar, el){
    var myDynamicTabBar = window.myDynamicTabBar = new MDCTabBar(document.querySelector('#' + el));

遵循此类文档

const tabBar = new MDCTabBar(document.querySelector('#my-mdc-tab-bar'));

但与文档在其代码段

中使用标签栏略有不同

var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));

但是，每当我尝试使用mdc时，我都会收到“未定义”错误。因此，我没有使用它： - ）

现在，当用户点击标签栏时，我会抓住这样：

myDynamicTabBar.listen('MDCTabBar:change', function ({detail: tabs}) {
  var nthChildIndex = tabs.activeTabIndex;
  updatePanel(nthChildIndex);
});

微妙的区别在于我的myDynamicTabBar是MDCTabBar，但文档的dynamicTabBar是mdc.tabs.MDCTabBar

我的标签控件有效，但只会在控制台中显示错误：

未捕获错误：作为activeTab提供的选项卡组件无效：选项卡不是在此组件的选项卡列表中找到

这可能是因为我没有使用mdc.tabs？该文档指出更改事件发生在MDCTabBar上。

因此，如何摆脱控制台中这个烦人的错误？

为什么我不能访问全局mdc？我在Brunch文件中试过这个

globals: { mdc: "@material"}

但没有好处。

Answer 1

我就在你身后！我也对文档感到沮丧:(

您在this Elixir thread中回答了自己的问题，这是非常有用的信息。

Answer 2

我在这个帖子https://github.com/hyperapp/hyperapp/issues/546找到了真正的解决方案 MDCTabBar会自动启动其子级。因此，启动选项卡将导致该错误。修复只是启动MDCTabBar

@material material-component-web无效的标签组件，以activeTab形式给出

2 个答案: