Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

MDUI前端css样式美化库集成

Browse Source
This commit is contained in:
WangHao
2020-10-05 22:49:59 +08:00
parent d8b398d3d8
commit f79ef13ddf
9 changed files with 253 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ruoyi-ui/src/views/bookmark/common/ImportHtml.vue
View File

@ -29,8 +29,9 @@
<div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入".html"格式文件！</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button type="primary" class=" mdui-text-center mdui-btn mdui-btn-raised mdui-text-color-blue-900 mdui-color-light-blue-100" @click="submitFileForm">确 定</el-button>
<!-- <el-button @click="upload.open = false">取 消</el-button>-->
<button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-light-blue-100 mdui-ripple">Button</button>
</div>
<!-- </el-dialog>-->

107
ruoyi-ui/src/views/bookmark/common/NqEdit.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<div class="home">
<div CLASS="title">
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">文章标题</label>
<input class="mdui-textfield-input" type="text" required/>
<div class="mdui-textfield-error">文章标题不能为空</div>
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">文章描述</label>
<input class="mdui-textfield-input" type="text" required/>
<div class="mdui-textfield-error">文章描述不能为空</div>
</div>
</div>
<div class="mian" v-html="msg">
</div>
<div>
<tinymce
ref="editor"
v-model="msg"
:disabled="disabled"
@onClick="onClick"
/>
</div>
<div STYLE="margin-top: 10px;">
<button class="mdui-btn mdui-btn-raised mdui-color-indigo-300" @click="clear">清空内容</button>
<button class="mdui-btn mdui-ripple mdui-btn-raised " @click="disabled = true">禁用</button>
<button class="mdui-btn mdui-ripple mdui-btn-raised " @click="disabled = false">启用</button>
</div>
</div>
</template>
<script>
import tinymce from '../../../components/TinyMCE'
const defaultForm = {
status: 'draft',
title: '', // 文章题目
content: '', // 文章内容
content_short: '', // 文章摘要
source_uri: '', // 文章外链
image_uri: '', // 文章图片
display_time: undefined, // 前台展示时间
id: undefined,
platforms: ['a-platform'],
comment_disabled: false,
importance: 0
}
export default {
name: 'home',
components: {
tinymce
},
data(){
return{
postForm: Object.assign({}, defaultForm),
msg: "<span>请尽情创作吧!</span>",
disabled: false
}
},
methods: {
// 鼠标单击的事件
onClick (e, editor) {
console.log('Element clicked')
console.log(e)
console.log(editor)
},
// 清空内容
clear () {
this.$refs.editor.clear()
}
}
}
</script>
<style>
.title{
display: flex;
}
.title div:first-child{
margin-right: 20px;
}
.title div{
width: 50%;
}
.mian{
min-height: 100px;
width: 100%;
border: 1px solid #cacaca;
background-color: #ebebeb;
/*text-indent: 10px;*/
padding: 10px;
margin-bottom: 10px;
opacity: 0.9;
}
.home{
height: 800px;
overflow: scroll;
}
</style>

68
ruoyi-ui/src/views/bookmark/common/NqQuillEdit.vue
View File

@ -1,68 +0,0 @@
<template>
<div class="home">
<el-form-item style="margin-bottom: 40px;" prop="title">
<MDinput v-model="postForm.title" :maxlength="100" name="name" required>
Title
</MDinput>
</el-form-item>
<tinymce
ref="editor"
v-model="msg"
:disabled="disabled"
@onClick="onClick"
/>
<button @click="clear">清空内容</button>
<button @click="disabled = true">禁用</button>
</div>
</template>
<script>
import tinymce from '../../../components/TinyMCE'
const defaultForm = {
status: 'draft',
title: '', // 文章题目
content: '', // 文章内容
content_short: '', // 文章摘要
source_uri: '', // 文章外链
image_uri: '', // 文章图片
display_time: undefined, // 前台展示时间
id: undefined,
platforms: ['a-platform'],
comment_disabled: false,
importance: 0
}
export default {
name: 'home',
components: {
tinymce
},
data(){
return{
postForm: Object.assign({}, defaultForm),
msg: 'Welcome to Use Tinymce Editor',
disabled: false
}
},
methods: {
// 鼠标单击的事件
onClick (e, editor) {
console.log('Element clicked')
console.log(e)
console.log(editor)
},
// 清空内容
clear () {
this.$refs.editor.clear()
}
}
}
</script>