├── .babelrc ├── .editorconfig ├── .gitignore ├── README.md ├── dist ├── loading.gif ├── vue-upload-multiple-image.js └── vue-upload-multiple-image.js.map ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.vue ├── assets │ ├── demo.png │ └── logo.png ├── components │ └── VueUploadMultipleImage.vue └── main.js ├── webpack.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-3" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | 6 | # Editor directories and files 7 | .idea 8 | *.suo 9 | *.ntvs* 10 | *.njsproj 11 | *.sln 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # vue-upload-multiple-image 4 | A simple upload multiple image component for Vuejs 5 | [NPM Package](https://www.npmjs.com/package/vue-upload-multiple-image) 6 | 7 | [Demo!](https://codepen.io/lekhang2512/pen/qJmQaZ) 8 | 9 | ![enter image description here](https://raw.githubusercontent.com/lekhang2512/vue-upload-multiple-image/master/src/assets/demo.png) 10 | 11 | ## Development (NPM / Yarn) 12 | ``` 13 | npm run dev 14 | yarn dev 15 | ``` 16 | 17 | ## Install 18 | 19 | #### NPM / Yarn 20 | 21 | Install the package: 22 | 23 | ``` 24 | npm install vue-upload-multiple-image 25 | yarn add vue-upload-multiple-image 26 | ``` 27 | 28 | Then import it in your project 29 | 30 | main.js 31 | ```javascript 32 | import VueLazyload from 'vue-lazyload' 33 | 34 | Vue.use(VueLazyload) 35 | ``` 36 | 37 | ```javascript 38 | import VueUploadMultipleImage from 'vue-upload-multiple-image' 39 | 40 | export default { 41 | components: { 42 | VueUploadMultipleImage, 43 | }, 44 | } 45 | ``` 46 | 47 | #### Browser global 48 | 49 | ```html 50 | 51 | 52 | ``` 53 | 54 | ## Usage 55 | 56 | You can simply view [App.vue](https://github.com/lekhang2512/vue-image-lightbox-carousel/blob/master/src/App.vue) to see how to use **vue-upload-multiple-image** 57 | 58 | How to use: 59 | ```html 60 | 66 | ``` 67 | `images` has the structure: 68 | ```javascript 69 | [ 70 | { 71 | path: 'http://example.com/image.jpg', 72 | default: 1, 73 | highlight: 1, 74 | caption: 'caption to display. receive', // Optional 75 | } 76 | ] 77 | ``` 78 | ## Example 79 | ```html 80 | 92 | 93 | 128 | 129 | 157 | 158 | ``` 159 | ## Options 160 | 161 | ### Props 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 |
nametypedefaultdescription
idUploadStringimage-uploadId of input upload
idEditStringimage-editId of input edit
dragTextStringKéo hình ảnh(nhiều)Drag Text
browseTextString(hoặc) ChọnBrowse Text
primaryTextStringMặc địnhPrimary Text
markIsPrimaryTextStringĐặt làm mặc địnhSet default image
popupTextStringHình ảnh này sẽ được hiển thị làm mặc địnhDescription default image
dropTextStringThả tệp của bạn ở đây ...Drag and drop
acceptStringimage/gif,image/jpeg,image/png,image/bmp,image/jpgAccept
dataImagesArray[]Array images
multipleBooleantrueSet upload multiple image
showPrimaryBooleantrueShow text default image
maxImageNumber5Maximum upload image
showEditBooleantrueShow action edit
showDeleteBooleantrueShow action delete
showAddBooleantrueShow action add
disabledBooleanfalseDisable upload image
276 | 277 | ### Events 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 |
nameargumentsdescription
upload-success(formData, index, fileList)Upload image succcess
edit-image(formData, index, fileList)Edit image succcess
before-remove(index, done, fileList)Before delete image
mark-is-primary(index, fileList)Set default image
limit-exceededamountLimit exceeded images when drop
314 | 315 | ## Dependencies 316 | - [lodash](https://github.com/lodash/lodash/) 317 | - [vue-image-lightbox-carousel](https://github.com/lekhang2512/vue-image-lightbox-carousel) 318 | - [vue-popperjs](https://github.com/RobinCK/vue-popper#readme) 319 | -------------------------------------------------------------------------------- /dist/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lekhang2512/vue-upload-multiple-image/3afc9fbe60ce37118f69cf68828adb83be1ffa49/dist/loading.gif -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-upload-multiple-image 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-upload-multiple-image", 3 | "description": "A Vue.js project", 4 | "version": "1.1.6", 5 | "author": "Lee Khang ", 6 | "license": "MIT", 7 | "main": "src/main.js", 8 | "scripts": { 9 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 10 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 11 | }, 12 | "dependencies": { 13 | "axios": "^0.18.0", 14 | "lodash": "^4.17.11", 15 | "vue": "^2.5.11", 16 | "vue-image-lightbox-carousel": "^1.0.7", 17 | "vue-popperjs": "^1.5.3" 18 | }, 19 | "browserslist": [ 20 | "> 1%", 21 | "last 2 versions", 22 | "not ie <= 8" 23 | ], 24 | "devDependencies": { 25 | "babel-core": "^6.26.0", 26 | "babel-loader": "^7.1.2", 27 | "babel-preset-env": "^1.6.0", 28 | "babel-preset-stage-3": "^6.24.1", 29 | "cross-env": "^5.0.5", 30 | "css-loader": "^0.28.7", 31 | "file-loader": "^1.1.4", 32 | "vue-loader": "^13.0.5", 33 | "vue-template-compiler": "^2.4.4", 34 | "webpack": "^3.6.0", 35 | "webpack-dev-server": "^2.9.1" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 53 | -------------------------------------------------------------------------------- /src/assets/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lekhang2512/vue-upload-multiple-image/3afc9fbe60ce37118f69cf68828adb83be1ffa49/src/assets/demo.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lekhang2512/vue-upload-multiple-image/3afc9fbe60ce37118f69cf68828adb83be1ffa49/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/VueUploadMultipleImage.vue: -------------------------------------------------------------------------------- 1 | 278 | 279 | 565 | 566 | 817 | 822 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import VueUploadMultipleImage from './components/VueUploadMultipleImage' 4 | 5 | if (document.querySelector('#my-strictly-unique-vue-upload-multiple-image')) { 6 | Vue.component('VueUploadMultipleImage', VueUploadMultipleImage) 7 | 8 | new Vue({ 9 | el: '#my-strictly-unique-vue-upload-multiple-image', 10 | render: h => h(App) 11 | }) 12 | } 13 | 14 | export default VueUploadMultipleImage 15 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'vue-upload-multiple-image.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.css$/, 15 | use: [ 16 | 'vue-style-loader', 17 | 'css-loader' 18 | ], 19 | }, { 20 | test: /\.vue$/, 21 | loader: 'vue-loader', 22 | options: { 23 | loaders: { 24 | } 25 | // other vue-loader options go here 26 | } 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader', 31 | exclude: /node_modules/ 32 | }, 33 | { 34 | test: /\.(png|jpg|gif|svg)$/, 35 | loader: 'file-loader', 36 | options: { 37 | name: '[name].[ext]?[hash]' 38 | } 39 | } 40 | ] 41 | }, 42 | resolve: { 43 | alias: { 44 | 'vue$': 'vue/dist/vue.esm.js' 45 | }, 46 | extensions: ['*', '.js', '.vue', '.json'] 47 | }, 48 | devServer: { 49 | historyApiFallback: true, 50 | noInfo: true, 51 | overlay: true 52 | }, 53 | performance: { 54 | hints: false 55 | }, 56 | devtool: '#eval-source-map' 57 | } 58 | 59 | if (process.env.NODE_ENV === 'production') { 60 | module.exports.devtool = '#source-map' 61 | // http://vue-loader.vuejs.org/en/workflow/production.html 62 | module.exports.plugins = (module.exports.plugins || []).concat([ 63 | new webpack.DefinePlugin({ 64 | 'process.env': { 65 | NODE_ENV: '"production"' 66 | } 67 | }), 68 | new webpack.optimize.UglifyJsPlugin({ 69 | sourceMap: true, 70 | compress: { 71 | warnings: false 72 | } 73 | }), 74 | new webpack.LoaderOptionsPlugin({ 75 | minimize: true 76 | }) 77 | ]) 78 | } 79 | --------------------------------------------------------------------------------