gepic/dist/ui/elementPlus/slider/index.js

基于vue3的设计器,可视化开发页面表单

const a = {
  component: async () => (await import("element-plus")).ElSlider,
  groupName: "表单",
  icon: "icon--epic--switches",
  sort: 930,
  defaultSchema: {
    label: "滑块",
    type: "slider",
    field: "slider",
    input: !0,
    componentProps: {
      placement: "top-start",
      showTooltip: !0
    }
  },
  config: {
    attribute: [
      {
        label: "字段名",
        type: "input",
        field: "field"
      },
      {
        label: "标题",
        type: "input",
        field: "label"
      },
      {
        label: "默认值",
        type: "slider",
        field: "componentProps.defaultValue"
      },
      {
        label: "尺寸",
        type: "select",
        componentProps: {
          placeholder: "请选择",
          clearable: !0,
          options: [
            {
              label: "大号",
              value: "large"
            },
            {
              label: "中等",
              value: "default"
            },
            {
              label: "小型",
              value: "small"
            }
          ]
        },
        field: "componentProps.size"
      },
      {
        label: "最小值",
        type: "number",
        field: "componentProps.min",
        componentProps: {
          placeholder: "请输入"
        },
        onChange: ({ value: e, values: o, componentAttributes: t }) => {
          const l = t.value.findIndex(
            (p) => p.field === "componentProps.max"
          ), n = t.value[l];
          n.componentProps = {
            min: e
          }, (o.componentProps.max ?? 0) < e && (o.componentProps.max = e);
        }
      },
      {
        label: "最大值",
        type: "number",
        field: "componentProps.max",
        componentProps: {
          placeholder: "请输入"
        },
        onChange: ({ value: e, values: o, componentAttributes: t }) => {
          const l = t.value.findIndex(
            (p) => p.field === "componentProps.min"
          ), n = t.value[l];
          n.componentProps = {
            max: e
          }, (o.componentProps.min ?? 0) > e && (o.componentProps.min = e);
        }
      },
      {
        label: "步长",
        type: "number",
        field: "componentProps.step",
        componentProps: {
          placeholder: "请输入"
        }
      },
      {
        label: "显示间断点",
        type: "switch",
        field: "componentProps.showStops"
      },
      {
        label: "提示信息",
        type: "switch",
        field: "componentProps.showTooltip"
      },
      {
        label: "开启选择范围",
        type: "switch",
        field: "componentProps.range"
      },
      {
        label: "垂直模式",
        type: "switch",
        field: "componentProps.vertical"
      },
      {
        label: "高度",
        type: "EInputSize",
        field: "componentProps.height",
        show: ({ values: e }) => e.componentProps.vertical
      },
      {
        label: "显示数字框",
        type: "switch",
        field: "componentProps.showInput",
        onChange: ({ value: e, values: o }) => {
          e && (o.componentProps.showInputControls = !0);
        }
      },
      {
        label: "控制按钮",
        type: "switch",
        field: "componentProps.showInputControls",
        show: ({ values: e }) => e.componentProps.showInput
      },
      {
        label: "提示框位置",
        type: "select",
        defaultValue: "bottom-start",
        componentProps: {
          options: [
            {
              label: "top",
              value: "top"
            },
            {
              label: "top-start",
              value: "top-start"
            },
            {
              label: "top-end",
              value: "top-end"
            },
            {
              label: "bottom",
              value: "bottom"
            },
            {
              label: "bottom-start",
              value: "bottom-start"
            },
            {
              label: "bottom-end",
              value: "bottom-end"
            },
            {
              label: "left",
              value: "left"
            },
            {
              label: "left-start",
              value: "left-start"
            },
            {
              label: "left-end",
              value: "left-end"
            },
            {
              label: "right",
              value: "right"
            },
            {
              label: "right-start",
              value: "right-start"
            },
            {
              label: "right-end",
              value: "right-end"
            }
          ]
        },
        field: "componentProps.placement"
      },
      {
        label: "禁用",
        type: "switch",
        field: "componentProps.disabled"
      },
      {
        label: "隐藏",
        type: "switch",
        field: "componentProps.hidden"
      },
      {
        label: "表单校验",
        type: "ERuleEditor",
        layout: "vertical",
        field: "rules",
        describe: "校验规则需要配合表单使用",
        componentProps: {
          ruleType: "number"
        }
      }
    ],
    event: [
      {
        type: "input",
        describe: "拖拽实时触发"
      },
      {
        type: "change",
        describe: "拖拽结束改变值时"
      }
    ]
  }
};
export {
  a as default
};