设置小部件的属性

小部件的属性会自动从自定义元素中暴露出来，作为属性、事件或属性。

以下 EmailSignup 小部件包含几种不同的属性类型。

src/widgets/EmailSignup.tsx

import { tsx, create } from '@dojo/framework/core/vdom';
import * as css from './styles/EmailSignup.m.css';
import icache from '@dojo/framework/core/middleware/icache';

export interface EmailSignupProperties {
	title?: string;
	onSignUp?: () => void;
	signUpBonusDate?: Date;
	successMessages?: string[];
}

function randomEntry(arr: string[]) {
	return arr[Math.floor(Math.random() * arr.length)];
}

const factory = create({ icache }).properties<EmailSignupProperties>();

export default factory(function EmailSignup({ middleware: { icache }, properties }) {
	const { title, signUpBonusDate, successMessages } = properties();

	const signedUp = icache.getOrSet('signedUp', false);
	const signUp = () => {
		const { onSignUp } = properties();

		// post email address to a server
		icache.set('signedUp', true);
		icache.set('successMessage', successMessages ? randomEntry(successMessages) : 'Thank you for signing up!');
		onSignUp && onSignUp();
	};

	return (
		<div key="root" classes={css.root}>
			<div key="title" classes={css.title}>
				{title || 'Subscribe Now'}
			</div>
			{signedUp ? (
				<div key="confirmation" classes={css.thanks}>
					{icache.get('successMessage')}
				</div>
			) : (
				<div key="signup" classes={css.signup}>
					{signUpBonusDate && <div>Sign up by {signUpBonusDate.toLocaleDateString()}</div>}
					<input type="text" />
					<button onclick={signUp}>Sign Up</button>
				</div>
			)}
		</div>
	);
});

属性

string 和对象类型的 widget 属性会自动作为 HTML 属性添加到您的自定义元素中。继续以电子邮件订阅示例为例，title 属性 ({ title?: string }) 可以通过向 HTML 添加 title 属性来定制。由于 title 是一个字符串属性，因此 HTML 属性的值将用作 title 属性的值，无需转换。

<ref-email-signup id="emailSignup" title="Subscribe to Our Newsletter"></ref-email-signup>

其他可序列化属性，如数组和配置对象，可以通过传递序列化 JSON 来通过 HTML 属性设置。sucessMessages 属性 ({ successMessages?: string[] }) 可以通过向 HTML 添加 successmessages 属性来设置。

<ref-email-signup
  id="emailSignup"
  title="Subscribe to Our Newsletter"
  successmessages='["Thanks!","Thank you for signing up","You are the best!"]'
></ref-email-signup>

此处，successmessages 属性的值将被反序列化并设置为 successMessages 属性。

请注意，如果属性的值不是有效的 JSON，则不会设置属性。

事件

以 on 开头并具有函数签名的 widget 属性会作为事件暴露出来。发出的事件是属性名称的小写部分，不带 "on"。监听 onSignUp 属性 ({ onSignUp?: () => void }) 将如下所示。

<script>
    emailSignup.addEventListener('signup', () => {
        // start confetti animation 🎉
    });
</script>

属性

所有非事件 widget 属性都会自动作为自定义元素上的属性创建。这些属性可以通过 JavaScript 完全控制。在电子邮件订阅小部件中，title 和 signUpBonusDate 属性都可以通过编程方式作为属性设置。

<script>
        const now = new Date();
        emailSignup.signUpBonusDate = new Date(
            now.getFullYear(),
            now.getMonth(),
            now.getDate() + 1
        );
    </script>