vue-country-tel
Version:
A vue-based mobile phone area code selection, nationality selection component（一个基于vue的手机区号选择、国籍选择组件）
460 lines (413 loc) • 15.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生开发模式</title>
<style>
* {
box-sizing: border-box;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
body {
background: #fff;
color: #555;
font-size: 14px;
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
}
td, th, caption {
font-size: 14px;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
a {
color: #555;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
border: none;
}
ol, ul, li {
list-style: none;
}
input, textarea, select, button {
font: 14px "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
}
table {
border-collapse: collapse;
}
html {
overflow-y: scroll;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
/*公共类*/
.al {
text-align: left
}
.ac {
text-align: center
}
.ar {
text-align: right
}
.hide {
display: none
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.overflow {
overflow: hidden;;
}
.mb-5 {
margin-bottom: 5px;
}
html, body, .app {
height: 100%;
}
.hr {
height: 1px;
margin: 10px 0 20px 0;
background-color: #ccc;
}
.mb-10 {
margin-bottom: 10px;
}
.mt-5 {
margin-top: 5px;
}
.left {
float: left;
width: 33%;
height: 100%;
padding: 20px;
}
.center {
float: left;
width: 33%;
height: 100%;
padding: 20px;
border-left: 1px solid #ccc;
}
.right {
float: right;
width: 33%;
height: 100%;
padding: 20px;
border-left: 1px solid #ccc;
}
@media (max-width: 991px) {
.left,
.right,
.center {
float: none;
width: 100%;
height: auto;
}
.right,
.center {
border-top: 1px solid #ccc;
border-left: none;
}
}
.popover-class1111 .vue-country-no-data {
color: #f60;
}
</style>
<link rel="stylesheet" href="../lib/vue-country-intl.css">
<script src="vue.min.js"></script>
<script src="../lib/vue-country-intl.min.js"></script>
</head>
<body>
<div id="app">
<div class="left">
<h1>scheme = input 模式</h1>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">1、</div>
<div class="overflow">
<div class="mb-5">默认效果(选择手机区号)</div>
<div>Default effect (select phone area code)</div>
</div>
</h3>
<vue-country-intl v-model="schemaInput.default" :iso2="schemaInput.selectedObjDefault.iso2"
@onChange="onDefaultChange">
<template slot="vueCountryNoData"><h1>没有找到该国籍！</h1></template>
</vue-country-intl>
<h5 class="mt-5">区号：{{ schemaInput.default || '--' }}</h5>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">1-2、</div>
<div class="overflow">
<div class="mb-5">使用中文名称显示</div>
<div>Use Chinese name display</div>
</div>
</h3>
<vue-country-intl v-model="schemaInput.default" :iso2="schemaInput.selectedObjDefault.iso2" :use-chinese="true"
@onChange="onDefaultChange">
<template slot="vueCountryNoData"><h1>没有找到该国籍！</h1></template>
</vue-country-intl>
<h5 class="mt-5">区号：{{ schemaInput.default || '--' }}</h5>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">2、</div>
<div class="overflow">
<div class="mb-5">选择国籍</div>
<div>Select country</div>
</div>
</h3>
<vue-country-intl type="country" v-model="schemaInput.country" no-data-text="没有找到相关数据"></vue-country-intl>
<h5 class="mt-5">国籍代码：{{ schemaInput.country || '--' }}</h5>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">3、</div>
<div class="overflow">
<div class="mb-5">onChange事件</div>
<div>onChange Event</div>
</div>
</h3>
<vue-country-intl v-model="schemaInput.event" @onChange="onchange"></vue-country-intl>
<h5 class="mt-5">区号：{{ schemaInput.event || '--' }}</h5>
<div class="mb-10" style="font-size: 20px;">
<code>{{ selectedObj }}</code>
</div>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">4、</div>
<div class="overflow">
<div class="mb-5">默认值</div>
<div>Default value</div>
</div>
</h3>
<vue-country-intl v-model="schemaInput.defaultValue"></vue-country-intl>
<h5 class="mt-5">区号：{{ schemaInput.defaultValue || '--' }}</h5>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">5、</div>
<div class="overflow">
<div class="mb-5">禁用</div>
<div>Disable</div>
</div>
</h3>
<vue-country-intl v-model="schemaInput.disableUse" :disabled="true"></vue-country-intl>
<h5 class="mt-5">区号：{{ schemaInput.disableUse || '--' }}</h5>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">6、</div>
<div class="overflow">
<div class="mb-5">不显示图片</div>
<div>Do not display images</div>
</div>
</h3>
<vue-country-intl v-model="schemaInput.noImage" :show-label-img="false"></vue-country-intl>
<h5 class="mt-5">区号：{{ schemaInput.noImage || '--' }}</h5>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">7、</div>
<div class="overflow">
<div class="mb-5">不显示区号</div>
<div>Do not display area code</div>
</div>
</h3>
<vue-country-intl v-model="schemaInput.noCode" :show-area-code="false"></vue-country-intl>
<h5 class="mt-5">区号：{{ schemaInput.noCode || '--' }}</h5>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">8、</div>
<div class="overflow">
<div class="mb-5">只显示值</div>
<div>Show only values</div>
</div>
</h3>
<vue-country-intl v-model="schemaInput.onlyValue" :only-value="true" :show-label-img="false"></vue-country-intl>
<h5 class="mt-5">区号：{{ schemaInput.onlyValue || '--' }}</h5>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">9、</div>
<div class="overflow">
<div class="mb-5">禁用指定国籍</div>
<div>Disable specified country</div>
</div>
</h3>
<p class="mb-5">禁用：中国、美国、日本，中国香港(Disabled: China, USA, Japan, Hong Kong China)</p>
<vue-country-intl v-model="schemaInput.disableCountry"
disable-country="+86,United States,Japan (日本),hk"></vue-country-intl>
<h5 class="mt-5">区号：{{ schemaInput.disableCountry || '--' }}</h5>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">10、</div>
<div class="overflow">
<div class="mb-5">只显示指定国籍</div>
<div>Show only designated countries</div>
</div>
</h3>
<p class="mb-5">只显示：中国、美国、日本，中国香港(Disabled: China, USA, Japan, Hong Kong China)</p>
<vue-country-intl v-model="schemaInput.onlyCountry"
only-country="+86,United States,Japan (日本),hk"></vue-country-intl>
<h5 class="mt-5">区号：{{ schemaInput.onlyCountry || '--' }}</h5>
<div class="hr"></div>
</div>
<div class="center">
<h1>scheme = popover 模式</h1>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">1、</div>
<div class="overflow">
<div class="mb-5">默认效果(选择手机区号)</div>
<div>Default effect (select phone area code)</div>
</div>
</h3>
<vue-country-intl schema="popover" popover-class="popover-class1111" v-model="schemaPopover.default">
<button type="button" slot="reference">选择手机区号</button>
<template slot="vueCountryNoData"><h1>没有找到该国籍！</h1></template>
</vue-country-intl>
<h5 class="mt-5">2、区号：{{ schemaPopover.default || '--' }}</h5>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">2、</div>
<div class="overflow">
<div class="mb-5">选择国籍</div>
<div>Select country</div>
</div>
</h3>
<vue-country-intl schema="popover" type="country" v-model="schemaPopover.country">
<button type="button" slot="reference">选择国籍</button>
</vue-country-intl>
<h5 class="mt-5">国籍代码：{{ schemaPopover.country || '--' }}</h5>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">3、</div>
<div class="overflow">
<div class="mb-5">禁用</div>
<div>Disable</div>
</div>
</h3>
<vue-country-intl schema="popover" v-model="schemaPopover.disableUse" :disabled="true">
<button type="button" slot="reference">选择手机区号</button>
</vue-country-intl>
<h5 class="mt-5">区号：{{ schemaPopover.disableUse || '--' }}</h5>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">4、</div>
<div class="overflow">
<div class="mb-5">禁用搜索</div>
<div>Disable search</div>
</div>
</h3>
<vue-country-intl schema="popover" v-model="schemaPopover.noSearch" :search-able="false">
<button type="button" slot="reference">选择手机区号</button>
</vue-country-intl>
<h5 class="mt-5">区号：{{ schemaPopover.noSearch || '--' }}</h5>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">5、</div>
<div class="overflow">
<div class="mb-5">使用元素ID</div>
<div>Use element ID</div>
</div>
</h3>
<button type="button" id="test_elId" @click="useElIdClick">使用元素ID</button>
<vue-country-intl ref="use_elId" schema="popover" v-model="schemaPopover.useElId"
el-id="test_elId"></vue-country-intl>
<h5 class="mt-5">区号：{{ schemaPopover.noSearch || '--' }}</h5>
<div class="hr"></div>
</div>
<div class="right">
<h1>scheme = modal 模式</h1>
<div class="hr"></div>
<h3 class="mb-10">
<div class="pull-left">1、</div>
<div class="overflow">
<div class="mb-5">默认效果(选择手机区号)</div>
<div>Default effect (select phone area code)</div>
</div>
</h3>
<button type="button" @click="schemaModalVisible.default = true">选择手机区号</button>
<vue-country-intl schema="modal" modal-class="modal-class" :listZIndex="5000"
:visible.sync="schemaModalVisible.default" v-model="schemaModal.default">
<template slot="vueCountryNoData"><h1>没有找到该国籍！</h1></template>
</vue-country-intl>
<h5 class="mt-5">2、区号：{{ schemaModal.default || '--' }}</h5>
<div class="hr"></div>
</div>
</div>
<script>
Vue.component('vue-country-intl', vueCountryIntl);
new Vue({
el: '#app',
data: function () {
return {
schemaInput: {
default: '+86',
country: '',
defaultValue: '+86',
disableUse: '86',
noImage: '+86',
//noCode: '',
event: '+86',
onlyValue: '+86',
disableCountry: '',
onlyCountry: '',
selectedObjDefault: {}
},
schemaPopover: {
default: '',
country: '',
defaultValue: '+86',
disableUse: '+86',
noSearch: '+86',
useElId: '+86'
},
schemaModal: {
default: '+86'
},
schemaModalVisible: {
default: false
},
selectedObj: {}
}
},
methods: {
onchange(selected) {
this.selectedObj = selected;
},
useElIdClick() {
console.log(1111)
this.$refs.use_elId.show();
},
onDefaultChange(selected) {
console.log(5555, selected)
this.schemaInput.selectedObjDefault = selected;
}
},
mounted() {
let timer = setTimeout(() => {
this.schemaInput.noCode = '+86';
this.schemaInput.default = '';
console.log('重新赋值了！');
clearTimeout(timer);
}, 3600);
}
});
</script>
</body>
</html>