教你用Vue插槽实现一个简单的电影网站导航栏

飞熊 • 2023年6月20日下午5:28 • 后端笔记 • 阅读 254

用插槽实现一个导航栏

每次访问电影网站，都会看到一个导航栏，今天就仿照一个导航栏结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        * {
          margin: 0;
          padding: 0
        }
        ul {
          list-style: none;
        }
        .c-nav {
          width: 900px;
          height: 42px;
          margin: 0 auto;
          border-radius: 5px;
          position: relative;
        }
        .c-nav li {
          float: left;
          width: 83px;
          text-align: center;
          line-height: 42px;
        
        }
        .c-nav li a {
          color: rgb(253, 252, 252);
          display: inline-block;
          height: 42px;
        }
        header {
          background: rgb(0, 0, 0);
        }
        .c-nav li.current a {
          color: rgb(54, 17, 221);
          background-color: rgb(255, 0, 0);
        }
      </style>
      <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component>
          <!-- 定义导航栏结构 -->
          <template v-slot:header>
            <div id="c_nav" class="c-nav">
              <ul><li><a>电影院</a></li></ul>
              <ul ref='nav'>
                <li v-bind:class="name" v-for="item,key in list" @mouseenter="current(key)" @mouseleave="cancel(key)" :id=key>
                  <a href="https://www.baidu.com/">{{item}}</a>
                </li>
              </ul>
            </div>
          </template>
        </my-component>
      </div>
      <script>
        // 注册组件
        Vue.component('my-component', {
          render(createElement) {
            return createElement('div', [
              createElement('header', this.$slots.header),
            ])
          }
        })
        var vm = new Vue({
          el: '#app',
          // 定义初始数据
          data: {
            list: ['首页', '电影', '电视剧', '综艺', '动漫'],
            name:' '
            
          },
          methods: {
            // 定义事件处理函数
            current(key) {
              vm.$refs.nav.getElementsByTagName('li')[key].className = 'current'; //鼠标悬停
            },
            cancel(key) {
                vm.$refs.nav.getElementsByTagName('li')[key].className = ''; //鼠标离开
            }
          }
        })
      </script>    
</body>
</html>