1: Click the new button to jump out of the new page

<span class="inquire" @click="addNew">Newly added</span>

In method, add this method

 addNew()
            {
                this.$router.push({ name: "newMember" });
            },

Complete code

<template>
<span class="inquire" @click="addNew">Newly added</span>
</template>

<script>
export default {
        data() {
            return {               
            }
        },
        methods: {

             addNew()
            {
                this.$router.push({ name: "newMember" });
            },
        }

    }
</script>

2: Implement a simple search box

<template>
     <div class="search">
          <mt-search v-model="value"  :result="filterResult"></mt-search>
       </div>  
</template>

3: Click the switch button

<template>
      <div class="chooseOne">
             <mt-switch v-model="value1" ></mt-switch>
           </div>
</template>

<script>
export default {
        data() {
            return {  
                 value1:false,
            }
        },
        methods: {

        }

    }
</script>

4: Click the button to pop up the prompt pop-up box

Import {MessageBox} from 'Mint UI' as required;

<template>
      <button @click="goChongZhiPage">Recharge</button>
</template>

<script>
    import {MessageBox} from 'mint-ui';
    
export default {
        data() {
            return {                
            }
        },
        methods: {
             // Jump to top up page
          goChongZhiPage ()
          {     
            MessageBox.confirm("",{
                    title: 'Tips',
                    message: 'Please select a member before recharging',
                    showCancelButton: false
                })         
          },
        }
    }
</script>

5: Toast function

Click the button, and there will be a two second message of success, import {Toast} from 'Mint UI'; import Toast function

<template>
   <button @click="chongZhiForMember">Recharge</button>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
  data() {
    return { 
    };
  },
 
  methods: {
    chongZhiForMember()
            {
                 Toast({
                        message: 'Recharge success',
                        duration: 2000
                    });
            } 
  },
};
</script>

6: The simplest tab click switching effect of Vue

<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": "Add points" },
                    { "a": "Deduction integral" },
                    { "a": "Integral zero clearing" },
                    { "a": "View points" },

                ],
                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: There are several lines in the prompt box

<template>
    <div class="app">
    <span class="inquire" @click="submitOne">Opening</span>
    </div>
</template>

<script>
    import { Field, MessageBox, Toast } from 'mint-ui';
    export default {
        data() {
            return {
            }
        },
        methods: {
            submitOne() {
                MessageBox.confirm("<div>Wang Xiaoting (16834562345) Yes No</div><div>Opening VIP3 Membership card</div><div>Membership card No.: 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>