Deng
Deng
vue练习-站酷网站 | odjBlog
    欢迎来到odjBlog的博客!
> web前端学习 > vue练习-站酷网站

vue练习-站酷网站

web前端学习 odjbin 4年前 (2022-06-25) 84次浏览 0个评论

下载依赖速度快

npm install --registry=https://registry.npm.taobao.org

工程初始化

  • cmd 一个文件夹
  • vue create myproject
  • Manually select features
  • Babel
  • Router
  • Vuex
  • CSS Pre-processors
  • Linter / Formatter
  • 3.x
  • n
  • Sass/SCSS (with dart-sass)
  • ESLint + Standard config
  • Lint on save
  • In dedicated config files
  • n
  • npm
  • 回车
  • 打开 myproject 项目,将.git .gitignore 删除

工程目录代码简介及整理

安装插件 ESLint / Vetur
ESLint : 提示语法,语法校验,符合规范
Vetur : 识别 Vue 上的语法,让文件高亮显示
node_modules 放的一些依赖包
获取 : npm install 安装依赖
public : 存放的是默认的 html 模板
.editorconfig : 编辑器的一些默认配置
babel.config.js : vue 的一些用到 babel 的配置
package.json : 存放的是一些依赖包
package-lock.json : 保证多人协作,安装依赖有固定的版本
src 目录 : (源代码目录)
入口文件 : main.js
将 App.vue 改成

<template>
<div id="app">123</div>
</template>
<style lang="scss">
</style>

将 asstes component 的内容文件删了
将 router->index.js ↓删掉
import HomeView from '../views/HomeView.vue'

  • 将 views 的内容文件删了

基础样式集成及开发模拟器的使用

为了让我们的样式在所有浏览器上保持一致
npm install normalize.css@8.0.1 --save

  • main.js : import 'normalize.css'
    在 src 中创建 style/base.css
    html{
    font-size: 100px;
    }
    // 1rem=html font-size

积累写法

适当使用> 子元素选择器

.h_menu .menu_box > ul > li {}

  • 避免影响三级目录的 ul li , A>B 只选择一代。

使用 v-for 循环如何给不同元素设置不同样式

 <div v-for="(item,index) in list" :key="index" :class="'list-' + (index + 1)">
      <img :src="item.url" alt="" class="five_img"/>
    </div>

文字多时,隐藏

.main_content ul li .svg_text {
  width: 86px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

设置 5 倍数的元素的样式

.main_content ul li:nth-child(5n) {
  margin-right: 0;
}

el-cascader-panel 级联选择器样式更改

 <div class="h_menu">
            <div class="menu_box">
              <el-cascader-panel :options="findOptions" :props="props"/>
            </div>
</div>
/*二级目录*/
.topbar .shortcut-links {
  width: 600px;
  margin: 0 auto;
}

.topbar .shortcut-links > ul > li {
  float: left;
  padding: 13px 20px;
  line-height: 31px;
  font-size: 14px;
  position: relative;
}

.topbar .shortcut-links > ul > li:hover .h_menu {
  display: block;
}
.topbar .shortcut-links > ul > li .h_menu {
  position: absolute;
  left: 0;
  display: none;
  width: 152px;
  margin-top: 13px;
  z-index: 9999;
}
.topbar .shortcut-links > ul > li .h_menu .menu_box {
  background: #ffffff;
  width: 152px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 8px 0 8px 0;
  /*float: left;*/
}

.topbar .shortcut-links > ul > li .h_menu .menu_box >a {
  height: 45px;
  line-height: 45px;
  font-size: 14px;
  padding-left: 20px;
  /*padding-top: 5px;*/
  display: block;
}

style
/*取消边框*/
.el-cascader-panel.is-bordered {
  border: none;
  border-radius: 0;
}

.el-cascader-menu {
  color: #1c1f21;
  font-size: 14px;
  min-width: 152px;
}

.el-cascader-menu__list {
  padding: 0;
}

.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
  color: #1c1f21;
  font-weight: normal;
}
/*item 悬挂黄色背景宽间距*/
.el-cascader-node {
  padding-left: 20px;
  height: 45px;
  line-height: 45px;
}
/*二级目录的高度*/
.el-cascader-menu__wrap.el-scrollbar__wrap {
  height: 478px;
}

.el-cascader-menu:last-child .el-cascader-node {
  padding-right: 0;
}
/*item 悬挂黄色背景*/
.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {
  background-color: rgb(255, 242, 0);
}
/*item 右边的小箭头颜色改为黄色[隐藏]*/
.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover .el-icon {
  color: rgb(255, 242, 0);
}

.el-cascader-node__label {
  padding: 0;
}

.el-cascader-node__postfix {
  position: absolute;
  right: 0;
}
/*滚动条到顶部,下部的间距*/
.el-scrollbar__bar {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-radius: 4px;
}

 <el-cascader-panel :options="findOptions" :props="props"/>
/*二级目录的高度*/
/deep/.el-cascader-menu__wrap.el-scrollbar__wrap {
  height: 490px;
}
/*item 悬挂黄色背景宽间距*/
/deep/.el-cascader-node {
height: 45px;
  width: 165px;
 padding: 0;
  margin-left: 10px;
}
/*item 悬挂黄色背景*/
/deep/ .el-cascader-node:not(.is-disabled):hover {
  background: #fff200;
  border-radius: 8px;
}
/*点击后改变颜色,粗细取消点击效果*/
/deep/.el-cascader-node.is-active{
color: #222222;
  font-weight: normal;
}
/*item 左边有个小勾√*/
/deep/.el-icon svg {
  height: 0;
  width: 0;
}
/*发现的二级目录消失*/
.el-cascader-panel{
  display: none;
}
/*取消边框*/
.el-cascader-panel.is-bordered {
 border: none;
}
/*悬挂'发现'目录,出现二级目录*/
.topbar .shortcut-links > ul > li:nth-child(2):hover .el-cascader-panel{
  display: block;
  background-color: #f8f8f8;
  border-radius: 8px 0 8px 8px;
}

扫二维码登录和密码登录页面的切换

@click="handleChangeToLogin()"
  handleChangeToLogin () {
      const qr = document.getElementById('qr_code')
      const login = document.getElementById('login')
      qr.style.display = 'none';
      if (qr.style.display === 'none') {
        login.style.display = 'block'
      }
    },
 handleChangeToQr () {
      const qr = document.getElementById('qr_code')
      const login = document.getElementById('login')
      login.style.display = 'none'
      if (login.style.display === 'none') {
        qr.style.display = 'block'
      }
    }

登录框的滑块验证

<template>
  <div ref="dragDiv" class="drag">
    <div class="drag_bg"></div>
    <div class="drag_text">{{ confirmWords }}</div>
    <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"
         style="position: absolute;top: 0;left: 0;" @mousedown="mouseDownFn($event)"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      beginClientX: 0,           /*距离屏幕左端距离*/
      mouseMoveState: false,     /*触发拖动状态  判断*/
      maxWidth: '',               /*拖动最大宽度，依据滑块宽度算出来的*/
      confirmWords: '请按住滑块,拖动到最右边',   /*滑块文字*/
      confirmSuccess: false           /*验证成功判断*/
    }
  },
  methods: {
    //mousedown 事件
    mouseDownFn: function (e) {
      if (!this.confirmSuccess) {
        e.preventDefault && e.preventDefault()   //阻止文字选中等 浏览器默认事件
        this.mouseMoveState = true
        this.beginClientX = e.clientX
      }
    },
    //验证成功函数
    successFunction () {
      this.confirmSuccess = true
      this.confirmWords = '验证通过'
      if (window.addEventListener) {
        document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)
        document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)
      } else {
        document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {
        })
      }
      document.getElementsByClassName('drag_text')[0].style.color = '#fff'
      document.getElementsByClassName('handler')[0].style.left = this.maxWidth + 'px'
      document.getElementsByClassName('drag_bg')[0].style.width = this.maxWidth + 'px'
    },
    //mousemove 事件
    mouseMoveFn (e) {
      if (this.mouseMoveState) {
        let width = e.clientX - this.beginClientX
        if (width > 0 && width <= this.maxWidth) {
          document.getElementsByClassName('handler')[0].style.left = width + 'px'
          document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'
        } else if (width > this.maxWidth) {
          this.successFunction()
        }
      }
    },
    //mouseup 事件
    moseUpFn (e) {
      this.mouseMoveState = false
      var width = e.clientX - this.beginClientX
      if (width < this.maxWidth) {
        document.getElementsByClassName('handler')[0].style.left = 0 + 'px'
        document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'
      }
    }
  },
  mounted () {
    this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth
    document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)
    document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)
  }
}
</script>
<style scoped>
.drag {
  position: relative;
  background-color: #e8e8e8;
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border: 1px solid #ccc;

}

.handler {
  width: 40px;
  height: 32px;
  border: 1px solid #ccc;
  cursor: move;
  margin-top: -1px;
  margin-left: -1px;
}

.handler_bg {
  background: #fff url('../assets/images/arrow-r.png') no-repeat center;
  background-size: 25px;
}

.handler_ok_bg {
  background: #fff url('../assets/images/√.png') no-repeat center;
  background-size: 18px;
}

.drag_bg {
  background-color: #7ac23c;
  height: 32px;
  width: 0;
}

.drag_text {
  position: absolute;
  top: 0;
  width: 100%;
  font-size: 12px;
  color: #706f6f;
}

</style>

el-input 聚焦后背景变白

.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  background-color: #fff;
}

el-input placeholder 颜色设置

.el-input__inner::placeholder{
  color: #666666;
}

判断 el-checked 是否选中,未选中则提示请勾选

export default {
mounted() {
    const pleaseFit=document.getElementById('pleaseFit');
    $(".el-checkbox input").change(() => {
      if ($(".el-checkbox input[type='checkbox']").is(':checked') == true) {
        pleaseFit.style.display='none'
      } else {
        pleaseFit.style.display='block'
      }
    })
  }
  }

el-input 在 style 全局样式,会影响到其他不符合该样式的位置

  • 可以在 style scoped> 写,加上/deep/

/deep/ .el-input__wrapper {
  box-shadow: 0 0 0 0  inset;
  background-color: rgb(255, 242, 0);
}

el-carousel 走马灯修改 Carousel 左右两侧箭头字体大小

/deep/.el-carousel__arrow i {
          font-size: 29px !important;
        }

页面向下滑动导航栏固定

.main_nav_fixed {
  position: sticky;
  top: 0;
  z-index: 999;
}

固定在右方的,悬挂出现二维码

<div class="share_box">
      <img src="../../assets/images/share_qr.png" alt=""/>
    </div>
.share_box{
  width: 70px;
  height: 131px;
  top: 300px;
  right: 10px;
  cursor: pointer;
  position: fixed;
  z-index: 999;
  background: url("../../assets/images/share_wx.jpg")  no-repeat;
  background-size: 100% 100%;
}
.share_box img{
  width: 100px;
  height: 100px;
  display: none;
}
.share_box:hover img {
  position: absolute;
  top: 50%;
  margin-top: -50px;
  right: 82px;
  display: block !important;
}

nth-child(n)指的是在父元素中所有的元素的顺序

  • 写代码要根据盒子以及内容写
  • bottom：0；要相对于父元素的 height 实现，如果父父元素的 height 大于父元素的 height，，则会按照父父元素的 height 来实现 bottom：0；来实现。【适当删除父父元素的 height，一板块通常不用设置总 height】

悬挂图片缓缓放大的动画效果

.gc_project .item_img > img {
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}
.gc_project .item_img > img:hover {
  transform: scale(1.05);
  box-shadow: rgb(0 0 0 / 23%) 0 4px 14px 0;
}

滚动条修改

.mleft::-webkit-scrollbar{
   width: 6px;
  background-color: #f8f8f8;

}
.mleft::-webkit-scrollbar-thumb{
  width: 6px;
  background-color: #adacac;
  border-radius: 4px;
}

head 区 '发现' 实现交互效果 [该首页最恼火的]

todo head 区'发现'交互实现思路:

  • ①观察该区结构,一个大模块,其中分为左中右三个模块,并依次写出三个模块的代码,
  • ②左侧区域: 要展示的效果有: 鼠标上下移动,所经的 menuItem 会展现黄色背景, 则引用 vue 的 ref 属性对 DOM 元素进行动态绑定.
    • 注意:ref 需要在 dom 渲染完成后才会有,在使用的时候确保 dom 已经渲染完成, 比如在生命周期 mounted(){}钩子中调用. this.$refs.xxx:减少获取 dom 节点的消耗
  • ③左侧区域过滤到右侧区域,展示对应的详情页: mleftIn(item,index)函数通过传输 v-for 循环中数组 menuList 的 item 每一项为媒介, 而数据中 menuList 中包含左侧数据 menuItem 与右侧每一页的标题 menu 相同, 从而将左侧和右侧数据绑定, 故而形成从左侧过滤到右侧区域是固定的详情页内容.
  • ④页面第二次未刷新之前(首次进入页面渲染), 鼠标悬挂'发现',要出现第一个'精选'详情页及'精选'item 背景变黄: 鼠标移出该元素[二级目录整个大模块]之外,则触发 mouseleave 事件,初始化数据.
  • ⑤第二次页面刷新之后,初始化数据: 采用 mounted 生命周期[渲染成 html 后调用]: 使鼠标悬挂'发现',第一个 menu-item 显示黄色
 <li class="find">
          <a href="#">发现</a>
          <div class="h_menu" @mouseleave="mleftLeave()">
            <div class="menu_box mleft">
              <!--              <a href="">精选</a>-->
              <a v-for="(item,index) in menuList" :key="index" :ref="'test'+index" href="javascript:;"
                 @mouseover="mleftIn(item,index)">{{ item.menu }}</a>
              <!--              <el-cascader-panel :options="findOptions" :props="props" />-->
            </div>
            <div class="mright">
              <div class="cate-box">
                <a class="cate-title" href="">
                  <img :src="data.url" alt="">
                  <span>{{ data.menu }}</span>
                </a>
                <div class="subCate">
                  <a v-for="(itemOne) in data.items" :key="itemOne">{{ itemOne.text }}</a>
                </div>
              </div>
            </div>
            <div class="right_bar">
              <div class="icons">
                <a>
                <span class="icon-box">
                  <span class="tangle-1"></span>
                  <span class="tangle-2"></span>
                  <i class="ani-star"></i>
                  <span class="tangle-3"></span>
                </span>
                  <span class="icon-text">收藏夹</span>
                </a>
                <a>
                  <img alt="" src="../assets/images/icon-header-discover-designer.png">
                  <span>设计师</span>
                </a>
                <a>
                  <img alt="" src="../assets/images/icon-header-discover-focus.png">
                  <span>榜单</span>
                  <!--                <sup class="subNavDot"></sup>-->
                </a>
              </div>
              <div class="ad_box">

              </div>
            </div>
          </div>
        </li>
  data: {},
      menuList: [
        {
          menu: '精选',
          url: require('../assets/images/zuanshi.png'),
          items: [
            { text: '运营设计' },
            { text: '包装' },
            { text: '动画/影视' },
            { text: '人像摄影' },
            { text: '商业插画' },
            { text: '电商' },
            { text: 'APP 界面' },
            { text: '艺术插画' },
            { text: '家装设计' },
            { text: '海报' },
            { text: '文章' }
          ]
        },
        { menu: '平面' },
        { menu: 'UI' },
        { menu: '网页' },
        { menu: '插画' },
        { menu: '动漫' },
        { menu: '摄影' },
        { menu: '空间' },
        { menu: '工业/产品' },
        { menu: '三维' },
        { menu: '影视' },
        { menu: '手工艺' },
        { menu: '纯艺术' },
        { menu: '服装' },
        { menu: '其他' }
      ],
 //渲染成 html 之前调用,初始化一些属性值 [鼠标悬挂'发现',就出现第一个精选页面]
  created () {
    this.data = this.menuList[0]
  },
  //渲染成 html 后调用 [鼠标悬挂'发现',第一个 menu-item 显示黄色](页面刷新了之后的)
  mounted () {
    this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'
  },
  methods: {
    //鼠标进入函数
    mleftIn (item, index) {
      //获取 menuList 中每个 menuItem 字符串的长度
      let menuSize = this.menuList.length
      for (let i = 0; i < menuSize; i++) {
        //for 循环,i 如果小于 menuSize,则置于 menuItem 颜色为灰色,实现切换效果
        this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'
      }
      //跳出 for 循环,由左侧移向右侧详情页时,其 menuItem 的颜色为黄色
      this.$refs['test' + index][0].style.backgroundColor = 'rgb(255, 242, 0)'
      //将右侧数据设置为 item,显示数据
      this.data = item
    },
    //鼠标进入函数
    //注意: mouseleave:是鼠标移出该元素之外,则触发 mouseleave 事件
    // mouseout : 是当指针离开该元素及其所有后代时，会触发 mouseleave
    // 而当指针离开元素或离开元素的后代（即使指针仍在元素内）时，也会触发 mouseout 事件
    mleftLeave () {
      //获取 menuList 中每个 menuItem 字符串的长度
      let menuSize = this.menuList.length
      for (let i = 0; i < menuSize; i++) {
        this.$refs['test' + i][0].style.backgroundColor = '#f8f8f8'
      }
      // 跳出循环,浏览完'发现',鼠标移出,置于右侧数据为第一个精选数据
      this.data = this.menuList[0]
      //鼠标移出事件,置于第一个 menuitem 为黄色[未刷新时的设置]
      this.$refs['test' + 0][0].style.backgroundColor = 'rgb(255, 242, 0)'

      // this.data = {}
      // this.$refs['test'+index][0].style.backgroundColor = '#f8f8f8'
      // console.log('滚出去')
    },
}
喜欢 (0)赏
[]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi，您需要填写昵称和邮箱！

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
已稳定运行：3年255天3小时47分