vue模块移动组件

待我称王封你为后i 2023-02-12 06:27 2阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <div style="margin-left:0px;"> 
       <table> 
        <tbody> 
         <tr> 
          <td>一直都想实现类似于五百丁中简历填写中模块跟随鼠标移动的组件，最近闲来无事，自己琢磨实现了一个差不多的组件。<br><br> 其中每个模块都是组件调入（项目经验、教育经验、工作经验等），所以这里也用到了动态加载组件方式。<br> 思路：鼠标移入模块，显示相应模块的点击移动按钮，点击A模块移动按钮，此时原先A模块所在的位置上变为拖动到这里绿框模块，同时鼠标下悬浮着A模块，鼠标移动，悬浮的A模块跟随移动，绿框也跟随上下移动。 
           <div style="margin-left:0px;">
             父组件 
           </div> 
           <div style="margin-left:0px;">
             1、父组件template中的代码 
           </div> 
           <div style="margin-left:0px;"> 
            <div style="margin-left:0px;"> 
             <div style="margin-left:0px;">
               [Java]&nbsp; 
              <em>纯文本查看</em>&nbsp; 
              <em>复制代码</em> 
             </div> 
             <div style="margin-left:0px;"> 
              <div style="margin-left:0px;"> 
               <div style="margin-left:0px;"> 
                <span style="color:#FFFFFF;"><a href="http://bbs.itheima.com/#" rel="nofollow">?</a></span> 
               </div> 
               <table> 
                <tbody> 
                 <tr> 
                  <td style="text-align:left;vertical-align:baseline;"> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">01</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">02</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">03</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">04</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">05</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">06</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">07</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">08</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">09</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">10</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">11</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">12</span> 
                   </div> </td> 
                  <td style="text-align:left;vertical-align:baseline;"> 
                   <div style="margin-left:0px;"> 
                    <div style="margin-left:0px;"> 
                     <code>&lt;div </code> 
                     <code>class</code> 
                     <code>=</code> 
                     <code>"component-box"</code> 
                     <code>ref=</code> 
                     <code>"compBox"</code> 
                     <code>&gt;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>&lt;component</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>v-</code> 
                     <code>for</code> 
                     <code>=</code> 
                     <code>"(item, index) in comRoute"</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>:is=</code> 
                     <code>"item"</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>:key=</code> 
                     <code>"index"</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>@getData</code> 
                     <code>=</code> 
                     <code>"getData"</code> 
                     <code>&gt;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&lt;/component&gt;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>&lt;div :</code> 
                     <code>class</code> 
                     <code>=</code> 
                     <code>"['translate-box', {'move-icon':transType}]"</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>ref=</code> 
                     <code>"translateBox"</code> 
                     <code>v-</code> 
                     <code>if</code> 
                     <code>=</code> 
                     <code>"transType"</code> 
                     <code>&gt;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>&lt;component :is=</code> 
                     <code>"transCom"</code> 
                     <code>&gt;&lt;/component&gt;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>&lt;/div&gt;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&lt;/div&gt;</code> 
                    </div> 
                   </div> </td> 
                 </tr> 
                </tbody> 
               </table> 
              </div> 
             </div> 
            </div> 
           </div> 
           <div style="margin-left:0px;">
             2、data中定义的属性 
           </div> 
           <div style="margin-left:0px;"> 
            <div style="margin-left:0px;"> 
             <div style="margin-left:0px;">
               [JavaScript]&nbsp; 
              <em>纯文本查看</em>&nbsp; 
              <em>复制代码</em> 
             </div> 
             <div style="margin-left:0px;"> 
              <div style="margin-left:0px;"> 
               <div style="margin-left:0px;"> 
                <span style="color:#FFFFFF;"><a href="http://bbs.itheima.com/#" rel="nofollow">?</a></span> 
               </div> 
               <table> 
                <tbody> 
                 <tr> 
                  <td style="text-align:left;vertical-align:baseline;"> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">01</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">02</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">03</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">04</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">05</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">06</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">07</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">08</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">09</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">10</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">11</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">12</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">13</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">14</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">15</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">16</span> 
                   </div> </td> 
                  <td style="text-align:left;vertical-align:baseline;"> 
                   <div style="margin-left:0px;"> 
                    <div style="margin-left:0px;"> 
                     <code>comList: [</code> 
                     <code>'educationExp'</code> 
                     <code>, </code> 
                     <code>'workExp'</code> 
                     <code>, </code> 
                     <code>'projectExp'</code> 
                     <code>], </code> 
                     <code>// 模块列表</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>comLen: 0, </code> 
                     <code>// 模块的长度</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>comType: </code> 
                     <code>''</code> 
                     <code>, </code> 
                     <code>// 当前移动的模块</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>transType: </code> 
                     <code>''</code> 
                     <code>, </code> 
                     <code>// 当前移动的模块</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>coordinate: { </code> 
                     <code>// 鼠标坐标</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>mouseX: 0,</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>mouseY: 0,</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>},</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>downFlag: </code> 
                     <code>false</code> 
                     <code>, </code> 
                     <code>// 当前是否点击模块移动</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>mouseYBefore: 0, </code> 
                     <code>// 记录鼠标点击时Y坐标以及鼠标每移动30后重新记录鼠标Y坐标</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>mouseYLast: 0, </code> 
                     <code>// 实时记录鼠标移动时的Y坐标</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>nowCom: </code> 
                     <code>''</code> 
                     <code>, </code> 
                     <code>// 移动模块时，上一个模块或者下一个模块的名称</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>forFlage: </code> 
                     <code>false</code> 
                     <code>, </code> 
                     <code>// forEach遍历结束的标识</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>comRoute: [], </code> 
                     <code>// 动态加载组件列表</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>transCom: </code> 
                     <code>null</code> 
                     <code>, </code> 
                     <code>// 点击后悬浮的组件</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>compBox: </code> 
                     <code>null</code> 
                     <code>, </code> 
                     <code>// 获取当前组件在页面中的位置信息</code> 
                    </div> 
                   </div> </td> 
                 </tr> 
                </tbody> 
               </table> 
              </div> 
             </div> 
            </div> 
           </div> 
           <div style="margin-left:0px;">
             3、scrollTop为页面滚动的距顶部的距离，从父组件传过来 
           </div> 
           <div style="margin-left:0px;"> 
            <div style="margin-left:0px;"> 
             <div style="margin-left:0px;">
               [JavaScript]&nbsp; 
              <em>纯文本查看</em>&nbsp; 
              <em>复制代码</em> 
             </div> 
             <div style="margin-left:0px;"> 
              <div style="margin-left:0px;"> 
               <div style="margin-left:0px;"> 
                <span style="color:#FFFFFF;"><a href="http://bbs.itheima.com/#" rel="nofollow">?</a></span> 
               </div> 
               <table> 
                <tbody> 
                 <tr> 
                  <td style="text-align:left;vertical-align:baseline;"> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">1</span> 
                   </div> </td> 
                  <td style="text-align:left;vertical-align:baseline;"> 
                   <div style="margin-left:0px;"> 
                    <div style="margin-left:0px;"> 
                     <code>props: {&nbsp; scrollTop: Number,}</code> 
                    </div> 
                   </div> </td> 
                 </tr> 
                </tbody> 
               </table> 
              </div> 
             </div> 
            </div> 
           </div> 
           <div style="margin-left:0px;">
             4、watch一些属性 
           </div> 
           <div style="margin-left:0px;"> 
            <div style="margin-left:0px;"> 
             <div style="margin-left:0px;">
               [JavaScript]&nbsp; 
              <em>纯文本查看</em>&nbsp; 
              <em>复制代码</em> 
             </div> 
             <div style="margin-left:0px;"> 
              <div style="margin-left:0px;"> 
               <div style="margin-left:0px;"> 
                <span style="color:#FFFFFF;"><a href="http://bbs.itheima.com/#" rel="nofollow">?</a></span> 
               </div> 
               <table style="width:700px;"> 
                <tbody> 
                 <tr> 
                  <td style="text-align:left;vertical-align:baseline;"> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">01</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">02</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">03</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">04</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">05</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">06</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">07</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">08</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">09</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">10</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">11</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">12</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">13</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">14</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">15</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">16</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">17</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">18</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">19</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">20</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">21</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">22</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">23</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">24</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">25</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">26</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">27</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">28</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">29</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">30</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">31</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">32</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">33</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">34</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">35</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">36</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">37</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">38</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">39</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">40</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">41</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">42</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">43</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">44</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">45</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">46</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">47</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">48</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">49</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">50</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">51</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">52</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">53</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">54</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">55</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">56</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">57</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">58</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">59</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">60</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">61</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">62</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">63</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">64</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">65</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">66</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">67</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">68</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">69</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">70</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">71</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">72</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">73</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">74</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">75</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">76</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">77</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">78</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">79</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">80</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">81</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">82</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">83</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">84</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">85</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">86</span> 
                   </div> </td> 
                  <td style="text-align:left;vertical-align:baseline;"> 
                   <div style="margin-left:0px;"> 
                    <div style="margin-left:0px;"> 
                     <code>watch: { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>comList: { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>handler(val) { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.getCom(val); </code> 
                     <code>// 模块列表改变时，实时加载组件</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>},</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>deep: </code> 
                     <code>true</code> 
                     <code>,</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>immediate: </code> 
                     <code>true</code> 
                     <code>, </code> 
                     <code>// 声明了之后会立马执行handler里面的函数</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>},</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>transType(val) { </code> 
                     <code>// 悬浮模块加载组件</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>if</code> 
                     <code>(val) { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.transCom = () =&gt; import(`./</code> 
                     <code>default</code> 
                     <code>/${val}`);</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>}</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>},</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>scrollTop: { </code> 
                     <code>// 监听页面滚动</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>handler() {},</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>immediate: </code> 
                     <code>true</code> 
                     <code>,</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>},</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>comType(newVal) { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>if</code> 
                     <code>(newVal) { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.comList.forEach((item, index) =&gt; { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>if</code> 
                     <code>(item === newVal) { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.comList[index] = </code> 
                     <code>'moveBox'</code> 
                     <code>;&nbsp; </code> 
                     <code>// 将组建列表中为comType的元素改为moveBox组件</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>}</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>});</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.getCom(</code> 
                     <code>this</code> 
                     <code>.comList);</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>}</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>},</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>downFlag(newVal) { </code> 
                     <code>// 鼠标已经点击</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>const nowThis = </code> 
                     <code>this</code> 
                     <code>;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>document.onmousemove = </code> 
                     <code>function</code> 
                     <code>(e) { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>if</code> 
                     <code>(newVal) { </code> 
                     <code>// 鼠标移动赋值</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>nowThis.coordinate.mouseX = e.clientX;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>nowThis.coordinate.mouseY = e.clientY;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>}</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>};</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>document.onmouseup = </code> 
                     <code>function</code> 
                     <code>() { </code> 
                     <code>// 鼠标松开</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>document.onmousemove = </code> 
                     <code>null</code> 
                     <code>;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>if</code> 
                     <code>(newVal) { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>nowThis.transType = </code> 
                     <code>''</code> 
                     <code>; </code> 
                     <code>// 悬浮组件置空</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>nowThis.comList.forEach((item, index) =&gt; { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>if</code> 
                     <code>(item === </code> 
                     <code>'moveBox'</code> 
                     <code>) { </code> 
                     <code>// 寻找moveBox所在位置</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>nowThis.comList[index] = nowThis.comType; </code> 
                     <code>// 还原成点击组件</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>}</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>});</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>nowThis.downFlag = </code> 
                     <code>false</code> 
                     <code>;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>nowThis.comType = </code> 
                     <code>''</code> 
                     <code>;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>nowThis.getCom(nowThis.comList);</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>}</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>};</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>},</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>coordinate: { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>handler(newVal) { </code> 
                     <code>// 悬浮组件位置</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.$refs.translateBox.style.top = `${newVal.mouseY + </code> 
                     <code>this</code> 
                     <code>.scrollTop - 40 - </code> 
                     <code>this</code> 
                     <code>.compBox.y}px`;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.$refs.translateBox.style.left = `${newVal.mouseX - </code> 
                     <code>this</code> 
                     <code>.compBox.x - 200}px`;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.mouseYLast = newVal.mouseY;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>},</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>deep: </code> 
                     <code>true</code> 
                     <code>,</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>},</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>mouseYLast(newVal) { </code> 
                     <code>// 鼠标移动Y坐标</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.forFlage = </code> 
                     <code>false</code> 
                     <code>; </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>if</code> 
                     <code>(newVal - </code> 
                     <code>this</code> 
                     <code>.mouseYBefore &gt; 30) {&nbsp;&nbsp; </code> 
                     <code>// 移动30鼠标向下移，每移动30，moveBox移动一次</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.comList.forEach((item, index) =&gt; { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>if</code> 
                     <code>(item === </code> 
                     <code>'moveBox'</code> 
                     <code>&amp;&amp; index &lt; </code> 
                     <code>this</code> 
                     <code>.comLen - 1 &amp;&amp; !</code> 
                     <code>this</code> 
                     <code>.forFlage) { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.nowCom = </code> 
                     <code>this</code> 
                     <code>.comList[index + 1];</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.$set(</code> 
                     <code>this</code> 
                     <code>.comList, index + 1, </code> 
                     <code>'moveBox'</code> 
                     <code>);</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.$set(</code> 
                     <code>this</code> 
                     <code>.comList, index, </code> 
                     <code>this</code> 
                     <code>.nowCom);</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.mouseYBefore = newVal;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.forFlage = </code> 
                     <code>true</code> 
                     <code>;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>}</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>});</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>} </code> 
                     <code>else</code> 
                     <code>if</code> 
                     <code>(newVal - </code> 
                     <code>this</code> 
                     <code>.mouseYBefore &lt; -30) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
                     <code>// 鼠标向上移</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.comList.forEach((item, index) =&gt; { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>if</code> 
                     <code>(item === </code> 
                     <code>'moveBox'</code> 
                     <code>&amp;&amp; index &gt; 0 &amp;&amp; !</code> 
                     <code>this</code> 
                     <code>.forFlage) { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.nowCom = </code> 
                     <code>this</code> 
                     <code>.comList[index - 1];</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>// this.comList[index - 1] = 'moveBox';</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>// this.comList[index] = this.nowCom;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>// this.comList[index]数组中采用这种方式赋值，vue是不能检测到数组的变动的</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.$set(</code> 
                     <code>this</code> 
                     <code>.comList, index - 1, </code> 
                     <code>'moveBox'</code> 
                     <code>);</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.$set(</code> 
                     <code>this</code> 
                     <code>.comList, index, </code> 
                     <code>this</code> 
                     <code>.nowCom);</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.mouseYBefore = newVal;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.forFlage = </code> 
                     <code>true</code> 
                     <code>;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>}</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>});</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>}</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>},</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>},</code> 
                    </div> 
                   </div> </td> 
                 </tr> 
                </tbody> 
               </table> 
              </div> 
             </div> 
            </div> 
           </div> 
           <div style="margin-left:0px;">
             其中forFlage的作用是，在forEach中不能使用break这样来结束循环，所以用forFlage来表示，当遍历到moveBox后， 就结束遍历 
           </div> 
           <div style="margin-left:0px;">
             5、methods 
           </div> 
           <div style="margin-left:0px;"> 
            <div style="margin-left:0px;"> 
             <div style="margin-left:0px;">
               [JavaScript]&nbsp; 
              <em>纯文本查看</em>&nbsp; 
              <em>复制代码</em> 
             </div> 
             <div style="margin-left:0px;"> 
              <div style="margin-left:0px;"> 
               <div style="margin-left:0px;"> 
                <span style="color:#FFFFFF;"><a href="http://bbs.itheima.com/#" rel="nofollow">?</a></span> 
               </div> 
               <table> 
                <tbody> 
                 <tr> 
                  <td style="text-align:left;vertical-align:baseline;"> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">01</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">02</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">03</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">04</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">05</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">06</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">07</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">08</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">09</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">10</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">11</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">12</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">13</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">14</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">15</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">16</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">17</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">18</span> 
                   </div> </td> 
                  <td style="text-align:left;vertical-align:baseline;"> 
                   <div style="margin-left:0px;"> 
                    <div style="margin-left:0px;"> 
                     <code>methods: { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>getCom(val) { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.comRoute = [];</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>val.forEach((item) =&gt; { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.comRoute.push(() =&gt; import(`./</code> 
                     <code>default</code> 
                     <code>/${item}`));</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>});</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>},</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>getData(data, dataY, dataX) {&nbsp; </code> 
                     <code>// 模块组件点击后，父组件中调用此方法，并传值过来</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.comType = data;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.transType = data;&nbsp;&nbsp;&nbsp; </code> 
                     <code>// 目前考虑点击后立即移动，点击不移动的情况后期再考虑</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.downFlag = </code> 
                     <code>true</code> 
                     <code>;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.mouseYBefore = dataY;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.$nextTick(() =&gt; { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.$refs.translateBox.style.top = `${dataY + </code> 
                     <code>this</code> 
                     <code>.scrollTop - 40 - </code> 
                     <code>this</code> 
                     <code>.compBox.y}px`;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.$refs.translateBox.style.left = `${dataX - </code> 
                     <code>this</code> 
                     <code>.compBox.x - 200}px`;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>});</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>},</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>},</code> 
                    </div> 
                   </div> </td> 
                 </tr> 
                </tbody> 
               </table> 
              </div> 
             </div> 
            </div> 
           </div> 
           <div style="margin-left:0px;">
             6、mounted 
           </div> 
           <div style="margin-left:0px;"> 
            <div style="margin-left:0px;"> 
             <div style="margin-left:0px;">
               [JavaScript]&nbsp; 
              <em>纯文本查看</em>&nbsp; 
              <em>复制代码</em> 
             </div> 
             <div style="margin-left:0px;"> 
              <div style="margin-left:0px;"> 
               <div style="margin-left:0px;"> 
                <span style="color:#FFFFFF;"><a href="http://bbs.itheima.com/#" rel="nofollow">?</a></span> 
               </div> 
               <table> 
                <tbody> 
                 <tr> 
                  <td style="text-align:left;vertical-align:baseline;"> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">1</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">2</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">3</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">4</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">5</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">6</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">7</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">8</span> 
                   </div> </td> 
                  <td style="text-align:left;vertical-align:baseline;"> 
                   <div style="margin-left:0px;"> 
                    <div style="margin-left:0px;"> 
                     <code>mounted() { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.comLen = </code> 
                     <code>this</code> 
                     <code>.comList.length;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.compBox = </code> 
                     <code>this</code> 
                     <code>.$refs.compBox.getBoundingClientRect();</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>const that = </code> 
                     <code>this</code> 
                     <code>;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>window.onresize = () =&gt; (() =&gt; { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>that.compBox = </code> 
                     <code>this</code> 
                     <code>.$refs.compBox.getBoundingClientRect();</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>})();</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>},</code> 
                    </div> 
                   </div> </td> 
                 </tr> 
                </tbody> 
               </table> 
              </div> 
             </div> 
            </div> 
           </div> 
           <div style="margin-left:0px;">
             子组件 
           </div> 
           <div style="margin-left:0px;">
             1、子组件template代码 
           </div> 
           <div style="margin-left:0px;"> 
            <div style="margin-left:0px;"> 
             <div style="margin-left:0px;">
               [JavaScript]&nbsp; 
              <em>纯文本查看</em>&nbsp; 
              <em>复制代码</em> 
             </div> 
             <div style="margin-left:0px;"> 
              <div style="margin-left:0px;"> 
               <div style="margin-left:0px;"> 
                <span style="color:#FFFFFF;"><a href="http://bbs.itheima.com/#" rel="nofollow">?</a></span> 
               </div> 
               <table> 
                <tbody> 
                 <tr> 
                  <td style="text-align:left;vertical-align:baseline;"> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">1</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">2</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">3</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">4</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">5</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">6</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">7</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">8</span> 
                   </div> </td> 
                  <td style="text-align:left;vertical-align:baseline;"> 
                   <div style="margin-left:0px;"> 
                    <div style="margin-left:0px;"> 
                     <code>&lt;div class=</code> 
                     <code>"pad-box hover-box name-box"</code> 
                     <code>&gt;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>&lt;p class=</code> 
                     <code>"absolute-box"</code> 
                     <code>&gt;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>&lt;i class=</code> 
                     <code>"el-icon-rank operation-icon move-icon"</code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                     <code>@mousedown=</code> 
                     <code>"mouseDown"</code> 
                     <code>&gt;&lt;/i&gt;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>&lt;i class=</code> 
                     <code>"el-icon-circle-plus operation-icon"</code> 
                     <code>&gt;&lt;/i&gt;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>&lt;i class=</code> 
                     <code>"el-icon-s-tools operation-icon"</code> 
                     <code>&gt;&lt;/i&gt;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>&lt;/p&gt;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>教育经验</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&lt;/div&gt;</code> 
                    </div> 
                   </div> </td> 
                 </tr> 
                </tbody> 
               </table> 
              </div> 
             </div> 
            </div> 
           </div> 
           <div style="margin-left:0px;">
             2、script 
           </div> 
           <div style="margin-left:0px;"> 
            <div style="margin-left:0px;"> 
             <div style="margin-left:0px;">
               [JavaScript]&nbsp; 
              <em>纯文本查看</em>&nbsp; 
              <em>复制代码</em> 
             </div> 
             <div style="margin-left:0px;"> 
              <div style="margin-left:0px;"> 
               <div style="margin-left:0px;"> 
                <span style="color:#FFFFFF;"><a href="http://bbs.itheima.com/#" rel="nofollow">?</a></span> 
               </div> 
               <table> 
                <tbody> 
                 <tr> 
                  <td style="text-align:left;vertical-align:baseline;"> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">01</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">02</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">03</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">04</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">05</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">06</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">07</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">08</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">09</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">10</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">11</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">12</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">13</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">14</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">15</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">16</span> 
                   </div> 
                   <div style="margin-left:0px;"> 
                    <span style="color:#afafaf;">17</span> 
                   </div> </td> 
                  <td style="text-align:left;vertical-align:baseline;"> 
                   <div style="margin-left:0px;"> 
                    <div style="margin-left:0px;"> 
                     <code>export </code> 
                     <code>default</code> 
                     <code>{ </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>name: </code> 
                     <code>'educationExp'</code> 
                     <code>,</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>data() { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>return</code> 
                     <code>{ </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>comType: </code> 
                     <code>'educationExp'</code> 
                     <code>,</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>mouseYBefore: 0,</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>mouseXBefore: 0,</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>};</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>},</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>methods: { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>mouseDown(e) { </code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.mouseYBefore = e.clientY;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.mouseXBefore = e.clientX;</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>this</code> 
                     <code>.$emit(</code> 
                     <code>'getData'</code> 
                     <code>, </code> 
                     <code>this</code> 
                     <code>.comType, </code> 
                     <code>this</code> 
                     <code>.mouseYBefore, </code> 
                     <code>this</code> 
                     <code>.mouseXBefore);</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
                     <code>},</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>&nbsp;&nbsp;</code> 
                     <code>},</code> 
                    </div> 
                    <div style="margin-left:0px;"> 
                     <code>};</code> 
                    </div> 
                   </div> </td> 
                 </tr> 
                </tbody> 
               </table> 
              </div> 
             </div> 
            </div> 
           </div> 文章转载自<br><br> 链接：<a href="https://juejin.im/post/5ec23dfa6fb9a04342682c7c" rel="nofollow">https://juejin.im/post/5ec23dfa6fb9a04342682c7c</a></td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>