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/搬瓦工机场)