MDUI前端css样式美化库集成
This commit is contained in:
WangHao
@@ -79,7 +79,7 @@
|
||||
<el-row>
|
||||
<!-- <hr class="bookamrk-hr" v-if="!queryParams.sousuo!=''"/>-->
|
||||
<el-col :span="24" v-for="bm in bookmarkList">
|
||||
<div class="editBookamrk">
|
||||
<div class="editBookamrk ">
|
||||
<div class="editlist">
|
||||
<div>
|
||||
<el-button plain size="small" @click="handleUpdate(bm.bookmarkId)">修改</el-button>
|
||||
@@ -97,7 +97,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bookmark" :data-id="bm.id" @click="windowurl(bm.url,bm.bookmarkId)">
|
||||
<div class="bookmark " :data-id="bm.id" @click="windowurl(bm.url,bm.bookmarkId)">
|
||||
<p class="bookmark-title" v-if="highlighted"><span v-html="highLight(bm.title,queryParams.sousuo)"/></p>
|
||||
<p class="bookmark-title" v-if="!highlighted">{{bm.title}}</p>
|
||||
<div class="">
|
||||
|
||||
@@ -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
107
ruoyi-ui/src/views/bookmark/common/NqEdit.vue
Normal 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>
|
||||
@@ -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>
|
||||
@@ -5,13 +5,13 @@
|
||||
<transition name="el-zoom-in-left">
|
||||
<el-aside :style="asideHeight" v-show="isShowZtree" class="transition-box left isaside"
|
||||
style="overflow-x:hidden;overflow-y: hidden;">
|
||||
<el-header class="aside-logo">
|
||||
<el-header class="aside-logo ">
|
||||
<!-- <img src="https://s1.ax1x.com/2020/08/15/dACqUO.png"/>-->
|
||||
<div class="logoname">
|
||||
<span>藏趣云书签</span>
|
||||
</div>
|
||||
<div class="logoright">
|
||||
<i class="el-icon-plus"/>
|
||||
<div class="logoright ">
|
||||
<i class="el-icon-plus mdui-ripple"/>
|
||||
</div>
|
||||
|
||||
</el-header>
|
||||
@@ -33,7 +33,7 @@
|
||||
<div class="aside-title" @click="importHtml"><i class="el-icon-s-platform"></i><span>导入书签</span></div>
|
||||
<div class="aside-title"><i class="el-icon-s-comment"></i><span>意见反馈</span></div>
|
||||
<div class="aside-title" @click="ceshi"><i class="el-icon-s-comment"></i><span>测试页面</span></div>
|
||||
<div class="aside-title" @click="NqQuillEdit"><i class="el-icon-s-comment"></i><span>NqQuillEdit编辑器</span></div>
|
||||
<div class="aside-title" @click="NqEdit"><i class="el-icon-s-comment"></i><span>NqQuillEdit编辑器</span></div>
|
||||
<div class="aside-title " style="margin-bottom: 100px"><i class="el-icon-s-grid"></i><span>其他设置</span></div>
|
||||
|
||||
</div>
|
||||
@@ -1287,9 +1287,9 @@
|
||||
|
||||
},
|
||||
/**跳转NqQuillEdit测试页面**/
|
||||
NqQuillEdit: function () {
|
||||
NqEdit: function () {
|
||||
this.$router.push({
|
||||
path: "/NqQuillEdit",
|
||||
path: "/NqEdit",
|
||||
})
|
||||
|
||||
},
|
||||
@@ -1617,10 +1617,10 @@
|
||||
}
|
||||
|
||||
|
||||
.logoright i:active {
|
||||
background-color: #7a6df0;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
/*.logoright i:active {*/
|
||||
/* background-color: #7a6df0;*/
|
||||
/* color: #FFFFFF;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
.reminder {
|
||||
@@ -2019,7 +2019,8 @@
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.box {
|
||||
/*不可复制*/
|
||||
.isaside {
|
||||
-moz-user-select: none; /* Firefox私有属性 */
|
||||
-webkit-user-select: none; /* WebKit内核私有属性 */
|
||||
-ms-user-select: none; /* IE私有属性(IE10及以后) */
|
||||
|
||||
Reference in New Issue
Block a user