vue的一些常见功能

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切换直接上代码，

<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;
	},