Question

我希望具有与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>

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

所以当我有<my-element disabled> this.disabled=true和<my element nothing there> this.disabled=false时？

Answer 1

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

＆＃13;

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

＆＃13;

在codepen上也可以看到它 http://codepen.io/daKmoR/pen/pPKJxN?editors=1000

Polymer 2.0数据绑定 - 从html属性到Polymer类

1 个答案: