vue.js代码开发最常见的功能集合
1:点击新增按钮跳出新页面
<span class="inquire" @click="addNew">新增</span>
在方法中,添加这个方法即可
addNew()
{
this.$router.push({ name: "newMember" });
},
完整代码
<template>
<span class="inquire" @click="addNew">新增</span>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
addNew()
{
this.$router.push({ name: "newMember" });
},
}
}
</script>
2:实现一个简单的搜索框
![5640239-32cbc1947d8d013e.png](https://upload-images.jianshu.io/upload_images/5640239-32cbc1947d8d013e.png)
图片.png
<template>
<div class="search">
<mt-search v-model="value" :result="filterResult"></mt-search>
</div>
</template>
3:点击开关按钮
![5640239-d38dc48fca2eaf39.png](https://upload-images.jianshu.io/upload_images/5640239-d38dc48fca2eaf39.png)
图片.png
<template>
<div class="chooseOne">
<mt-switch v-model="value1" ></mt-switch>
</div>
</template>
<script>
export default {
data() {
return {
value1:false,
}
},
methods: {
}
}
</script>
4:点击按钮,弹出提示弹框
按需引入弹框插件import {MessageBox} from 'mint-ui';
![5640239-1399a61a3e5e3acf.png](https://upload-images.jianshu.io/upload_images/5640239-1399a61a3e5e3acf.png)
图片.png
<template>
<button @click="goChongZhiPage">充 值</button>
</template>
<script>
import {MessageBox} from 'mint-ui';
export default {
data() {
return {
}
},
methods: {
// 跳转到充值页面
goChongZhiPage ()
{
MessageBox.confirm("",{
title: '提示',
message: '请先选择会员再进行充值',
showCancelButton: false
})
},
}
}
</script>
5:Toast功能
点击按钮,有两秒钟的提示成功的信息,import { Toast } from 'mint-ui';导入Toast功能
![5640239-945e7fd9052478fd.png](https://upload-images.jianshu.io/upload_images/5640239-945e7fd9052478fd.png)
图片.png
<template>
<button @click="chongZhiForMember">充 值</button>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
data() {
return {
};
},
methods: {
chongZhiForMember()
{
Toast({
message: '充值成功',
duration: 2000
});
}
},
};
</script>
6:vue最简单的tab点击切换效果
![5640239-c954eb44b3b9c1ad.png](https://upload-images.jianshu.io/upload_images/5640239-c954eb44b3b9c1ad.png)
图片.png
<template>
<div>
<div v-for="(list,index) in typeList" class="aa" :class="{ red:changeRed == index}" @click="change(index)">{{list.a}}</div>
</div>
</template>
<script>
/*import headerTo from "../common/headerTo";
import { MessageBox, Toast, Field } from "mint-ui";
import axios from "axios";
import global from "../../../static/js/global";
import config from "../../../static/js/config";
import { error } from 'util';*/
export default {
data() {
return {
typeList: [
{ "a": "增加积分" },
{ "a": "扣除积分" },
{ "a": "积分清零" },
{ "a": "查看积分" },
],
changeRed: -1
}
},
methods: {
change(index) {
this.changeRed = index;
}
}
}
</script>
<style>
.aa {
cursor: pointer;
width: 24%;
height: 40px;
line-height: 40px;
float: left;
text-align: center;
font-size: 16px;
border: 1px solid #D6D6D6;
}
.red {
color: red;
}
</style>
7:提示弹框中带有若干行字
![5640239-d7493d0e31683821.png](https://upload-images.jianshu.io/upload_images/5640239-d7493d0e31683821.png)
图片.png
<template>
<div class="app">
<span class="inquire" @click="submitOne">开通</span>
</div>
</template>
<script>
import { Field, MessageBox, Toast } from 'mint-ui';
export default {
data() {
return {
}
},
methods: {
submitOne() {
MessageBox.confirm("<div>王小婷(16834562345)是否</div><div>开通VIP3会员卡</div><div>会员卡号:YYK 1234 1234 09</div>").then(action => {
console.log(this.member);
});
},
},
}
</script>
<style scoped>
.app {
background: #F1F1F1;
height: 17.78rem;
}
.inquire {
font-size: 0.43rem;
}
</style>
原文作者:祈澈姑娘
技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。