[vue-cordova] cordova-plugin-phone-call (커스터마이징)

CallPhone.vue

<template>
	<div>
		<button @click="dial1">다이얼1</button>
		<button @click="dial2">다이얼2</button>
		<button @click="call3">콜1</button>

		<div class="dump" v-if="cordova">
			<div>cordova.deviceready : {{ cordova.deviceready }}</div>
			<div>cordova : {{ cordova }}</div>
			<div>error : {{ error }}</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	export default {
		data() {
			return {
				cordova: Vue.cordova,
				error: '',
			};
		},
		methods: {
			dial1() {
				window.cordova.plugins.phonedialer.dial(
					'tel:01000000000',
					function (success) {
						alert('Dialing succeeded' + success);
					},
					function (err) {
						if (err == 'empty') alert('Unknown phone number');
						else alert('Dialer Error:' + err);
					},
					true,
				);
			},
			dial2() {
				var self = this;
				window.cordova.plugins.phonedialer.dial(
					'01000000000',
					function (success) {
						alert('Dialing succeeded' + success);
					},
					err => {
						self.error = err;
						if (err == 'empty') alert('Unknown phone number');
						else alert('Dialer Error:' + err);
					},
					false, //appChooser
				);
			},
			call1() {
				window.cordova.plugins.phonedialer.call(
					'01000000000',
					function (success) {
						alert('Dialing succeeded' + success);
					},
					function (err) {
						if (err == 'empty') alert('Unknown phone number');
						else alert('Dialer Error:' + err);
					},
					false,
					false,
				);
			},
		},
	};
</script>

<style>
	html {
		height: 100%;
	}
	body {
		height: 100%;
	}
	#app {
		color: #2c3e50;
		margin: 40px auto;
		max-width: 640px;
		font-family: Source Sans Pro, Helvetica, sans-serif;
		text-align: center;
	}
	.logo {
		padding-bottom: 30px;
	}
	.logo span {
		position: relative;
		top: -30px;
		font-size: 36px;
		margin: 0 20px;
	}
	.logo img {
		width: 90px;
		height: 90px;
	}
	div.dump {
		background: #eee;
		text-align: left;
		border: solid 1px #ccc;
		padding: 20px;
		max-width: 600px;
		box-sizing: border-box;
		font-family: monospace;
		white-space: pre;
	}
	div.alert {
		color: #c00;
		font-weight: bold;
		font-size: 0.9em;
		padding-bottom: 30px;
		line-height: 1.6;
	}
	div.alert a {
		color: inherit;
	}
	div.indicators {
		width: 340px;
		margin: 0 auto 40px;
		text-align: left;
		font-family: Courier, Courier New, sans-serif;
	}
	div.indicators div {
		padding-bottom: 15px;
		opacity: 0.6;
	}
	div.indicators div.ok {
		opacity: 1;
		cursor: pointer;
	}
	div.indicators div.ok span {
		background: #0c0;
	}
	div.indicators div span {
		display: inline-block;
		width: 20px;
		height: 20px;
		background: #c00;
		border-radius: 20px;
		position: relative;
		top: 3px;
		margin-right: 15px;
	}
	div.indicators p {
		font-size: 0.8em;
		font-weight: bold;
		padding-bottom: 20px;
	}
</style>

플러그인 출처 : https://github.com/lakshmansha/cordova-plugin-phone-call

포크 후 수정
https://github.com/BlackMaka/cordova-plugin-phone-call

cordova plugin add https://github.com/BlackMaka/cordova-plugin-phone-call