mic-org 1.1.1 → 1.1.2

package/README.md

@@ -6,6 +6,52 @@
 > 仅限于 vue3 + vite +element-plus + sass 工程中，因为部分组件以及样式有调用
 
 ---------------------------------
+
+## npm引用
+
+``` bash
+
+npm install mic-org
+
+```
+
+## 组件导入
+
+``` js
+
+import 'mic-org/dist/index.css'; // 组件样式
+import MicOrg from 'mic-org'; // 组件全局导入
+
+app.use(MicOrg);
+
+```
+
+## 普通方法导入
+
+``` js
+
+import { mic } from 'mic-org'; // 方法导入
+
+```
+
+## 类方法导入
+
+``` js
+
+import { Mic } from 'mic-org'; // 方法导入
+
+```
+
+## scss变量导入
+
+``` js
+
+@use "mic-org/css/variable.scss" as *;
+
+```
+
+---------------------------------
+
 ## 组件输出
 | Component      | Description |
 | -------------- | ----------- |
@@ -19,76 +65,407 @@
 
 ---------------------------------
 
-## 组件相关方法
+1. **mic-search使用**
 
+> props: span
+> 1. span,默认为 4，即：4列, span值为number; 
+> 说明：它本身是个搜索项外层框架，用的是grid布局
 
+```js
 
+<mic-search :span="4"></mic-search>
 
+```
+
+2. **mic-vac使用**
+
+> props: span
+> 1. span,默认为 1，即：4列, span值为number; 
+> 说明：它本身是为了搜索框内容添加空白列的，也可以在它的标签内添加插槽内容，但是它插槽里的内容是居右对齐的
+
+```js
+
+<mic-search :span="4">
+      <mic-vac :span="2">
+            <el-button>查询</el-button>
+            <el-button>重置</el-button>
+      </mic-vac>
+</mic-search>
+
+```
+
+3. **mic-select使用**
+
+> props: span,label,border,width,options (可以把el-select其它的属性/方法全部写入，组件内部使用了$attrs继承)
+> 1. span,默认为 1，即：1列, span值为number; 
+> 2. label,搜索项的label项，必填;
+> 3. border,针对如果搜索项整个背景如果是白色，那么可以添加border做搜索项的区分
+> 4. width, label项的宽度，默认为 100px
+> 5. options,组件的下拉列表，必填，类型 Array<{label:string,value:any}>;
+
+> emits: change 
+> 1. change, 触发el-select的change事件后，同步触发此事件
+
+```js
+
+<mic-search :span="4">
+      <mic-search 
+            label="测试" 
+            width="100px"
+            v-model="data"
+            border="1px solid #fff"
+            :options="[{label:'男',value:1},{label:'女',value:2}]" 
+            @change="(val)=>{console.log(val)}"  
+      />
+</mic-search>
+
+```
+
+4. **mic-input使用**
+
+> props: span,label,border,width (可以把el-input其它的属性/方法全部写入，组件内部使用了$attrs继承)
+> 1. span,默认为 1，即：1列, span值为number; 
+> 2. label,搜索项的label项，必填;
+> 3. border,针对如果搜索项整个背景如果是白色，那么可以添加border做搜索项的区分
+> 4. width, label项的宽度，默认为 100px
 
+> emits: change, keydown
+> 1. change, 触发el-input的input事件后，同步触发此事件
+> 2. keydown, 触发el-input的keydown.enter事件后，同步触发此事件
 
+```js
+
+<mic-search :span="4">
+      <mic-input
+            label="测试" 
+            width="100px"
+            v-model="data"
+            border="1px solid #fff"
+            @change="(val)=>{console.log(val)}"
+            @keydown="(val)=>{console.log(val)}"   
+      />
+</mic-search>
+
+```
+
+5. **mic-date使用**
+
+> props: span,label,border,width,format (可以把el-date-picker其它的属性/方法全部写入，组件内部使用了$attrs继承)
+> 1. span,默认为 1，即：1列, span值为number; 
+> 2. label,搜索项的label项，必填;
+> 3. border,针对如果搜索项整个背景如果是白色，那么可以添加border做搜索项的区分
+> 4. width, label项的宽度，默认为 100px
+> 4. format, format以及value-format 的类型, 必填，取的是 el-date-picker 的format值
+
+> emits: change
+> 1. change, 触发el-date-picker的change事件后，同步触发此事件
+
+```js
+
+<mic-search :span="4">
+      <mic-date
+            label="测试" 
+            width="100px"
+            format="YYYY-MM-DD"
+            border="1px solid #fff"
+            v-model="data"
+            @change="(val)=>{console.log(val)}" 
+      />
+</mic-search>
+
+```
+
+6. **mic-table使用**
+
+> props: tableAttr,tableData,columns,selectSingle,selectKey,disabledCondition,page
+> 1. tableAttr, 给el-table添加一些 mic-table组件中未定义的属性,已经使用v-bind进行了承接
+> 2. tableData, 表格数据 组件内会给每一项增加两个属性：
+>   - checked 是否选中;
+>   - disabled 是否禁用;
+> 3. columns,表格列,每列有:
+>   - type 属性，重构了el-table中的select功能, 值为 select以及 el-table中其它的类型;
+>   - attr 属性，给el-table-column 添加mic-table组件中未定义的属性,已经使用v-bind进行了承接;
+>   - hidden 属性，值为boolean , 判断列是否展示;
+>   - **重点提示：如果要自定义列中的内容，已经配置了插槽，插槽名为attr中的prop值，子组件向父组件传的参数是scope**
+> 4. selectSingle, 是否单选，默认为false，即多选
+> 5. selectKey, 选中项的key值，默认为id
+> 6. disabledCondition, 禁用条件，函数类型，返回true则禁用
+> 7. page, 分页信息，包含total、currentPage、pageSize等属性
+
+> emits: selection-change,page-change
+> 1. selection-change,选中项时，触发此方法，把选中项返回
+> 2. page-change, 页码变化时，触发此方法，会把total、currentPage、pageSize都返回
+
+> defineExpose: clearSelection,setSelection
+> 1. clearSelection,用 ref绑定父组件中的自组件后，通过此方法清空选中
+> 2. setSelection, 用 ref绑定父组件中的自组件后，通过此方法让指定项默认选中
+
+> 按钮插槽 buttonLeft,buttonRight
+> 说明：表格上方一般都要放置按钮，这两个插槽用来放按钮
+
+```js
+
+<mic-table
+    :tableAttr="{height:100}"
+    :tableData="[{id:0,name:'张三'}]"
+    :columns="[{type:'select',attr:{}},{attr:{prop:'name',label:'姓名'}}]"
+    :selectSingle="true"
+    selectKey="id"
+    :disabledCondition="(items:any)=>items.id==0"
+    :page="{
+      total: 100,
+      currentPage: 1,      
+      pageSize: 20      
+    }"
+    @selection-change="(val)=>{console.log(val)}"
+    @page-change="(val)=>{console.log(val)}"
+>
+      <template #buttonLeft>
+            <el-button>新建</el-button>
+            <el-button>删除</el-button>
+      </template>
+      <template #buttonRight>
+            <el-button>通过</el-button>
+            <el-button>拒绝</el-button>
+      </template>
+      <template #name={ scope }>
+            <el-input v-model="scope.row.name"/>
+      </template>
+</mic-search>
+
+```
+
+7. **mic-dialog使用**
+
+> props: labelWidth,formList,optionList,rules,cancelText,confirmText(可以把el-dialog其它的属性全部写入，组件内部使用了$attrs继承)
+> 1. labelWidth, form表单label宽度
+> 2. formList, form表单项 它的类型为Array<{module?:string,children:Array<{
+            span:number,
+            prop:string,
+            label:string,
+            type?:'input' | 'select' | 'time' | undefined | null, 
+            attr?:Record<string,any>,
+            event?:Record<any,any>,
+        }>}>
+>   - **重点提示：如果要自定义表单项中的内容，已经配置了插槽，插槽名为children中的prop值，子组件向父组件传的参数是form,attr**
+> 3. optionList, 下拉列表项，它的类型为Record<string,Array<{label:string,value:any}>>
+> 4. rules, form表单校验
+> 5. cancelText, 取消按钮文本
+> 6. confirmText, 确认按钮文本
+
+> emits: confirm
+> 1. confirm,确认时回传
+
+> defineModel: show,form
+> 1. show, 控制弹窗显隐
+> 2. form, form表单数据
+
+```js
+
+<mic-dialog
+    width="50%"
+    title="提示"
+    labelWidth="100px"
+    :formList="[{module:'个人信息',children:[{span:12,prop:'name',label:'姓名'，type:'select',attr:{},event:{}}]}]"
+    :optionList="{name:[{label:'张三',value:1},{label:'李四',value:2}]}"
+    :rules="{}"
+    v-model:form="{name:1}"
+    v-model:show="showDialog"
+    cancelText="取消"
+    confirmText="确认"
+    @conirm="(val)=>{console.log(val)}"
+>
+      <template #name={ form,attr,event }>
+            <el-input v-model="scope.row.name"/>
+      </template>
+</mic-dialog>
+
+```
+
+---------------------------------
 
 ## 方法输出
 | Function      | Description |
 | -------------- | ----------- |
 | reset     | 用于重置对象中的内容    |
-| check     | 用于校验数据类型  mic.check('aaa') == 'String' |
-| isType      | 校验是否指定类型 mic.isType('aaa','String') == true   |
-| capital      | 将金额转为汉字金额 mic.capital(321.32) 输出 “叁佰贰拾壹元贰角壹分”  |
-| load      | 用于自定义全局/或者局部loading   |
+| check     | 用于校验数据类型 |
+| isType      | 校验是否指定类型 |
+| capital      | 将金额转为汉字金额 ，只能处理亿级别的  |
 | equal      | 校验两个对象内容是否完全一致   |
+| load      | 用于自定义全局/或者局部loading   |
+
 
 ---------------------------------
 
-## Array输出
-| Function      | Description |
-| -------------- | ----------- |
-| equal     | 校验数组(子集为普通对象)中,指定的字段的值是否一致    |
-| deepIncludes     | 校验数组(子集为普通对象)中,是否包含某个字段对应的值 |
+1. **reset使用**
+
+```js
+
+      import { mic } from 'mic-org';
+      const data = ref({ name: '', age: 0 });
+      data.value.name = '张三'；
+      data.value.age = 10;
+      const resetData = () => { 
+            mic.reset(data.value,{age:0}); 
+      };  
+
+```
+
+2. **check使用**
+
+```js
+
+      import { mic } from 'mic-org';
+      const data = ref({ name: '', age: 0 });
+      mic.check(data.value) //输出结果 Object; 
+
+```
+
+3. **isType使用**
+
+```js
+
+      import { mic } from 'mic-org';
+      mic.capital(321.32) //输出结果 “叁佰贰拾壹元贰角壹分”
+      
+```
+
+4. **capital使用**
+
+```js
+
+      import { mic } from 'mic-org';
+      const data = ref({ name: '', age: 0 });
+      mic.isType(data.value) == 'Object' //输出结果 true 
+      
+```
+
+5. **equal使用**
+
+```js
+
+      import { mic } from 'mic-org';
+      const data = ref({ name: '', age: 0 });
+      const dataB = ref({ name: '1', age: 0 });
+      mic.equal(data.value,dataB.value) //输出结果 false 
+      
+```
+
+6. **load使用**
+
+> 1. className没值的话，就是全局loading
+> 2. loadStyle 可以定义loading的背景颜色，也可以定义loading的颜色
+
+```js
 
+      import { mic } from 'mic-org';
+      const funA = ()=>{
+            mic.load(()=>{
+                  console.log('1111')
+            },{className:'',loadStyle:{bgColor:'#fff',color:'#005eba'}})()
+      }
+      const funB =  mic.load(()=>{
+            console.log('2222')
+      },{className:''})
+      
+```
 ---------------------------------
 
-## Math输出
+## 类输出
 | Function      | Description |
 | -------------- | ----------- |
-| exact     | 用于解决 加/减/乘/除 的计算精度问题    |
+| domHeight     | 获取想要的元素的宽/高，也可通过别的元素的加/减计算得来,对应的是像素值 |
 
 ---------------------------------
 
-## npm引用
-
-``` text
-
-npm install mic-org
+1. **domHeight使用**
+
+> 1. 实例入参类型 Array<{name:string,type:'+' | '-'}>
+> 2. 获取宽度/高度时， 需要在后面加个.value，width/height是reactive对象，为了做到响应式，里面包裹了value
+
+```js
+
+      import { Mic } from 'mic-org';
+      const DOMA = new Mic.domHeight([
+            {
+                  name:'.boxa',
+                  type:'+',
+            }
+      ])
+      console.log(DOMA.height.value) //获取DOMA的高度，像素单位
+      console.log(DOMA.width.value) //获取DOMA的宽度，像素单位
+
+      //假设，A包裹了B元素和C元素，此时想要获得C元素的高度/宽度
+      const DOMC = new Mic.domHeight([
+            {
+                  name:'.boxa',
+                  type:'+',
+            },{
+                  name:'.boxb',
+                  type:'-',
+            }
+      ])
+      // B元素和C元素上下排列，要获取高度，直接DOMC.height.value就可以
+      console.log(DOMC.height.value)
+      // B元素和C元素左右排列，要获取宽度，直接DOMC.width.value就可以
+      console.log(DOMC.width.value)
 
 ```
+      
+---------------------------------
+
+## Array输出
+| Function      | Description |
+| -------------- | ----------- |
+| equal     | 校验数组(子集为普通对象)中,指定的字段的值是否一致    |
+| deepIncludes     | 校验数组(子集为普通对象)中,是否包含某个字段对应的值 |
 
 ---------------------------------
 
-## 工程导入
+1. **equal使用**
 
-``` main.js
+```js
 
-import 'mic-org/dist/index.css'; // 组件样式
-import Mic from 'mic-org'; // 组件全局导入
+      let a = [{id:0,name:'张三'},{id:1,name:'张三'}];
 
-app.use(Mic);
+      a.equal('name') // 输出结果 true
+      a.equal(['id','name']) // 输出结果 false
 
 ```
 
-``` other.js
+2. **deepIncludes使用**
+
+```js
 
-import { mic } from 'mic-org'; // 方法导入 
+      let a = [{id:0,name:'张三'},{id:1,name:'张三'}];
 
+      a.deepIncludes({name:'张三'}) // 输出结果 true
+      a.deepIncludes({id:1,name:'张三'}) // 输出结果 true
+      a.deepIncludes({id:2,name:'张三'}) // 输出结果 false
+      
 ```
 
-``` mic-variable.css
+---------------------------------
 
-import 'mic-org/css/variable.scss'; // 可使用mic-org中定义的sass变量
+## Math输出
+| Function      | Description |
+| -------------- | ----------- |
+| exact     | 用于解决 加/减/乘/除 的计算精度问题    |
+
+---------------------------------
+
+1. **exact使用**
 
+```js
+
+      Math.exact(0.1,0.2,'+') //输出 0.3，而不是 0.30000000000000004
+      
 ```
 
-## 版本
+---------------------------------
+
+## 版本 1.1.2
 
-1.1.1 -- 1.增加mic-table组件
-      -- 2.增加mic-dialog组件
-      -- 3.增加equal方法
+- 1.优化load方法
+- 2.优化misc-dialog组件
+- 3.新增domHeight 类，获取元素的像素宽/高

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mic-org",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "main": "./dist/mic.umd.js",
   "module": "./dist/mic.es.js",
   "exports": {

package/src/index.d.ts

@@ -1,14 +1,19 @@
-// 声明组件导出（假设你的组件库导出了 Button 等组件）
-export { default as MicDate } from './mic-date/index.vue';
-export { default as MicInput } from './mic-input/index.vue';
-export { default as MicLayout } from './mic-layout/index.vue';
-export { default as MicSearch } from './mic-search/index.vue';
-export { default as MicSelect } from './mic-select/index.vue';
-export { default as MicVac } from './mic-vac/index.vue';
-export { Mic_Check } from './hooks/index.ts';
-export { Mic_Load } from './hooks/index.ts';
-export { Mic_Reset } from './hooks/index.ts';
+// 导出你的 mic 对象/函数
+export const mic: {
+  // 这里写你真实的类型（随便写，只要导出即可）
+  check: any
+  reset: any
+  isType: any
+  capital: any
+  equal: any
+  load: any
+}
 
+// 导出你的 Mic 类
+export const Mic: {
+  // 这里写你真实的类型（随便写，只要导出即可）
+  domHeight: any
+}
 declare module 'mj-integrate-component/css/index.scss' {
   const content: string;
   export default content;