第一个例子
下面我们将以WorkflowPlate96Hole为例展示它的各类用法。
# 三种类型的板位
流程板中有三种板位类型(参数必填)，如下是source、middle、destination三种类型的流程板。
<template>
<div class="first-case-root-box1">
<div class="first-case-container-box1">
<as-workflow-plate-96-hole plate-type="source"
:active-arr="[]"
select-mode="multiple_col_normal"
:sample-number="12"
comp-mark="first-case-plate-type-1"
></as-workflow-plate-96-hole>
</div>
<div class="first-case-container-box1">
<as-workflow-plate-96-hole plate-type="middle"
:active-arr="[]"
select-mode="multiple_col_normal"
:sample-number="12"
comp-mark="first-case-plate-type-2"
></as-workflow-plate-96-hole>
</div>
<div class="first-case-container-box1">
<as-workflow-plate-96-hole plate-type="destination"
:active-arr="[]"
select-mode="multiple_col_normal"
:sample-number="12"
comp-mark="first-case-plate-type-3"
></as-workflow-plate-96-hole>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return{
}
},
methods: {
}
}
</script>
<style>
.first-case-root-box1{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.first-case-container-box1{
width: 30%;
}
@media screen and (max-width: 480px) {
.first-case-root-box1{
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.first-case-container-box1{
width: 100%;
margin-top: 15px;
}
}
</style>
Expand Copy Copy
# 定制板位背景色
每个流程板根据板位类型都有自己的默认背景色。你也可以根据background-color自己定制需要的背景色,它会覆盖原有的背景色。
<template>
<div class="first-case-container-box2">
<as-workflow-plate-96-hole plate-type="destination"
:active-arr="[]"
select-mode="multiple_col_normal"
:sample-number="12"
background-color="#FFE4E1"
comp-mark="first-case-background-color-1"
></as-workflow-plate-96-hole>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return{
}
},
methods: {
}
}
</script>
<style>
.first-case-container-box2{
width: 60%;
}
@media screen and (max-width: 480px) {
.first-case-container-box2{
width: 100%;
}
}
</style>
Expand Copy Copy
# 不同形状的孔位
<template>
<div class="first-case-root-box2">
<div class="first-case-row-area">
<div class="first-case-container-box3">
<as-workflow-plate-96-hole shape="circle"
plate-type="middle"
:active-arr="[]"
select-mode="multiple_col_normal"
:sample-number="12"
comp-mark="first-case-shape-1"
></as-workflow-plate-96-hole>
</div>
<div class="first-case-container-box3">
<as-workflow-plate-96-hole shape="squire"
plate-type="destination"
background-color="#FFA500"
:active-arr="[]"
select-mode="multiple_col_normal"
:sample-number="12"
comp-mark="first-case-shape-2"
></as-workflow-plate-96-hole>
</div>
</div>
<div class="first-case-row-area" style="margin-top: 20px">
<div class="first-case-container-box3">
<as-workflow-plate-96-hole
shape="diamond"
plate-type="middle"
background-color="#FF00FF"
:active-arr="[]"
select-mode="multiple_col_normal"
:sample-number="12"
comp-mark="first-case-shape-3"
></as-workflow-plate-96-hole>
</div>
<div class="first-case-container-box3">
<as-workflow-plate-96-hole
shape="horizontal-oval"
plate-type="middle"
background-color="#FF00FF"
:active-arr="[]"
select-mode="multiple_col_normal"
:sample-number="12"
comp-mark="first-case-shape-4"
></as-workflow-plate-96-hole>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {}
},
methods: {}
}
</script>
<style>
.first-case-row-area {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.first-case-container-box3 {
width: 45%;
}
@media screen and (max-width: 480px) {
.first-case-row-area{
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.first-case-container-box3{
width: 100%;
margin-top: 10px;
}
}
</style>
Expand Copy Copy
# 禁用状态
<template>
<div class="first-case-root-box4">
<div class="first-case-container-box4">
<as-workflow-plate-96-hole plate-type="source"
:active-arr="[]"
select-mode="multiple_col_normal"
:sample-number="12"
comp-mark="first-case-disabled-1"
disabled
></as-workflow-plate-96-hole>
</div>
<div class="first-case-container-box4">
<as-workflow-plate-96-hole plate-type="middle"
:active-arr="[]"
select-mode="multiple_col_normal"
:sample-number="12"
comp-mark="first-case-disabled-2"
disabled
></as-workflow-plate-96-hole>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return{
}
},
methods: {
}
}
</script>
<style>
.first-case-root-box4{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.first-case-container-box4{
width: 45%;
}
@media screen and (max-width: 480px) {
.first-case-root-box4{
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.first-case-container-box4{
width: 100%;
margin-top: 10px;
}
}
</style>
Expand Copy Copy
# 选孔功能
<template>
<div class="first-case-container-box5">
<as-workflow-plate-96-hole plate-type="destination"
:active-arr="[]"
select-mode="multiple_col_normal"
:sample-number="12"
background-color="#2E8B57"
comp-mark="first-case-click-evt-1"
@click="clickPlateHole"
></as-workflow-plate-96-hole>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return{
}
},
methods: {
clickPlateHole(row,col, selectMode, plateType, distribution, disabledHoles){
alert("正在选孔")
}
}
}
</script>
<style>
.first-case-container-box5{
width: 60%;
}
@media screen and (max-width: 480px) {
.first-case-container-box5{
width: 100%;
}
}
</style>
Expand Copy Copy
# 框选功能
对于框选功能，需要把select-mode参数变为"dynamic_multiple_item",只有这样子才能进行框选。点击鼠标,长按移动进行框选。(注意:移动设备不存在框选功能,因此下图中移动设备情况下操作不生效。)
<template>
<div class="first-case-container-box6">
<as-workflow-plate-96-hole plate-type="destination"
:active-arr="[]"
select-mode="dynamic_multiple_item"
:sample-number="12"
comp-mark="first-case-box-select-evt-1"
@boxSelect="boxSelect"
></as-workflow-plate-96-hole>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return{
}
},
methods: {
boxSelect(plateType,distribution,activeHoles){
}
}
}
</script>
<style>
.first-case-container-box6{
width: 60%;
}
@media screen and (max-width: 480px) {
.first-case-container-box6{
width: 100%;
}
}
</style>
Expand Copy Copy
下面将详细介绍各类板位的参数说明。