gepic/dist/ui/naiveUi/input/index.js

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

const l = {
  component: async () => (await import("naive-ui/lib/input")).NInput,
  groupName: "表单",
  icon: "icon--epic--border-color-outline-rounded",
  sort: 700,
  defaultSchema: {
    label: "输入框",
    type: "input",
    field: "input",
    input: !0,
    componentProps: {
      defaultValue: "",
      placeholder: "请输入",
      type: "text"
    }
  },
  config: {
    attribute: [
      {
        label: "字段名",
        type: "input",
        field: "field"
      },
      {
        label: "标题",
        type: "input",
        field: "label"
      },
      {
        label: "默认值",
        type: "input",
        field: "componentProps.defaultValue"
      },
      {
        label: "占位内容",
        type: "input",
        field: "componentProps.placeholder"
      },
      {
        label: "尺寸",
        type: "select",
        field: "componentProps.size",
        componentProps: {
          placeholder: "请选择",
          clearable: !0,
          options: [
            {
              label: "极小",
              value: "tiny"
            },
            {
              label: "小型",
              value: "small"
            },
            {
              label: "中等",
              value: "medium"
            },
            {
              label: "大号",
              value: "large"
            }
          ]
        }
      },
      {
        label: "输入类型",
        type: "select",
        defaultValue: "text",
        componentProps: {
          placeholder: "请选择",
          clearable: !0,
          options: [
            {
              label: "text",
              value: "text"
            },
            {
              label: "textarea",
              value: "textarea"
            },
            {
              label: "password",
              value: "password"
            }
          ]
        },
        field: "componentProps.type",
        onChange: ({ value: e, values: t }) => {
          e != "text" && (t.componentProps.pair = !1);
        }
      },
      {
        label: "最大输入长度",
        type: "number",
        field: "componentProps.maxlength",
        componentProps: {
          placeholder: "请输入"
        }
      },
      {
        label: "显示密码的时机",
        type: "select",
        field: "componentProps.showPasswordOn",
        componentProps: {
          placeholder: "请选择",
          clearable: !0,
          options: [
            {
              label: "click",
              value: "click"
            },
            {
              label: "mousedown",
              value: "mousedown"
            }
          ]
        },
        show: ({ values: e }) => e.componentProps.type === "password"
      },
      {
        label: "行数",
        type: "number",
        field: "componentProps.rows",
        show: ({ values: e }) => e.componentProps.type === "textarea"
      },
      {
        label: "是否输入成对值",
        type: "switch",
        field: "componentProps.pair",
        show: ({ values: e }) => e.componentProps.type === "text"
      },
      {
        label: "分割符",
        type: "input",
        field: "componentProps.separator",
        show: ({ values: e }) => e.componentProps.type === "text" && e.componentProps.pair,
        componentProps: {
          placeholder: "请输入"
        }
      },
      {
        label: "是否圆角",
        type: "switch",
        field: "componentProps.round"
      },
      {
        label: "是否统计字数",
        type: "switch",
        field: "componentProps.showCount"
      },
      {
        label: "自适应内容高度",
        type: "switch",
        field: "componentProps.autosize",
        show: ({ values: e }) => e.componentProps.type === "textarea"
      },
      {
        label: "可清空",
        type: "switch",
        field: "componentProps.clearable"
      },
      {
        label: "禁用",
        type: "switch",
        field: "componentProps.disabled"
      },
      {
        label: "隐藏",
        type: "switch",
        field: "componentProps.hidden"
      },
      {
        label: "表单校验",
        type: "ERuleEditor",
        layout: "vertical",
        field: "rules",
        describe: "校验规则需要配合表单使用"
      }
    ],
    event: [
      {
        type: "input",
        describe: "输入值"
      },
      {
        type: "change",
        describe: "值修改"
      },
      {
        type: "focus",
        describe: "获取焦点"
      },
      {
        type: "blur",
        describe: "失去焦点"
      }
    ],
    action: [
      {
        type: "focus",
        describe: "使 input 获取焦点"
      },
      {
        type: "blur",
        describe: "使 input 失去焦点"
      },
      {
        type: "clear",
        describe: "清除 input 值"
      },
      {
        type: "select",
        describe: "选中 input 中的文字"
      }
    ]
  },
  bindModel: "value"
};
export {
  l as default
};