常用的工具函数

引用方法

1. copyTextToClipboard

描述

将指定文本复制到剪贴板

不能使用navigator.clipboard时使用

使用方法

copyTextToClipboard({text : '想要复制的文本'})
			.then((result) => {
				//复制成功
			})
			.catch((error) => {
				//复制失败
			})

参数说明

| 名称 | 说明 | 类型 | 默认值 | | ------------- | :-----------: | :-----------: | :-----------: | | text | 要复制的文本 | string | '' | | success | 成功时的回调函数 | Function | - | | error | 失败时的回调函数 | Function | - |

2. invokeStr

描述

在js里面运行字符串

使用方法

invokeStr('100 > 50')

参数说明

| 名称 | 说明 | 类型 | 默认值 | | ------------- | :-----------: | :-----------: | :-----------: | | fn | 要复制的文本 | string | '' | | objData | 成功时的回调函数 | objDataType | {} |

3. domScroll2FirstClass

描述

在某个class上滚动到某个指定class类第一个元素上

使用方法

domScroll2FirstClass('.domClass','.scrollDomClass')

参数说明

| 名称 | 说明 | 类型 | 默认值 | | ------------- | :-----------: | :-----------: | :-----------: | | domClass | 父级class | string | 无 | | scrollDomClass | 指定class | string | 无 | | block | | start , center , end , nearest | center | | behavior | | auto, instant, smooth | auto | | inline | | start , center , end , nearest | nearest |

4. getFileNameInContentDisposition

描述

在content-disposition中获取文件名filename

使用方法

getFileNameInContentDisposition('attachement;filename=qwe.txt;hahahaaha')

参数说明

| 名称 | 说明 | 类型 | 默认值 | | ------------- | :-----------: | :-----------: | :-----------: | | contentDisposition | header中的content-disposition | string | 无 |

5. saveAs

描述

保存函数

使用方法

saveAs(blob,'text.txt')

参数说明

| 名称 | 说明 | 类型 | 默认值 | | ------------- | :-----------: | :-----------: | :-----------: | | blob | blob文件流 | string | 无 | | filename | 文件名 | string | 无 |

6. sortTableFunction

描述

第一版表格行拖拽

使用方法

	<el-table
    ref="tabA"
    class="elTable"
    :data="newList"
  >
    <el-table-column
      label="排序号"
      width="150px"
      align="center"
      fixed
      prop="num"
    >
      <template #default="scope">
        <div
          style="display: flex; align-items: center"
          :attrname="scope.row.num"
          class="sortclass"
        >
          <span style="margin-left: 10px">{{ scope.row.num }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      fixed
      align="center"
      prop="name"
    />
  </el-table>

let dataList = ref([])

const changeDataFun = (dataList) => {
  const reOrList = toRaw(dataList).map((item, idx) => {
		return {
			num: idx + 1,
			name: item.name,
		}
	})
	return reOrList
}

sortTableFunction(dataList,changeDataFun,'sortclass','attrname')

参数说明

| 名称 | 说明 | 类型 | 默认值 | | ------------- | :-----------: | :-----------: | :-----------: | | newList | 列表的数据项 | array | 无 | | changeDataFun | 一个修改数据项的函数(选填) | Function | null | | sortclass | 想要拖拽的类名diySort为true时使用 | string | sortclass | | attrname | 推拽相关的一个自定义属性diySort为true时使用 | string | attrname |

7. dragTableFun

描述

第二版表格拖拽

使用方法

let tableList = ref([])
dragTableFun().rowDrop(tableList)

参数说明

| 名称 | 说明 | 类型 | 默认值 | | ------------- | :-----------: | :-----------: | :-----------: | | dataList | 表格数据 | Array | 无 | | fatherDom | 父级Clacc | string | .draggable .el-table__body-wrapper tbody | | sonDom | 子级Class | string | .draggable .el-table__row |

8. flattenTreeData

描述

对象数组扁平化

使用方法

let data = [
	{
		name: '1',
		children: [
			{
				name: '1-1',
				children: [],
			},
			{
				name: '1-2',
				children: [
					{
						name: '1-2-1',
						children: [],
					},
					{
						name: '1-2-2',
						children: [],
					},
				],
			},
		],
	},
	{
		name: '2',
		children: [],
	},
]
flattenTreeData(data, 'children')

参数说明

| 名称 | 说明 | 类型 | 默认值 | | ------------- | :-----------: | :-----------: | :-----------: | | arr | 对象数组数据 | any[] | 无 | | key | 想要递归的key值 | string | children |