2020-09-28-x

2020-09-28

todo-list

• 耗材NPI打样编辑页面

record-list

• html中javascript右键自定义菜单

• 右键菜单html

  <tr v-for="(x, index) in itemList" v-bind:key="index" v-on:contextmenu="itemRightClick($event, index)">
      <td><input v-model="x.itemNo"></td>
      <td><input v-model="x.customer"></td>
      <td><input v-model="x.project"></td>
      <td><input v-model="x.product"></td>
      <td><input v-model="x.machine"></td>
      <td><input v-model="x.clampPosition"></td>
      <td><input v-model="x.productName"></td>
      <td><input v-model="x.sampleMaterial"></td>
      <td><input v-model="x.processMaterial"></td>
      <td><input v-model="x.brand"></td>
      <td><input v-model="x.specification"></td>
      <td><input v-model="x.processDemand"></td>
      <td><input v-model="x.rohsDemand"></td>
      <td><input v-model="x.workstation"></td>
      <td><input v-model="x.demandNum"></td>
      <td><input v-model="x.demandDate"></td>
      <td><input v-model="x.averageUse"></td>
      <td><input v-model="x.verifyFlag"></td>
      <td><input v-model="x.verifyDate"></td>
      <td><input v-model="x.verifyCycle"></td>
      <td><input v-model="x.applyReason"></td>
  </tr>
  
  <tr v-for="(x, index) in compareList" v-bind:key="index" v-on:contextmenu="compareRightClick($event, index)">
      <td><input v-model="x.itemNo"/></td>
      <td><input v-model="x.project"/></td>
      <td><input v-model="x.product"/></td>
      <td><input v-model="x.machine"/></td>
      <td><input v-model="x.clampPosition"/></td>
      <td><input v-model="x.productName"/></td>
      <td><input v-model="x.materialNo"/></td>
      <td><input v-model="x.brand"/></td>
      <td><input v-model="x.specification"/></td>
      <td><input v-model="x.vendor"/></td>
      <td><input v-model="x.instruction"/></td>
      <td><input v-model="x.averageUse"/></td>
      <td><input v-model="x.measureUnit"/></td>
      <td><input v-model="x.memo"/></td>
  </tr>
  
  <!-- 右键菜单 -->
  <div class="menu" v-if="menuDisplay" v-bind:style="{top: menuY + 'px', left: menuX + 'px'}">
      <ul>
          <li v-on:click="menuType === 'item' ? addItemRow() : addCompareRow()"><a href="###">添加一行</a></li>
          <li v-if="itemList.length !== 1" v-on:click="menuType === 'item' ? deleteItemRow() : deleteCompareRow()"><a href="###">删除本行</a></li>
      </ul>            
  </div>

• 右键菜单javascript

  appClick () {
      this.menuDisplay = false;
  },
  menuShow (e) {
      this.menuDisplay = true;
      this.menuX = e.clientX;
      this.menuY = e.clientY;
      e.stopPropagation();
      e.returnValue = false;
  },
  itemRightClick (e, index) {
      this.menuType = 'item';
      this.itemClickedIndex = index;
      this.menuShow(e);
  },
  compareRightClick (e, index) {
      this.menuType = 'compare';
      this.compareClickIndex = index;
      this.menuShow(e);
  },
  addItemRow () {
      this.itemList.splice(this.itemClickedIndex + 1, 0, new CsDemandNewItem());
      this.updateItemListNo();
  },
  deleteItemRow () {
      this.itemList.splice(this.itemClickedIndex, 1);
      this.updateItemListNo();
  },
  updateItemListNo () {
      let count = 0;
      this.itemList.forEach(item => {
          item.itemNo = ++count;
      });
  },
  addCompareRow () {
      this.compareList.splice(this.compareClickIndex + 1, 0, new CsDemandNewCompare());
      this.updateCompareListNo();
  },
  deleteCompareRow () {
      this.compareList.splice(this.compareClickIndex, 1);
      this.updateCompareListNo();
  },
  updateCompareListNo () {
      let count = 0;
      this.compareList.forEach(compare => {
          compare.itemNo = ++count;
      });
  },

• 右键菜单css

  /* 右键菜单 */
  .menu {
      margin: 0;
      padding: 0;
      list-style-type: none;
      background: white;
      width: 5rem;
      border: 1px solid #ccc;
      position: absolute;
      box-shadow: 0 0 5px rgba(0,0,0,.2);
      transition: all .1s ease;
      font-size: 1px;    
  }
  .menu ul {
      margin: 0;
      padding: 0;
  }
  .menu li {
      margin: 0;
      padding: 0;
      border: 1px solid #ccc;
      list-style-type: none;
      width: 100%;
  }
  .menu li a {
      display: inline-block;
      text-decoration: none;
      color: #555;
      width: 100%;
      padding: 5px 0;
      text-align: center;
  }
  .menu li:first-of-type{
      border-radius: 5px 5px 0 0;
  }
  .menu li a:hover,
  .menu li a:active {
      background: #eee;
      color: #0AAF88;
  }

• 核心代码

  <tr v-for="(x, index) in itemList" v-bind:key="index" v-on:contextmenu="itemRightClick($event, index)">
  </tr>
  
  <!-- 右键菜单 -->
  <div class="menu" v-if="menuDisplay" v-bind:style="{top: menuY + 'px', left: menuX + 'px'}">
      <ul>
          <li v-on:click="menuType === 'item' ? addItemRow() : addCompareRow()"><a href="###">添加一行</a></li>
          <li v-if="itemList.length !== 1" v-on:click="menuType === 'item' ? deleteItemRow() : deleteCompareRow()"><a href="###">删除本行</a></li>
      </ul>            
  </div>
  
  <script>
  menuShow (e) {
      this.menuDisplay = true;
      this.menuX = e.clientX;
      this.menuY = e.clientY;
      e.stopPropagation();
      e.returnValue = false;
  },
  </script>

• 解释：contextmenu事件通过$event向下传递, menuShow方法从而获取e.clientX和e.clientY,右键菜单div的css属性top = menuY + ‘px’, left: menuX + ‘px’

home-record-list

• 回来看了LOL全球总决赛入围赛，然后开始注册GoogleCloud，注册成功了。
• GCP上装了V2Ray,使用测试来看，台湾的两个服务器其实都不够好，可以再多建几个VM实例进行测试，找到最稳定延迟最小的VM，暂时感觉没YouTube上视频说的那么NB，放假了再来测试。
• 注册GCP的信息放在了自己的GitLab上

reference-site-list

JavaScript

• JavaScript自定义右键菜单

GoogleCloud

• Google Cloud Platform 注册和使用指南
• 谷歌云一键搭建 V2Ray 详细图文教程
• 番茄种植指南（梯子搭建教程）
• US Address Generator
• Google Cloud Platform
• 最快的VPS和机场！谷歌云搬瓦工 自用机场VPS大公开！(谷歌云VPS/搬瓦工机场)