• HTML+VUE+element-ui通过点击不同按钮展现不同页面

    完整源码可以私聊我，需要一点点费用~ 

    页面展示

    方案一

    方案二

    代码解释

    方案一：使用v-show

    这种方案只适合有两种页面

    现在form表单中设置好要展现的页面名（此处的url没有作用不用管）

    通过一个两个for循环分别将form表单填入的数据回显到页面中，并通过menuHandle函数进行 点击后会发生的事件，:index和:key都是用来定位那一个单独的div

    可以看到点击后触发函数里这个show变量的true和flase。

    而具体内容中写了两个页面内容，再通过v-if函数展现dish和comment页面

    方案二：使用-->

  • div>
  • <div class="divLayer">
  • <div class="divLayerLeft">div>
  • <div class="divLayerRight">div>
  • div>
  • <div class="divCart" v-if="categoryList.length > 0">
  • <div :class="{imgCartActive: cartData && cartData.length > 0, imgCart:!cartData || cartData.length<1}"
  • @click="openCart">div>
  • <div :class="{divGoodsNum:1===1, moreGoods:cartData && cartData.length > 99}"
  • v-if="cartData && cartData.length > 0">{{ goodsNum }}
  • div>
  • <div class="divNum">
  • <span>￥span>
  • <span>{{goodsPrice}}span>
  • div>
  • <div class="divPrice">div>
  • <div :class="{btnSubmitActive: cartData && cartData.length > 0, btnSubmit:!cartData || cartData.length<1}"
  • @click="toAddOrderPage">去结算
  • div>
  • div>
  • <van-dialog v-model="dialogFlavor.show" :show-confirm-button="false" class="dialogFlavor" ref="flavorDialog">
  • <div class="dialogTitle">{{dialogFlavor.name}}div>
  • <div class="divContent">
  • <div v-for="flavor in dialogFlavor.flavors" :key="flavor.id">
  • <div class="divFlavorTitle">{{flavor.name}}div>
  • <span v-for="item in JSON.parse(flavor.value)"
  • :key="item"
  • @click="flavorClick(flavor,item)"
  • :class="{spanActive:flavor.dishFlavor === item}"
  • >{{item}}span>
  • div>
  • div>
  • <div class="divBottom">
  • <div><span class="spanMoney">￥span>{{dialogFlavor.price/100}}div>
  • <div @click="dialogFlavorAddCart">加入购物车div>
  • div>
  • <div class="divFlavorClose" @click="dialogFlavor.show = false">
  • <img src="./images/close.png"/>
  • div>
  • van-dialog>
  • <van-popup v-model="cartDialogShow" position="bottom" :style="{ height: '50%' }" class="dialogCart">
  • <div class="divCartTitle">
  • <div class="title">购物车div>
  • <div class="clear" @click="clearCart">
  • <i class="el-icon-delete">i> 清空
  • div>
  • div>
  • <div class="divCartContent">
  • <div v-for="item in cartData" :key="item.id" class="divCartItem">
  • <el-image :src="imgPathConvert(item.image)">
  • <div slot="error" class="image-slot">
  • <img src="./images/noImg.png"/>
  • div>
  • el-image>
  • <div class="divDesc">
  • <div class="name">{{item.name}}div>
  • <div class="price">
  • <span class="spanMoney">￥span>{{item.amount}}
  • div>
  • div>
  • <div class="divNum">
  • <div class="divSubtract">
  • <img src="./images/subtract.png" @click="cartNumberSubtract(item)"/>
  • div>
  • <div class="divDishNum">{{item.number}}div>
  • <div class="divAdd">
  • <img src="./images/add.png" @click="cartNumAdd(item)"/>
  • div>
  • div>
  • <div class="divSplit">div>
  • div>
  • div>
  • van-popup>
  • <van-dialog v-model="detailsDialog.show"
  • :show-confirm-button="false"
  • class="detailsDialog"
  • ref="detailsDialog"
  • v-if="detailsDialog.show"
  • >
  • <div class="divContainer">
  • <el-image :src="imgPathConvert(detailsDialog.item.image)">
  • <div slot="error" class="image-slot">
  • <img src="./images/noImg.png"/>
  • div>
  • el-image>
  • <div class="title">{{detailsDialog.item.name}}div>
  • <div class="content">{{detailsDialog.item.description}}div>
  • div>
  • <div class="divNum">
  • <div class="left">
  • <span>￥span><span>{{detailsDialog.item.price/100}}span>
  • div>
  • <div class="right">
  • <div class="divSubtract" v-if="detailsDialog.item.number > 0">
  • <img src="./images/subtract.png" @click="subtractCart(detailsDialog.item)"/>
  • div>
  • <div class="divDishNum">{{detailsDialog.item.number}}div>
  • <div class="divTypes"
  • v-if="detailsDialog.item.flavors && detailsDialog.item.flavors.length > 0 && !detailsDialog.item.number "
  • @click="chooseFlavorClick(detailsDialog.item)">选择规格
  • div>
  • <div class="divAdd" v-else>
  • <img src="./images/add.png" @click="addCart(detailsDialog.item)"/>
  • div>
  • div>
  • div>
  • <div class="detailsDialogClose" @click="detailsDialog.show = false">
  • <img src="./images/close.png"/>
  • div>
  • van-dialog>
  • <van-dialog v-model="setMealDialog.show"
  • :show-confirm-button="false"
  • class="setMealDetailsDialog"
  • ref="setMealDetailsDialogd"
  • v-if="setMealDialog.show"
  • >
  • <div class="divContainer">
  • <div class="title">{{setMealDialog.item.name}}div>
  • <div class="item" v-for="(item,index) in setMealDialog.item.list" :key="index">
  • <el-image :src="imgPathConvert(item.image)">
  • <div slot="error" class="image-slot">
  • <img src="./images/noImg.png"/>
  • div>
  • el-image>
  • <div class="divSubTitle">{{item.name + '(' + item.copies + '份)' }}
  • <div class="divPrice">
  • <span>￥span><span>{{item.price/100}}span>
  • div>
  • div>
  • <div class="content">{{item.description}}div>
  • div>
  • div>
  • <div class="divNum">
  • <div class="left">
  • <span>￥span><span>{{setMealDialog.item.price/100}}span>
  • div>
  • <div class="right">
  • <div class="divSubtract" v-if="setMealDialog.item.number > 0">
  • <img src="./images/subtract.png" @click="subtractCart(setMealDialog.item)"/>
  • div>
  • <div class="divDishNum">{{setMealDialog.item.number}}div>
  • <div class="divAdd" v-if="setMealDialog.item.number">
  • <img src="./images/add.png" @click="addCart(setMealDialog.item)"/>
  • div>
  • <div class="addCart" @click="addCart(setMealDialog.item)" v-if="!setMealDialog.item.number">加入购物车div>
  • div>
  • div>
  • <div class="detailsDialogClose" @click="setMealDialog.show = false">
  • <img src="./images/close.png"/>
  • div>
  • van-dialog>
  • div>
  • <script src="../backend/plugins/vue/vue.js">script>
  • <script src="../backend/plugins/element-ui/index.js">script>
  • <script src="./js/vant.min.js">script>
  • <script src="../backend/plugins/axios/axios.min.js">script>
  • <script src="./js/request.js">script>
  • <script src="./js/common.js">script>
  • <script src="./api/main.js">script>
  • <script src="../api/comment.js">script>
  • body>
  • <script>
  • new Vue({
  • el: '#main',
  • data() {
  • return {
  • //左边菜品类别index
  • activeType: 0,
  • categoryList: [],
  • categoryId: undefined,
  • dishList: [],
  • cartData: [],
  • commentList: [],
  • dialogFlavor: {
  • name: '',
  • flavors: [],
  • dishId: undefined,
  • price: undefined,
  • show: false,
  • image: ''
  • },
  • cartDialogShow: false,
  • detailsDialog: {
  • show: false,
  • item: {image: ''}
  • },
  • setMealDialog: {
  • show: false,
  • item: {}
  • },
  • menuList: [
  • // {
  • // id: '1',
  • // name: '门店管理',
  • // children: [
  • {
  • id: '2',
  • name: '菜品',
  • url: '../front/page/showDish.html',
  • icon: 'icon-member'
  • },
  • {
  • id: '3',
  • name: '评论',
  • url: '../backend/page/member/list.html',
  • icon: 'icon-category'
  • }
  • ],
  • iframeUrl: '../backend/page/member/list.html',
  • headTitle: '菜品',
  • goBackFlag: false,
  • loading: true,
  • timer: null,
  • show: true
  • }
  • },
  • computed: {
  • goodsNum() {
  • let num = 0
  • this.cartData.forEach(item => {
  • num += item.number
  • })
  • if (num < 99) {
  • return num
  • } else {
  • return '99+'
  • }
  • },
  • goodsPrice() {
  • let price = 0
  • this.cartData.forEach(item => {
  • price += (item.number * item.amount)
  • })
  • return price
  • }
  • },
  • created() {
  • const userInfo = window.localStorage.getItem('userInfo')
  • if (userInfo) {
  • this.userInfo = JSON.parse(userInfo)
  • }
  • this.closeLoading()
  • },
  • watch: {
  • 'dialogFlavor.show'(flag) {
  • if (flag) {
  • document.querySelector('.divCart').style.zIndex = 1
  • } else {
  • document.querySelector('.divCart').style.zIndex = 3000
  • }
  • },
  • },
  • mounted() {
  • this.initData()
  • window.menuHandle = this.menuHandle
  • },
  • methods: {
  • //初始化数据
  • initData() {
  • Promise.all([categoryListApi(), cartListApi({})]).then(res => {
  • //获取分类数据
  • if (res[0].code === 1) {
  • this.categoryList = res[0].data
  • if (Array.isArray(res[0].data) && res[0].data.length > 0) {
  • this.categoryId = res[0].data[0].id
  • if (res[0].data[0].type === 1) {
  • this.getDishList()
  • this.getCommentList()
  • } else {
  • this.getSetmealData()
  • }
  • }
  • } else {
  • this.$notify({type: 'warning', message: res[0].msg});
  • }
  • //获取菜品数据
  • if (res[1].code === 1) {
  • this.cartData = res[1].data
  • } else {
  • this.$notify({type: 'warning', message: res[1].msg});
  • }
  • })
  • },
  • //分类点击
  • categoryClick(index, id, type) {
  • this.activeType = index
  • this.categoryId = id
  • if (type === 1) {//菜品
  • this.getDishList()
  • } else {
  • this.getSetmealData()
  • }
  • },
  • //获取菜品数据
  • async getDishList() {
  • if (!this.categoryId) {
  • return
  • }
  • const res = await dishListApi({categoryId: this.categoryId, status: 1})
  • if (res.code === 1) {
  • let dishList = res.data
  • const cartData = this.cartData
  • if (dishList.length > 0 && cartData.length > 0) {
  • dishList.forEach(dish => {
  • cartData.forEach(cart => {
  • if (dish.id === cart.dishId) {
  • dish.number = cart.number
  • }
  • })
  • })
  • }
  • this.dishList = dishList
  • } else {
  • this.$notify({type: 'warning', message: res.msg});
  • }
  • },
  • //获取套餐数据setmealId
  • async getSetmealData() {
  • if (!this.categoryId) {
  • return
  • }
  • const res = await setmealListApi({categoryId: this.categoryId, status: 1})
  • if (res.code === 1) {
  • let dishList = res.data
  • const cartData = this.cartData
  • if (dishList.length > 0 && cartData.length > 0) {
  • dishList.forEach(dish => {
  • cartData.forEach(cart => {
  • if (dish.id === cart.setmealId) {
  • dish.number = cart.number
  • }
  • })
  • })
  • }
  • this.dishList = dishList
  • } else {
  • this.$notify({type: 'warning', message: res.msg});
  • }
  • },
  • //获取购物车数据
  • async getCartData() {
  • const res = await cartListApi({})
  • if (res.code === 1) {
  • this.cartData = res.data
  • } else {
  • this.$notify({type: 'warning', message: res.msg});
  • }
  • },
  • //菜单中往购物车中添加商品
  • async addCart(item) {
  • let params = {
  • amount: item.price / 100,//金额
  • dishFlavor: item.dishFlavor,//口味 如果没有传undefined
  • dishId: undefined,//菜品id
  • setmealId: undefined,//套餐id
  • name: item.name,
  • image: item.image
  • }
  • if (Array.isArray(item.flavors)) {//表示是菜品
  • params.dishId = item.id
  • } else {//表示套餐 套餐没有口味
  • params.setmealId = item.id
  • }
  • const res = await addCartApi(params)
  • if (res.code === 1) {
  • this.dishList.forEach(dish => {
  • if (dish.id === item.id) {
  • dish.number = res.data.number
  • }
  • })
  • if (this.setMealDialog.show) {
  • item.number = res.data.number
  • }
  • this.getCartData()
  • } else {
  • this.$notify({type: 'warning', message: res.msg});
  • }
  • },
  • //菜单中减少选中的商品
  • async subtractCart(item) {
  • let params = {
  • dishId: item.id,
  • }
  • if (!Array.isArray(item.flavors)) {
  • params = {
  • setmealId: item.id,
  • }
  • }
  • const res = await updateCartApi(params)
  • if (res.code === 1) {
  • this.dishList.forEach(dish => {
  • if (dish.id === item.id) {
  • dish.number = (res.data.number === 0 ? undefined : res.data.number)
  • }
  • })
  • if (this.setMealDialog.show) {
  • item.number = (res.data.number === 0 ? undefined : res.data.number)
  • }
  • this.getCartData()
  • } else {
  • this.$notify({type: 'warning', message: res.msg});
  • }
  • },
  • //展开购物车
  • openCart() {
  • if (this.cartData.length > 0) {
  • this.cartDialogShow = true
  • }
  • },
  • //购物车中增加商品数量
  • async cartNumAdd(item) {
  • let params = {
  • amount: item.amount,//金额
  • dishFlavor: item.dishFlavor,//口味 如果没有传undefined
  • dishId: item.dishId,//菜品id
  • setmealId: item.setmealId,//套餐id
  • name: item.name,
  • image: item.image
  • }
  • const res = await addCartApi(params)
  • if (res.code === 1) {
  • this.dishList.forEach(dish => {
  • if (dish.id === (item.dishId || item.setmealId)) {
  • dish.number = res.data.number
  • }
  • })
  • console.log(this.dishList)
  • this.getCartData()
  • } else {
  • this.$notify({type: 'warning', message: res.msg});
  • }
  • },
  • //购物车中减少商品数量
  • async cartNumberSubtract(item) {
  • let params = {
  • dishId: item.dishId,
  • setmealId: item.setmealId,
  • }
  • const res = await updateCartApi(params)
  • if (res.code === 1) {
  • this.dishList.forEach(dish => {
  • if (dish.id === (item.dishId || item.setmealId)) {
  • dish.number = (res.data.number === 0 ? undefined : res.data.number)
  • }
  • })
  • this.getCartData()
  • } else {
  • this.$notify({type: 'warning', message: res.msg});
  • }
  • },
  • //修改商品列表中的数据number
  • changeDishList(item) {
  • for (let ele of this.dishList) {
  • if (ele.id === (item.setmealId || item.dishId)) {
  • ele.number = item.number
  • }
  • }
  • },
  • //清空购物车
  • async clearCart() {
  • const res = await clearCartApi()
  • if (res.code === 1) {
  • for (let ele of this.dishList) {
  • ele.number = undefined
  • }
  • this.cartData = []
  • this.cartDialogShow = false
  • } else {
  • this.$notify({type: 'warning', message: res.msg});
  • }
  • },
  • //点击选择规格
  • chooseFlavorClick(item) {
  • this.dialogFlavor = {
  • name: '',
  • flavors: [],
  • dishId: undefined,
  • price: undefined,
  • show: false
  • }
  • this.dialogFlavor = {
  • name: item.name,
  • flavors: item.flavors,
  • dishId: item.id,
  • price: item.price,
  • show: true,
  • image: item.image
  • }
  • },
  • flavorClick(flavor, item) {
  • flavor.dishFlavor = item
  • //强制刷新dialog的dom
  • this.dialogFlavor.show = false
  • this.dialogFlavor.show = true
  • },
  • //选择规格加入购物车
  • dialogFlavorAddCart() {
  • const dialogFlavor = this.dialogFlavor
  • let flag = true
  • let dishFlavor = []
  • dialogFlavor.flavors.forEach(item => {
  • if (item.dishFlavor) {
  • dishFlavor.push(item.dishFlavor)
  • } else {
  • flag = false
  • Notify({type: 'warning', message: '请选择' + item.name});
  • }
  • })
  • if (flag) {
  • this.addCart({
  • price: dialogFlavor.price,
  • dishFlavor: dishFlavor.join(","),
  • id: dialogFlavor.dishId,
  • flavors: [],
  • image: dialogFlavor.image,
  • name: dialogFlavor.name
  • })
  • this.dialogFlavor.show = false
  • }
  • },
  • //网络图片路径转换
  • imgPathConvert(path) {
  • return imgPath(path)
  • },
  • //跳转到去结算界面
  • toAddOrderPage() {
  • if (this.cartData.length > 0) {
  • window.requestAnimationFrame(() => {
  • window.location.href = '/front/page/add-order.html'
  • })
  • }
  • },
  • toUserPage() {
  • window.requestAnimationFrame(() => {
  • window.location.href = '/front/page/user.html'
  • })
  • },
  • async dishDetails(item) {
  • //先清除对象数据，如果不行的话dialog使用v-if
  • this.detailsDialog.item = {}
  • this.setMealDialog.item = {}
  • if (Array.isArray(item.flavors)) {
  • this.detailsDialog.item = item
  • this.detailsDialog.show = true
  • } else {
  • //显示套餐的数据
  • const res = await setMealDishDetailsApi(item.id)
  • if (res.code === 1) {
  • this.setMealDialog.item = {...item, list: res.data}
  • this.setMealDialog.show = true
  • } else {
  • this.$notify({type: 'warning', message: res.msg});
  • }
  • }
  • },
  • addComment() {
  • window.location.href = 'page/addComment.html'
  • },
  • menuHandle(item, goBackFlag) {
  • this.loading = true
  • this.menuActived = item.id
  • this.iframeUrl = item.url
  • this.headTitle = item.name
  • this.goBackFlag = goBackFlag
  • this.show = !this.show
  • this.closeLoading()
  • },
  • closeLoading() {
  • this.timer = null
  • this.timer = setTimeout(() => {
  • this.loading = false
  • }, 1000)
  • },
  • showContent(button){
  • if(button == 'showDishContent'){
  • this.showContent = true;
  • this.showComment = false;
  • }else if(button == 'showCommentContent'){
  • this.showContent = false;
  • this.showComment = true;
  • }
  • },
  • async getCommentList(){
  • const res = await commentListApi()
  • if(res.code === 1){
  • this.commentList = res.data
  • }else {
  • this.$notify({type: 'warning', message: res.msg})
  • }
  • }
  • }
  • })
  • script>
  • html>

    • 方案二

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8"/>
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    7.     <title>11外卖管理端title>
    8.     <link rel="shortcut icon" href="favicon.ico">
    9.     
    10.     
    11.     <link rel="stylesheet" href="styles/common.css"/>
    12.     <link rel="stylesheet" href="styles/index.css"/>
    13.     <link rel="stylesheet" href="styles/icon/iconfont.css"/>
    14.     <style>
    15.         .body {
    16.             min-width: 1366px;
    17.         }
    18.  
    19.         .app-main {
    20.             height: calc(100% - 64px);
    21.         }
    22.  
    23.         .app-main .divTmp {
    24.             width: 100%;
    25.             height: 100%;
    26.         }
    27.     style>
    28. head>
    29.  
    30. <body>
    31. <div class="app" id="app">
    32.     <div class="app-wrapper openSidebar clearfix">
    33.         
    34.         <div class="sidebar-container">
    35.  
    36.  
    37.             <el-scrollbar wrap-class="scrollbar-wrapper">
    38.                 <el-menu>
    39.                     <div v-for="item in menuList" :key="item.id">
    40.                         <el-submenu :index="item.id" v-if="item.children && item.children.length>0">
    41.                             <template slot="title">
    42.                                 <i class="iconfont" :class="item.icon">i>
    43.                                 <span>{{item.name}}span>
    44.                             template>
    45.                             <el-menu-item
    46.                                     v-for="sub in item.children"
    47.                                     :index="sub.id"
    48.                                     :key="sub.id"
    49.                                     @click="menuHandle(sub,false)"
    50.                             >
    51.                                 <i :class="iconfont" :class="sub.icon">i>
    52.                                 <span slot="title">{{sub.name}}span>
    53.                             
    54.                             >
    55.                         el-submenu>
    56.                         <el-menu-item v-else :index="item.id" @click="menuHandle(item,false)">
    57.                             <i class="iconfont" :class="item.icon">i>
    58.                             <span slot="title">{{item.name}}span>
    59.                         el-menu-item>
    60.                     div>
    61.                 el-menu>
    62.             el-scrollbar>
    63.         div>
    64.         <div class="main-container">
    65.             
    66.             <div class="navbar">
    67.                 <div class="head-lable">
    68.               <span v-if="goBackFlag" class="goBack" @click="goBack()"
    69.               ><img src="images/icons/btn_back@2x.png" alt=""/> 返回
    70.               >
    71.                     <span>{{headTitle}}span>
    72.                 div>
    73.                 <div class="right-menu">
    74.                     <div class="avatar-wrapper">{{ userInfo.name }}div>
    75.                     
    76.                     <img src="images/icons/btn_close@2x.png" class="outLogin" alt="退出" @click="logout"/>
    77.                 div>
    78.             div>
    79.             <div class="app-main" v-loading="loading">
    80.                 <div class="divTmp" v-show="loading">div>
    81.                 <iframe
    82.                         id="cIframe"
    83.                         class="c_iframe"
    84.                         name="cIframe"
    85.                         :src="iframeUrl"
    86.                         width="100%"
    87.                         height="auto"
    88.                         frameborder="0"
    89.                         v-show="!loading"
    90.                 >iframe>
    91.             div>
    92.         div>
    93.     div>
    94. div>
    96. <script src="plugins/vue/vue.js">script>
    98. <script src="plugins/element-ui/index.js">script>
    100. <script src="plugins/axios/axios.min.js">script>
    101. <script src="js/request.js">script>
    102. <script src="./api/login.js">script>
    103. <script>
    104.  
    105.     new Vue({
    106.         el: '#app',
    107.         data() {
    108.             return {
    109.                 defAct: '2',
    110.                 menuActived: '2',
    111.                 userInfo: {},
    112.                 menuList: [
    113.                     // {
    114.                     //   id: '1',
    115.                     //   name: '门店管理',
    116.                     //   children: [
    117.                     {
    118.                         id: '2',
    119.                         name: '员工管理',
    120.                         url: 'page/member/list.html',
    121.                         icon: 'icon-member'
    122.                     },
    123.                     {
    124.                         id: '3',
    125.                         name: '分类管理',
    126.                         url: 'page/category/list.html',
    127.                         icon: 'icon-category'
    128.                     },
    129.                     {
    130.                         id: '4',
    131.                         name: '菜品管理',
    132.                         url: 'page/food/list.html',
    133.                         icon: 'icon-food'
    134.                     },
    135.                     {
    136.                         id: '5',
    137.                         name: '套餐管理',
    138.                         url: 'page/combo/list.html',
    139.                         icon: 'icon-combo'
    140.                     },
    141.                     {
    142.                         id: '6',
    143.                         name: '订单明细',
    144.                         url: 'page/order/list.html',
    145.                         icon: 'icon-order'
    146.                     }
    147.                     //   ],
    148.                     // },
    149.                 ],
    150.                 iframeUrl: 'page/member/list.html',
    151.                 headTitle: '员工管理',
    152.                 goBackFlag: false,
    153.                 loading: true,
    154.                 timer: null
    155.             }
    156.         },
    157.         computed: {},
    158.         created() {
    159.             const userInfo = window.localStorage.getItem('userInfo')
    160.             if (userInfo) {
    161.                 this.userInfo = JSON.parse(userInfo)
    162.             }
    163.             this.closeLoading()
    164.         },
    165.         beforeDestroy() {
    166.             this.timer = null
    167.             clearTimeout(this.timer)
    168.         },
    169.         mounted() {
    170.             window.menuHandle = this.menuHandle
    171.         },
    172.         methods: {
    173.             logout() {
    174.                 logoutApi().then((res) => {
    175.                     if (res.code === 1) {
    176.                         localStorage.removeItem('userInfo')
    177.                         window.location.href = '/backend/page/login/login.html'
    178.                     }
    179.                 })
    180.             },
    181.             goBack() {
    182.                 // window.location.href = 'javascript:history.go(-1)'
    183.                 const menu = this.menuList.find(item => item.id === this.menuActived)
    184.                 // this.goBackFlag = false
    185.                 // this.headTitle = menu.name
    186.                 this.menuHandle(menu, false)
    187.             },
    188.             menuHandle(item, goBackFlag) {
    189.                 this.loading = true
    190.                 this.menuActived = item.id
    191.                 this.iframeUrl = item.url
    192.                 this.headTitle = item.name
    193.                 this.goBackFlag = goBackFlag
    194.                 this.closeLoading()
    195.             },
    196.             closeLoading() {
    197.                 this.timer = null
    198.                 this.timer = setTimeout(() => {
    199.                     this.loading = false
    200.                 }, 1000)
    201.             }
    202.         }
    203.     })
    204. script>
    205. body>
    206. html>

  • 相关阅读:
    RabbitMQ linux 安装
    会议OA之我的会议（排座&送审）
    Leetcode 623. 在二叉树中增加一行
    深入浅出了解华为云API网关的Gzip功能
    【02】数据类型-数据变量
    qt自定义可删除标签控件、自适应布局
    C++ 函数对象（Function Object）是什么？C++重载小括号()是什么作用？
    【CloudCompare教程】001：CloudCompare中文版下载与安装图文教程
    Python开发指南[2]之人脸模型训练与人脸识别
    【SSA-LSTM】基于SSA-LSTM预测研究（Python代码实现）
  • 原文地址：https://blog.csdn.net/m0_62314761/article/details/133306623