【开源DEMO】我也不知道这是个什么组件

原创

tanpenggood 2023-06-05 14:48:13 博主文章分类：OpenSource ©著作权

©著作权归作者所有：来自51CTO博客作者tanpenggood的原创作品，请联系作者获取转载授权，否则将追究法律责任

版本 v2
码云地址：https://gitee.com/tanpenggood/compoment 有需求就更新ing…

目录结构

|-component
	|-v2
	    |-index.css //封装的组件样式
	    |-index.js //操作函数
	    |-index.html //demo

思考，这个组件可以拿来做什么？有价值吗？

同页面间数据联动、通信
状态管理
页面操作记录

组件效果

【开源DEMO】我也不知道这是个什么组件_数据

使用示例

1、引入组件

<link rel="stylesheet" type="text/css" href="./index.css">
<script type="text/javascript" src="./index.js"></script>

2、指定result-item在DOM上的挂载点
目前只支持挂载在id="result-body"的DOM元素上
如：

【开源DEMO】我也不知道这是个什么组件_css_02

数据联动生成的DOM结构，就会挂载在id="result-body"的DOM元素下
3、指定联动数据入口
有两种方式指定联动数据入口

方式一：使用class="menu-item" 【推荐，但是有限制条件：需要为双标签，且联动显示的数据是双标签的文本内容】
如：

<span class="menu-item" id="1">COMPONENT测试1</span>
<span class="menu-item" id="2">COMPONENT测试2</span>
<span class="menu-item" id="3">COMPONENT测试3</span>
<span class="menu-item" id="4">COMPONENT测试4</span>
<span class="menu-item" id="5">COMPONENT测试5</span>

方式二：显式调用函数 handleClickMenuItem(key, value)

<select class="result-item" onchange="handleClickMenuItem($(this).find('option:selected').attr('id'), this.value)">
	<option class="result-item" id="6">COMPONENT测试6</option>
	<option class="result-item" id="7">COMPONENT测试7</option>
	<option class="result-item" id="8">COMPONENT测试8</option>
	<option class="result-item" id="9">COMPONENT测试9</option>
	<option class="result-item" id="10">COMPONENT测试10</option>
</select>