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

版权声明：本文为【丶我们一起学猫叫】原创文章，允许转载，但转载必须注明出处并附带首发链接！ https://blog.csdn.net/AV_woaijava/article/details/89521729

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

目录结构

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

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

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

组件效果

使用示例

• 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元素上

  如：
  
  数据联动生成的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>
  

api

• 显式调用使用组件 handleClickMenuItem(key, value)

• 获取拼接KEY的结果集 getJointKey()

• 获取拼接Value的结果集 getJointValue()

• 重置 handleClickReset()

后续

如果只需要联动传输一个值，可以查看v1版本：https://gitee.com/tpswpu/compoment/tree/v1/