1

我希望具有与 Polymer paper-elements 下拉菜单相同的功能，但已禁用。

下拉菜单代码：

<paper-dropdown-menu label="Disabled dinosaurs" disabled>
 <paper-listbox class="dropdown-content">
    <paper-item>allosaurus</paper-item>
    <paper-item>brontosaurus</paper-item>
    <paper-item>carcharodontosaurus</paper-item>
    <paper-item>diplodocus</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

在第一行有：<paper-dropdown-menu label="Disabled dinosaurs" disabled>

问题是如果禁用参数在，如何将 this.disabled = true 传递给 Polymer 类<my-element tag>？

那么我什么时候有<my-element disabled> this.disabled=true，如果<my element nothing there> this.disabled=false？

4

1 回答 1

1

这应该只使用具有布尔类型和 reflectToAttribute 的聚合物属性。

<html>
<head>
	<base href="http://polygit.org/polymer+v2.0.0-rc.7/webcomponentsjs+v1.0.0-rc.11/shadydom+webcomponents+:master/shadycss+webcomponents+:master/components/">

	<link href="polymer/polymer.html" rel="import">

	<script src="webcomponentsjs/webcomponents-loader.js"> </script>
</head>

<body>

<my-el disabled>
	<h3>Disabled Element</h3>
</my-el>
	
<my-el>
	<h3>Enabled Element</h3>
</my-el>


<dom-module id="my-el">
	<template>
		<style>
			.disabledInfo { display: none; }
			:host([disabled]) .disabledInfo { display: block; }
			:host([disabled]) .enabledInfo { display: none; }
		</style>
		<slot></slot>
		<div class="disabledInfo">I am disabled</div>
		<div class="enabledInfo">I am enabled</div>
		<br /><br />
	</template>
	<script>
		class MyEl extends Polymer.Element {
			static get properties() {
				return {
					disabled: {
						type: Boolean,
						reflectToAttribute: true,
						value: false
					}
				};
			}
			static get is() { return 'my-el'; }
		}
		customElements.define(MyEl.is, MyEl);
	</script>
</dom-module>

</body>
</html>

另请参阅 codepen http://codepen.io/daKmoR/pen/pPKJxN?editors=1000

于 2017-05-14T17:25:47.337 回答