0.0.41 • Published 9 months ago

ui-ms v0.0.41

Weekly downloads
-
License
...
Repository
-
Last release
9 months ago

更新内容

引入组件

  1. 按需引入
import {
	MsCharts, // Echarts
	MsTelport, // vue2 telport
	MsTable, // el-table封装
	MsSearchLight, // 页面内容关键词搜索高亮
	MsJson, // json解析
  MsVisual, // 加载虚拟数据
  MsAutoCol, // grid列,最后一项自适应宽

	MsDB, // 浏览器indexedDB
	MsXlsx, // xlsx解析数据json
	MsAt, // ；浏览器支持at
	MsLetters, // 首字母大写
	MsWatermark, // 水印
	MsSocket, // websocket接口
	MsTreeFindParent, // 查找上级所有父节点（树）
	MsTreeToFlat, // 数据扁平（tree）
	MsToTree,  // 扁平数据转树形
	MsDebounce,  // 防抖
	MsThrottle,  // 防抖
	MsRecorder,  // 录音(已移除)
	MsStorage,  // 动态缓存
	MsTextLine,  // 划词填充
} from 'ui-ms'

// vue2兼容(请在vue.config.js)中加入
module.exports = {
  transpileDependencies: ['ui-ms'], // 加入此行强转译
}
  1. 全量引入
main.ts
import UIMS from 'ui-ms'
import 'ui-ms/dist/style.css'
// 另外使用了windicss插件
app.use(UIMS)

js部分

IndexedDB: MsDB

<script setup>
const { 
  createStore, // 开启DB-> params:('myDB:库', 'test1:表')
  set, // 添加-> params:('key', val, customStore)
  get, // 获取-> params:('key', customStore)
  update,  // 更新-> params:('key', val, customStore)
  del, // 删除-> params:('key', customStore) 
  clear,  // 删除该表-> params:(customStore) 
  keys, // 获取该表所有key-> params:(customStore) 
  values, // 获取该表所有值-> params:(customStore) 
  entries, // 获取该表所有数据-> params:(customStore) 
  setMany, // 批量设置-> params:([['key', val], ['key2', val2]], customStore)
  getMany, // 批量获取-> params:(['key', 'key2'], customStore) 
  delMany, // 批量删除-> params:(['key', 'key2'], customStore) 
} = MsDB;

const customStore = createStore('myDB', 'test1'); // 打开DB 没有则使用默认 function DBSet(){ set('info', { token:'xxxxxxxxxx' }, customStore); set('username', 'test', customStore); } async function DBGet(){ const val = await get('info',customStore) console.error("🚀 ~ file: add.vue:21 ~ console.error ~ val:", val) } function DBUpdate(){ set('info', { token:'xxxxxxxxxx', name:'test' }, customStore); } 

> socket连接: MsSocket
```javascript
<script setup>
import { MsSocket } from "ui-ms"; 
let param =  {
    url: '/socket/lhzh/websocket',
    callback: (data)=>{},
}
let Socket = new MsSocket(param)
Socket.send(param.data) // 发送消息
Socket.close() // 关闭
</script>

Storage响应式缓存: MsStorage

<script setup>
import { MsStorage } from "ui-ms"; 
setInterval(() => {
  Storage.setItem('test', Math.random().toFixed(2) * 100)
}, 1000)

const s1 = ref(Storage.getItem('test')) || computed(() => Storage.getItem('test')) 

> 查找上级所有父节点（树）: MsTreeFindParent
```javascript
<script setup>
import { MsTreeFindParent } from "ui-ms"; 
let treeData = [
  {
    "id": 1,
    "label": "猫爷",
    "children": [
      {
        "id": 2,
        "label": "猫爸1",
        "children": [
          {
            "id": 3,
            "label": "猫崽1-1",
          },
        ],
      },
    ]
  },
]
let target = { "id": 3, "label": "猫崽1-1" } // 当前数据
let result = [] // 用来存储返回结果
let isValues = false  // isValues: 默认false（只返回label）, 为true时返回完整数据
MsTreeFindParent(treeData, target, result, isValues) 
</script>

数据扁平（树tree）: MsTreeToFlat

<script setup>
import { MsTreeToFlat } from "ui-ms"; 
let treeData = [
  {
    "id": 1,
    "label": "猫爷",
    "children": [
      {
        "id": 2,
        "label": "猫爸1",
        "children": [
          {
            "id": 3,
            "label": "猫崽1-1",
          },
        ],
      },
    ]
  },
]

let childkey = 'children' // childkey: 子节点key,默认children console.log(MsTreeToFlat(data, childkey)) 

> 扁平数据转树形数据: MsToTree
```javascript
<script setup>
import { MsToTree } from "ui-ms"; 
const data=[
	{"id":"a","value":"陕西","pid":0},
	{"id":1,"value":"西安","pid":"a"},
	{"id":9,"value":"太原","pid":1},
	{"id":"b","value":"广东","pid":0},
	{"id":11,"value":"广州","pid":"b"}
]
let pidkey = 'pid' // pidkey: 父节点key,默认为pid
console.log(MsToTree(data, 0 , pidkey)); // 0: 为根节点id; 
</script>

xls/xlsx 解析: MsXlsx

<div class="m-[30px] border border-[#fff] max-w-[500px]">
  <input type="file" ref="upload" accept=".xls,.xlsx" @change="val=>onChange(val,null)" />
</div>
<script setup>
import { MsXlsx } from "ui-ms"; 
async function onChange(file,files){
    const list = await MsXlsx(file,files)
    console.error("🚀 ~ file: home.vue:22 ~ onChange ~ list:", list)
}
</script>

浏览器兼容AT: MsAt

// main.ts (全局)
import UiMs from "ui-ms"; 
UiMs.MsAt()
// 或者 (按需)
import { MsAt } from "ui-ms"; //导入
MsAt()

字母大写: MsLetters

import { MsLetters } from "ui-ms"; //导入
MsLetters()
('abcd').upperCase(num=0) // num 不传默认首字母大写,  结果为('Abcd')
('abcd efg').upperCaseAll() // 所有首字母大写,  结果为('Abcd Efg')

水印: MsWatermark

<div id="watermark">
<script setup>
import { MsWatermark } from "ui-ms"; //导入
MsWatermark({
  id:"watermark",
  html:"测试水印", // 水印html
  start_x:10,//水印起始位置x轴坐标
  start_y:10,//水印起始位置Y轴坐标
  rows:2000,//水印行数
  cols:2000,//水印列数
  space_x:50,//水印x轴间隔
  space_y:50,//水印y轴间隔
  color:'#d7d7d7',//水印字体颜色
  alpha:0.5,//水印透明度
  fontsize:'15px',//水印字体大小
  font:'微软雅黑',//水印字体
  width:500,//水印宽度
  height:50,//水印长度
  angle:15//水印倾斜度数
})
</script>

划词填充: MsTextLine

<div ref="textRef"></div>
<script setup>
import { MsTextLabel } from "ui-ms"; //导入
const textRef = ref()
const manager = new MsTextLabel(textRef.value, {
  onLabel: info => {
    console.error('label', info);
  },
  onRelabel: info => {
    console.error('relabel', info);
  },
  onSelect: info => {
    console.error(manager,'select', info);
  },
  onHover: info => {
    // console.error('hover', info);
  },
  labelDirectory: true, // true:是否保留历史选中(多条)
  initValue: [ // 默认高亮
    // {
    //   color: { r: 255, g: 196, b: 203 },
    //   from: 16,
    //   to: 40
    // }
  ]
})
</script>

组件

内容搜索关键词高亮: MsSearchLight

<MsSearchLight :parent='contentRef' />
<div ref='contentRef'>
    测试内容。测试内容
</div>

json格式化: MsJson

<MsJson class="flex-1"
  :value="formatData"
  :expand-depth=5
  copyable
  boxed
  sort></MsJson>
<script setup>
const formatData = {
    "isRelationEvent":0,
    "a":["bb",{"cc":11}],
    "eventId":undefined,
    "eventName":true,
}
</script>

按钮: MsButton

<MsButton :size="item" type="primary" 
  v-for="item in (['large','middle','small'])"
  style="margin-right:10px" 
  :key="item">
  {{item}}
</MsButton>

虚拟下拉: MsSelect

<MsSelect v-model="selectVal" :option="list" valueKey="name" labelKey="name" multiple @change="''"></MsSelect>
<script setup>
/*
  valueKey:取值字段(默认value)
  labelKey:显示字段(默认label)
  option:下拉选项
  multiple:多选
  @change :值发生变法返回
*/
const selectVal = ref('')
const list = ref([{name:'我是第一项'}])
</script>

虚拟列表: MsVisual

<MsVirtual :list="list" isEdit :rowHeight="undefined" class="w-[500px] h-[300px] mx-auto border border-[#666]">
  <template #default="{row}">
    <div class="border-[#eee] border-b-1 leading-[40px]">{{row.name}}</div>
  </template>
</MsVirtual>
<script setup>
/*@ 组件接收参数
  list:Array, // 数据集
  rowHeight:Number, // 行固高, 默认自动获取
  isEdit:Boolean, // 编辑状态下不能动态监听list 接口异步返回，需要父组件数据加载完成v-if="true"
*/
const list = ref([])
list.value  = new Array(99999).fill(null).map((_, index) => ({ No: index+1, name: `内容 - ${index+1}` }))
</script>

alt text

表格: MsTable

<!--
  删除内置api, 改为请求赋值data
-->
<MsTable :table="table" :data="null" style="height:300px;width:800px;" >
	<template #cz="{col}">
		<span style="color:red;">{{col.label}}</span>
	</template>
	<template #operate="{row}">
		<el-link type="primary">查看</el-link>
	</template>
</MsTable>
<script setup>
import { reactive, h } from 'vue'
const table = reactive({
  bind:{ border:true }, // 开启表头拖拽宽度
  on:{},
  header: [ // 表头
    { prop: 'No', label: '序号', width: 120,
      // render(row,col, index) {
      //   return h('span', {}, index+1);
      // },
    },
    { prop: 'name', label: '名称', width: 'auto' },
    { prop: 'operate', hSlot:'cz', slot:'operate', label: '操作', width: 300 },
  ],
  data: [], // 【表格数据】渲染, virtual时必须为空数组 或者移除该字段。
  virtual:[], // 【开启虚拟列表】并存放数据,  data:传[]或删除此字段/

allData: [], // 【自定义字段】,可用于前端手动分页，参考 pageChange。 // ======== 开启分页 start ========= pagination: { pageSize: 99999, currentPage: 1, total: 0, pageSizes:10, 20, 30, 40, background:true, layout:"total, sizes, prev, pager, next, jumper", }, paginationOn: { 'current-change':(page)=>{ table.pagination.currentPage = page; table.pageChange() }, 'size-change':(page)=>{ table.pagination.currentPage = page; table.pageChange() }, }, // ======== 开启分页 end =========

pageChange() { // 手动分页 let { pageSize, currentPage:page } = table.pagination; table.data = table.allData.slice(pageSize (page - 1), pageSize (page - 1) + pageSize); }, });

/ ====== 手动分页 start ======= / // async function getTableData(){ // table.allData = new Array(99999).fill(null).map((_, index) => ({ No: index+1, name: 内容 - ${index+1} })) // table.pagination.total = table.allData.length; // table.pageChange() // } // getTableData() / ====== 手动分页 end ======= /

/ ====== 虚拟表格 start ======= / // function getVirtual(num=9){ // table.virtual = new Array(num).fill(null).map((_, index) => ({ No: index+1, name: 内容 - ${index+1} })) // table.pagination = null; // } // getVirtual() / ====== 虚拟表格 end ======= / 

> 图表: MsCharts
```javascript
/*@params
  value:Object //数据
  barType:String, // gradient: 渐变
  chartType:String, //vertical: 垂直
*/
<MsCharts :value="chartData"></MsCharts>
const chartData = {
  series:{
    data: [1,3,2,7,2]
  },
  xAxis:{
    data: ['星期一','星期二','星期三','星期四','星期五',]
  }
}

vue2 telport: MsTelport

/*@params
  to:'.main', // 元素选择器（className 或 Id）
  toRef // 或者直接传入ref
*/
<MsTelport to=".content">
  内容
</MsTelport>

MsAutoCol:grid列,最后一项自适应宽

/*@params
  grid:{ // 总分列
    type:[Number,String],
    default:3,
  },
  list:{ // 行：
    type:Array,
    default:[
      // {
      //   name: '名称',
      //   prop: "name",
      //   span:2, // 占位n列
      // },
    ]
  },
  value:{ // 值
    type:Object,
    default:{},
  },
  valueKey:String, // 如果有则使用list项里面valueKey的值如list[0][valueKey]
  valueBind:{ // 可以处理value样式
    type:Object,
    default:{},
  },
  labelBind:{ // 可以处理label样式
    type:Object,
    default:{},
  },
*/
<MsAutoCol />

alt text

打包

npm run build   // 打包项目
npm run build:lib   // 打包库UI

npm切换镜像源

npm config set registry=https://registry.npmjs.org
npm config set registry=https://registry.npmmirror.com
npm unublish ui-ms@0.0.1 // 移除
npm view ui-ms versions // 查看所有版本

git

git config -l // 查看
设置
git config --global user.name 'username'
git config --global user.email 'email'
git config --global user.password 'password'

https 启用

npm install -g mkcert

1.生成一个ca证书，mkcert create-ca，生成之后会看到一个ca.crt和ca.key文件;
2.再生成cert证书，mkcert create-cert，会在刚刚的路径下生成cert.crt和cert.key文件
3.安装：双击刚刚生成的ca.crt文件（受信任的根证书颁发机构）
4.将 cert.crt和cert.key两个拷贝到项目的src/ssl文件夹中
5.vite.config.js 配置
const fs = require('fs')
const path = require('path')
server: {
  https: {
    // 主要是下面两行的配置文件，不要忘记引入 fs 和 path 两个对象
    cert: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.crt')),
    key: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.key'))
  }
}
ui-mselement-plus-table
clipboardxlsx
@everything-registry/sub-chunk-3005
0.0.40

9 months ago

0.0.41

9 months ago

0.0.38

9 months ago

0.0.36

9 months ago

0.0.30

1 year ago

0.0.32

1 year ago

0.0.33

1 year ago

0.0.22

1 year ago

0.0.34

1 year ago

0.0.35

11 months ago

0.0.20

2 years ago

0.0.15

2 years ago

0.0.12

2 years ago

0.0.13

2 years ago

0.0.14

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago