个人中心
gpt4 book ai didi

javascript - 调用toggle() 时，paper-dialog 和paper-transition-center 不显示

转载 作者：行者123 更新时间：2023-12-03 11:05:43 26 4
gpt4 key购买 nike

我有以下代码

element.html

<link rel="import"
      href="bower_components/core-toolbar/core-toolbar.html" />
<link rel="import"
      href="bower_components/paper-icon-button/paper-icon-button.html" />
<link rel="import"
      href="bower_components/core-icons/core-icons.html" />
<link rel="import"
      href="bower_components/core-header-panel/core-header-panel.html" />
<link rel="import"
      href="bower_components/core-drawer-panel/core-drawer-panel.html" />
<link rel="import"
      href="bower_components/core-menu/core-menu.html" />
<link rel="import"
      href="bower_components/core-item/core-item.html" />
<link rel="import"
      href="bower_components/paper-fab/paper-fab.html" />
<link rel="import"
      href="bower_components/paper-dialog-master/paper_dialog_transition.html">
<link rel="import"
      href="bower_components/paper-dialog-master/paper_dialog.html">

Home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Maps</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial=scalle=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="elements.html" />
    <link rel="stylesheet" href="styles/Home.css" />
    <script src="scripts/app.js"></script>
    <style type="text/css">
        #dlgAddMap
        {
            height:100px;
            width:100px;
            background:#fff;
        }
    </style>
</head>
<body fullbleed layout vertical>
    <core-drawer-panel id="drawerPanel">
        <core-header-panel drawer>
            <core-toolbar>Menu</core-toolbar>
            <core-menu>
                <core-item label="Maps"></core-item>
            </core-menu>
        </core-header-panel>

        <core-header-panel main>
            <core-toolbar>
                <paper-icon-button id="navicon" icon="menu"></paper-icon-button>
                <div>Maps</div>
            </core-toolbar>
            <div class="content">
                <paper-fab icon="add" id="addMap" onclick="document.querySelector('#dlgAddMap').toggle();" class="addButton"></paper-fab>
            </div>
        </core-header-panel>
    </core-drawer-panel>
    <paper-dialog heading="Title for dialog" transition="paper-transition-center" id="dlgAddMap">
        <paper-button label="Cancel" affirmative></paper-button>
        <paper-button label="Accept" affirmative autofocus></paper-button>
    </paper-dialog>
</body>

</html>

为了完整性

App.js

document.addEventListener('polymer-ready', function () {
    var navicon = document.getElementById('navicon');
    var addMap = document.getElementById('addMap');
    var drawerPanel = document.getElementById('drawerPanel');

    navicon.addEventListener('click', function () {
        drawerPanel.togglePanel();
    });

    addMap.addEventListener('click', function () {
        try {
            if (document.querySelector('#dlgAddMap')) {
                document.querySelector('#dlgAddMap').toggle();
            }
            else {
                alert('Cannot find the Add Map Dialog');
            }
        }
        catch ( e )
        {
            alert(e.message);
        }
    });
});

问题是，即使我单击 paper-fab 按钮，我也无法显示对话框。尽管您看到按钮甚至接受了点击，但什么也没有发生。

最佳答案

最终的答案是进口。 polymer 下载在 Bower_components 中使用下划线，但在组件的文件夹名称和文件名中使用破折号(“-”)。只需更正 elements.html 中的条目即可更正该问题

<link rel="import"
      href="bower_components/core-toolbar/core-toolbar.html" />
<link rel="import"
      href="bower_components/paper-icon-button/paper-icon-button.html" />
<link rel="import"
      href="bower_components/core-icons/core-icons.html" />
<link rel="import"
      href="bower_components/core-header-panel/core-header-panel.html" />
<link rel="import"
      href="bower_components/core-drawer-panel/core-drawer-panel.html" />
<link rel="import"
      href="bower_components/core-menu/core-menu.html" />
<link rel="import"
      href="bower_components/core-item/core-item.html" />
<link rel="import" 
      href="bower_components/paper-button/paper-button.html" />
<link rel="import"
      href="bower_components/paper-fab/paper-fab.html" />
<link rel="import"
      href="bower_components/paper-dialog/paper-dialog.html" />
<link rel="import"
      href="bower_components/paper-dialog/paper-dialog-transition.html" />
<link rel="import"
      href="bower_components/paper-dialog/paper-action-dialog.html" />

关于javascript - 调用toggle() 时，paper-dialog 和paper-transition-center 不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27867845/

26 4 0
文章推荐： javascript - 访问javascript中的隐藏值
文章推荐： .net - XSLT 自闭合标签问题
文章推荐： sockets - 冲洗 socket 是什么意思？
文章推荐： javascript - 无法从 Modal 元素获取 $file，Angular JS
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com