iconfont库的使用:1.在官网搜索所需图标;
2.图标添加入库,再添加至项目
3.我的项目中选择fontclass,生成代码,再将生成链接引入
<link rel="stylesheet" href="//at.alicdn.com/t/font_3221528_s6sabofv1wk.css">
4.再在页面中引用
<i class="iconfont icon-cry" ></i> // 其中icon-cry就是从阿里icon上面复制下来的代码
页面跳转:添加方法:this.$router.push('/dashboard')
Vue ElementUI dialog弹出框被遮罩层盖住
解决办法:在 <el-dialog>中添加:append-to-body="true"属性
el-dialog 内容居中
解决办法:可添加样式如下
<style>
.el-dialog .el-dialog__body {
display: flex;
justify-content: center;
align-items: center;
}
</style>
qq截图:ctrl+alt+A
button居中方法
<div align="center">
<button type="button"> 点击</button>
</div>
vscode配置快捷键
:
上方文件-首选项-用户代码片段-搜一个你需要的配置文件-替换模板格式代码
如vue配置
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
"export default {",
" data() {",
" return {}",
" }",
"}",
"</script>",
"<style scoped></style>",
"",
],
"description": "Log output to console"
}
}
注意:prefix 这个字段是快捷键匹配(可以自己定义)
margin:层的边框以外留的空白
padding:层的边框到层的内容之间的空白
使按钮和其后文字处于同一行
解决方法:调css 使height和line-height一样高
如:
.firstline {
height: 50px;
line-height: 50px;
}
iconfont图库使用现在只会用标签(引用链接),但是此法在其中有颜色显示不了,还是得下载引用svg。但是最后解决了。加iconfont的class
时同时加一个改变颜色的class,再css改,颜色改变了。(不规范,但可行)