介绍

梅沙前端UI组件库

安装教程

1. pnpm add meisha-vue3-ui

meisha-vue3-ui

引入:

==>main.js import MeishaVue3UI from 'meisha-vue3-ui' import 'meisha-vue3-ui/lib/style.css'

app.use((v) => MeishaVue3UI.install(v, { tip: true,locale,ElementPlus, options }));

常用方法

import * as cookies from "meisha-vue3-ui/lib/cookie";

export const { getCookie, setCookie, delCookie } = cookies;

import * as regs from "meisha-vue3-ui/lib/reg";

export const { hideMobile, regEmail, regHongkongPhone, regMacaoPhone, regNum, regPhone, regTaiwanPhone } = regs;

import _ as tools from "meisha-vue3-ui/lib/tool";

export const { addStyleSheet, cloneDeep, copyToClipboard, dateFilter, deepCopyArr, downloadExcel, downloadFileCDN, foreachTree, formatMoney, getUrlParam, injectScript, limitFileSize, listToTree, numToChinese, removeDuplicates, scrollToTop, setDocumentTitle, smoothScroll, strToCamel, toFixed, uniqueArrayObject, uniqueByKey, uuid } = tools;

import _ as types from "meisha-vue3-ui/lib/type"; // console.log("regs", Object.keys(types));

export const { is, isArray, isBigInt, isBlob, isBoolean, isDate, isFunction, isHTMLDocument, isNull, isNumber, isObject, isString, isSymbol, isType, isUndefined, isWindow } = types;

目前已有组件库

MSTable, MSDialog, MSHoverMore, MSCrumb, MSFilterForm, MSPagination

目前常用的样式名

/_ flex / / float / .fr { float: right; } .fl { float: left; } / float _/

/_ font _/ .ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .text_nowrap { white-space: nowrap; } .hidden { overflow: hidden; } .noevent { pointer-events: none; cursor: not-allowed; } .cursor { cursor: pointer; } @for $i from 3 to 30 { .radius#{$i} { border-radius: #{$i}px; } } @for $i from 12 to 30 { .font#{$i} { font-size: #{$i}px; } }

/_ font _/

/_ color _/ .mcolor { //main-color color: #4787ff; } .textcolor { color: #aaaaaa; } .color3 { color: #333333; } .textcenter, .t_c { text-align: center; } .t_r { text-align: right; } .bold { font-weight: bold; } .fw_500, .fw500, .font500 { font-weight: 500; } .fw500VP { font-weight: 500 !important; } .fw600 { font-weight: 600; } .fw_400, .fw400, .font400 { font-weight: 400; } .opacity5 { opacity: 0.5; } .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; touch-action: manipulation; } .white, .fff { color: #ffffff; } .red, .c_F26666 { color: #f26666; } .blue { color: #3d7af8; } .gray, .c_86909c, .c_86909C { color: #86909c; } .c_4E5969 { color: #4e5969; } .c_1D2129 { color: #1d2129; } .c_2BC96A { color: #2bc96a; } .c_FF9C19 { color: #ff9c19; } .c_C9CDD4 { color: #c9cdd4; } .c_909399 { color: #909399; }

.bgcfafafa { background-color: #fafafa; } / color _/ .mBgc { background-color: #edf0f4; height: auto; } .w100 { width: 100%; } .h100 { height: 100%; } .fff_bgc { background-color: #fff; } .whiteBgc, .fffbgc { background-color: #fff; height: inherit; } body ::-webkit-scrollbar { display: none; }

// 安全距离 .safe-bottom { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }

// 日志按钮 .logBtn { border: 1px solid #e5e6eb; width: 40px; }

// 编辑器 .MSWangEditorbox { border: 1px solid #e5e6eb; z-index: 10; / 按需定义 _/ border-radius: 5px; } .MSWangEditor_toolbar { border-bottom: 1px solid #e5e6eb; .w-e-bar { background-color: #f7f8fa; border-radius: 5px 5px 0 0; } } .MSWangEditor_editor { min-height: 100px; }

.statusCircle { span.icon { display: inline-block; width: 8px; height: 8px; border-radius: 50%; &.red { background-color: #f26666; } &.green { background-color: #2bc96a; } } }