ui-ms
v0.0.41
Published
基于vue开发部分组件
Downloads
11
Readme
更新内容
引入组件
- 按需引入
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'], // 加入此行强转译
}
- 全量引入
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);
}
</script>socket连接: MsSocket
<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'))
</script>查找上级所有父节点（树）: MsTreeFindParent
<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))
</script>扁平数据转树形数据: MsToTree
<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>
表格: 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 ======= */
</script>
图表: MsCharts
/*@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 />
打包
npm run build // 打包项目
npm run build:lib // 打包库UInpm切换镜像源
npm config set registry=https://registry.npmjs.org
npm config set registry=https://registry.npmmirror.com
npm unublish [email protected] // 移除
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'))
}
}