相关推荐

• 低无一体

  如何增加页面消息通知轮询的间隔或者关闭轮询

  场景 oinone的前端页面默认自带了消息通知功能，在顶部状态栏可以看到消息的查看入口，默认每隔5秒查询一次最新的消息，我们可以通过自定义消息组件增加该间隔或者是关闭轮询 示例代码 修改轮询间隔 import { MaskWidget, NotificationWidget, SPI } from '@kunlun/dependencies'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class DemoNotificationWidget extends NotificationWidget { /** * 轮询间隔时间，单位: 秒 * @protected */ protected msgDelay = 30000; } 关闭轮询 import { MaskWidget, NotificationWidget, SPI } from '@kunlun/dependencies'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class DemoNotificationWidget extends NotificationWidget { protected mounted() { super.mounted(); // 清除轮询的定时器 this.msgTimer && clearInterval(this.msgTimer); // 挂载后手动查询一次消息 this.getMsgTotal(); } }

  nation

  2024年8月20日

  2.2K000
• 前端

  Oinone平台之Router扩展

  问题描述 在Oinone平台内置路由中，默认了三种路由 /login //默认登录页 /page //默认主逻辑页 / //根页面，会自动发起查询优先级最高的应用，并跳转 在实际的业务迭代中，我们通常有以下三种需求： 我要覆盖默认的登录页，页面我不喜欢，登录逻辑满足不了； 我要在平台上加个帮助中心； 这个路径不符合我司规范，我要自定义加前缀 接下来，我将在Oinone平台中满足以上场景 覆盖默认路径 以登录页为例 在项目目录src/main.ts下，添加自定义router import 'ant-design-vue/dist/antd.css'; import 'element-plus/dist/index.css'; import '@kunlun/vue-ui-antd/dist/kunlun-vue-ui-antd.css'; import '@kunlun/vue-ui-el/dist/kunlun-vue-ui-el.css'; import 'reflect-metadata'; import { VueOioProvider } from '@kunlun/dependencies'; import interceptor from './middleware/network-interceptor'; import './field'; import './view'; import './actions'; VueOioProvider( { http: { url: location.origin, callback: interceptor }, browser: { title: 'Oinone – 构你想象!', favicon: 'https://pamirs.oss-cn-hangzhou.aliyuncs.com/pamirs/image/default_favicon.ico' }, router: [{ path: '/login', widget: 'CustomLogin'}] // 用CustomLogin覆盖默认登录页 }, [] ); 定义CustomLogin, 定义方式同书籍中的自定义表单和自定义表格类似，精简版的代码为： import { RouterWidget, SPI } from "@kunlun/dependencies"; @SPI.ClassFactory(RouterWidget.Token({ widget: 'CustomLogin' })) // SPI注册，router得widget和此处的widgetshi对应的 export class CustomLogin extends RouterWidget { public initialize(props) { super.initialize(props); this.setComponent('定义的vue文件'); return this; } } 增加新的访问路径 同覆盖登录页 在router中增加路由 router: [{ path: '/login', widget: 'CustomLogin'}, { path: '/help', widget: 'Help'}] 定义Help，同覆盖登录页 定义个性化路径 需要再所有访问路径前统一加标识，比如添加Oinone;在项目目录下新建.env文件(若存在，可以复用)，在env文件中添加： BASE_PATH=/Oinone 修改后重启工程即可，访问/Oinone/login即可 结语 以上就是Oinone平台路由的扩展能力，在Oinone平台中，通过自定义Router达到扩展路由的能力，并通过采用env等通用配置的能力，解决批量修改路由的目的。

  oinone

  2023年11月1日

  60.9K000
• 组件

  oio-cascader 级联选择

  级联选择框。 何时使用 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。 API <oio-cascader :options="options" v-model:value="value" /> 参数 说明 类型 默认值 Version allowClear 是否支持清除 boolean true autofocus 自动获取焦点 boolean false changeOnSelect （单选时生效）当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 boolean false disabled 禁用 boolean false displayRender 选择后展示的渲染函数,可使用 #displayRender="{labels, selectedOptions}" ({labels, selectedOptions}) => VNode labels => labels.join(' / ') dropdownClassName 自定义浮层类名 string – getTriggerContainer 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 Function(triggerNode) () => document.body loadData 用于动态加载选项，无法与 showSearch 一起使用 (selectedOptions) => void – maxTagCount 最多显示多少个 tag，响应式模式会对性能产生损耗 number | responsive – maxTagPlaceholder 隐藏 tag 时显示的内容 v-slot | function(omittedValues) – multiple 支持多选节点 boolean – options 可选项数据源 – placeholder 输入框占位文本 string ‘请选择’ searchValue 设置搜索的值，需要与 showSearch 配合使用 string – showSearch 在选择框中显示搜索框 boolean false tagRender 自定义 tag 内容，多选时生效 slot – value(v-model:value) 指定选中项 string[] | number[] – showSearch showSearch 为对象时，其中的字段： 参数 说明 类型 默认值 filterOption 接收 inputValue path 两个参数，当 path 符合筛选条件时，应返回 true，反之则返回 false。 function(inputValue, path): boolean 事件 事件名称 说明 回调参数 版本 change 选择完成后的回调 (value, selectedOptions) => void – search 监听搜索，返回输入的值 (value) => void – Option interface Option { value: string | number; label?: any; disabled?: boolean; children?: Option[]; // 标记是否为叶子节点，设置了 `loadData` 时有效 // 设为 `false` 时会强制标记为父节点，即使当前节点没有 children，也会显示展开图标 isLeaf?: boolean; }

  汤乾华

  2023年12月18日

  1.6K000
• 前端

  【前端】生产环境部署及性能调优

  概述 前端工程使用vue-cli-service进行构建，生成dist静态资源目录，其中包括html、css、javascript以及其他项目中使用到的所有资源。 在生产环境中，我们通常使用Nginx开启访问服务，并定位其访问目录至dist目录下的index.html，以此来实现前端工程的访问。 不仅如此，为了使得前端发起请求时，可以正确访问到后端服务，也需要在nginx中配置相应的代理，使得访问过程在同域中进行，以达到Cookie共享的目的。 当然，服务部署的形式可以有多种，上述的部署方式也是较为常用的部署方式。 部署 使用production模式进行打包 使用dotenv-webpack插件启用process.env 配置chainWebpack调整资源加载顺序 使用thread-loader进行打包加速 性能调优 使用compression-webpack-plugin插件进行压缩打包 启用Nginx的gzip和gzip_static功能 使用OSS加速静态资源访问（可选） 使用production模式进行打包 在package.json中添加执行脚本 { "scripts": { "build": "vue-cli-service build –mode production" } } 执行打包命令 npm run build 使用dotenv-webpack插件启用process.env 参考资料 dotenv-webpack 在package.json中添加依赖或使用npm安装 { "devDependencies": { "dotenv-webpack": "1.7.0" } } npm install dotenv-webpack@1.7.0 –save-dev 在vue.config.js中添加配置 const Dotenv = require('dotenv-webpack'); module.exports = { publicPath: '/', productionSourceMap: false, lintOnSave: false, configureWebpack: { plugins: [ new Dotenv() ] } }; .env加载顺序 使用不同模式，加载的文件不同。文件按照从上到下依次加载。 development .env .env.development production .env .env.production 配置chainWebpack调整资源加载顺序 chainWebpack对资源加载顺序取决于name属性，而不是priority属性。如示例中的加载顺序为：chunk-a –> chunk-b –> chunk-c。 code>test属性决定其打包范围，但集合之间会自动去重。如chunk-a打包node_modules下所有内容，chunk-b打包node_modules/@kunlun下所有内容。因此在chunk-a中将不再包含node_modules/@kunlun中的内容。没有

  张博昊

  2024年4月19日

  1.5K000
• 低无一体

  表单页如何在服务端动作点击后让整个表单都处于loading状态

  介绍 在业务场景中，有时候由于提交的数据很多，导致服务端动作耗时较长，为了保证这个过程中表单内的字段不再能被编辑，我们可以通过自定义能力将整个表单区域处于loading状态 自定义动作组件代码 import { ActionType, ActionWidget, BaseElementViewWidget, BaseView, ClickResult, ServerActionWidget, SPI, Widget } from '@kunlun/dependencies'; @SPI.ClassFactory(ActionWidget.Token({ actionType: ActionType.Server })) class LoadingServerActionWidget extends ServerActionWidget { protected async clickAction(): Promise<ClickResult> { const baseView = Widget.select(this.rootHandle) as unknown as BaseView; if (!baseView) { return super.clickAction(); } const baseViewWidget = baseView.getChildrenInstance().find((a) => a instanceof BaseElementViewWidget) as unknown as BaseElementViewWidget; if (!baseViewWidget) { return super.clickAction(); } return new Promise((resolve, reject) => { try { baseViewWidget.load(async () => { const res = await super.clickAction(); resolve(res); }); } catch (e) { reject(false); } }); } } 本案例知识点 BaseElementWidget提供了load方法将继承了该class的元素渲染的区域做整体loading交互，等入参的函数处理完成后恢复正常状态，其实所有继承了ActionWidget的组件也提供了这个能力让按钮在执行函数中的时候处于loading状态， 每个组件都有一个全局唯一的handle值，所在根视图的rootHandle,组件可以用this.rootHandle通过Widget.Select方法查找到所在的根视图组件，从视图的实例化子元素里可以查找到具体的业务类型视图组件，如详情页的DetailWidget、表单页的FormWidget、表格页的TableWidget，拿到这些实例后就可以操作里面的属性和方法了

  nation

  2024年5月29日

  2.2K000