Commit e82616aa81ccf06841dbd17c605aba4f68e2152d
1 parent
35f5872c
Exists in
master
and in
3 other branches
feat: 预览组件支持函数调用
Showing
3 changed files
with
34 additions
and
3 deletions
Show diff stats
packages/index.js
| 1 | +import Vue from 'vue'; | ||
| 2 | +import ElImageViewer from './upload/image-viewer'; | ||
| 3 | + | ||
| 1 | let components = {}; | 4 | let components = {}; |
| 2 | 5 | ||
| 3 | -const componentsFiles = require.context('./', true, /\.vue/); | 6 | +const componentsFiles = require.context('./', true, /index\.vue/); |
| 4 | componentsFiles.keys().forEach(path => { | 7 | componentsFiles.keys().forEach(path => { |
| 5 | const component = componentsFiles(path); | 8 | const component = componentsFiles(path); |
| 6 | components[component.default.name] = component.default; | 9 | components[component.default.name] = component.default; |
| @@ -33,8 +36,30 @@ const install = function(Vue, opts = {}) { | @@ -33,8 +36,30 @@ const install = function(Vue, opts = {}) { | ||
| 33 | // 将每个子组件注册为全局组件 | 36 | // 将每个子组件注册为全局组件 |
| 34 | Vue.component(name, component); | 37 | Vue.component(name, component); |
| 35 | }); | 38 | }); |
| 39 | + ElImageViewer.install = function(Vue) { | ||
| 40 | + Vue.component(ElImageViewer.name, ElImageViewer); | ||
| 41 | + }; | ||
| 42 | + Vue.component(ElImageViewer.name, ElImageViewer); | ||
| 36 | }; | 43 | }; |
| 37 | 44 | ||
| 45 | +const _ImageViewer = function({ index, src, list }) { | ||
| 46 | + const ImageViewer = Vue.extend(ElImageViewer); | ||
| 47 | + const instance = new ImageViewer({ el: document.createElement('div') }); | ||
| 48 | + Object.assign(instance, { | ||
| 49 | + index: src ? list.findIndex(url => url === src) : index, | ||
| 50 | + urlList: list, | ||
| 51 | + onClose() { | ||
| 52 | + instance.$el.className = `${instance.$el.className} viewer-fade-leave-active viewer-fade-leave-to`; | ||
| 53 | + setTimeout(function() { | ||
| 54 | + document.body.removeChild(instance.$el); | ||
| 55 | + }, 300); | ||
| 56 | + }, | ||
| 57 | + }); | ||
| 58 | + document.body.appendChild(instance.$el); | ||
| 59 | +}; | ||
| 60 | + | ||
| 61 | +export const ImageViewer = _ImageViewer; | ||
| 62 | + | ||
| 38 | export default { | 63 | export default { |
| 39 | install, | 64 | install, |
| 40 | ...components, | 65 | ...components, |
packages/upload/image-viewer.vue
| @@ -26,7 +26,7 @@ | @@ -26,7 +26,7 @@ | ||
| 26 | <i class="el-icon-refresh-left el-image-viewer__actions-btn" @click="handleActions('anticlocelise')"></i> | 26 | <i class="el-icon-refresh-left el-image-viewer__actions-btn" @click="handleActions('anticlocelise')"></i> |
| 27 | <i class="el-icon-refresh-right el-image-viewer__actions-btn" @click="handleActions('clocelise')"></i> | 27 | <i class="el-icon-refresh-right el-image-viewer__actions-btn" @click="handleActions('clocelise')"></i> |
| 28 | <!-- 自定义修改 --> | 28 | <!-- 自定义修改 --> |
| 29 | - <span class="el-radio__label">{{ index + 1 }} / {{ urlList.length }}</span> | 29 | + <span class="el-image-viewer__indicator">{{ index + 1 }} / {{ urlList.length }}</span> |
| 30 | </div> | 30 | </div> |
| 31 | </div> | 31 | </div> |
| 32 | <!-- CANVAS --> | 32 | <!-- CANVAS --> |
| @@ -67,7 +67,7 @@ const Mode = { | @@ -67,7 +67,7 @@ const Mode = { | ||
| 67 | const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'; | 67 | const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'; |
| 68 | 68 | ||
| 69 | export default { | 69 | export default { |
| 70 | - name: 'elImageViewer', | 70 | + name: 'ElImageViewer', |
| 71 | 71 | ||
| 72 | props: { | 72 | props: { |
| 73 | urlList: { | 73 | urlList: { |
| @@ -329,4 +329,9 @@ export default { | @@ -329,4 +329,9 @@ export default { | ||
| 329 | cursor: grabbing; | 329 | cursor: grabbing; |
| 330 | } | 330 | } |
| 331 | } | 331 | } |
| 332 | +.el-image-viewer__indicator { | ||
| 333 | + min-width: 60px; | ||
| 334 | + text-align: center; | ||
| 335 | + font-size: 14px; | ||
| 336 | +} | ||
| 332 | </style> | 337 | </style> |
packages/upload/index.vue
| @@ -6,6 +6,7 @@ | @@ -6,6 +6,7 @@ | ||
| 6 | </template> | 6 | </template> |
| 7 | 7 | ||
| 8 | <script> | 8 | <script> |
| 9 | +// import ElImageViewer from 'element-ui/packages/image/src/image-viewer'; | ||
| 9 | import ElImageViewer from './image-viewer'; | 10 | import ElImageViewer from './image-viewer'; |
| 10 | 11 | ||
| 11 | export default { | 12 | export default { |