家教网站开发日志（三）

斯卡文计算机术士

已于 2022-10-19 23:10:16 修改

阅读量133

点赞数

分类专栏：实训项目——家教网站开发日志文章标签： vue.js elementui 前端

于 2022-10-19 23:05:54 首次发布

本文链接：https://blog.csdn.net/qq_53401568/article/details/127416999

版权

实训项目——家教网站开发日志专栏收录该内容

3 篇文章 1 订阅

订阅专栏

Element-UI过渡动画

官方提供了多种过度动画，使用transition的name属性进行引入（以淡入淡出为例）

<transition name="el-fade-in-linear">
    <template v-show="show">
        ......
    </template>
</transition>

开始动画（淡入）及结束动画（淡出）都是由v-show决定的

当show变量为true时，播放动画淡入

当show变量为false时，播放动画淡出

假如要开发如图的登入界面，使用switch开关切换注册与登入界面

使用一个router-view和一个与v-show绑定的控制变量是显然不够的

（关于如何使用多个router-view，下文将说明）

因为一组过度动画需要占用v-show的两个状态（true和false），而且一个登入和注册组件都需要过度动画，所有使用一个v-show控制两个过度动画是不可能的，故应使用两个v-show分别控制两个router-view；同时也避免了上一个结束动画未完成，下一个开始动画一开始，导致页面效果很奇怪

代码如下：

<transition name="el-fade-in">
    <div v-show="loginType">
        <router-view name="login"></router-view>
    </div>
</transition>
<transition name="el-fade-in">
    <div v-show="registerType">
        <router-view name="register"></router-view>
    </div>
</transition>


//<script>的data域中
data() {
    loginType:'',
    registerType:'',
}

//使用钩子方法初始化
created() {
    //初始载入的组件为登入组件
    this.loginType=true
    this.registerType=false
    this.$router.push('/enter/login', () => {})
}

使用watch监听路由路径的变化

使用watch可以大量简化代码，因为如果不使用watch方法每一次该页面的路由变化都要修改loginType和registerType的bool值

而使用watch进行监听仅需这样

//<script>中
//showSwitch控制switch开关的隐藏&显示
//loginType控制登入组件的隐藏&显示
//registerType控制注册组件的隐藏&显示
watch:{
    $route: {
      handler(path){
        if(path.name==='login'){
          this.loginType=true
          this.registerType=false
        }else if(path.name==='register')
        {
          this.registerType=true
          this.loginType=false
        }
      },
      deep: true
    }
  },

handle:watch中需要具体执行的方法
deep：需要监听的数据的深度，一般用来监听对象中某个属性的变化,数组字符串一般不需要

设置多个router-view

export default new Router({
  routes: [
    {
      path: '/enter',
      name:'enter',
      component:Enter,
      children:[
        {
          path:'login',
          name:'login',
          components: {login:Login}
        },
        {
          path:'register',
          name:'register',
          components: {register:Register}
        },
      ]
    },
  ]
})

其中在components中的key：value；key对应特点router-view的name属性，value则对应要载入的组件

如（以登入组件为例）：

<router-view name="login"></router-view>

{
    path:'login',
    name:'login',
    components: {login:Login}
},

使用el-image引入图片

使用html中的background引入图片有许多不便

而使用el-image进行就相当方便

<el-image :src="require('../assets/img/XWY_icon.png')"
    style="height:50px;width:50px;margin: 5px">
</el-image>

:src="require('图片路径')"

使用如上属性即可引入图片

使用普通的CSS属性height，width即可控制图片大小

如何跳转至页面的指定位置

类似html使用<a>元素跳转至页面的某一位置

点击关于我们跳转至底部的信息

代码实现 :

<el-dropdown>
    <div style="margin-top: 1px">
        <i class="el-icon-setting" style="font-size: 20px;color: white;cursor:pointer"/>
    </div>
    <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="link1">忘记密码</el-dropdown-item>
        <el-dropdown-item @click.native="goTo('footer')">关于我们</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>
...
<el-footer class="footer" height=280px id="footer">
    <el-row style="margin-top: 60px">
        <el-col :offset="16" :span="3">
            <el-image :src="require('../assets/img/Contact.png')" style="height: 150px;width: 150px"></el-image>
          </el-col>
          <el-col :span="5">
            <el-col><h1>联系我们</h1></el-col>
            <el-col><span>官方QQ:XXXXXXXXXX</span></el-col>
            <el-col><span>官方微信:XXXXXXXXXX</span></el-col>
            <el-col><span>官方电话:XXXXXXXXXXX</span></el-col>
            <el-col><span>官方邮箱:XXXXXXXXXX@XX.com</span></el-col>
        </el-col>
    </el-row>
</el-footer>

//<script>的method域中
goTo(id) {
    //获取要去的元素位置
    let pos = document.getElementById(id);
    //使用scrollIntoView进行滑动
    pos.scrollIntoView()
},

使用Element-UI中的下拉菜单绑定点击事件是应使用原生的点击事件即

@click.native="回调函数"