jwt-ui

jwt-ui

Project setup

npm i jwt-ui

Project used

in main.js

import { setupJwt } from 'jwt-ui'
import 'jwt-ui/lib/jwt-ui.css'

setupJwt(app,{
  translateTitle: Function; // 翻译函数
  request: Function; // 请求函数
  fillUrl: Function; // 图片路径补全函数
  uploadImgUrl: string; // 图片上传地址
  uploadRichTextUrl: string; // 上传富文本路径
  txCosUploadFileUrl: string; // 腾讯 cos上传文件地址
  imgUploadResKey: string; // 图片上传返回地址key responseKey
  emptyImgUrl: string; // 图片默认地址
  errorImgUrl: string, // 图片加载错误地址 
});

install dependencies and use in your project

"vue": "^3.3.4",
"element-plus": "^2.4.1",
"dayjs": "^1.11.5",
"axios": "^0.24.0",
"@element-plus/icons-vue": "^2.1.0",
"remixicon": "^4.0.0",
"lodash-es": "^4.17.21",
"md5": "^2.3.0",
"vue-draggable-plus": "^0.6.0"

国际化 (i18n)

组件库内置所有需翻译的中文文案清单见 docs/i18n.md 或直接引入 jwt-ui/locales/zh-CN.json 与 jwt-ui/locales/keys.json。

在主项目中配置示例：

import { createApp } from 'vue';
import App from './App.vue';
import { setupJwt } from 'jwt-ui';
import 'jwt-ui/lib/jwt-ui.css';
import i18n from './locales';

const app = createApp(App);

setupJwt(app, {
  translateTitle: (text: string) => {
    if (!text) return '';
    return i18n.global.te(text) ? i18n.global.t(text) : text;
  },
});

app.mount('#app');