bkui-vue 0.0.1-beta.34 → 0.0.1-beta.340

package/lib/icon/weixin.js

@@ -1 +1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"));else if("function"==typeof define&&define.amd)define(["vue"],t);else{var r="object"==typeof exports?t(require("vue")):t(e.vue);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(self,(e=>(()=>{"use strict";var t={7923:(e,t,r)=>{r.d(t,{Z:()=>c});var n=r(748);function a(e,t,r){return(0,n.h)(e.name,Object.assign(Object.assign({key:t},e.attributes),{style:"".concat(e.attributes.style," ").concat(r)}),(e.elements||[]).map((function(r,n){return a(r,"".concat(t,"-").concat(e.name,"-").concat(n))})))}Object.create,Object.create;var o=function(e,t){var r=Object.assign(Object.assign({},t.attrs),e),o=r.data,c=r.name,i=r.width,s=r.height,l=r.fill,p=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r}(r,["data","name","width","height","fill"]),u="width: ".concat(i,"; height: ").concat(s,"; fill: ").concat(l);return(0,n.createVNode)("span",p,[a(o,c,u)])};o.inheritAttrs=!1,o.displayName="bkIcon";const c=o},748:t=>{t.exports=e}},r={};function n(e){var a=r[e];if(void 0!==a)return a.exports;var o=r[e]={exports:{}};return t[e](o,o.exports,n),o.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{n.r(a),n.d(a,{default:()=>c});var e=n(748),t=n(7923),r=JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M603.52 348.8c0 26.496-22.357333333333333 48-49.919999999999995 48s-49.919999999999995-21.503999999999998-49.919999999999995-48c0-26.496 22.357333333333333-48 49.919999999999995-48s49.919999999999995 21.503999999999998 49.919999999999995 48z"}},{"type":"element","name":"path","attributes":{"d":"M357.11999999999995 348.8c0 26.496-22.357333333333333 48-49.919999999999995 48s-49.919999999999995-21.503999999999998-49.919999999999995-48c0-26.496 22.357333333333333-48 49.919999999999995-48s49.919999999999995 21.503999999999998 49.919999999999995 48z"}},{"type":"element","name":"path","attributes":{"d":"M693.12 604.16c0 15.914666666666665-13.184 28.8-29.439999999999998 28.8s-29.439999999999998-12.885333333333332-29.439999999999998-28.8c0-15.914666666666665 13.184-28.8 29.439999999999998-28.8s29.439999999999998 12.885333333333332 29.439999999999998 28.8z"}},{"type":"element","name":"path","attributes":{"d":"M951.68 832c43.775999999999996-42.410666666666664 71.29599999999999-101.41866666666665 72.32-166.86933333333332-4.608-109.696-77.35466666666666-201.0453333333333-176.72533333333334-233.30133333333333 5.674666666666667-12.117333333333331 10.154666666666666-26.282666666666664 10.154666666666666-41.471999999999994 0-4.522666666666666-0.38399999999999995-8.959999999999999-1.152-13.226666666666667-33.834666666666664-181.29066666666665-212.39466666666664-313.1306666666667-425.5146666666667-313.1306666666667-238.71999999999997 0-430.72 167.04-430.72 372.48 1.2799999999999998 107.56266666666666 50.56 203.30666666666664 127.40266666666668 267.05066666666664l-16.682666666666666 55.50933333333333c-2.1759999999999997 6.784-3.456 14.634666666666668-3.456 22.741333333333333 0 42.410666666666664 34.38933333333333 76.8 76.8 76.8 12.458666666666666 0 24.191999999999997-2.944 34.602666666666664-8.234666666666666l101.33333333333333-52.906666666666666c32.81066666666666 7.722666666666666 70.52799999999999 12.159999999999998 109.22666666666666 12.159999999999998 0.08533333333333333 0 0.17066666666666666 0 0.21333333333333332 0h28.16c13.098666666666666-0.7679999999999999 25.130666666666663-4.693333333333333 35.54133333333333-11.050666666666666 54.22933333333333 73.55733333333333 140.672 120.53333333333333 238.07999999999998 120.53333333333333 1.664 0 3.3706666666666667 0 5.034666666666666-0.042666666666666665 21.077333333333332-0.08533333333333333 41.855999999999995-2.1759999999999997 61.99466666666667-6.101333333333333l49.10933333333333 26.581333333333333c9.941333333333333 5.034666666666666 21.717333333333332 8.021333333333333 34.176 8.021333333333333 42.410666666666664 0 76.8-34.38933333333333 76.8-76.8 0-8.106666666666666-1.2799999999999998-15.957333333333333-3.584-23.296zM430.72 752.64c-0.17066666666666666 0-0.38399999999999995 0-0.5973333333333333 0-40.831999999999994 0-80.29866666666666-5.8453333333333335-117.58933333333331-16.72533333333333l-3.456 0.7253333333333334-131.2 67.19999999999999 35.199999999999996-113.27999999999999h-3.1999999999999997c-86.10133333333332-52.05333333333333-143.40266666666668-144.17066666666665-145.92-249.89866666666666 0-172.50133333333332 165.76-312.66133333333335 366.72-312.66133333333335 5.717333333333333-0.3413333333333333 12.415999999999999-0.512 19.157333333333334-0.512 163.32799999999997 0 300.58666666666664 111.40266666666668 340.0106666666667 262.4l-14.805333333333332 2.432c-183.04 0-327.03999999999996 112-327.03999999999996 285.44 0.512 26.709333333333333 5.1626666666666665 52.181333333333335 13.312 75.98933333333332zM872.96 812.8v0l21.759999999999998 67.84-81.28-40.959999999999994h-3.84c-21.119999999999997 6.101333333333333-45.397333333333336 9.6-70.48533333333333 9.6-0.17066666666666666 0-0.38399999999999995 0-0.5546666666666666 0-5.888 0.5973333333333333-12.757333333333332 0.9386666666666665-19.712 0.9386666666666665-107.09333333333332 0-195.2853333333333-80.93866666666666-206.71999999999997-184.95999999999998 10.367999999999999-106.96533333333333 99.072-189.1413333333333 206.976-189.1413333333333 5.973333333333334 0 11.861333333333334 0.256 17.706666666666663 0.7253333333333334 4.309333333333333-0.512 10.197333333333333-0.7253333333333334 16.170666666666666-0.7253333333333334 107.904 0 196.60799999999998 82.17599999999999 206.976 187.34933333333333-1.7066666666666666 63.82933333333333-35.79733333333333 118.44266666666665-86.18666666666667 148.90666666666667z"}},{"type":"element","name":"path","attributes":{"d":"M839.68 604.16c0 15.914666666666665-13.184 28.8-29.439999999999998 28.8s-29.439999999999998-12.885333333333332-29.439999999999998-28.8c0-15.914666666666665 13.184-28.8 29.439999999999998-28.8s29.439999999999998 12.885333333333332 29.439999999999998 28.8z"}}]}'),o=function(n,a){var o=Object.assign(Object.assign({},n),a.attrs);return(0,e.createVNode)(t.Z,(0,e.mergeProps)(o,{data:r,name:"weixin"}),null)};o.displayName="weixin",o.inheritAttrs=!1;const c=o})(),a})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"));else if("function"==typeof define&&define.amd)define(["vue"],t);else{var r="object"==typeof exports?t(require("vue")):t(e.vue);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(self,(e=>(()=>{"use strict";var t={9430:(e,t,r)=>{r.d(t,{Z:()=>c});var n=r(748);function a(e,t,r){return(0,n.h)(e.name,Object.assign(Object.assign({key:t},e.attributes),{style:"".concat(e.attributes.style," ").concat(r||"")}),(e.elements||[]).map((function(r,n){return a(r,"".concat(t,"-").concat(e.name,"-").concat(n))})))}Object.create,Object.create;var o=function(e,t){var r=Object.assign(Object.assign({},t.attrs),e),o=r.data,c=r.name,i=r.width,s=r.height,l=r.fill,p=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r}(r,["data","name","width","height","fill"]),u="width: ".concat(i,"; height: ").concat(s,"; fill: ").concat(l);return(0,n.createVNode)("span",p,[a(o,c,u)])};o.inheritAttrs=!1,o.displayName="bkIcon";const c=o},748:t=>{t.exports=e}},r={};function n(e){var a=r[e];if(void 0!==a)return a.exports;var o=r[e]={exports:{}};return t[e](o,o.exports,n),o.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{n.r(a),n.d(a,{default:()=>c});var e=n(748),t=n(9430),r=JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M603.52 348.8c0 26.496-22.357333333333333 48-49.919999999999995 48s-49.919999999999995-21.503999999999998-49.919999999999995-48c0-26.496 22.357333333333333-48 49.919999999999995-48s49.919999999999995 21.503999999999998 49.919999999999995 48z"}},{"type":"element","name":"path","attributes":{"d":"M357.11999999999995 348.8c0 26.496-22.357333333333333 48-49.919999999999995 48s-49.919999999999995-21.503999999999998-49.919999999999995-48c0-26.496 22.357333333333333-48 49.919999999999995-48s49.919999999999995 21.503999999999998 49.919999999999995 48z"}},{"type":"element","name":"path","attributes":{"d":"M693.12 604.16c0 15.914666666666665-13.184 28.8-29.439999999999998 28.8s-29.439999999999998-12.885333333333332-29.439999999999998-28.8c0-15.914666666666665 13.184-28.8 29.439999999999998-28.8s29.439999999999998 12.885333333333332 29.439999999999998 28.8z"}},{"type":"element","name":"path","attributes":{"d":"M951.68 832c43.775999999999996-42.410666666666664 71.29599999999999-101.41866666666665 72.32-166.86933333333332-4.608-109.696-77.35466666666666-201.0453333333333-176.72533333333334-233.30133333333333 5.674666666666667-12.117333333333331 10.154666666666666-26.282666666666664 10.154666666666666-41.471999999999994 0-4.522666666666666-0.38399999999999995-8.959999999999999-1.152-13.226666666666667-33.834666666666664-181.29066666666665-212.39466666666664-313.1306666666667-425.5146666666667-313.1306666666667-238.71999999999997 0-430.72 167.04-430.72 372.48 1.2799999999999998 107.56266666666666 50.56 203.30666666666664 127.40266666666668 267.05066666666664l-16.682666666666666 55.50933333333333c-2.1759999999999997 6.784-3.456 14.634666666666668-3.456 22.741333333333333 0 42.410666666666664 34.38933333333333 76.8 76.8 76.8 12.458666666666666 0 24.191999999999997-2.944 34.602666666666664-8.234666666666666l101.33333333333333-52.906666666666666c32.81066666666666 7.722666666666666 70.52799999999999 12.159999999999998 109.22666666666666 12.159999999999998 0.08533333333333333 0 0.17066666666666666 0 0.21333333333333332 0h28.16c13.098666666666666-0.7679999999999999 25.130666666666663-4.693333333333333 35.54133333333333-11.050666666666666 54.22933333333333 73.55733333333333 140.672 120.53333333333333 238.07999999999998 120.53333333333333 1.664 0 3.3706666666666667 0 5.034666666666666-0.042666666666666665 21.077333333333332-0.08533333333333333 41.855999999999995-2.1759999999999997 61.99466666666667-6.101333333333333l49.10933333333333 26.581333333333333c9.941333333333333 5.034666666666666 21.717333333333332 8.021333333333333 34.176 8.021333333333333 42.410666666666664 0 76.8-34.38933333333333 76.8-76.8 0-8.106666666666666-1.2799999999999998-15.957333333333333-3.584-23.296zM430.72 752.64c-0.17066666666666666 0-0.38399999999999995 0-0.5973333333333333 0-40.831999999999994 0-80.29866666666666-5.8453333333333335-117.58933333333331-16.72533333333333l-3.456 0.7253333333333334-131.2 67.19999999999999 35.199999999999996-113.27999999999999h-3.1999999999999997c-86.10133333333332-52.05333333333333-143.40266666666668-144.17066666666665-145.92-249.89866666666666 0-172.50133333333332 165.76-312.66133333333335 366.72-312.66133333333335 5.717333333333333-0.3413333333333333 12.415999999999999-0.512 19.157333333333334-0.512 163.32799999999997 0 300.58666666666664 111.40266666666668 340.0106666666667 262.4l-14.805333333333332 2.432c-183.04 0-327.03999999999996 112-327.03999999999996 285.44 0.512 26.709333333333333 5.1626666666666665 52.181333333333335 13.312 75.98933333333332zM872.96 812.8v0l21.759999999999998 67.84-81.28-40.959999999999994h-3.84c-21.119999999999997 6.101333333333333-45.397333333333336 9.6-70.48533333333333 9.6-0.17066666666666666 0-0.38399999999999995 0-0.5546666666666666 0-5.888 0.5973333333333333-12.757333333333332 0.9386666666666665-19.712 0.9386666666666665-107.09333333333332 0-195.2853333333333-80.93866666666666-206.71999999999997-184.95999999999998 10.367999999999999-106.96533333333333 99.072-189.1413333333333 206.976-189.1413333333333 5.973333333333334 0 11.861333333333334 0.256 17.706666666666663 0.7253333333333334 4.309333333333333-0.512 10.197333333333333-0.7253333333333334 16.170666666666666-0.7253333333333334 107.904 0 196.60799999999998 82.17599999999999 206.976 187.34933333333333-1.7066666666666666 63.82933333333333-35.79733333333333 118.44266666666665-86.18666666666667 148.90666666666667z"}},{"type":"element","name":"path","attributes":{"d":"M839.68 604.16c0 15.914666666666665-13.184 28.8-29.439999999999998 28.8s-29.439999999999998-12.885333333333332-29.439999999999998-28.8c0-15.914666666666665 13.184-28.8 29.439999999999998-28.8s29.439999999999998 12.885333333333332 29.439999999999998 28.8z"}}]}'),o=function(n,a){var o=Object.assign(Object.assign({},n),a.attrs);return(0,e.createVNode)(t.Z,(0,e.mergeProps)(o,{data:r,name:"weixin"}),null)};o.displayName="weixin",o.inheritAttrs=!1;const c=o})(),a})()));

package/lib/image/image-viewer.css

@@ -0,0 +1,142 @@
+.bk-image-viewer-wrapper {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  background: rgba(0, 0, 0, 0.6);
+  flex-direction: column;
+}
+.bk-image-viewer-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.bk-image-viewer-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  display: flex;
+  width: 100%;
+  height: 52px;
+  color: #c4c6cc;
+  background: rgba(0, 0, 0, 0.7);
+  justify-content: space-between;
+  align-items: center;
+}
+.bk-image-viewer-header > div {
+  padding: 0 25px;
+  overflow: hidden;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+.bk-image-viewer-header .quit-box {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.bk-image-viewer-header .quit-tips {
+  font-size: 14px;
+  color: #979ba5;
+}
+.bk-image-viewer-btn {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  color: #dcdee5;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  opacity: 0.8;
+  box-sizing: border-box;
+  user-select: none;
+  align-items: center;
+  justify-content: center;
+}
+.bk-image-viewer-btn:hover {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.bk-image-viewer-close {
+  height: 52px;
+  font-size: 32px;
+  line-height: 48px;
+  color: #c4c6cc;
+  text-align: center;
+  cursor: pointer;
+}
+.bk-image-viewer-close:hover {
+  color: #fff;
+}
+.bk-image-viewer-canvas {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+.bk-image-viewer-has-header {
+  padding-top: 52px;
+}
+.bk-image-viewer-error {
+  font-size: 14px;
+  color: #313238;
+  text-align: center;
+}
+.bk-image-viewer-error .bk-icon {
+  margin-bottom: 15px;
+  font-size: 85px;
+  line-height: 1;
+}
+.bk-image-viewer-actions {
+  bottom: 30px;
+  left: 50%;
+  width: 282px;
+  height: 44px;
+  padding: 0 23px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-color: #fff;
+  border-radius: 22px;
+  transform: translateX(-50%);
+}
+.bk-image-viewer-actions:hover {
+  background: rgba(0, 0, 0, 0.5);
+}
+.bk-image-viewer-actions-inner {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  font-size: 23px;
+  color: #c4c6cc;
+  text-align: justify;
+  align-items: center;
+  justify-content: space-around;
+}
+.bk-image-viewer-actions-inner .bk-icon {
+  cursor: pointer;
+}
+.bk-image-viewer-actions-inner .bk-icon:hover {
+  color: #fff;
+}
+.bk-image-viewer-next,
+.bk-image-viewer-prev {
+  top: 50%;
+  width: 80px;
+  height: 80px;
+  font-size: 40px;
+  cursor: pointer;
+}
+.bk-image-viewer-prev {
+  left: 40px;
+  transform: translateY(-50%);
+}
+.bk-image-viewer-next {
+  right: 40px;
+  text-indent: 2px;
+  transform: translateY(-50%);
+}

package/lib/image/image-viewer.d.ts

@@ -0,0 +1,73 @@
+export declare type ViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise';
+declare const _default: import("vue").DefineComponent<{
+    urlList: {
+        type: import("vue").PropType<string[]>;
+        default: () => any[];
+    };
+    zIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    initialIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    isShowTitle: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loops: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    maskClose: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close")[], "change" | "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    urlList: {
+        type: import("vue").PropType<string[]>;
+        default: () => any[];
+    };
+    zIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    initialIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    isShowTitle: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loops: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    maskClose: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    onClose?: (...args: any[]) => any;
+}, {
+    zIndex: number;
+    urlList: string[];
+    initialIndex: number;
+    isShowTitle: boolean;
+    loops: boolean;
+    maskClose: boolean;
+}>;
+export default _default;

package/lib/image/image-viewer.less

@@ -0,0 +1,168 @@
+.bk-image-viewer {
+  &-wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    background: rgba(0, 0, 0, .6);
+    flex-direction: column;
+  }
+
+  &-mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9;
+    display: flex;
+    width: 100%;
+    height: 52px;
+    color: #c4c6cc;
+    background: rgba(0, 0, 0, .70);
+    justify-content: space-between;
+    align-items: center;
+
+    > div {
+      padding: 0 25px;
+      overflow: hidden;
+      font-size: 14px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+    }
+
+    .quit-box {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    .quit-tips {
+      font-size: 14px;
+      color: #979ba5;
+    }
+  }
+
+  &-btn {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    color: #dcdee5;
+    background-color: rgba(0, 0, 0, .3);
+    border-radius: 50%;
+    opacity: .8;
+    box-sizing: border-box;
+    user-select: none;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      color: #fff;
+      background-color: rgba(0, 0, 0, .4);
+    }
+  }
+
+  &-close {
+    height: 52px;
+    font-size: 32px;
+    line-height: 48px;
+    color: #c4c6cc;
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  &-canvas {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center
+  }
+
+  &-has-header {
+    padding-top: 52px;
+  }
+
+  &-error {
+    font-size: 14px;
+    color: #313238;
+    text-align: center;
+
+    .bk-icon {
+      margin-bottom: 15px;
+      font-size: 85px;
+      line-height: 1;
+    }
+  }
+
+  &-actions {
+    bottom: 30px;
+    left: 50%;
+    width: 282px;
+    height: 44px;
+    padding: 0 23px;
+    background-color: rgba(0, 0, 0, .4);;
+    border-color: #fff;
+    border-radius: 22px;
+    transform: translateX(-50%);
+
+    &:hover {
+      background: rgba(0, 0, 0, .5);
+    }
+
+    &-inner {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      font-size: 23px;
+      color: #c4c6cc;
+      text-align: justify;
+      align-items: center;
+      justify-content: space-around;
+
+      .bk-icon {
+        cursor: pointer;
+
+        &:hover {
+          color: #fff;
+        }
+      }
+
+    }
+  }
+
+  &-next,
+  &-prev {
+    top: 50%;
+    width: 80px;
+    height: 80px;
+    font-size: 40px;
+    cursor: pointer;
+  }
+
+  &-prev {
+    left: 40px;
+    transform: translateY(-50%);
+    transform: translateY(-50%)
+  }
+
+  &-next {
+    right: 40px;
+    text-indent: 2px;
+    transform: translateY(-50%);
+    transform: translateY(-50%)
+  }
+}

package/lib/image/image-viewer.variable.css

@@ -0,0 +1,142 @@
+.bk-image-viewer-wrapper {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  background: rgba(0, 0, 0, 0.6);
+  flex-direction: column;
+}
+.bk-image-viewer-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.bk-image-viewer-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  display: flex;
+  width: 100%;
+  height: 52px;
+  color: #c4c6cc;
+  background: rgba(0, 0, 0, 0.7);
+  justify-content: space-between;
+  align-items: center;
+}
+.bk-image-viewer-header > div {
+  padding: 0 25px;
+  overflow: hidden;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+.bk-image-viewer-header .quit-box {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.bk-image-viewer-header .quit-tips {
+  font-size: 14px;
+  color: #979ba5;
+}
+.bk-image-viewer-btn {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  color: #dcdee5;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  opacity: 0.8;
+  box-sizing: border-box;
+  user-select: none;
+  align-items: center;
+  justify-content: center;
+}
+.bk-image-viewer-btn:hover {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.bk-image-viewer-close {
+  height: 52px;
+  font-size: 32px;
+  line-height: 48px;
+  color: #c4c6cc;
+  text-align: center;
+  cursor: pointer;
+}
+.bk-image-viewer-close:hover {
+  color: #fff;
+}
+.bk-image-viewer-canvas {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+.bk-image-viewer-has-header {
+  padding-top: 52px;
+}
+.bk-image-viewer-error {
+  font-size: 14px;
+  color: #313238;
+  text-align: center;
+}
+.bk-image-viewer-error .bk-icon {
+  margin-bottom: 15px;
+  font-size: 85px;
+  line-height: 1;
+}
+.bk-image-viewer-actions {
+  bottom: 30px;
+  left: 50%;
+  width: 282px;
+  height: 44px;
+  padding: 0 23px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-color: #fff;
+  border-radius: 22px;
+  transform: translateX(-50%);
+}
+.bk-image-viewer-actions:hover {
+  background: rgba(0, 0, 0, 0.5);
+}
+.bk-image-viewer-actions-inner {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  font-size: 23px;
+  color: #c4c6cc;
+  text-align: justify;
+  align-items: center;
+  justify-content: space-around;
+}
+.bk-image-viewer-actions-inner .bk-icon {
+  cursor: pointer;
+}
+.bk-image-viewer-actions-inner .bk-icon:hover {
+  color: #fff;
+}
+.bk-image-viewer-next,
+.bk-image-viewer-prev {
+  top: 50%;
+  width: 80px;
+  height: 80px;
+  font-size: 40px;
+  cursor: pointer;
+}
+.bk-image-viewer-prev {
+  left: 40px;
+  transform: translateY(-50%);
+}
+.bk-image-viewer-next {
+  right: 40px;
+  text-indent: 2px;
+  transform: translateY(-50%);
+}

package/lib/image/image.css

@@ -0,0 +1,37 @@
+.bk-image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+}
+.bk-image-inner {
+  width: 100%;
+  height: 100%;
+  vertical-align: top;
+}
+.bk-image-inner-center {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  display: block;
+  transform: translate(-50%, -50%);
+}
+.bk-image-placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  font-size: 24px;
+  color: #c4c6cc;
+  vertical-align: middle;
+  background: #f0f1f5;
+  justify-content: center;
+  align-items: center;
+}
+.bk-image-placeholder img {
+  width: 100%;
+}
+.bk-image-preview {
+  cursor: pointer;
+}

package/lib/image/image.d.ts

@@ -0,0 +1,93 @@
+import './image-viewer.less';
+declare const _default: import("vue").DefineComponent<{
+    src: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    fallback: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    placeholder: import("vue-types").VueTypeValidableDef<any>;
+    fit: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    lazy: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    urlList: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    isShowPreviewTitle: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    maskClose: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    zIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "error" | "loaded")[], "change" | "close" | "error" | "loaded", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    src: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    fallback: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    placeholder: import("vue-types").VueTypeValidableDef<any>;
+    fit: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    lazy: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    urlList: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    isShowPreviewTitle: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    maskClose: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    zIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    onError?: (...args: any[]) => any;
+    onClose?: (...args: any[]) => any;
+    onLoaded?: (...args: any[]) => any;
+}, {
+    zIndex: number;
+    fit: string;
+    urlList: unknown[];
+    maskClose: boolean;
+    src: string;
+    fallback: string;
+    lazy: boolean;
+    isShowPreviewTitle: boolean;
+}>;
+export default _default;