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>