海创软件组-2020920-vue书写官网(element-ui+富文本编辑器)

使用element-ui组件

首页引入了element-ui的表格,主要运用了

海创软件组-2020920-vue书写官网(element-ui+富文本编辑器)

之后再使用rules对这些进行检查名字、密码、编号等,类似正则表达式

主页

海创软件组-2020920-vue书写官网(element-ui+富文本编辑器)

不负后面的文字隔两秒变化一次

腾讯官网写的文字变化比较复杂,使用了动画等,这里我就做了一个简单的,只能实现简单文字变化,首先初始化状态显示韶华,让文字装在arr数组里面,让change=“arr[this.i]”,i从1开始,当i>arr.length-1时让i=0,此时便可以从韶华再开始循环

海创软件组-2020920-vue书写官网(element-ui+富文本编辑器)

div在页面居中

当定义了一个div的时候,想让在页面居中,只需要简单的两行代码

利用定位让文字浮动在标签上

只需要简单的设置一下,可设置.banner_area的定位为relative,让想浮动的文字设置为absolute,再调试left与top,有必要的时候还可以设置z-index的值,让它浮动在最上面

海创软件组-2020920-vue书写官网(element-ui+富文本编辑器)

再设置一个在当前路由下显示样式

这里的:class=”{routerRed:’/recycle’==$route.path}”就是重点,意思就是如果当前路由是’/recycle’的话,那么便有routerRed这个样式否则就没有

引入富文本编辑器

引入的便是下面的这个富文本

海创软件组-2020920-vue书写官网(element-ui+富文本编辑器)
之后解压放到static里面,这里我命名为UE
海创软件组-2020920-vue书写官网(element-ui+富文本编辑器)

此时便可以成功引入富文本编辑器了,但是当你想上传图片等的时候会发现它显示后台配置没有成功

海创软件组-2020920-vue书写官网(element-ui+富文本编辑器)
之后再到刚才的ueditor的vue文件中修改一下,将mounted中的代码修改成以下的样子,之后调用你后台的请求路劲便可以成功

文章知识点与官方知识档案匹配,可进一步学习相关知识Vue入门技能树首页概览23017 人正在系统学习中

来源:chainnnn

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2020年8月16日
下一篇 2020年8月16日

相关推荐