vue如何使用elementui,vue element ui教程

　　某视频剪辑软件使用元素写东西让我感觉到了特别的方便，下面这篇文章主要给大家介绍了关于如何利用某视频剪辑软件元素做个小页面的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下

前言

　　直接看效果，干啥慢慢猜~

项目结构

　　这个的话可以看到分了一些组件嘛。然后总体还是某视频剪辑软件元素后面活下来了再用uniapp做移动端嘛。

MarkDown编辑器

　　这个是咱们比较主要的功能嘛。

　　也是用了米冯这个开源的降价组件嘛。

　　然后是文章上传嘛，这里有个弹窗嘛。

　　代码如下

　　模板

　　div id=main

　　差异

　　输入type= text v-model= form。标题 placeholder=请输入文章标题需要

　　el-button @click="提交"类型="主要"发布文章/el-button

　　/div

　　马文-编辑

　　v-model=form.value

　　ref=md

　　@change=change

　　style= min-height:800 px；宽度：100%

　　/div

　　埃尔对话

　　style= width:80%；边距：0自动

　　title=文章提交

　　:可见。sync= dialogFormVisible

　　el-form :model=ruleForm

　　:rules=rules

　　ref=ruleForm

　　标签宽度= 100像素

　　class=demo-ruleForm

　　El-表单-项目标签=文章封面 URL

　　埃尔输入v-model=ruleForm.url/el输入

　　/El-表单-项目

　　El-表单-项目标签=选择社区prop=社区

　　El-select v-model=规则形式。社区 placeholder=请选择发布社区

　　埃尔选项标签=社区一value=A/el选项

　　埃尔选项标签=社区二value=B/el选项

　　/el-select

　　/El-表单-项目

　　El-表单-项目标签=选择专栏prop=社区

　　El-select v-model=规则形式。列“placeholder=”请选择发布专栏

　　埃尔选项标签=java 值=java/el选项

　　埃尔选项标签=python 值=python/el选项

　　/el-select

　　/El-表单-项目

　　El-表单-项目标签=选择权限prop=level

　　El-select v-model=规则形式。级别“placeholder=”请选择文章权限

　　埃尔选项标签=私密value=0/el-option

　　埃尔选项标签=公开阅览value=1/el-option

　　埃尔选项标签=公开读写权限value=2/el-option

　　埃尔选项标签=完全公开（所有人持有) value=3/el-option

　　/el-select

　　/El-表单-项目

　　El-表单-项目标签=文章类型prop=type

　　El-radio-group v-model=规则形式。类型

　　埃尔-无线电标签=原创value=0/el-radio

　　埃尔-无线电标签=转载value=1/el-radio

　　埃尔-无线电标签=翻译value=2/el-radio

　　/el-radio-group

　　/El-表单-项目

　　El-表单-项目标签=文章描述表名

　　El-input type= textarea v-model=规则形式。desc /El-输入

　　/El-表单-项目

　　/el格式

　　div style= margin:0 auto slot= footer class= dialog-footer

　　El-button @ click= dialogFormVisible=false 取消/el-button

　　El-button type= primary @ click= submit form( rule form )确定/el-button

　　/div

　　/el-dialog

　　/div

　　/模板

　　脚本

　　从" mavon-editor"//导入{ mavonEditor }引入马文-编辑组件

　　导入mavon-editor/dist/CSS/index。CSS //引入组件的样式

　　导出默认值{

　　//注册

　　姓名："写博客",

　　组件：{

　　mavonEditor，

　　data() {

　　返回{

　　dialogFormVisible: false，

　　表单：{

　　值：,//输入的减价

　　html: ，//及时转的超文本标记语言

　　ruleForm:this.ruleForm，

　　标题： ,

　　规则形式：{

　　url: ，

　　社区：,

　　列： ,

　　级别：,

　　desc: ，

　　类型：,

　　规则：{

　　desc: [

　　{必需：真，消息：请输入文章描述，触发：模糊 },

　　{最小值：1,最大值：150,消息：长度在一到150 个字符，触发器：模糊 }

　　社区：[

　　{必需：真，消息：请选择发布社区，触发：模糊 },

　　级别：[

　　{必需：真，消息：请选择文章权限，触发：模糊 },

　　类型：[

　　{必需：真，消息：请选择文章类型，触发器：更改 }

　　}

　　方法：{

　　//所有操作都会被解析重新渲染

　　change(value，render){//值为编辑器中的实际内容，即减价的内容，渲染为被解析成的超文本标记语言的内容

　　this.form.html=渲染；

　　//提交

　　提交(){

　　//点击提交后既可以获取超文本标记语言内容，又可以获得减价的内容，之后存入到服务端就可以了

　　控制台。日志(这个。形式。值)；

　　控制台。日志(这个。形式。html)；

　　this.dialogFormVisible=true

　　submitForm(formName) {

　　这个参考文献[表单名]。验证((有效)={

　　如果（有效){

　　if (this.form.title===){

　　警报(标题不能为空)

　　}

　　警报(提交!);

　　this.dialogFormVisible=false

　　console.log(this.ruleForm)

　　}否则{

　　console.log(错误提交！);

　　返回错误的

　　}

　　});

　　已安装(){

　　}

　　/脚本

　　样式范围

　　#中心{

　　保证金-最高：5%;

　　宽度：96%;

　　身高：96%;

　　边框：1px

　　}

　　img {

　　边距：自动；

　　左边距：30%;

　　身高：40%;

　　宽度：40%;

　　位置：相对；

　　top:10%；

　　}

　　输入{

　　宽度：85%;

　　高度：30px

　　边框宽度：2px

　　边框半径：5px

　　边框颜色：# 00 C4 ff；

　　边框-底部-颜色：# 2c 7 EEA

　　颜色：# 586e75

　　字号：15px

　　}

　　/风格

　　这次的前端代码其实是完全重构，原来上个学期期末写的玩意咋说呢，还不如我以前直接用姜戈做的圆顶。做着做着变成了个人博客，然后又重新改回多人社区，赶鸭子上架连文档都没有搞好，所有后面我直接摆烂了，本来寒假要动工的，但是学习任务拉满，唉。

消息模块

　　这个也是一个比较重要的模块，因为这个消息可以把几个模块联合起来。

　　先来说说那个标号

　　是咋来的，这个其实就是elementui里面的这个

　　然后是咱页面

　　后面的几个其实是类似的

　　这个你们直接看着写

消息导航

　　首先是咱的消息导航代码

　　模板

　　差异

　　El-container style= height:500 px；边框：1px纯色#eee

　　El-aside width= 200 px style= background-color:white

　　el-menu :default-openeds=[1]

　　埃尔-子菜单索引=1

　　模板槽=标题

　　i class=el-icon-message/i问答消息/模板

　　埃尔-菜单-项目-组

　　路由器-link class= alink to=/notices/a comment

　　埃尔菜单项索引=1-1

　　El-badge:value= 5 :max= 99 class= item

　　评论消息

　　/el-badge

　　/El-菜单项

　　/路由器链接

　　路由器-link class= alink to=/notices/thumb news

　　埃尔菜单项索引=1-2

　　点赞消息

　　/El-菜单项

　　/路由器链接

　　路由器-链接到=/通知/回复消息 class= alink

　　埃尔菜单项索引=1-3

　　回答消息

　　/El-菜单项

　　/路由器链接

　　/El-菜单项-组

　　/El-子菜单

　　埃尔-子菜单索引=2

　　模板slot= title I class= El-icon-message /I文章消息/模板

　　埃尔-菜单-项目-组

　　路由器-link to=/notices/article comment class= alink

　　埃尔菜单项索引=2-1

　　文章评论

　　/El-菜单项

　　/路由器链接

　　路由器-link class= alink to=/notices/thumb文章

　　埃尔菜单项索引=2-2

　　文章点赞

　　/El-菜单项

　　/路由器链接

　　路由器-link class= alink to=/通知/文章推送

　　埃尔菜单项索引=2-3

　　文章推

　　/El-菜单项

　　/路由器链接

　　/El-菜单项-组

　　/El-子菜单

　　埃尔-子菜单索引=3

　　模板slot= title I class= El-icon-message-solid /I系统通知/模板

　　埃尔-菜单-项目-组

　　路由器-link class= alink to=/通知/审核信息

　　埃尔菜单项索引=3-1

　　审核消息

　　/El-菜单项

　　/路由器链接

　　路由器-link class= alink to=/notices/active message

　　埃尔菜单项索引=3-2

　　活动消息

　　/El-菜单项

　　/路由器链接

　　/El-菜单项-组

　　/El-子菜单

　　埃尔-子菜单索引=4

　　模板slot= title I class= El-icon-s-custom /I好友/模板

　　埃尔-菜单-项目-组

　　路由器-link class= alink to=/notices/friend verification

　　埃尔菜单项索引=4-1

　　好友验证

　　/El-菜单项

　　/路由器链接

　　路由器-link class= alink to=/通知/朋友消息

　　埃尔菜单项索引=4-2

　　好友消息

　　/El-菜单项

　　/路由器链接

　　/El-菜单项-组

　　/El-子菜单

　　埃尔-子菜单索引=5

　　template slot= title I class= El-icon-setting /I设置/模板

　　路由器-link class= alink to=/notices/notice settings

　　埃尔-菜单-项目-组

　　埃尔菜单项索引=5-1 消息设置/El-菜单项

　　/El-菜单项-组

　　/路由器链接

　　/El-子菜单

　　/el-menu

　　/El-旁白

　　埃尔容器

　　style= background-image:URL(/static/logo/notices BG。jpg)；

　　背景-重复：不重复；

　　背景尺寸：100% 100%;

　　埃尔梅因

　　div style= width:80%；边距：0自动

　　路由器视图/路由器视图

　　/div

　　/el-main

　　/El-容器

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称：通知，

　　data() {

　　返回{

　　}

　　/脚本

　　样式范围。埃尔标题{

　　背景色：# e5e F2

　　颜色：# 333;

　　行高：60px

　　}。El侧{

　　颜色：# 333;

　　}。路由器-链路-活动{

　　文字-装饰：无；

　　}。alink{

　　文字-装饰：无；

　　}

　　/风格

内容代码（消息）

　　模板

　　div style= background-color:rgba(239，250，246，0.53)

　　英国铁路公司

　　div class= head style= width:90%；边距：0自动

　　El-button style= margin-left:80% type= primary plain清空所有/el-button

　　/div

　　英国铁路公司

　　div style= width:80%；左边距：1% class=main

　　El-card shadow= hover v-for=(message，index) in Messages :key=index

　　div style=height:100px

　　div style= width:14%；身高：100%;边框半径：100像素；显示：内嵌块；

　　图片

　　style= width:100%；身高：100%;边框半径：100像素

　　src=/静态/临时/头部图片。 jpg

　　class=" image "

　　/div

　　div style= display:inline-block；左边距：5%

　　 p class=邮件" {message.from} "评论了你nbspnbspi class= El-icon-info /I/p

　　p style=font-weight:bold

　　{{message.info}}/p

　　消息

　　来自问答：{{message.quiz}}

　　/div

　　div style= display:inline-block；左边距：20%

　　el按钮图标=el图标-删除/el按钮

　　/div

　　英国铁路公司

　　/电子名片

　　/div

　　英国铁路公司

　　div class= footer style= margin:0 auto；宽度：100%;

　　div class=block

　　埃尔分页

　　背景

　　：总计=总计

　　/El-分页

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称：一个注释，

　　data(){

　　返回{

　　总计：999,

　　消息：[

　　{info:Huterox是最好的并且非常地帅气，来自： Futerox ，测验:小姐姐老是不回你信息怎么办，数据: 2022-3-27},

　　]

　　}

　　/脚本

　　样式范围。消息{

　　宽度：20em

　　溢出：隐藏；

　　文本溢出：省略号；

　　空白：nowrap

　　}

　　/风格

设置模块

　　这个不一样的是咱的设置模块

　　模板

　　div style= width:70%；

　　埃尔卡阴影=盘旋

　　div style= display:inline-block；左边距：5%

　　问答评论消息提醒

　　/div

　　div style= display:inline-block；左边距：60%

　　埃尔开关

　　v-model= askcomentvalue

　　active-text=开启

　　/el开关

　　/div

　　/电子名片

　　埃尔卡阴影=盘旋

　　div style= display:inline-block；左边距：5%

　　问答回答消息提醒

　　/div

　　div style= display:inline-block；左边距：60%

　　埃尔开关

　　v-model=askanswervalue

　　active-text=开启

　　/el开关

　　/div

　　/电子名片

　　埃尔卡阴影=盘旋

　　div style= display:inline-block；左边距：5%

　　文章评论消息提醒

　　/div

　　div style= display:inline-block；左边距：60%

　　埃尔开关

　　v-model=articlecomment

　　active-text=开启

　　/el开关

　　/div

　　/电子名片

　　埃尔卡阴影=盘旋

　　div style= display:inline-block；左边距：5%

　　文章点赞消息提醒

　　/div

　　div style= display:inline-block；左边距：60%

　　埃尔开关

　　v-model=articlethumb

　　active-text=开启

　　/el开关

　　/div

　　/电子名片

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称：通知设置，

　　data() {

　　返回{

　　askcomentvalue:true，

　　askanswervalue:真的，

　　文章评论：没错，

　　文章拇指：没错，

　　}

　　/脚本

　　样式范围

　　/风格

总结

　　之所以要写这个其实也是为了我后面直接嫖组件，因为等整个项目搞好了，我会发现这个前端代码不好直接嫖到别当项目里面，所以顺便记录一下。毕竟前端这种东西，完全看感觉，后面调不回来了，这里还能找那种感觉，有样图嘛，然后这个项目后面也是要开源的。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

vue如何使用elementui,vue element ui教程

目录

前言

项目结构

MarkDown编辑器

消息模块

消息导航

内容代码（消息）

设置模块

总结

相关文章阅读