devicebox v3.3.3

devicebox

安装

npm install devicebox

使用示例

import DeviceBox from 'devicebox'
import mock from '@/components/mock.js'
import api from '@/components/api.js'
import h5 from '@/browser/h5.js'
//启用下面的时候 ajax的数据会来说mock
DeviceBox.mock(mock)
DeviceBox.api(api)
DeviceBox.browser(h5)
Vue.use(DeviceBox)

ajax钩子函数

DeviceBox.before = ()=>{} DeviceBox.after = ()=>{}

模拟数据

mock.js
export default {
  login: {
    return: {
      isSucceed: true,
      message: '',
      rows: [1,2,3,4]
    }
  }
}

api接口数据

api.js

export default {
  login: {
    name: "登录",
    cache: false, //是否启用缓存
    url: "/vito/loginMobile.ht"
  }
}

test测试数据

test.js

export default {
     login: {
       params: {
         username: "cuidaguan",
         password: "123456"
       },
       mock: {
         id: "this.rows[0].id"
       }
     }
}

使用ajax demo

this.$ajax('login', {
      username: '',
      password: ''
    }).then(response=>console.log('response', response))

使用线程wajax demo

this.$wajax('login',{
        username: 'cuidaguan',
        password: '123456'
      },function(response){
        //可以不使用
        //对线程的返回值做预处理 不能出现window 对象 document 对象 parent 对象 这里的运算属于线程 必须有返回值return 否者无效
        return response
      }).then(response=>console.log('response', response))

默认样式表

admin.css

识别浏览器

h5.js

base默认不写，为true的时候 为最基础的方法所有浏览器共享

export default {
    name: 'h5',
    base: false,
    isRuntime () {
        return //通过userAgent判断运行环境
    },
    API: {
        login () {

        }
    }
}

使用代理服务器

在package.json中script添加这个参数
"proxy": "node node_modules/devicebox/bin/proxy.js --config build/proxy.conf.js",

proxy.conf.js 名字可以任意定义

"firstpage" 入口接口可以不写， 只针对4.0单独使用的默认写loginMobile
"context" 代理名称
"target" 代理路径
"port" 端口号 默认不写80

module.exports = function() {
    this.config = {
      firstpage: 'loginMobile',
      context: '/vito',
      target: 'http://192.168.0.52:8080/DDS',
    }
}

多端口代理，争对微信优化了

module.exports = function() {
  this.config = {
    port: "80",
    index: 2,
    firstpage: 'wloginByAccount',
    options : [{
      context: '/3000',
      pathRewrite: {
        '^/3000': '/'
      },
      target: 'http://192.168.0.42:3000',
    },{
      context: '/vito',
      pathRewrite: {
        '^/vito': '/'
      },
      target: 'http://vitoyun.cn'
    },{
      context: '/',
      target: 'http://192.168.0.42:8080',
      pathRewrite: {
        '^/WW_verify_IMH3CD90g4hBn80L.txt': '/static/WW_verify_IMH3CD90g4hBn80L.txt'
      }
    }]
  }
}

清除缓存

清除缓存方法

this.$clear(name)

name为api.js中的可以,如果为空清除所有

使用自定义事件

自定义滚动条

this.$event.scrollstart('name', scrollTop=>{
            console.log("开始")
            self.log1 = scrollTop
          }, scrollTop=>{
            console.log("中间")
            self.log = scrollTop
          }, scrollTop=>{
            console.log("结束")
            self.log1 = scrollTop
          })

使用日历插件

使用方式

import DCalendar from 'devicebox/components/calendar/DCalendar.vue'

<d-calendar ref="calendar" @changeback="changeback" :weekfirst="1" :datestr="'2018-12-31'"></d-calendar>

components: { DCalendar }

weekfirst: 日历第一天是星期几0-6 默认以星期一开头 1
datestr : 初始化日期字符串 默认为当天
changeback: 切换日期后回调  返回当前日期str
内置左右滑动切换

如果要切换指定日期
this.$refs["calendar"].change("2016-2-3")

使用工作流

使用方式

import DFlow from 'devicebox/components/flow/DFlow.vue'

<d-flow ref="flow" :data="json" @imgclick="imgclick" @fileclick="fileclick"></d-flow>

components: { DFlow }

imgclick:图片返回事件 返回值 arr, n 图片数组和点击下标
fileclick:附件返回事件 返回值 obj  文件对象

获取事件内容方法，返回修改后对象
this.$refs.flow.getContent()

json demo

json: { title: "事件标题事件标题事件标题事件标题", date: "2016-05-2", number: "编号:20212031", content: [{ required: true, //必填 type: "text", //none hide text date time datetime select radio child父子表table name: "文本1:", // value: "测试" },{ type: "child", table: [] //和content一样 },{ required: true, type: "text", name: "文本2:", value: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试", },{ name: "日期:", type: "date", value: "2017-05-19", },{ name: "时间:", type: "time", value: "17:34:00", },{ name: "日期和时间:", type: "datetime", value: "2017-05-19T17:34:00", },{ name: "不可编辑:", type: "none", value: "为空或者none", },{ name: "消失:", type: "hide", value: "消失", },{ type: "select", name: "选项名称:", value: { name: "汽车", value: "1" }, select: { name: "汽车", value: "2" },{ name: "飞机", value: "3" } },{ type: "radio", name: "单选:", value: { name: "汽车1", value: "1" }, select: { name: "汽车1", value: "2" },{ name: "飞机2", value: "3" } },{ type: "checkbox", name: "多选名称:", select: { name: "汽车1", value: "1", checked: true },{ name: "飞机2", value: "3" },{ name: "火车3", value: "2" },{ name: "汽车1", value: "4" } }], files: [{ title: "处理前", max: [], //大图数组 min: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3682347179,3088191221&fm=173&app=25&f=JPEG?w=218&h=146&s=D3202EE10005B547749CC62F03007047', 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2739286597,904573543&fm=173&app=25&f=JPEG?w=218&h=146&s=02819C4D0662D35D4ABD583D0300C048', 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3909121043,4202887955&fm=173&app=25&f=JPEG?w=218&h=146&s=5103935544177FDE5E85682B0300F012' , //小图数组 imgname: "图片1图片1", "图片2", //图片名称 audio: 'http://192.168.0.42:8080/static/1.mp3','http://192.168.0.42:8080/static/2.mp3', //音频数组 file: { name: "我是未知类型", path: "aa.apk", size: "11" } //文档数组 },{ title: "纯图片", max: [], //大图数组 min: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3682347179,3088191221&fm=173&app=25&f=JPEG?w=218&h=146&s=D3202EE10005B547749CC62F03007047', 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2739286597,904573543&fm=173&app=25&f=JPEG?w=218&h=146&s=02819C4D0662D35D4ABD583D0300C048', //小图数组

                },{
                  title: "纯音频",
                  audio: ['http://192.168.0.42:8080/static/3.mp3'] //音频数组
                },{
                  title: "纯文件",
                  file: [{
                    name: "我是个word",
                    path: "3.doc",
                    size: "2311"
                  },{
                    name: "我是个excel",
                    path: "3.xls",
                    size: "1000"
                  },{
                    name: "我是个ppt",
                    path: "3.ppt",
                    size: "123456"
                  },{
                    name: "我是个pdf",
                    path: "3.pdf",
                    size: "2355"
                  },{
                    name: "我是个txt",
                    path: "3.txt",
                    size: "3345"
                  }] //文档数组
                }],
                flow: {
                  title: "过程名称",
                  data: [{
                    nodename: "节点名称1",
                    title: "王琴",
                    state: "yes",
                    date: "2016-02-06",
                    content: "内容<span style='color:red'>-1</span>"
                  },{
                    nodename: "节点名称2",
                    title: "崔大关",
                    state: "no",
                    date: "2016-05-06",
                    content: "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
                    icon: "https://www.baidu.com/img/baidu_jgylogo3.gif",
                  }]
                }
              }