vuejs 组件_使用VueJs构建的图像浏览器组件

vuejs 组件

Vue图片浏览器 (vue-image-browser)

A VueJS Image Browser Component with options to upload, browse, delete and select images.

VueJS图像浏览器组件，具有用于上载，浏览，删除和选择图像的选项。

用法 (Usage)

npm install @akashmitra/vue-image-browser

To use this inside another Vue component, you must import this as a component.

要在另一个Vue组件中使用此组件，必须import其作为组件import 。

<template>
    <VueImageBrowser
        source="api/images"
        selectable
        deletable
        @selected="onSelect"></VueImageBrowser>

</template>
<script>
import VueImageBrowser from '@akashmitra/vue-image-browser'

export default {
    components: {
        VueImageBrowser,
    },
    methods: {
        onSelect() {

        }
    }
}
</script>

图像对象 (Image Object)

The browser assumes that the source URL returns an array of image objects of following format.

浏览器假定source URL返回以下格式的image对象数组。

{
    data: [
        {
            id: 1,
            name: 'image-name.jpg',
            type: 'jpeg',
            size: 10,
            url: 'www.example.com/image-name.jpg',
            storage: 'public',
            user_id: 1,
            created_ago: '2 days ago'
        },
        {...},
        {...}
    ]
}

选件 (Options)

source - Specify the URL that returns an array of the image objects
selectable - If this is true, you can select an image from the browser and a selected event will be generated and the corresponding image object will be passed to the event handler.
deletable - If this is true, the browser will show a Delete button. Clicking the Delete button will generate a deleted event and the corresponding image object will be passed to the event handler.
lazyload - When this is true, only the images that are within the viewport will be actually downloaded. By default it is true.

source -指定返回image对象数组的URL
selectable如果为true，则可以从浏览器中选择一个图像，然后将生成一个selected事件，并将相应的image对象传递给事件处理程序。
deletable -如果为true，浏览器将显示“删除”按钮。 单击删除按钮将生成一个deleted事件，并将相应的image对象传递给事件处理程序。
lazyload如果为true，则仅实际下载视口内的图像。 默认情况下为true。

翻译自: https://vuejsexamples.com/an-image-browser-component-built-with-vuejs/

vuejs 组件