https://github.com/valesdev/vue-brush

Gracefully load images, integrated with Vue.js.
https://github.com/valesdev/vue-brush

vue

Last synced: 8 months ago
JSON representation

Gracefully load images, integrated with Vue.js.

• Host: GitHub
• URL: https://github.com/valesdev/vue-brush
• Owner: valesdev
• License: mit
• Created: 2019-04-14T06:12:14.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-04-18T09:02:12.000Z (about 3 years ago)
• Last Synced: 2024-08-11T00:47:53.103Z (almost 2 years ago)
• Topics: vue
• Language: Vue
• Homepage:
• Size: 8.79 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# vue-brush

[![Version](https://img.shields.io/npm/v/vue-brush.svg)](https://www.npmjs.com/package/vue-brush)

[![Downloads](https://img.shields.io/npm/dm/vue-brush.svg)](https://npmcharts.com/compare/vue-brush?minimal=true)

[![Issues](https://img.shields.io/github/issues/valesdev/vue-brush.svg)](https://github.com/valesdev/vue-brush/issues)

[![License](https://img.shields.io/npm/l/vue-brush.svg)](https://www.npmjs.com/package/vue-brush)

Gracefully load images, integrated with Vue.js.

[Live demo](https://open.vales.io/vue-brush/demo.html)

## Features

- Only 5.3KB minified while 2.3KB gzipped

- Integrated with Vue.js as a plugin

- Loading indicator and error indicator

- Able to specified aspect ratio of container

- Able to crop image overflowed

- Able to customize indicator styles

## Usage

Register the plugin first.

```js

import Vue from 'vue'

import vueBrush from 'vue-brush'

Vue.use(vueBrush)

new Vue()

```

Then, use it anywhere.

```vue

  


    

    

  


```

## Options

### ``

| Property | Type | Required | Description | Default |

| --- | --- | --- | --- | --- |

| `source` | String | N | The URL of image. | `null` |

| `ratio` | Number | N | The ratio of image width to height. | `1` |

| `cropped` | Boolean | N | Whether to crop image overflowed. | `false` |

## License

[MIT](http://opensource.org/licenses/MIT)