文章目录前言第一种方法1.安装scss包2.新建一个样式文件引入第二种方法所以我们可以结合第一种和第二种情况推荐使用前言用于实现不同功能的系统往往需要独特的主题色,本文用于更改elementUI的主题色。第一种方法1.安装scss包npminstall--save-devsass-loadernpminstall--save-devnode-sass查看package.json中的依赖2.新建一个样式文件element-variables.scss(该文件位置与下文main.js中引入的位置需要保持一致)写入以下内容:/*改变主题色变量*/$--color-primary:teal;/*改变i
文章目录前言第一种方法1.安装scss包2.新建一个样式文件引入第二种方法所以我们可以结合第一种和第二种情况推荐使用前言用于实现不同功能的系统往往需要独特的主题色,本文用于更改elementUI的主题色。第一种方法1.安装scss包npminstall--save-devsass-loadernpminstall--save-devnode-sass查看package.json中的依赖2.新建一个样式文件element-variables.scss(该文件位置与下文main.js中引入的位置需要保持一致)写入以下内容:/*改变主题色变量*/$--color-primary:teal;/*改变i
使用el-date-picker日期选择器选择的日期是string类型且是箭头所指的这种格式解决方法一:1、在这个组件后面加上这两个,可以修改格式2、在后端实体类上加上注解即使前端的是string类型,但是通过json自带的格式匹配注解工具,将string转换成LocalDateTime类型@JsonFormat(pattern="yyyy-MM-ddHH:mm:ss",timezone="GMT+8")privateLocalDateTimeuserBirthday;解决方法二:用npm下载一个moment.js1、npminstallmoment--save2、在main.js中注册imp
element-ui版本:2.15.7DatePicker日期选择器element中的日期选择器有一个月份选择器。它的数据格式是yyyy-MM格式的,既有月份又有年,而我们现在有一个不一样的需求,那就是只要月份不要年份,这里可以使用它自带的属性format和value-format来更改它的显示格式和数据类型。el-date-pickerv-model="data"type="month"format="M月"value-format="MM"placeholder="选择月份">/el-date-picker>但这样还有一点美中不足的是日期下拉框中还有年份信息,这样体验感不好。为了解决这个我
element-ui版本:2.15.7DatePicker日期选择器element中的日期选择器有一个月份选择器。它的数据格式是yyyy-MM格式的,既有月份又有年,而我们现在有一个不一样的需求,那就是只要月份不要年份,这里可以使用它自带的属性format和value-format来更改它的显示格式和数据类型。el-date-pickerv-model="data"type="month"format="M月"value-format="MM"placeholder="选择月份">/el-date-picker>但这样还有一点美中不足的是日期下拉框中还有年份信息,这样体验感不好。为了解决这个我
目录一、效果图二、项目结构三、界面效果和代码实现1.路由注册2.个人主页实现3.编辑弹窗按钮实现4.个人简介实现5.发贴页实现6.收藏页实现7.关注和收藏页实现四、总结一、效果图仿照原神社区的个人中心写了个个人中心界面,下图分别为原神社区个人中心主页和我画的个人中心的效果图:原神社区个人中心效果图:我画的个人中心效果图:下面上代码二、项目结构router文件夹里的index.js为路由注册文件,person文件夹里Info文件为个人简介页,MyArticle文件为发布页,MyCollect为文件收藏页,MyFanAndFollow文件为粉丝和关注页,Personal文件为个人中心主页,Pers
目录一、效果图二、项目结构三、界面效果和代码实现1.路由注册2.个人主页实现3.编辑弹窗按钮实现4.个人简介实现5.发贴页实现6.收藏页实现7.关注和收藏页实现四、总结一、效果图仿照原神社区的个人中心写了个个人中心界面,下图分别为原神社区个人中心主页和我画的个人中心的效果图:原神社区个人中心效果图:我画的个人中心效果图:下面上代码二、项目结构router文件夹里的index.js为路由注册文件,person文件夹里Info文件为个人简介页,MyArticle文件为发布页,MyCollect为文件收藏页,MyFanAndFollow文件为粉丝和关注页,Personal文件为个人中心主页,Pers
作为一个后端开发人员,因工作需要,前端也要写,最近刚开始使用前端vue和elementui开发前端页面时,碰到了一些问题。产品图上的样式与elementui组件样式不同。后经查阅资料发现了更改elementui组件自带样式的方法,现分享如下:如果我们想修改一个button按钮的样式该如何做:首先,我们在浏览器用F12打开开发者模式,并点击此功能后点击我们想要更改的样式标签 我们可以看到在标签上显示的一些class属性.el-button(按钮) .el-button-warning(按钮警告颜色) .el-button-mini(按钮size=“mini”的大小),然后我们就可以通过::v-
ElementUItable文字超出一行,隐藏多余文字,移入显示tips。今天写项目的时候,实现在table里面的文字过长,需要做悬浮文字提示的功能给el-table-column设置:show-overflow-tooltip="true"属性可以使单元格超出的内容自动折叠显示,当鼠标移入时单元格的上方会自动弹出一个小tips来显示单元格得所有内容。这样写很简洁,不需要额外用插槽来写。就很nice!如果你觉得展示的文字过长的时候,像下面这样,文字过多视觉体验不是很好, tips的class名为.el-tooltip__popper,开始我试着直接通过它class名来给tips设置样式。.el
需求:1.表单输入信息2.上传Excel附件3.下载附件模板4.限制上传文件的格式、文件的大小、文件的数量5.将表单和Excel文件一起提交给后端效果图:样式部分下载模板将文件拖到此处,或点击上传提交data部分代码data(){return{peopleform:{name:'',phone:'',address:'',},fileList:[]}},method中的代码methods:{//覆盖默认的上传行为httpRequest(raw){this.fileList.push(raw)},//上传前beforeUpload(file){letfileSize=file.sizeconst