make-element-mini

make-element-mini

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

发版命令

先登录
npm login
npm version major : 主版本号加 1，其余版本号归 0
npm version minor : 次版本号加 1，修订号归 0
npm version patch : 修订号加 1
npm version 版本号 ：设置版本号为指定的版本号
npm version prerelease : 先⾏版本号增加1
或者手动修改版本号
npm publish 发布
npm unpublish 包名 ：在npm上删除了指定的包。

使用方式

目前组件包含 [ManageSheet] 组件源码在plugins文件夹下

import MakeElementMini from 'make-element-mini'
import 'make-element-mini/dist/make-element-mini.css'
vue.use(MakeElementMini)

 <!--表单组件-->
 <ManageSheet
      :dataArray="dataArray"
      :ruleForm="ruleForm"
      :rules="rules"
      :btnSet="btnSet"
      @handleOnSubmit="handleOnSubmit" // 提交
      @handleOnReset="handleOnReset" // 重置
      @handleOnRraft="handleOnRraft" // 保存草稿
      @resizeWidth="handleOnResizeWidth" // 监听控件的宽度
      @resizeHeight="handleOnResizeHeight" // 监听控件的高度
    >
      <template #classify>
        <div class="header_row el-row" @click="handleOnChangeInput">
          <div class="el-col el-col-24">
            <el-form-item label="拉力赛看" label-width="1.15rem">
              <el-input placeholder="录入"></el-input>
            </el-form-item>
          </div>
        </div>
      </template>
      <template #explain>
        <div>
         <div>
           <el-radio-group>
             <el-radio>是</el-radio>
             <el-radio>否</el-radio>
           </el-radio-group>
         </div>
         <div>
           <el-radio-group>
             <el-radio>是</el-radio>
             <el-radio>否</el-radio>
           </el-radio-group>
         </div>
        </div>
      </template>
    </ManageSheet>

参数传递

dataArray:[
  // 标题
  {
    type:'title',
    title:'设计开发任务书',
    style:'',
    time:''
  },
  // 基础控件
  {
    type:'basic',style:'',content:[
      {
        label:'任务书号', // label名称
        required:true, // 是否必填
        size:'mini', // 尺寸
        prop:'name1', // 字段名
        controlType:'input', // 控件类型 input,date,daterange,datetime,time,select,radio,checkbox,upload, slot：插槽
        col:8, // 控件长度
        disabled:false, // 是否禁用
        readonly:false, // 是否只读
        maxlength:50, // 最大输入长度
        showWordLimit:true, // 是否展示字数限制
        option:[], // 选项
        slotName:'', // 插槽名称
        resizeWidth:true, // 是否计算宽度
        resizeHeight:true, // 是否计算高度
      },
    ],
    // 描述
    explain:{
      label:'是否接受', // 描述内容
      style:'',
      slot:false, // 是否插槽
      slotName:'explain' // 插槽名称
    }
  },
  // 表单分割
  {
    type:'space',
    style:'',
  },
  //其他(插槽)
  {
      type:'other',
      name:'otherSlot',
      style:'',
  },
  // 表格
  {
    type:'table',
    style:'',
     // 表头
    tableColumn:[
      {
        label:'任务书号', // 标题
        required:true, // 是否必填
        size:'mini', // 尺寸
        prop:'id', // 字段名
        controlType:'input', // 控件类型 input,date,datetime,time,select, slot：插槽
        headerAlign:'center', // 标题对齐
        disabled:false, // 是否禁用
        readonly:false, // 是否只读
        maxlength:50, // 最大输入长度
        showWordLimit:true, // 是否展示字数限制
        option:[], // 选项
        slotName:'', // 插槽名称
        explain:'（如勾选“是”则需填写如下需求说明）' // 控件类型为radio使用
      },
      {
        label:'操作',
        prop:'operate',
        width:'100px',
        controlType:'operate',
        headerAlign:'center',// 标题对齐
        action:['delete']  // 操作类型
      },
    ],
    tableData: [],  // 表格数据
    addLine:'新增一行', // 新增一行
    // 描述
    explain:{
      label:'是否接受', // 描述内容
      style:'',
      slot:false, // 是否插槽
      slotName:'explain' // 插槽名称
    }
  },
],
// 表单字段
ruleForm: {
  name:''
},
// 表单检验规则
rules: {
  name: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
},
// 按钮设置
btnSet:[
  {type:'reset',label:'重置'},
  {type:'submit',label:'提交'},
  {type:'draft',label:'保存为草稿本'}
]

Customize configuration

See Configuration Reference.