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;
	/* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <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 将事件传递给父级
遇到的坑: 在模板内,不要大写起变量名,模板貌似不支持

猜你喜欢