├── .gitignore
├── LICENSE
├── README.md
├── examples
    ├── input.html
    ├── menu.html
    ├── pagination.html
    └── tooltip.html
├── package.json
└── src
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | /demo
 5 | /lib
 6 | /es
 7 | .package-lock.json
 8 | 
 9 | # local env files
10 | .env.local
11 | .env.*.local
12 | 
13 | # Log files
14 | npm-debug.log*
15 | yarn-debug.log*
16 | yarn-error.log*
17 | 
18 | # Editor directories and files
19 | .idea
20 | .vscode
21 | *.suo
22 | *.ntvs*
23 | *.njsproj
24 | *.sln
25 | *.sw*
26 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 wangxueliang
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-dash-event
 2 | The library function, implemented in the DOM template, can use the custom event of the ant-design-vue component (camelCase)
 3 | 
 4 | [![NPM version](https://img.shields.io/npm/v/vue-dash-event.svg?style=flat)](https://npmjs.org/package/vue-dash-event) [![NPM downloads](http://img.shields.io/npm/dm/vue-dash-event.svg?style=flat)](https://npmjs.org/package/vue-dash-event)
 5 | [![](https://data.jsdelivr.com/v1/package/npm/vue-dash-event/badge)](https://www.jsdelivr.com/package/npm/vue-dash-event)
 6 | 
 7 | ## Usage
 8 | 
 9 | ```js
10 | <script src="https://cdn.jsdelivr.net/npm/vue-dash-event@1.0.1/dist/index.min.js"></script>
11 | <script>
12 | Vue.use(window['vue-dash-event'])
13 | </script>
14 | ```
15 | ## Why
16 | 
17 | ### If you not use DOM templates, You don't need this plugin.
18 | 
19 | Unlike components and props, event names don’t provide any automatic case transformation. Instead, the name of an emitted event must exactly match the name used to listen to that event. For example, if emitting a camelCased event name:
20 | 
21 | ```js
22 | this.$emit('myEvent')
23 | ```
24 | Listening to the kebab-cased version will have no effect:
25 | 
26 | ```html
27 | <my-component v-on:my-event="doSomething"></my-component>
28 | ```
29 | Unlike components and props, event names will never be used as variable or property names in JavaScript, so there’s no reason to use camelCase or PascalCase. Additionally, `v-on` event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML’s case-insensitivity), so `v-on:myEvent` would become `v-on:myevent` – making `myEvent` impossible to listen to.
30 | 
31 | But ant-design-vue use camelCase for event names. In order to properly monitor the internal camelCase events of the component.
32 | If you use DOM templates, you must use `<my-component v-on:my-event="doSomething"></my-component>` and `Vue.use(window['vue-dash-event'])`. Then component will monitor the internal camelCase events of the component.
33 | 


--------------------------------------------------------------------------------
/examples/input.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |   <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <title>input</title>
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.css" />
 9 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10 |     <script src="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.js"></script>
11 |     <script src="../dist/index.min.js"></script>
12 |   </head>
13 |   <body>
14 |     <div id='app'>
15 |       <a-input v-on:press-enter="pressEnter" placeholder="Basic usage"/>
16 |     </div>
17 |   </body>
18 |   <script>
19 |     window.onload = function (params) {
20 |       Vue.use(antd)
21 |       Vue.use(window['vue-dash-event'])
22 |       new Vue({
23 |         el: '#app',
24 |         methods: {
25 |           pressEnter(e) {
26 |             console.log(e, e.target.value)
27 |           },
28 |         }
29 |       })
30 |     }
31 |   </script>
32 |   </html>


--------------------------------------------------------------------------------
/examples/menu.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |   <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <title>menu</title>
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.css" />
 9 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10 |     <script src="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.js"></script>
11 |     <script src="../dist/index.min.js"></script>
12 |   </head>
13 |   <body>
14 |     <div id='app'>
15 |         <a-menu
16 |           v-model="current"
17 |           mode="horizontal"
18 |           v-on:open-change="openChange"
19 |         >
20 |           <a-menu-item key="mail">
21 |             <a-icon type="mail"></a-icon>
22 |             Navigation One
23 |           </a-menu-item>
24 |           <a-menu-item key="app" disabled>
25 |             <a-icon type="appstore"></a-icon>
26 |             Navigation Two
27 |           </a-menu-item>
28 |           <a-sub-menu>
29 |             <span slot="title" class="submenu-title-wrapper"><a-icon type="setting"></a-icon>Navigation Three - Submenu</span>
30 |             <a-menu-item-group title="Item 1">
31 |               <a-menu-item key="setting:1">Option 1</a-menu-item>
32 |               <a-menu-item key="setting:2">Option 2</a-menu-item>
33 |             </a-menu-item-group>
34 |             <a-menu-item-group title="Item 2">
35 |               <a-menu-item key="setting:3">Option 3</a-menu-item>
36 |               <a-menu-item key="setting:4">Option 4</a-menu-item>
37 |             </a-menu-item-group>
38 |           </a-sub-menu>
39 |           <a-menu-item key="alipay">
40 |             <a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
41 |           </a-menu-item>
42 |         </a-menu>
43 |     </div>
44 |   </body>
45 |   <script>
46 |     window.onload = function (params) {
47 |       Vue.use(antd)
48 |       Vue.use(window['vue-dash-event'])
49 |       new Vue({
50 |         el: '#app',
51 |         data () {
52 |           return {
53 |             current: ['mail'],
54 |           }
55 |         },
56 |         methods: {
57 |           openChange(val) {
58 |             console.dir('当前是否显示：' + val)
59 |           }
60 |         }
61 |       })
62 |     }
63 |   </script>
64 |   </html>


--------------------------------------------------------------------------------
/examples/pagination.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |   <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <title>pagination</title>
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.css" />
 9 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10 |     <script src="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.js"></script>
11 |     <script src="../dist/index.min.js"></script>
12 |   </head>
13 |   <body>
14 |     <div id='app'>
15 |       <a-pagination
16 |         :page-size-options="pageSizeOptions"
17 |         :total="total"
18 |         :show-size-changer="true"
19 |         :page-size="pageSize"
20 |         v-model="current"
21 |         v-on:show-size-change="onShowSizeChange"
22 |       >
23 |           <template slot='buildOptionText' slot-scope='props'>
24 |             <span v-if="props.value!=='50'">{{props.value}}条/页</span>
25 |             <span v-if="props.value==='50'">全部</span>
26 |           </template>
27 |         </a-pagination>
28 |     </div>
29 |   </body>
30 |   <script>
31 |     window.onload = function (params) {
32 |       Vue.use(antd)
33 |       Vue.use(window['vue-dash-event'])
34 |       new Vue({
35 |         el: '#app',
36 |         data() {
37 |           return {
38 |             pageSizeOptions: ['10', '20', '30', '40', '50'],
39 |             current: 1,
40 |             pageSize: 10,
41 |             total: 50,
42 |           }
43 |         },
44 |         methods: {
45 |           onShowSizeChange(current, pageSize) {
46 |             this.pageSize = pageSize
47 |             console.log(current, pageSize)
48 |           },
49 |         }
50 |       })
51 |     }
52 |   </script>
53 |   </html>


--------------------------------------------------------------------------------
/examples/tooltip.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |   <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <title>tooltip</title>
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.css" />
 9 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10 |     <script src="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.js"></script>
11 |     <script src="../dist/index.min.js"></script>
12 |   </head>
13 |   <body>
14 |     <div id='app'>
15 |       <a-tooltip v-on:visible-change="handleVisibleChange">
16 |         <template slot='title'>
17 |           prompt text
18 |         </template>
19 |         Tooltip will show when mouse enter.
20 |       </a-tooltip>
21 |     </div>
22 |   </body>
23 |   <script>
24 |     window.onload = function (params) {
25 |       Vue.use(antd)
26 |       Vue.use(window['vue-dash-event'])
27 |       new Vue({
28 |         el: '#app',
29 |         methods: {
30 |           handleVisibleChange(val) {
31 |             console.dir('当前是否显示：' + val)
32 |           }
33 |         }
34 |       })
35 |     }
36 |   </script>
37 |   </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-dash-event",
 3 |   "version": "1.0.1",
 4 |   "description": "The library function, implemented in the DOM template, can use the custom event of the ant-design-vue component (camelCase)",
 5 |   "main": "./lib/index.js",
 6 |   "module": "./es/index.js",
 7 |   "scripts": {
 8 |     "lint": "eslint --fix --ext .jsx,.js,.vue ./src",
 9 |     "compile": "vc-tools run compile --babel-runtime",
10 |     "build": "vc-tools run build",
11 |     "dist": "vc-tools run dist",
12 |     "prepublish": "npm run lint && npm run dist && npm run compile"
13 |   },
14 |   "files": [
15 |     "es",
16 |     "lib",
17 |     "dist"
18 |   ],
19 |   "keywords": [
20 |     "vue",
21 |     "camelCase",
22 |     "vue-dash-event"
23 |   ],
24 |   "repository": {
25 |     "type": "git",
26 |     "url": "git+https://github.com/vueComponent/vue-dash-event.git"
27 |   },
28 |   "bugs": {
29 |     "url": "https://github.com/vueComponent/vue-dash-event/issues"
30 |   },
31 |   "homepage": "https://github.com/vueComponent/vue-dash-event.git",
32 |   "author": "wangxueliang",
33 |   "license": "MIT",
34 |   "eslintConfig": {
35 |     "root": true,
36 |     "env": {
37 |       "node": true
38 |     },
39 |     "extends": [
40 |       "plugin:vue/essential",
41 |       "eslint:recommended"
42 |     ],
43 |     "rules": {},
44 |     "parserOptions": {
45 |       "parser": "babel-eslint"
46 |     }
47 |   },
48 |   "dependencies": {
49 |     "ant-design-vue": "^1.2.1",
50 |     "vc-tools": "^1.0.0"
51 |   },
52 |   "config": {
53 |     "entry": {
54 |         "index": [
55 |             "./src/index.js"
56 |         ]
57 |     }
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | const dashEvent = {}
 2 | const cache = Object.create(null)
 3 | const cacheLowerCaseEvent = Object.create(null)
 4 | 
 5 | /**
 6 |  * Create a cached version of a pure function.
 7 |  */
 8 | function cached(fn) {
 9 |   return (function cachedFn (str) {
10 |     const hit = cache[str]
11 |     return hit || (cache[str] = fn(str))
12 |   })
13 | }
14 | 
15 | /**
16 |  * Hyphenate a camelCase string.
17 |  */
18 | const hyphenateRE = /\B([A-Z])/g
19 | const hyphenate = cached((str) => {
20 |   return str.replace(hyphenateRE, '-$1').toLowerCase()
21 | })
22 | 
23 | dashEvent.install = function (Vue) {
24 |   const _emit = Vue.prototype.$emit
25 |   Vue.prototype.$emit = function () {
26 |     const arg = Array.prototype.slice.call(arguments)
27 |     const fnName = arg[0]
28 |     const params = arg.splice(1)
29 |     if(
30 |       !cacheLowerCaseEvent[fnName] && 
31 |       (cache[fnName] || hyphenateRE.test(fnName))
32 |     ) {
33 |       _emit.call(this, hyphenate(fnName), ...params)
34 |     } else {
35 |       cacheLowerCaseEvent[fnName] = fnName
36 |     }
37 |     _emit.call(this, fnName, ...params)
38 |   }
39 | }
40 | 
41 | export default dashEvent
42 | 


--------------------------------------------------------------------------------