<template>
	<div class="your-own-parent-wrap-class-name">
		<!--
			组件本身是绝对定位，按需，可以通过如下（包括但不限于）的方式调整：
				给组件包裹一个不是默认定位（no-static）的父级块元素。
			组件支持的属性：
				size: 字符串类型，可选值：mini（默认）/ small / normal / large
		-->
		<broadcast-stick ref="broadcastStick" size="mini">
			<!--具名插槽支持替换左侧的图标 -->
			<template #icon>
				<!--字体图标 -->
				<div class="your-own-icon-class-name"></div>
				<!--图片资源 -->
				<img src="/your/own/picture/path.extname" />
			</template>
			<!--默认插槽支持下面三种情况之一 -->
			<!--纯文本 -->
			Your text for broadcast stick will be shown on screen as a single line
			<!--单个HTML元素 -->
			<div>
				Your text for broadcast stick will be shown on screen as a single line
			</div>
			<!--复杂的HTML元素 -->
			<!--
				包括了嵌套和多行元素，
				这时候你需要：
					给他们的最外层套上一个父级元素，或许还要辅以样式，
					来确保他们不会发生换行。
			-->
			<div class="your-own-class-name">
				It can be
				<div>nested code 1</div>
				<div>nested code 2</div>
			</div>
		</broadcast-stick>
	</div>
</template>

<script>
// 请确保你的工程可以处理包括ES2017在内的，以及更早的特性

import { BroadcastStick } from "@jackiewongamu/broadcast-stick";

export default {
	components: {
		BroadcastStick,
	},
	mounted() {
		let vm = this;

		/**
		 * 可选。
		 * 如果出于特殊情况，需要一个延迟来启动广播，
		 * 可以手动调用组件的方法broadcast。
		 */
		vm.$nextTick(() => {
			setTimeout(() => {
				vm.$refs.broadcastStick.broadcast();
				// 这里的1000视你情况而定
			}, 1000);
		});
	},
	beforeDestroy() {
		let vm = this;

		/**
		 * 如果不再需要广播，需要手动调用组件方法shutdown杀掉广播线程，
		 * 这里只是在父组件销毁时的场景，场景不限。
		 */
		vm.$refs.broadcastStick.shutdown();
	},
};
</script>

<style lang="less">
// 组件内部的样式采用Less预编译格式编写，需要你确保你的工程可以处理这样的样式格式
</style>