一、背景：

多場(chǎng)景使用到kov類型組件，但是實(shí)現(xiàn)上不統(tǒng)一，各個(gè)場(chǎng)景的協(xié)議都比較定制，且開發(fā)的時(shí)候難度較大。所以將組件進(jìn)行抽離

目標(biāo)：支撐所有邏輯場(chǎng)景

什么是kov？如下圖：

?難點(diǎn)：

? ? ? ?1、不同類型組件對(duì)應(yīng)的操作符有哪些 ？？？

? ? ? ?2、value組件展示形式，如何確定 ？？？

? ? ? ?3、如何定制operator的內(nèi)容以及value組件 ？？

? ? ? ?等。。。。。。。

? ?組件收益：

? ? ? ? 1、統(tǒng)一協(xié)議&場(chǎng)景

? ? ? ? 2、快速接入

二、KOV組件實(shí)現(xiàn)方案

1、基本組件key與邏輯操作符的場(chǎng)景確?

2、邏輯操作符的映射

3、基本組件&邏輯? ?推算? ?聯(lián)動(dòng)組件?

4、 條件轉(zhuǎn)換邏輯表達(dá)式

三、kov組件使用文檔?&demo

<Kov v-model="test" :schema="schema" :disabledKeys="[]" class="v-flex-fill">
      <template #cyl>
        <el-input v-model="test.params"></el-input>
      </template>
 </Kov>
 
test：{ "field": "", "function": "", "params":  }
 
 
 schema = [
  {
    value: 'silentShipperActionType', // 字段名
    label: '選擇器',
    type:'SELECT',  // 組件類型
    disabledKeys:[''], // field 中需要禁用的選項(xiàng)
    （
    該部分如果傳入的“邏輯表達(dá)式”不在默認(rèn)范圍內(nèi)，會(huì)進(jìn)行合并，如果在則會(huì)進(jìn)行覆蓋
    該邏輯下，以傳入的type類型為準(zhǔn)
    ）
    operators:[ // 自定義內(nèi)容
     {
      label:"等于",
      value:'EQ', // 邏輯表達(dá)式
      type: 'SELECT',
      options:[{}],
    }],
    attrs:{
    },
    options:[{
    label:'測(cè)試1',
    value:1
     },
    {
    label:'測(cè)試2',
    value: 2
    }]
}
]

1、props

2、v-model對(duì)象字段解釋

3、Schema中對(duì)象字段解釋

4、type類型：

5、operators? ??

中對(duì)象字段解釋

demo：

<Kov v-model="test" :schema="schema" :disabledKeys="[]" class="v-flex-fill">
      <template #cyl>
        <el-input v-model="test.params"></el-input>
      </template>
 </Kov>
 
test：{ "field": "", "function": "", "params":  }
 
 
 schema = [
  {
    value: 'select', // 字段名
    label: '選擇器',
    type:'SELECT',  // 組件類型
    operators:[ // 自定義內(nèi)容
     {
      label:"等于",
      value:'EQ', // 邏輯表達(dá)式
      type: 'SELECT',
      options:[{}],
    }],
    attrs:{
    },
    options:[{
    label:'測(cè)試1',
    value:1
     },
    {
    label:'測(cè)試2',
    value: 2
    }]
}
]

<Kov v-model="test" :schema="schema" :disabledKeys="[]" class="v-flex-fill">
      <template #cyl>
        <el-input v-model="test.params"></el-input>
      </template>
 </Kov>
 
test：{ "field": "", "function": "", "params":  }
 
 
 schema = [
  {
    value: 'select', // 字段名
    label: '選擇器',
    type:'TEAX',  // 組件類型
    operators:[ // 自定義內(nèi)容
     {
      label:"匹配開頭（自定義）",
      value:'MATCHHEAD', // 邏輯表達(dá)式
      type: 'TEXT'
    }]
   
}
]

四、ConditionKov組件（條件關(guān)系kov）

<template>
    <div>
      <ConditionKov v-model="test.a" :schema="schema" class="v-flex-fill">
      </ConditionKov>
    </div>
  </template>
   
  <script>
  import {ConditionKov} from '@meta-vue/kov'
  export default {
    name: 'kov',
    componentName: 'kov組件',
    components: { ConditionKov },
    data() {
      return {
        test: {},
        schema: {},
      }
    },
    created() {
      this.schema = [
      {
        key: 'select',
        label: '選擇器',
        type:'SELECT',
        attrs:{
          multiple: false,
          required: true
        },
        options:[{
          label:'測(cè)試1',
          value:1
        },{
          label:'測(cè)試2',
          value: 2
        }]
      },
      {
        key: 'text',
        label: '文本',
        type:'TEXT',
      }
 
    ]
    },
    methods: {},
  }
  </script>
   
  <style lang="stylus" scoped></style>

props：

成品展示

以上就是全部?jī)?nèi)容，感興趣的可以私聊代碼哈～～～～文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-583785.html

到了這里，關(guān)于聯(lián)動(dòng)規(guī)則組件-KOV場(chǎng)景梳理&技術(shù)方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！