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:实现一个简单的搜索框
<template> <div class="search"> <mt-search v-model="value" :result="filterResult"></mt-search> </div> </template>
3：点击开关按钮
<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';
<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功能
<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点击切换效果
<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:提示弹框中带有若干行字
<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>
