vue 自定义模板
本人前端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;
/* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到
标签为止。 */
}
/* 所有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
<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: `
`,
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 将事件传递给父级
遇到的坑: 在模板内,不要大写起变量名,模板貌似不支持