移动端端默认布局模板

相关推荐

• 前端

  表单字段API

  FormFieldWidget 表单字段的基类，包含了表单字段通用的属性跟方法 示例 class MyFieldClass extends FormFieldWidget{ } 字段属性 属性名 说明 类型 可选值 默认值 value 当前字段的值 any – null formData 当前表单视图的数据 Object – {} rootData 跟视图的数据，如果当前只有一个视图，那么与formData是一样的 Array – [] metadataRuntimeContext 当前视图运行时的上下文，可以获取当前模型、字段、动作、视图等所有的数据 Object – – urlParameters 当前url参数 Object – – field 当前字段的元数据 Object – – model 当前模型 Object – – view 当前视图 Object – – disabled 是否禁用 Boolean – false invisible 当前字段是否不可见 Boolean – false required 当前字段是否必填，如果当前字段是在详情页，那么是false Boolean – false readonly 当前字段是否只读，如果当前字段是在详情页、搜索，那么是false Boolean – false placeholder 占位符 String – 当前字段的displayName label 字段的标题 String – 当前字段的displayName 方法 方法名 说明 参数 例子 getDsl 获取当前字段所有的配置 – change 修改当前字段的值 any focus 获取焦点触发的方法 – blur 失去焦点触发的方法 – executeValidator 执行当前字段的校验，异步的 – submit 重写当前字段的提交逻辑 – submit() { return ‘value’ } reloadActiveRecords 替换当前视图的数据 Array this.reloadActiveRecords([{code: xxx, name: 111}]) reloadRootData 替换根视图的数据 Array this.reloadRootData([{code: xxx, name: 111}])

  汤乾华

  2023年11月15日

  2.4K002
• 前端

  如何通过浏览器开发者工具提高调试效率

  1.通过vue devtool查看vue组件和oinone组件的信息 平台字段、动作、视图组件都是以Widget结尾的，可以通过关键字快速找到组件 安装vue devtool插件 chrome安装最新版的vue devtool插件 谷歌应用商店插件地址，隐藏窗口需要在扩展程序的详情页额外设置才能使用该插件 安装好插件后，可以通过插件选中html页面中的元素查看相关信息 相关特性了解 组件自动创建的vue组件以组件的class类名命名，据此特性可以得出自定义组件的时候，可继承该命名的父类 一般oinone的组件以Widget后缀命名，也推荐大家也以此为后缀，方便在vue调试面板快速看出哪些是oinone组件 选中oinone组件后可以在右侧面板看到相关的组件信息，部分属性介绍 template属性为dsl的配置 activeRecords、formData、rootData、parentData、dataSource等属性为常用数据属性 action为动作的元数据 field为字段的元数据 2.直接在浏览器开发者工具的源码处调试源码 打开浏览器开发者工具，进入标签页源代码/来源(英文版为Source)，win系统用快捷键ctrl+O，mac系统用快捷键cmd+O, 可以打开文件搜索面板，通过关键字搜索文件名找到代码文件，可直接在里面debug调试或者查看执行逻辑

  nation

  2024年9月9日

  2.5K000
• 前端

  「前端」 获取当前用户信息以及语言

  概述 TopBarService 是用于管理用户信息和多语言配置的工具类，提供以下核心功能： 用户信息查询（含缓存机制） 当前语言状态获取 可用语言列表查询 语言切换操作 快速开始 // 基础使用示例 import { TopBarService } from '@kunlun/dependencies'; // 获取用户信息（自动缓存） const userInfo = await TopBarService.getUserInfo(); // 获取当前语言配置 const currentLang = await TopBarService.getCurrentLang(); // 查询支持的语言列表 const languages = await TopBarService.queryLanguageList(); // 激活指定语言 await TopBarService.activeLang('zh_CN'); API 详解 方法功能说明 方法名称 描述 参数 返回值 ​getUserInfo 获取当前用户信息（自动缓存） 无 用户信息对象 ​queryUserInfo 强制获取最新用户信息 无 最新用户信息对象 ​getCurrentLang 获取当前激活的语言配置 无 语言配置对象 / undefined ​queryLanguageList 获取所有可用语言列表 无 语言列表数组 ​activeLang 激活指定语言 语言 ID (string) 更新后的语言配置对象

  汤乾华

  2025年3月21日

  2.1K000
• 前端

  表格页自定义按钮如何获取搜索区域的查询条件

  介绍 在使用 Oinone 平台开发过程中，开发者可能会遇到自定义动作需要获取搜索条件并传递给后端的情况。本文将介绍如何利用 Oinone平台 实现此功能。 技术基础知识 当我们在自定义一个动作的时候要先明确自定义的动作类型是什么样的，在Oinone平台中，分为了如下几个动作： 1: 视图动作2: 服务端动作3: 客户端动作3: URL动作 功能步骤或代码示例 案例1、服务端动作，动作点击时候要拿到搜索内容，然后传递给后端。 import { ActionType, ActionWidget, SPI, ServerActionWidget } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ name: 'name', model: 'model', actionType: ActionType.Server }) ) export class MyServerActionWidget extends ServerActionWidget { protected async clickAction() { const rst = this.getSearchRsqlAndQueryParams(); } } 案例2、视图动作点击的时候把搜索内容带到另外一个视图或者弹窗 import { ActionType, ActionWidget, SPI, ServerActionWidget } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ name: 'name', model: 'model' }) ) export class MyDialogViewActionWidget extends DialogViewActionWidget { // 继承当前动作原本的class protected async clickAction() { const { queryData } = this.getSearchRsqlAndQueryParams(); this.action.context = queryData super.clickAction() return true } } 在上述代码中，我们自定义了一个服务器动作，并在点击触发函数中调用了getSearchRsqlAndQueryParams方法，该方法会返回一个对象： { rsql: String, // 搜索内容对应的rsql queryData: Object, // 搜索的数据 condition: Condition, // 搜索内容对应的数据结构 queryDataToString: Function // 将搜索内容转成JSON字符串 } 这样我们就可以根据业务场景使用对应的值。 注意事项 1: 确保正确导入所需的依赖包。2: 理解并适当修改代码以满足特定业务需求。 总结 本文介绍了在 Oinone 平台中如何自定义一个服务端动作，并获取搜索条件传递给后端的方法。通过合理利用这些功能，开发者可以更灵活地定制应用程序，满足不同的业务需求。 实践案例 如何自定义点击导出动作绑定指定模板

  汤乾华

  2024年3月6日

  1.8K000
• 前端

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

  概述 前端工程使用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