本人前端css菜的一批
网上搜一搜
css来自: 传送门
自己封装了一下, 效果如下
注意: 能把常复用的代码封装到模板中, 才是精髓
template.css
/* ul li以横排显示 *//* 所有class为menu的div中的ul样式 */div.menu ul {list-style: none;/* 去掉ul前面的符号 */margin: 0px;/* 与外界元素的距离为0 */padding: 0px;/* 与内部元素的距离为0 */width: auto;/* 宽度根据元素内容调整 */}/* 所有class为menu的div中的ul中的li样式 */div.menu ul li {float: left;/* 向左漂移，将竖排变为横排 */}/* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */div.menu ul li a,div.menu ul li a:visited {background-color: #465c71;/* 背景色 */border: 1px #4e667d solid;/* 边框 */color: #dde4ec;/* 文字颜色 */display: block;/* 此元素将显示为块级元素，此元素前后会带有换行符 */line-height: 1.35em;/* 行高 */padding: 4px 20px;/* 内部填充的距离 */text-decoration: none;/* 不显示超链接下划线 */white-space: nowrap;/* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */}/* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */div.menu ul li a:hover {background-color: #bfcbd6;/* 背景色 */color: #465c71;/* 文字颜色 */text-decoration: none;/* 不显示超链接下划线 */}/* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */div.menu ul li a:active {background-color: #465c71;/* 背景色 */color: #cfdbe6;/* 文字颜色 */text-decoration: none;/* 不显示超链接下划线 */}.active {border-bottom: 2px solid red;}template.html
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>自定义模板</title><link href="css/template.css" rel="stylesheet" /></head><body><div id="app"><!--导航菜单模板--><navigation_template :select_length="select_length" :nav_data="nav_data" @click_nav="click_nav"></navigation_template></div><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="template/navigation_template.js"></script><script src="js/template.js"></script></body></html>navigation_template.js
Vue.component('navigation_template', {props:{select_length: Number,nav_data: Array,},template: `<div class="menu"> <ul><li v-for="(item,index) in nav_data" :class="{active:index==select_length}" @click="click_nav(item,index)"><a>{{item.name}}</a></li> </ul></div>`,methods:{click_nav: function(item,index){item.length = index;this.$emit('click_nav',item);},},})template.js
var vm = new Vue({el: '#app',data: {nav_data: [{nav_id: 19, url: 'https://www.baidu.com', name: '百度'},{nav_id: 64, url: 'https://www.csdn.net', name: 'csdn'},{nav_id: 22, url: 'https://cn.vuejs.org', name: 'vue'},{nav_id: 86, url: 'http://www.jfinal.com', name: 'jfinal'},{nav_id: 43, url: 'https://cheyouzheng.top', name: '个人网站'},],select_length: 0},methods: {click_nav: function(item){alert("你点了: "+item.name+" \n当前下标: "+item.length+" \n菜单url: "+item.url+" \n菜单id: "+item.nav_id);this.select_length = item.length;},},});内容解释
nav_data 导航数据
select_length 当前选中的导航标识
click_nav 单击导航事件
$emit 将事件传递给父级
遇到的坑: 在模板内,不要大写起变量名,模板貌似不支持
官方QQ群：
开源地址：
在线留言：