Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

图片添加事件没触发?? #173

Closed
salamander-mh opened this issue Jan 22, 2018 · 4 comments

Comments

Projects
None yet
3 participants
@salamander-mh
Copy link

commented Jan 22, 2018

 Event "imgadd" is emitted in component <MavonEditor>

说是要小写??

but the handler is registered for "imgAdd". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when
@CHENXCHEN

This comment has been minimized.

Copy link
Collaborator

commented Jan 22, 2018

有没有 demo

@CHENXCHEN CHENXCHEN added the question label Jan 22, 2018

@salamander-mh

This comment has been minimized.

Copy link
Author

commented Jan 23, 2018

诺,demo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>添加图片</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/mavon-editor@2.4.14/dist/css/index.css" />
</head>
<body>
	<div id="main">
	    <mavon-editor v-model="value" @imgAdd="$imgAdd"/>
	</div>
    


    <script src="https://unpkg.com/vue@2.5.10/dist/vue.js"></script>
    <script src="https://unpkg.com/mavon-editor@2.4.16/dist/mavon-editor.js"></script>

    <script type="text/javascript">
    	Vue.use(window['mavon-editor']);

    	new Vue({
    		'el': '#main',
    		data() {
    		    return { value: '' }
    		},
    		methods: {
    			// 绑定@imgAdd event
    			$imgAdd(pos, $file) {
    				console.log('upload image');
    			}
    		}
   		})
    </script>
</body>
</html>
@salamander-mh

This comment has been minimized.

Copy link
Author

commented Jan 23, 2018

难道这个没做过测试?

@CHENXCHEN

This comment has been minimized.

Copy link
Collaborator

commented Jan 23, 2018

所有功能都在单文件组件中测试是正常的。
没有明确在 dom 中测试过,出现这个问题的原因在于 dom 中的属性是不区分大小写的,
所以如果属性中的键名包含大小写则需要写成横杆形式,参考 vue.js文档 camelCase-vs-kebab-case
@imgAdd="$imgAdd" 需要写成 @img-add="$imgAdd",但是这样警告去除了,但是还是没有解决,
最终测试之下 通过 template 可以解决。
这个问题可以通过如下代码解决:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>添加图片</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/mavon-editor/dist/css/index.css" />
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/mavon-editor/dist/mavon-editor.js"></script>
</head>
<body>
    <div id="main">
    </div>
    <script type="text/x-template" id="tpl">
	<mavon-editor v-model="value" v-on:imgAdd="$imgAdd"/>
    </script>
    <script type="text/javascript">
    	Vue.use(window['mavon-editor']);

    	var app = new Vue({
    		'el': '#main',
    		data() {
    		    return { value: '' }
    		},
		template: '#tpl',
    		methods: {
    			// 绑定@imgAdd event
    		        $imgAdd(pos, $file) {
    				console.log('upload image');
    			},
    		}
   	})
    </script>
</body>
</html>

@hinesboy hinesboy closed this May 22, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.