bokeui

boke common components with vue boke vue 组件库

install

# install dependencies
npm install bokeui

use

import Vue from 'vue'
import bokeui from 'bokeui'
import 'bokeui/package/index.css'

Vue.use(bokeui)

components

• BkUpload

BkUpload oss 图片上传组件（可上传多张，支持拖拽排序）,依赖axios，请保持应用层安装了axios

| 属性 | 说明 | 类型 | 默认值 | |------|----| ---- | ----| |imageUrls/v-model|初始化图片url| Array| [] | |*oss | 获取oss上传图片的权限，需要返回一个带权限的primise对象同一个组件在权限没过期的情况下该方法值执行一次一减少服务器压力| Function|-| |maxNum| 上传图片上限 | Number | 1 | |width | 组件item的宽| Number| 100| |height| 组件item的高| Number | 100|

demo

<template>
  <div id='app'>
    <bk-upload :maxNum="3" :oss='oss' :v-model="imageUrls" ></bk-upload>
  </div>
</template>

  <script>
  export default {
    name: 'App',
    data () {
      return {
        imageUrls: []
      }
    },
    methods: {
      oss () {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            let req = {
              'host': '',
              'imageDir': '',
              'policy': '',
              'accessId': '',
              'expireDate': '',
              'signature': ''
            }
            resolve(req)
          }, 2000)
        })
      }
    }
  }
  </script>

• BkShowPatternImg

  boke纸样矢量图片查看器，具有放大，移动矢量图的功能。

| 属性 | 说明 | 类型 | 默认值 | |------|----| ---- | ----| | *imageUrl | 矢量图链接 | String | — | | width | 图片查看器的宽 | Number | 1000 | | height | 图片查看器的高 | Number | 600 | | *imageWidth(model)| 图片的宽度 | Number | 600 | | zoomRate| 图片放大的速率 | Number | 40 |

demo

<template>
  <div id='app'>
    <bk-show-pattern-img v-model="imageWidth" imageUrl="https://boke-pattern.oss-cn-shenzhen.aliyuncs.com/pattern_test/12bb59af-ab87-48e7-91f7-2a16839f80b2.svg"></bk-show-pattern-img>
  </div>
</template>
<script>
export default {
  data () {
    return {
      imageWidth: 500
    }
  },
}
</script>