码迷,mamicode.com
首页 > Web开发 > 详细

前台商城网站项目心得

时间:2020-01-11 13:10:49      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:div   项目   vuex   lex   鼠标   状态   code   eth   登录   

1:token: 标志用户登录状态 , 存储用 vuex+cookie 实现, 即 vuex 里面设置变量 userToekn, 防止页面刷新 vuex中的变量恢复初始值。保存用户个人信息 ,用vuex 中变量userInfo (vuex+ localstorage), 原理跟token一致。

2:element ui 框架使用注意事项:

2.1:dropDown 下拉菜单:  点击el-dropdown-item 隐藏el-dropdown-menu (ui框架自带的功能),必须把点击事件写在 el-dropdown-item 上 ,应用场景: 

 技术图片

 

 

 产品需求: 鼠标放上去, 个人中心下拉框展示出来, 点击 “退出登录” 执行 loginOut() 方法, 并且下拉框关闭, 代码如下: 

<el-dropdown>
          <div class="drop-top">
            <img v-show="img01" src="~img/index/pSetting/person01.png"  />
            <img
              v-show="!img01"
              src="~img/index/pSetting/person02.png"
              
            />
          </div>
          <el-dropdown-menu slot="dropdown" class="drop-down-con">
            <el-dropdown-item class="flex" @click.native="loginOut">
              <p class="pointer out">退出登录</p>
            </el-dropdown-item>
          </el-dropdown-menu>
</el-dropdown>
js:
methods: {
  // 退出登录
    loginOut() {
      this.LOGIN_OUT();
 }
}

前台商城网站项目心得

标签:div   项目   vuex   lex   鼠标   状态   code   eth   登录   

原文地址:https://www.cnblogs.com/demi-guoba/p/12179463.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!