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一致。