vue的一些常見功能（手機號驗證，tab切換，生成二維碼，複製，去除全局console）

1：vue中手機號的驗證方式 用的vant框架

1：模板中

<div class="Info">
	<i class="iconfont icon-shouji"></i>
	<input v-model="moblie" class="inputNum" type="number" value="" placeholder="請輸入手機號" />
</div>
<div class="Info">
	<i class="iconfont icon-ecurityCode"></i>
	<input v-model="code" class="code" type="number" value="" placeholder="驗證碼" />
	<span class="codetxt" type="button" :disabled="disabled" @click="sendcode">{{btntxt}}</span>
</div>

2：在data中定義手機號

data() {
	return {
			moblie: "",
			code: "",
			btntxt: "獲取驗證碼",
			disabled: false,
			time: 0
	}
},

3：methods方法中

sendcode() {
	var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
		if (this.moblie == '') {
			this.$toast("手機號不能爲空");
		} else if (!reg.test(this.moblie)) {
			this.$toast("手機號格式不正確");
		} else {
			this.time = 60;
			this.disabled = true;
			//驗證碼的時間設置 可有可無
			this.timer();
			//手機號爭取後調取接口
			this.$axios.post("/sms/editpass",{}).then(res => {
					if (res.status != 200) {
						this.$toast("網絡錯誤");
					} else if (res.status == 200) {
						if (res.data.error == null && res.data.result == true) {
							this.$toast("請注意接收驗證碼");
						} else if (res.data.error != null && res.data.result == null) {
							this.$toast( res.data.error.msg);
						}
					}

				}).catch(function(err) {
					console.log(err);
				});
		}
	},
	//驗證碼的倒計時
	timer() {
		if (this.time > 0) {
			this.time--;
			this.btntxt = this.time + "s後獲取";
			setTimeout(this.timer, 1000);
		} else {
			this.time = 0;
			this.btntxt = "獲取驗證碼";
			this.disabled = false;
		}
	},

2 vue中的tab切換直接上代碼，

第一種

		<div class="tabNav flexbox">
			<van-col span="12" :class="{'selected':tab === 0,'testTitle':true}">
				<div @click="toTab(0)">
					
					量化明細
				</div>
			</van-col>
			<van-col span="12" :class="{'selected':tab === 1,'testTitle':true}">
				<div @click="toTab(1)">
					增值
				</div>
			</van-col>
		</div>
		<!-- 內容部分 -->
		<div>
			<div v-if="tab === 0">
				1
			</div>
			<div v-else-if="tab === 1">
				2
			</div>
		</div>
		export default {
		data() {
			return {
				tab:0
			}
		},

		computed: {

		},
		methods: {
			toTab(type){
				this.tab = type;
			}
		},
		components: {
			navList
		}
	}

第二種

<template>
	<div :class="wholecss?'daytime':'atnight'">
		<div id="app">
			<ul>
				<li><span v-bind:class="{current: num == 1}" v-on:click="change(1)">電影</span></li>
				<li><span v-bind:class="{current: num==2}" v-on:click="change(2)">動漫</span></li>
			</ul>
			<div class="content">
				<transition name="fade">
					<div v-show="num == 1">1</div>
				</transition>
				<transition name="move">
					<div v-show="num == 2">2</div>
				</transition>
				<transition name="fade">
					<div v-show="num == 3">3</div>
				</transition>
			</div>
		</div>

	</div>

</template>

<script>
	export default {
		name: 'register',

		data(){
			return{
					num: 1,
					wholecss:""
			}
		},
		methods: {
			change: function(index) {
				this.num = index
			}
		}


	}
</script>


<style lang="less" scoped>
	
</style>

第三種

<template>
	<div class="login">
		<!-- 底部導航部分 -->
		<div id="TabBar" class="tab-bar row">
			<div class="cell-3 tab-bar-item" @click="goPage(0)" v-bind:class="{active: actives[0]}">
				<div class="row">
					<i class="iconfont icon-shouye"></i>
				</div>
				<div class="row">
					<span>首頁</span>
				</div>
			</div>
			<div class="cell-3 tab-bar-item" @click="goPage(1)" v-bind:class="{active: actives[1]}">
				<div class="row">
					<i class="iconfont icon-dengpao"></i>
				</div>
				<div class="row">
					<span>我的社區</span>
				</div>
			</div>
			<div class="cell-3 tab-bar-item" @click="goPage(2)" v-bind:class="{active: actives[2]}">
				<div class="row">
					<i class="iconfont icon-shangcheng navys"></i>
				</div>
				<div class="row navys">
					<span>商城</span>
				</div>
			</div>
			<div class="cell-3 tab-bar-item" @click="goPage(3)" v-bind:class="{active: actives[3]}">
				<div class="row">
					<i class="iconfont icon-my_icon"></i>
				</div>
				<div class="row">
					<span>我</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				actives: [true, false, false, false],
			}
		},
		mounted() {},
		methods: {
			// tab
			goPage: function(tag) {
				if (tag === 0) {
					this.actives = this.actives.map(function() {
						return false;
					});
					this.actives[0] = true;
					this.$router.push("/")
				} else if (tag === 1) {
					this.actives = this.actives.map(function() {
						return false;
					});
					this.actives[1] = true;
					if (this.isLogin) {
						this.$router.push("/myCommunity")
					} else {
						this.$toast("請先登錄");
						this.$router.push("/login")
					}
				} else if (tag === 2) {
					this.actives = this.actives.map(function() {
						return false;
					});
					this.actives[2] = true;
					this.$dialog.alert({
						message: '暫無開放'
					}).then(() => {
						this.goPage(0)
					});
				} else if (tag === 3) {
					this.actives = this.actives.map(function() {
						return false;
					});
					this.actives[3] = true;
					if (this.isLogin) {
						if (this.isActive) {
							this.$router.push("/myactiva")
						} else {
							this.$router.push("/my")
						}
					} else {
						this.$toast("請先登錄");
						this.$router.push("/login")
					}
				}
				this.$emit('select-item', tag);
			}
		}
	}
</script>
<style scoped>
	/* 底部導航欄 */
	.navys {
		color: #a4a4a4 !important;
	}
	.tab-bar {
		box-shadow: 0 -4px 16px -1px #ebebeb;
		color: #a4a4a4;
		background-color: white;
		height: 1.05rem;
		border: 0 solid rgb(210, 210, 210);
		border-top-width: 0px;
		position: fixed;
		margin: auto;
		bottom: 0;
		width: 100%;

	}

	.tab-bar .cell-3 {
		display: inline-block;
		width: 24%;
		text-align: center;
		padding-top: 0.15rem;
	}

	.tab-bar-item {
		height: 1.05rem;
	}

	.tab-bar .active {
		color: #0a0c56;
	}

	.tab-bar i {
		font-size: 21px;
		padding-bottom: 0.03rem;
		display: inline-block;
		font-weight: 700;
	}
</style>

3 vue中拿到地址生成二維碼的方式

1：安裝npm i vue-qr
2：引入 import VueQr from ‘vue-qr’
3：模板中

		<vue-qr class="bicode" :logoSrc="imagePath" :text="codeValue"></vue-qr>

4：data中：

		data() {
					return {
						codeValue: "", //顯示的值、跳轉的地址
						icode: "",
						imagePath: "" //中間logo的地址
					}
		},
		//定義變量
		components: {
			VueQr
		},

5：mounted中獲取二維碼的地址
如:
簡單的方法：this.codeValue = “http://www.baidu.com”
拼接的方法：this.codeValue = “http://www.t1.qidianjinfu.com/#/register1?yqm=” + this.icode

4 複製的功能

1：安裝 npm i vue-clipboard2
2：引用
import VueClipboard from ‘vue-clipboard2’
Vue.use(VueClipboard)
3：模板中

		<p class="code">{{icode}}</p>
		<p class="copy" v-clipboard:copy="icode" v-clipboard:success="onCopy">複製</span>

4：data中

	data() {
		return {
			icode: "",
		}
	}

5：方法中

	onCopy(e) {
		this.$toast('複製成功');
		var url = e.text;
	},

5:去除全局的console.log

1：在開發中顯示console.log打包後不顯示console.log
路徑：build/webpack.prod.conf.js