poui2 v1.0.0
vue frame
processon
Example Usage
npm install
npm run dev
npm run build
npm run build:test
npm run build:prod
eslint 配置
po@pos-Mac-mini-3 cloud % npx eslint --init ✔ How would you like to use ESLint? · problems ✔ What type of modules does your project use? · esm ✔ Which framework does your project use? · vue ✔ Does your project use TypeScript? · No / Yes ✔ Where does your code run? · browser ✔ What format do you want your config file to be in? · JavaScript The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest ✔ Would you like to install them now with npm? · No / Yes 运行: npx eslint src 检测项目错误
全局 local key
po_file_sort 文件排序 po_file_view 切换状态 po_page_name 左侧页面导航
全局鼠标事件钩子注册
type: 'set' 必传
envName: '事件名称'
hookName: '钩子名称,回调唯一性'
this.$menvHook({
type: 'set', envName: 'mousemove', hookName: 'listMove',
fn : function(e) {
console.log(e, '注册body上的鼠标移动回调')
}
})
this.$menvHook({
type: 'set', envName: 'mousedown', hookName: 'listMove',
fn : function(e) {
console.log(e, '注册body上的鼠标移动回调')
}
})
this.$menvHook({
type: 'set', envName: 'mouseup', hookName: 'listMove',
fn : function(e) {
console.log(e, '注册body上的鼠标移动回调')
}
})
this.$menvHook({
type: 'set', envName: 'click', hookName: 'menu',
fn : function(e) {
console.log(e, '注册body上的鼠标移动回调')
}
})
this.$menvHook({
type: 'set', envName: 'scroll', hookName: 'menu',
fn : function(e) {
console.log(e, '注册body上的鼠标移动回调')
}
})
消息
this.$globalTopTip({
content: '消息内容', // 消息内容 必填
duration: 1500, // 消息时间 非必填
type: 'success|error|loding', // 消息类型 非必填
top: 0, // 距离顶部距离 非必填
fn: () => {} // 回调函数 非必填
})
弹窗调用
// 测试弹窗
this.$globalDlg({
// 必填项
name: 'rename',
// 以下圈数自定义属性和方法
nowDoFileData: this.nowDoFileData,
// 取消回调
eCancel: function(pms) {
console.log('弹窗关闭回调', pms)
},
// 成功回调
eSuccess: (pms) => {
console.log('弹窗成功回调', pms)
this.rootSelf.dlgUpdate(pms)
}
})
常用方法
主要针对页面经常用到的方法封装 更多方法请参照gweb.js
跳转方法
// 外部跳转
this.$jump({ url: '/diagrams/new', type: 'other' })
// 默认内部跳转
this.$jump({
url: '/diagrams/new',
})
跳转到文件
this.$jumpToFile()
文件类型
this.$type(obj)
去除左右空格
this.$trim(obj)
空对象判断
this.$isEmptyObject()
空数据 null,'',0,undefined
this.$isNull()
一个简单接口调用实列
// 引入接口
import { apiSaveAsk } from '@/api/common'
// 执行接口
apiSaveAsk({}).then(res => {
// 简单校验
if (!this.$apiCheck.checkNomal(res)) {
return false
}
// do anything...
})
通用检测API接口返回
// 调用实列, res是接口返回 res
// .then((res) => { ...
if (!_this.$apiCheck.checkNomal(res)) {
return false
}
其他,用于特殊需求
this.$dom() // 选择DOM
this.$childrens() // 选择DOM child
this.$addClass() // 添加CLASS
this.$removeClass() // 移出CLASS
this.$setStyle() // 设置样式
this.$offset() // 获得dom偏移量
动态加载JS
用于外部JS个别特殊需求
let ts = this this.$loadJs([ '/static/js/jquery.js' ], function() { ts.$loadJs([ '/static/js/promise-1.0.0.js', '/static/js/jquery.xml2json.js', '/static/js/zip.js', '/static/js/import.js' ], function() { console.log('加载完成') }) })
提示
全局标题提示
v-originalTitle="{ title:'测试标题', turn: 'down|top|left|right', trimming: {top:0,left:0,right:0,bottom:0} }"
po的util移植方法
// 调用实列
this.$util...
// 具体方法请看 /utils/util.js
新增动画插件
阅读文档:http://www.zixuephp.com/html/javascript/2020_04/44983.html
A.move(dom对象,{
css属性设置和jquery一致,目前集成了 width,height,top,left,right,bottom,background,color,borderColor,fontSize,opacty,transform,scrollTop,scrollLeft
其中:transform 包括( rotate,scale,translate,skew)
},2000,function(item){
回调结束,item包括DOM对象和各个选项,可以打印查看
console.log('触发完成',item);
},A.Easing.Quadratic.In);
A.Easing.Quadratic.In,加速运动,不传就是匀速运动,包括如下选项:
和tween.js一致。
2 years ago