vue-select2

├── static └── .gitkeep ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── src ├── assets │ └── logo.png ├── App.vue ├── main.js └── components │ └── HelloWorld.vue ├── .editorconfig ├── .gitignore ├── .babelrc ├── .postcssrc.js ├── index.html ├── LICENSE ├── package.json └── README.md /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godbasin/vue-select2/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /.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 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | 16 | package-lock.json -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-select2 7 | 8 | 9 |

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | 6 | Vue.config.productionTip = false 7 | 8 | // import Select2Component 9 | import Select2 from 'v-select2-component'; 10 | 11 | Vue.component('Select2', Select2); 12 | 13 | /* eslint-disable no-new */ 14 | new Vue({ 15 | el: '#app', 16 | components: { App }, 17 | template: '' 18 | }) 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 godbasin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-select2", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "wangbeishan ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "bootstrap": "^3.3.7", 14 | "v-select2-component": "^0.4.7", 15 | "vue": "^2.5.2" 16 | }, 17 | "devDependencies": { 18 | "autoprefixer": "^7.1.2", 19 | "babel-core": "^6.22.1", 20 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 21 | "babel-loader": "^7.1.1", 22 | "babel-plugin-syntax-jsx": "^6.18.0", 23 | "babel-plugin-transform-runtime": "^6.22.0", 24 | "babel-plugin-transform-vue-jsx": "^3.5.0", 25 | "babel-preset-env": "^1.3.2", 26 | "babel-preset-stage-2": "^6.22.0", 27 | "chalk": "^2.0.1", 28 | "copy-webpack-plugin": "^4.0.1", 29 | "css-loader": "^0.28.0", 30 | "extract-text-webpack-plugin": "^3.0.0", 31 | "file-loader": "^1.1.4", 32 | "friendly-errors-webpack-plugin": "^1.6.1", 33 | "html-webpack-plugin": "^2.30.1", 34 | "node-notifier": "^5.1.2", 35 | "optimize-css-assets-webpack-plugin": "^3.2.0", 36 | "ora": "^1.2.0", 37 | "portfinder": "^1.0.13", 38 | "postcss-import": "^11.0.0", 39 | "postcss-loader": "^2.0.8", 40 | "postcss-url": "^7.2.1", 41 | "rimraf": "^2.6.0", 42 | "semver": "^5.3.0", 43 | "shelljs": "^0.7.6", 44 | "uglifyjs-webpack-plugin": "^1.1.1", 45 | "url-loader": "^0.5.8", 46 | "vue-loader": "^13.3.0", 47 | "vue-style-loader": "^3.0.1", 48 | "vue-template-compiler": "^2.5.2", 49 | "webpack": "^3.6.0", 50 | "webpack-bundle-analyzer": "^2.9.0", 51 | "webpack-dev-server": "^2.9.1", 52 | "webpack-merge": "^4.1.0" 53 | }, 54 | "engines": { 55 | "node": ">= 6.0.0", 56 | "npm": ">= 3.0.0" 57 | }, 58 | "browserslist": [ 59 | "> 1%", 60 | "last 2 versions", 61 | "not ie <= 8" 62 | ] 63 | } 64 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | 24 | /** 25 | * Source Maps 26 | */ 27 | 28 | // https://webpack.js.org/configuration/devtool/#development 29 | devtool: 'cheap-module-eval-source-map', 30 | 31 | // If you have problems debugging vue-files in devtools, 32 | // set this to false - it *may* help 33 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 34 | cacheBusting: true, 35 | 36 | cssSourceMap: true 37 | }, 38 | 39 | build: { 40 | // Template for index.html 41 | index: path.resolve(__dirname, '../dist/index.html'), 42 | 43 | // Paths 44 | assetsRoot: path.resolve(__dirname, '../dist'), 45 | assetsSubDirectory: 'static', 46 | assetsPublicPath: '/', 47 | 48 | /** 49 | * Source Maps 50 | */ 51 | 52 | productionSourceMap: true, 53 | // https://webpack.js.org/configuration/devtool/#production 54 | devtool: '#source-map', 55 | 56 | // Gzip off by default as many popular static hosts such as 57 | // Surge or Netlify already gzip all static assets for you. 58 | // Before setting to `true`, make sure to: 59 | // npm install --save-dev compression-webpack-plugin 60 | productionGzip: false, 61 | productionGzipExtensions: ['js', 'css'], 62 | 63 | // Run the build command with an extra argument to 64 | // View the bundle analyzer report after build finishes: 65 | // `npm run build --report` 66 | // Set to `true` or `false` to always turn it on or off 67 | bundleAnalyzerReport: process.env.npm_config_report 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [archived]Vue Select2 Component 2 | 3 | **This project is archived and no longer maintained.** 4 | 5 | This project was generated with [Vue cli](https://github.com/vuejs/vue-cli) version 2.9.1. 6 | 7 | ## Instructions 8 | This project is built for showing how to use v-select2-component. 9 | 10 | **If you want to use it in Vue 3.0, check [vue3-select2-component](https://github.com/godbasin/vue-select2/tree/npm-publish-code-for-vue3).** 11 | 12 | # v-select2-component 13 | 14 | Source code in: [https://github.com/godbasin/vue-select2/tree/npm-publish-code](https://github.com/godbasin/vue-select2/tree/npm-publish-code). 15 | 16 | ## Related Versions 17 | 18 | Vue-Select2-Component is baseed on these plugins and libs(version): 19 | - [vue(>= 2.0-release)](https://github.com/vuejs/vue) 20 | - [jQuery](https://jquery.com/) 21 | - [select2](https://select2.github.io/) 22 | 23 | ## How to use 24 | --- 25 | ### Install 26 | ``` cmd 27 | // npm install 28 | npm install v-select2-component --save 29 | ``` 30 | 31 | ### Use as component 32 | 1. import as global component. 33 | ``` javascript 34 | // import Select2Component 35 | import Select2 from 'v-select2-component'; 36 | 37 | Vue.component('Select2', Select2); 38 | new Vue({ 39 | // ... 40 | }) 41 | ``` 42 | 43 | 2. import into a single component. 44 | ``` javascript 45 | // import Select2Component 46 | import Select2 from 'v-select2-component'; 47 | 48 | 54 | 74 | ``` 75 | 76 | ### Options 77 | - `options`: `option[]` 78 | - select options for select2 79 | - `option`: `{id: key, text: value}` or `string` 80 | - `v-model`: option value that is selected 81 | - `id` or `string` while multiple is disable 82 | - `id[]` or `string[]` while multiple is enable 83 | - `disabled` 84 | - if select is disabled 85 | - `settings` 86 | - configurable settings, see [Select2 options API](https://select2.org/configuration/options-api) 87 | - `setting`: `{ settingOption: value, settingOption: value }` 88 | 89 | ### Events 90 | - `change` 91 | - triggered when option selected change 92 | - return value 93 | - parmas: same with `v-model` 94 | - `select` 95 | - triggered when option selected 96 | - parmas: `option`(`{id: value, text: key, selected: ifSelected}` or `string`) 97 | - `open` 98 | - triggered whenever the dropdown is opened 99 | - `close` 100 | - triggered whenever the dropdown is closed 101 | - `clear` 102 | - triggered whenever the dropdown is cleared 103 | - more events refer to [select2 events](https://select2.org/programmatic-control/events) 104 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 108 | 111 | --------------------------------------------------------------------------------

Value: {{ myValue }}

v-select2-component Exemple[Github]