@moment-design/conditionall-execution NPM

执行条件配置组件

使用组件

安装依赖

npm install @moment-design/conditionall-execution --save

使用组件

<template>
  <m-conditionall-execution
    ref="refConditionallExecution"
    :datas="datas"
    :config="deepConfig"
    @validate:fail="validateFail"
    @validate:success="validateSuccess"
  >
  </m-conditionall-execution>
</template>
<script lang="ts" setup>
import MConditionallExecution from '@moment-design/conditionall-execution';
import '@moment-design/conditionall-execution/dist/css/index.css';
</script>

API

Props

参数名	描述	类型	默认值
disabledChange	切换且、或	boolean	false
preview	预览模式	boolean	false
datas	数据值	DATAS	[]
config	配置数据	TypeConfig	{}

TypeConfig

参数名	描述	类型	默认值
c1	第一列配置项	Array	TypeConfigC1
c2	第二列配置项	Array	TypeConfigC2
c3	第三列配置项	Array	TypeConfigC3

TypeConfigC1

参数名	描述	类型	默认值
type	类型	input,number,select,slot	''
label	属性	string	''
value	值	string	''
others	扩展属性	any	{}

TypeConfigC2

参数名	描述	类型	默认值
label	属性	string	''
value	值	string	''
vs	属于第一列的数值组	Arraystrig	[]
others	扩展属性	any	''

TypeConfigC3

参数名	描述	类型	默认值
label	属性	string	''
value	值	string	''
vs	属于第一列的数值组	Arraystrig	[]
v2s	属于第二列的数值组	Arraystrig	[]
others	扩展属性	any

Events

事件名	描述	参数
validate:fail	校验失败	(datas: any[])
validate:success	校验成功	(datas: any[])
handle:slot	插槽事件	(datas: any[], item: any, index: number, sindex: number)

示例数据

# config
export const config = {
  c1: [
    { type: 'number', label: '商品库存', value: 1 },
    { type: 'select', label: '商品类型', value: 2 },
    { type: 'select', label: '商品范围', value: 3 },
    { type: 'select', label: '适用商品分组', value: 4 },
  ],
  c2: [
    { label: '包含', value: 1, vs: [2, 3, 4] },
    { label: '不包含', value: 2, vs: [2, 3, 4] },
    { label: '小于', value: 3, vs: [1] },
    { label: '大于等于', value: 4, vs: [1] },
    { label: '大于', value: 5, vs: [1] },
    { label: '大于等于', value: 6, vs: [1] },
    { label: '等于', value: 7, vs: [1] },
    { label: '不等于', value: 8, vs: [1] },
  ],
  c3: [
    { label: '实物商品', value: 1, vs: [2], v2s: [2] },
    { label: '虚拟商品', value: 2, vs: [2] },
    { label: '电子卡券商品', value: 3, vs: [2] },
    { label: '海淘商品', value: 4, vs: [2] },
    { label: '分组1', value: 5, vs: [4] },
    { label: '分组2', value: 6, vs: [4] },
    { label: '分组3', value: 7, vs: [4] },
    { label: '分组4', value: 8, vs: [4] },
  ],
};

# datas
[
  {
    "type": "and",
    "data": [
      {
        "label": "适用商品分组",
        "type": "select",
        "c1": 4,
        "c2": 1,
        "c3": [7]
      },
      {
        "label": "适用商品分组",
        "type": "select",
        "c1": 4,
        "c2": 1,
        "c3": [6, 7]
      }
    ]
  }
]

10 months ago

10 months ago

11 months ago

11 months ago

12 months ago

12 months ago