样式隔离

特殊的prop

为了解决普通的css样式污染问题,本人采用scoped属性解决了各组件间css中的样式污染。然而,该平台库比较特殊,少数情况下需要手动操作dom来完成某些特定的样式。

为了解决操作js带来的样式污染问题,在设计组件时候,本人给组件加了一个特殊的prop--"comp-mark"。

使用方法

假如我们同时引用了两个同样的组件,组件中板位类型也相同，且同时出现在页面上,这时候我们就需要注意样式问题了。

如下，我们需要给两个组件都传入comp-mark属性,并且确保两个组件的comp-mark独一无二。比如，可以根据模块、相关页面、板位类型等来取一个唯一标识符。 如在程序的步骤页面中，我们这样子取名"as-200-protocol-step-1-workflow","as-200-protocol-step-2-workflow"。

<template>
  <div class="style-quarantine-root-box1">
    <div class="style-quarantine-container-box style-quarantine-container-box1">
      <as-workflow-plate-96-hole plate-type="source" 
                                 :active-arr="[]"
                                 select-mode="multiple_col_normal" 
                                 :sample-number="12"
                                 comp-mark="as-200-protocol-step-1-workflow"
      ></as-workflow-plate-96-hole>
    </div>
    <div class="style-quarantine-container-box style-quarantine-container-box2">
      <as-workflow-plate-96-hole plate-type="source"
                                 :active-arr="[]"
                                 select-mode="multiple_col_normal"
                                 :sample-number="12"
                                 comp-mark="as-200-protocol-step-2-workflow"
      ></as-workflow-plate-96-hole>
    </div>
  </div>
</template>

 <script>
export default {
  name: 'App',
  data() {
    return{
      
    }
  },
   methods: {
     
   }
}
</script>
<style>
.style-quarantine-root-box1{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.style-quarantine-container-box{
  width: 45%;
}
@media screen and (max-width: 480px) {
  .style-quarantine-root-box1{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .style-quarantine-container-box{
    width: 100%;
  }
  .style-quarantine-container-box2{
    margin-top: 15px;
  }
}
</style>

Expand Copy Copy

命名规范

字符串	说明
as	该组件库的前缀
protocol	程序模块
step	程序模块中的step页面
1或者2	相关的标识符(可以设置为任意字符串)
workflow	表示当前是流程板

当然命名规则可以由自己设计,上面仅供参考。

关于as-worktable-styl-quar-sdk

为了解决该组件库js类型样式污染问题，我专门开发了一款插件as-worktable-styl-quar-sdk。后续将直接使用该插件替换上述方案。