GithubHelp home page GithubHelp logo

vuecomponent / vue-dash-event Goto Github PK

View Code? Open in Web Editor NEW
18.0 4.0 3.0 89 KB

The library function, implemented in the DOM template, can use the custom event of the ant-design-vue component (camelCase)

License: MIT License

JavaScript 100.00%

vue-dash-event's Introduction

vue-dash-event

The library function, implemented in the DOM template, can use the custom event of the ant-design-vue component (camelCase)

NPM version NPM downloads

Usage

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>
<script>
Vue.use(window['vue-dash-event'])
</script>

Why

If you not use DOM templates, You don't need this plugin.

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:

this.$emit('myEvent')

Listening to the kebab-cased version will have no effect:

<my-component v-on:my-event="doSomething"></my-component>

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.

But ant-design-vue use camelCase for event names. In order to properly monitor the internal camelCase events of the component. 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.

vue-dash-event's People

Contributors

tangjinzhou avatar wangxueliang avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar

Forkers

kekewind andrianbalanescu

vue-dash-event's Issues

Weekly Digest (19 January, 2020 - 26 January, 2020)

Here's the Weekly Digest for vueComponent/vue-dash-event:

ISSUES

Last week, no issues were created.

PULL REQUESTS

Last week, no pull requests were created, updated or merged.

COMMITS

Last week there were no commits.

CONTRIBUTORS

Last week there were no contributors.

STARGAZERS

Last week there was 1 stargazer.
⭐ jefrydco
You are the star! 🌟

RELEASES

Last week there were no releases.

That's all for last week, please 👀 Watch and ⭐ Star the repository vueComponent/vue-dash-event to receive next weekly updates. 😃

You can also view all Weekly Digests by clicking here.

Your Weekly Digest bot. 📆

浏览器引入antd后，range-picker中的panelChange无法使用。

Version
1.3.5

Environment
win10 ,vue 2.6.7

Reproduction link
https://vue.ant.design/components/date-picker-cn/#API

Steps to reproduce
在浏览器引入vue-dash-event.min.js后，openChanage 只能生效一次，panelChange方法不不生效，并且面板上的输入日期不变，请问什么原因？

What is expected?
openChanage ，panelChange 在浏览器引入中使用生效。

What is actually happening?
openChanage 只能生效一次，panelChange方法不不生效，并且面板上的输入日期不变。

image
image
image

Weekly Digest (10 January, 2020 - 17 January, 2020)

Here's the Weekly Digest for vueComponent/vue-dash-event:

ISSUES

Last week, no issues were created.

PULL REQUESTS

Last week, 1 pull request was created, updated or merged.

UPDATED PULL REQUEST

Last week, 1 pull request was updated.
💛 #3 Configure Renovate, by renovate[bot]

COMMITS

Last week there were no commits.

CONTRIBUTORS

Last week there were no contributors.

STARGAZERS

Last week there were no stargazers.

RELEASES

Last week there were no releases.

That's all for last week, please 👀 Watch and ⭐ Star the repository vueComponent/vue-dash-event to receive next weekly updates. 😃

You can also view all Weekly Digests by clicking here.

Your Weekly Digest bot. 📆

关于在html中引入antd.js

楼主，晚上好。想要请教你一下，下面两段代码，为啥一个可以正常渲染，一个无法正常渲染，他们差别就在是否用<div></div>，像请教一下您是否知道其中原因。第二种写法就因为没有div包裹，就只能渲染一个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/antd.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="../js/moment.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/antd.js"></script>


</head>
<body>
<div id="app">
    <div>
        <a-date-picker @change="onChange" placeholder="Select date"/>
    </div>
    <div>
        <a-range-picker @change="onChange"/>
    </div>
    <div>
        <a-month-picker @change="onChange" placeholder="Select month"/>
    </div>
    <div>
        <a-week-picker @change="onChange" placeholder="Select week"/>
    </div>
</div>

<script type="text/javascript">
    Vue.use(antd);
    new Vue({
        el: '#app',
        data(){
            return {index: 1};
        },
        methods: {
            onChange(date, dateString) {
                console.log(date, dateString);
            }
        }
    });
</script>
</body>
</html>

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/antd.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="../js/moment.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/antd.js"></script>


</head>
<body>
<div id="app">

    <a-date-picker @change="onChange" placeholder="Select date"/>

    <a-range-picker @change="onChange"/>

    <a-month-picker @change="onChange" placeholder="Select month"/>

    <a-week-picker @change="onChange" placeholder="Select week"/>

</div>

<script type="text/javascript">
    Vue.use(antd);
    new Vue({
        el: '#app',
        data(){
            return {index: 1};
        },
        methods: {
            onChange(date, dateString) {
                console.log(date, dateString);
            }
        }
    });
</script>
</body>
</html>

image

Weekly Digest (12 January, 2020 - 19 January, 2020)

Here's the Weekly Digest for vueComponent/vue-dash-event:

ISSUES

Last week, no issues were created.

PULL REQUESTS

Last week, no pull requests were created, updated or merged.

COMMITS

Last week there were no commits.

CONTRIBUTORS

Last week there were no contributors.

STARGAZERS

Last week there were no stargazers.

RELEASES

Last week there were no releases.

That's all for last week, please 👀 Watch and ⭐ Star the repository vueComponent/vue-dash-event to receive next weekly updates. 😃

You can also view all Weekly Digests by clicking here.

Your Weekly Digest bot. 📆

Weekly Digest (26 January, 2020 - 2 February, 2020)

Here's the Weekly Digest for vueComponent/vue-dash-event:

ISSUES

Last week, no issues were created.

PULL REQUESTS

Last week, no pull requests were created, updated or merged.

COMMITS

Last week there were no commits.

CONTRIBUTORS

Last week there were no contributors.

STARGAZERS

Last week there were no stargazers.

RELEASES

Last week there were no releases.

That's all for last week, please 👀 Watch and ⭐ Star the repository vueComponent/vue-dash-event to receive next weekly updates. 😃

You can also view all Weekly Digests by clicking here.

Your Weekly Digest bot. 📆

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.