如何利用Vue+Element做個小頁面
更新時間：2022年03月31日 10:44:48 作者：Huterox
vue使用element寫東西讓我感覺到了特別的方便,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue+Element做個小頁面的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
前言
直接看效果，干啥慢慢猜~
項目結(jié)構(gòu)
這個的話可以看到分了一些組件嘛。然后總體還是vue+elementui 后面活下來了再用uniapp做移動端嘛。
MarkDown編輯器
這個是咱們比較主要的功能嘛。
也是用了meavon這個開源的Markdown組件嘛。
然后是文章上傳嘛，這里有個彈窗嘛。
代碼如下
<template>
<div id="main">
<div>
<div>
<input type="text" v-model="form.title" placeholder="請輸入文章標題" required>
<el-button @click="submit" type="primary">發(fā)布文章</el-button>
</div>
<mavon-editor
v-model="form.value"
ref="md"
@change="change"
style="min-height: 800px;width: 100%"
/>
</div>
<el-dialog
style="width:80%;margin: 0 auto"
title="文章提交"
:visible.sync="dialogFormVisible"
>
<el-form :model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm">
<el-form-item label="文章封面URL" >
<el-input v-model="ruleForm.url"></el-input>
</el-form-item>
<el-form-item label="選擇社區(qū)" prop="community">
<el-select v-model="ruleForm.community" placeholder="請選擇發(fā)布社區(qū)">
<el-option label="社區(qū)一" value="A"></el-option>
<el-option label="社區(qū)二" value="B"></el-option>
</el-select>
</el-form-item>
<el-form-item label="選擇專欄" prop="community">
<el-select v-model="ruleForm.column" placeholder="請選擇發(fā)布專欄">
<el-option label="java" value="java"></el-option>
<el-option label="python" value="python"></el-option>
</el-select>
</el-form-item>
<el-form-item label="選擇權(quán)限" prop="level">
<el-select v-model="ruleForm.level" placeholder="請選擇文章權(quán)限">
<el-option label="私密" value="0"></el-option>
<el-option label="公開閱覽" value="1"></el-option>
<el-option label="公開讀寫權(quán)限" value="2"></el-option>
<el-option label="完全公開(所有人持有)" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="文章類型" prop="type">
<el-radio-group v-model="ruleForm.type">
<el-radio label="原創(chuàng)" value="0"></el-radio>
<el-radio label="轉(zhuǎn)載" value="1"></el-radio>
<el-radio label="翻譯" value="2"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="文章描述" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
</el-form>
<div style="margin: 0 auto" slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">確 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { mavonEditor } from 'mavon-editor' //引入mavon-editor組件
import 'mavon-editor/dist/css/index.css' //引入組件的樣式
export default {
// 注冊
name: "writeblog",
components: {
mavonEditor,
},
data() {
return {
dialogFormVisible: false,
form: {
value:'', // 輸入的markdown
html:'', // 及時轉(zhuǎn)的html
ruleForm:this.ruleForm,
title: '',
},
ruleForm: {
url: '',
community:"",
column: '',
level:'',
desc: '',
type:'',
},
rules: {
desc: [
{ required: true, message: '請輸入文章描述', trigger: 'blur' },
{ min: 1, max: 150, message: '長度在 1 到 150 個字符', trigger: 'blur' }
],
community: [
{ required: true, message: '請選擇發(fā)布社區(qū)', trigger: 'blur' },
],
level:[
{ required: true, message: '請選擇文章權(quán)限', trigger: 'blur' },
],
type: [
{ required: true, message: '請選擇文章類型', trigger: 'change' }
],
}
}
},
methods: {
// 所有操作都會被解析重新渲染
change(value, render){ //value為編輯器中的實際內(nèi)容，即markdown的內(nèi)容，render為被解析成的html的內(nèi)容
this.form.html = render;
},
// 提交
submit(){
//點擊提交后既可以獲取html內(nèi)容，又可以獲得markdown的內(nèi)容，之后存入到服務(wù)端就可以了
console.log(this.form.value);
console.log(this.form.html);
this.dialogFormVisible=true;
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.form.title===""){
alert("標題不能為空")
return
}
alert('submit!');
this.dialogFormVisible = false;
console.log(this.ruleForm)
} else {
console.log('error submit!!');
return false;
}
});
},
},
mounted() {
}
}
</script>
<style scoped>
#center {
margin-top: 5%;
width: 96%;
height: 96%;
border: 1px;
}
img {
margin: auto;
margin-left: 30%;
height: 40%;
width: 40%;
position: relative;
top: 10%;
}
input {
width: 85%;
height: 30px;
border-width: 2px;
border-radius: 5px;
border-color: #00c4ff;
border-bottom-color: #2C7EEA;
color: #586e75;
font-size: 15px;
}
</style>
這次的前端代碼其實是完全重構(gòu)，原來上個學(xué)期期末寫的玩意咋說呢，還不如我以前直接用Django做的Dome。做著做著變成了個人博客，然后又重新改回多人社區(qū)，趕鴨子上架連文檔都沒有搞好，所有后面我直接擺爛了，本來寒假要動工的，但是學(xué)習(xí)任務(wù)拉滿，唉。
消息模塊
這個也是一個比較重要的模塊，因為這個消息可以把幾個模塊聯(lián)合起來。
先來說說那個標號
是咋來的，這個其實就是elementui里面的這個
然后是咱頁面
后面的幾個其實是類似的
這個你們直接看著寫
消息導(dǎo)航
首先是咱的消息導(dǎo)航代碼
<template>
<div>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: white">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-message"></i>問答消息</template>
<el-menu-item-group>
<router-link class="alink" to="/notices/aComment">
<el-menu-item index="1-1">
<el-badge :value="5" :max="99" class="item">
評論消息
</el-badge>
</el-menu-item>
</router-link>
<router-link class="alink" to="/notices/thumbNews">
<el-menu-item index="1-2">
點贊消息
</el-menu-item>
</router-link>
<router-link to="/notices/replyMessage" class="alink">
<el-menu-item index="1-3">
回答消息
</el-menu-item>
</router-link>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-message"></i>文章消息</template>
<el-menu-item-group>
<router-link to="/notices/articleComment" class="alink">
<el-menu-item index="2-1">
文章評論
</el-menu-item>
</router-link>
<router-link class="alink" to="/notices/thumbArticles">
<el-menu-item index="2-2">
文章點贊
</el-menu-item>
</router-link>
<router-link class="alink" to="/notices/articlePush">
<el-menu-item index="2-3">
文章push
</el-menu-item>
</router-link>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-message-solid"></i>系統(tǒng)通知</template>
<el-menu-item-group>
<router-link class="alink" to="/notices/auditInformation">
<el-menu-item index="3-1">
審核消息
</el-menu-item>
</router-link>
<router-link class="alink" to="/notices/activeMessage">
<el-menu-item index="3-2">
活動消息
</el-menu-item>
</router-link>
</el-menu-item-group>
</el-submenu>
<el-submenu index="4">
<template slot="title"><i class="el-icon-s-custom"></i>好友</template>
<el-menu-item-group>
<router-link class="alink" to="/notices/friendVerification">
<el-menu-item index="4-1">
好友驗證
</el-menu-item>
</router-link>
<router-link class="alink" to="/notices/friendsMessage">
<el-menu-item index="4-2">
好友消息
</el-menu-item>
</router-link>
</el-menu-item-group>
</el-submenu>
<el-submenu index="5">
<template slot="title"><i class="el-icon-setting"></i>設(shè)置</template>
<router-link class="alink" to="/notices/noticesettings">
<el-menu-item-group>
<el-menu-item index="5-1">消息設(shè)置</el-menu-item>
</el-menu-item-group>
</router-link>
</el-submenu>
</el-menu>
</el-aside>
<el-container
style="background-image: url(/static/logo/noticesbg.jpg);
background-repeat: no-repeat;
background-size:100% 100%;
"
>
<el-main>
<div style="width: 80%;margin: 0 auto">
<router-view></router-view>
</div>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "notices",
data() {
return {
}
},
}
</script>
<style scoped>
.el-header {
background-color: #e5efe2;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
.router-link-active {
text-decoration: none;
}
.alink{
text-decoration: none;
}
</style>內(nèi)容代碼（消息）
<template>
<div style="background-color: rgba(239,250,246,0.53)">
<br>
<div class="head" style="width: 90%;margin: 0 auto">
<el-button style="margin-left:80%" type="primary" plain>清空所有</el-button>
</div>
<br>
<div style="width: 80%;margin-left: 1%" class="main">
<el-card shadow="hover" v-for="(message,index) in Messages" :key="index">
<div style="height:100px">
<div style="width:14%;height: 100%;border-radius: 100px;display:inline-block;">
<img
style="width:100%;height: 100%;border-radius: 100px"
src="/static/temporary/headpic.jpg"
class="image"
>
</div>
<div style="display:inline-block;margin-left: 5%">
<p class="message">{{message.from}} 評論了你 <i class="el-icon-info"></i></p>
<p style="font-weight:bold"
>
{{message.info}}</p>
<p class="message">
來自問答：{{message.quiz}}
</p>
</div>
<div style="display:inline-block;margin-left: 20%">
<p>
<el-button icon="el-icon-delete" ></el-button>
</p>
<p>
{{message.data}}
</p>
</div>
</div>
<br>
</el-card>
</div>
<br>
<div class="footer" style="margin: 0 auto;width: 100%;">
<div class="block" >
<el-pagination
background
layout="total, prev, pager, next, jumper"
:total=total>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
name: "aComment",
data(){
return{
total: 999,
Messages:[
{"info":"Huterox is best 并且非常地帥氣","from":"Futerox","quiz":"小姐姐老是不回你信息怎么辦","data":"2022-3-27"},
{"info":"Huterox is best 并且非常地帥氣","from":"Futerox","quiz":"小姐姐老是不回你信息怎么辦","data":"2022-3-27"},
{"info":"Huterox is best 并且非常地帥氣","from":"Futerox","quiz":"小姐姐老是不回你信息怎么辦","data":"2022-3-27"},
{"info":"Huterox is best 并且非常地帥氣","from":"Futerox","quiz":"小姐姐老是不回你信息怎么辦","data":"2022-3-27"},
{"info":"Huterox is best 并且非常地帥氣","from":"Futerox","quiz":"小姐姐老是不回你信息怎么辦","data":"2022-3-27"},
]
}
},
}
</script>
<style scoped>
.message{
width: 20em;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
</style>設(shè)置模塊
這個不一樣的是咱的設(shè)置模塊
<template>
<div style="width: 70%;">
<el-card shadow="hover">
<div style="display:inline-block;margin-left: 5%">
<p>
問答評論消息提醒
</p>
</div>
<div style="display:inline-block;margin-left: 60%">
<p>
<el-switch
v-model="askcommentvalue"
active-text="開啟"
>
</el-switch>
</p>
</div>
</el-card>
<el-card shadow="hover">
<div style="display:inline-block;margin-left: 5%">
<p>
問答回答消息提醒
</p>
</div>
<div style="display:inline-block;margin-left: 60%">
<p>
<el-switch
v-model="askanswervalue"
active-text="開啟"
>
</el-switch>
</p>
</div>
</el-card>
<el-card shadow="hover">
<div style="display:inline-block;margin-left: 5%">
<p>
文章評論消息提醒
</p>
</div>
<div style="display:inline-block;margin-left: 60%">
<p>
<el-switch
v-model="articlecomment"
active-text="開啟"
>
</el-switch>
</p>
</div>
</el-card>
<el-card shadow="hover">
<div style="display:inline-block;margin-left: 5%">
<p>
文章點贊消息提醒
</p>
</div>
<div style="display:inline-block;margin-left: 60%">
<p>
<el-switch
v-model="articlethumb"
active-text="開啟"
>
</el-switch>
</p>
</div>
</el-card>
</div>
</template>
<script>
export default {
name: "noticesettings",
data() {
return {
askcommentvalue: true,
askanswervalue: true,
articlecomment: true,
articlethumb: true,
}
},
}
</script>
<style scoped>
</style>總結(jié)
之所以要寫這個其實也是為了我后面直接嫖組件，因為等整個項目搞好了，我會發(fā)現(xiàn)這個前端代碼不好直接嫖到別當項目里面，所以順便記錄一下。畢竟前端這種東西，完全看感覺，后面調(diào)不回來了，這里還能找那種感覺，有樣圖嘛，然后這個項目后面也是要開源的。
相關(guān)文章
解決前后端分離 vue+springboot 跨域 session+cookie失效問題
這篇文章主要介紹了前后端分離 vue+springboot 跨域 session+cookie失效問題的解決方法，解決過程也很簡單 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue下history模式刷新后404錯誤解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
工作中vue表單使用的最多的莫過于input、textarea、select等，原生js的基礎(chǔ)上vue通過雙向數(shù)據(jù)綁定等，實現(xiàn)了自己獨有的一套指令，這是react中沒有的部分，也算是vue的一大特色2022-09-09
Vue3中reactive丟失響應(yīng)式的問題解決(避大坑!)
這篇文章主要給大家介紹了關(guān)于Vue3中reactive丟失響應(yīng)式的問題解決,vue3中reactive定義的引用類型直接賦值導(dǎo)致數(shù)據(jù)失去響應(yīng)式 ,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue.js template模板的使用，主要是模仿餓了么布局，用到了4個組件，分別是header.vue,goods.vue,ratings.vue,seller.vue，感興趣的朋友跟隨腳本之家小編一起看看實現(xiàn)代碼2018-08-08
本篇文章主要介紹了Vue 兄弟組件通信的方法（不使用Vuex），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家介紹了vue與ant-tree結(jié)合偽造懶加載并可以查詢實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
Vue中瀑布流布局與圖片加載優(yōu)化的實現(xiàn)
本文主要介紹了Vue中瀑布流布局與圖片加載優(yōu)化的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
Vue+element 解決瀏覽器自動填充記住的賬號密碼問題
我們在做form表單的時候,會發(fā)現(xiàn),瀏覽器會自動的將我們之前保存的密碼,自動的填充到表單中input 為 type="password" 的框中，如何實現(xiàn)此功能呢，下面小編給大家介紹下，感興趣的朋友一起看看吧2019-06-06
這篇文章主要為大家詳細介紹了Vue編寫炫酷的時鐘插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08