一、前言
关于vue的知识通过前面的章节我们已经学的差不多了,所以本章将带大家尝试使用vue开发几个常用的控件,深刻体会一下vue提供的便利所在。
注意,由于我个人喜欢使用TypeScript
与less
语法,所以我在vue项目中会直接使用这两者,不会安装、使用这两者的可以参考前面一篇文章。
包括项目建立等基础性内容,这里也不再重复赘述了。
二、按钮组件封装
对于“按钮”这种非常通用的组件来说,一般我们都会将其放在components
文件夹下:
由于实现一个基本的按钮过于简单,所以我这里直接将代码完成如上图。
注意2号位置,使用的是vue的插槽知识,忘了的可以到组件详解回顾。
至于3号样式中的内容就属于css的知识了,用于设置该按钮组件的各种基本样式,不会的自己多敲一敲就好了。
注意less中这里使用的
&
符号,代表的是父标签,比如这里&:hover
等价于.Mbutton:hover
完成代码如下:
<script setup lang="ts">
</script>
<template>
<button class="MButton">
<slot></slot>
</button>
</template>
<style scoped lang="less">
.MButton {
height: 25px;
background-color: #ecf5ff;
color: #48a2ff;
border-radius: 5px;
cursor: pointer;
user-select: none;
border: solid 1px #a0cfff;
&:hover {
background-color: #409eff;
color: #e5f2ff;
}
}
</style>
使用方法如下:
使用vue组件,其实和使用普通的标签没有太大的区别,正如上图所示:
- 首先你需要将组件导入到要使用的页面中
- 然后将导入的该组件直接写在template标签中即可
- 如果想要绑定基本事件,那就直接绑定即可,这里涉及到前面提到过的“透传”概念。
至于写在标签中的字符串“测试按钮”,也会通过插槽传入其内部slot
标签位置。
注意,这里标签的外围之所以会出现一个空隙,是因为其默认行为导致的,你可以在assets/main.css
这个全局样式文件中添加以下代码将其取消掉: