forked from AkkomaGang/admin-fe
refine code
This commit is contained in:
parent
db83dd50d1
commit
168150ff20
8 changed files with 54 additions and 157 deletions
|
@ -105,8 +105,7 @@
|
||||||
return idx * 20;
|
return idx * 20;
|
||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
}
|
})
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,127 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="material-input__component" :class="computedClasses">
|
<div class="material-input__component" :class="computedClasses">
|
||||||
<input
|
<input v-if="type === 'email'" type="email" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
|
||||||
v-if="type === 'email'"
|
:readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
|
||||||
type="email"
|
@blur="handleFocus(false)" @input="handleModelInput">
|
||||||
class="material-input"
|
<input v-if="type === 'url'" type="url" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
|
||||||
:name="name"
|
:readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
|
||||||
:id="id"
|
@blur="handleFocus(false)" @input="handleModelInput">
|
||||||
:placeholder="placeholder"
|
<input v-if="type === 'number'" type="number" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
|
||||||
v-model="valueCopy"
|
:readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :max="max" :min="min" :minlength="minlength"
|
||||||
|
:maxlength="maxlength" :required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
|
||||||
:readonly="readonly"
|
<input v-if="type === 'password'" type="password" class="material-input" :name="name" :id="id" :placeholder="placeholder"
|
||||||
:disabled="disabled"
|
v-model="valueCopy" :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :max="max" :min="min"
|
||||||
:autocomplete="autocomplete"
|
:required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
|
||||||
|
<input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
|
||||||
:required="required"
|
:readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
|
||||||
|
@blur="handleFocus(false)" @input="handleModelInput">
|
||||||
@focus="handleFocus(true)"
|
<input v-if="type === 'text'" type="text" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
|
||||||
@blur="handleFocus(false)"
|
:readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :minlength="minlength" :maxlength="maxlength"
|
||||||
@input="handleModelInput"
|
:required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
|
||||||
>
|
|
||||||
<input
|
|
||||||
v-if="type === 'url'"
|
|
||||||
type="url"
|
|
||||||
class="material-input"
|
|
||||||
:name="name"
|
|
||||||
:id="id"
|
|
||||||
:placeholder="placeholder"
|
|
||||||
v-model="valueCopy"
|
|
||||||
|
|
||||||
:readonly="readonly"
|
|
||||||
:disabled="disabled"
|
|
||||||
:autocomplete="autocomplete"
|
|
||||||
|
|
||||||
:required="required"
|
|
||||||
|
|
||||||
@focus="handleFocus(true)"
|
|
||||||
@blur="handleFocus(false)"
|
|
||||||
@input="handleModelInput"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
v-if="type === 'number'"
|
|
||||||
type="number"
|
|
||||||
class="material-input"
|
|
||||||
:name="name"
|
|
||||||
:id="id"
|
|
||||||
:placeholder="placeholder"
|
|
||||||
v-model="valueCopy"
|
|
||||||
|
|
||||||
:readonly="readonly"
|
|
||||||
:disabled="disabled"
|
|
||||||
:autocomplete="autocomplete"
|
|
||||||
|
|
||||||
:max="max"
|
|
||||||
:min="min"
|
|
||||||
:minlength="minlength"
|
|
||||||
:maxlength="maxlength"
|
|
||||||
:required="required"
|
|
||||||
|
|
||||||
@focus="handleFocus(true)"
|
|
||||||
@blur="handleFocus(false)"
|
|
||||||
@input="handleModelInput"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
v-if="type === 'password'"
|
|
||||||
type="password"
|
|
||||||
class="material-input"
|
|
||||||
:name="name"
|
|
||||||
:id="id"
|
|
||||||
:placeholder="placeholder"
|
|
||||||
v-model="valueCopy"
|
|
||||||
|
|
||||||
:readonly="readonly"
|
|
||||||
:disabled="disabled"
|
|
||||||
:autocomplete="autocomplete"
|
|
||||||
|
|
||||||
:max="max"
|
|
||||||
:min="min"
|
|
||||||
:required="required"
|
|
||||||
|
|
||||||
@focus="handleFocus(true)"
|
|
||||||
@blur="handleFocus(false)"
|
|
||||||
@input="handleModelInput"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
v-if="type === 'tel'"
|
|
||||||
type="tel"
|
|
||||||
class="material-input"
|
|
||||||
:name="name"
|
|
||||||
:id="id"
|
|
||||||
:placeholder="placeholder"
|
|
||||||
v-model="valueCopy"
|
|
||||||
|
|
||||||
:readonly="readonly"
|
|
||||||
:disabled="disabled"
|
|
||||||
:autocomplete="autocomplete"
|
|
||||||
|
|
||||||
:required="required"
|
|
||||||
|
|
||||||
@focus="handleFocus(true)"
|
|
||||||
@blur="handleFocus(false)"
|
|
||||||
@input="handleModelInput"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
v-if="type === 'text'"
|
|
||||||
type="text"
|
|
||||||
class="material-input"
|
|
||||||
:name="name"
|
|
||||||
:id="id"
|
|
||||||
:placeholder="placeholder"
|
|
||||||
v-model="valueCopy"
|
|
||||||
|
|
||||||
:readonly="readonly"
|
|
||||||
:disabled="disabled"
|
|
||||||
:autocomplete="autocomplete"
|
|
||||||
|
|
||||||
:minlength="minlength"
|
|
||||||
:maxlength="maxlength"
|
|
||||||
:required="required"
|
|
||||||
|
|
||||||
@focus="handleFocus(true)"
|
|
||||||
@blur="handleFocus(false)"
|
|
||||||
@input="handleModelInput"
|
|
||||||
>
|
|
||||||
|
|
||||||
<span class="material-input-bar"></span>
|
<span class="material-input-bar"></span>
|
||||||
|
|
||||||
|
@ -137,6 +33,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
|
||||||
export default {
|
export default {
|
||||||
name: 'material-input',
|
name: 'material-input',
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -148,12 +45,8 @@
|
||||||
return {
|
return {
|
||||||
'material--active': this.focus,
|
'material--active': this.focus,
|
||||||
'material--disabled': this.disabled,
|
'material--disabled': this.disabled,
|
||||||
'material--has-errors': Boolean(
|
'material--has-errors': Boolean(!this.valid || (this.errorMessages && this.errorMessages.length)),
|
||||||
!this.valid ||
|
'material--raised': Boolean(this.focus || this.valueCopy || // has value
|
||||||
(this.errorMessages && this.errorMessages.length)),
|
|
||||||
'material--raised': Boolean(
|
|
||||||
this.focus ||
|
|
||||||
this.valueCopy || // has value
|
|
||||||
(this.placeholder && !this.valueCopy)) // has placeholder
|
(this.placeholder && !this.valueCopy)) // has placeholder
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -179,8 +72,7 @@
|
||||||
this.focus = focused
|
this.focus = focused
|
||||||
},
|
},
|
||||||
handleValidation() {
|
handleValidation() {
|
||||||
this.valid = this.$el ? this.$el.querySelector(
|
this.valid = this.$el ? this.$el.querySelector('.material-input').validity.valid : this.valid
|
||||||
'.material-input').validity.valid : this.valid
|
|
||||||
},
|
},
|
||||||
copyValue(value) {
|
copyValue(value) {
|
||||||
this.valueCopy = value
|
this.valueCopy = value
|
||||||
|
@ -388,8 +280,6 @@
|
||||||
}
|
}
|
||||||
// Errors:
|
// Errors:
|
||||||
&.material--has-errors {
|
&.material--has-errors {
|
||||||
// These styles are required
|
|
||||||
// for custom validation:
|
|
||||||
&.material--active .material-label {
|
&.material--active .material-label {
|
||||||
color: $color-red;
|
color: $color-red;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class='simplemde-container'>
|
<div class='simplemde-container' :style="{height:height+'px',zIndex:zIndex}">
|
||||||
<textarea :id='id'>
|
<textarea :id='id'>
|
||||||
</textarea>
|
</textarea>
|
||||||
</div>
|
</div>
|
||||||
|
@ -24,11 +24,16 @@ export default {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
|
height: {
|
||||||
|
type: Number,
|
||||||
|
default: 150
|
||||||
|
},
|
||||||
|
zIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: 10
|
||||||
|
},
|
||||||
toolbar: {
|
toolbar: {
|
||||||
type: Array
|
type: Array
|
||||||
// default() {
|
|
||||||
// return ['bold', '|', 'link']
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
@ -58,7 +63,6 @@ export default {
|
||||||
if (this.value) {
|
if (this.value) {
|
||||||
this.simplemde.value(this.value);
|
this.simplemde.value(this.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.simplemde.codemirror.on('change', () => {
|
this.simplemde.codemirror.on('change', () => {
|
||||||
if (this.hasChange) {
|
if (this.hasChange) {
|
||||||
this.hasChange = true
|
this.hasChange = true
|
||||||
|
@ -74,7 +78,7 @@ export default {
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.simplemde-container .CodeMirror {
|
.simplemde-container .CodeMirror {
|
||||||
height: 150px;
|
/*height: 150px;*/
|
||||||
min-height: 150px;
|
min-height: 150px;
|
||||||
}
|
}
|
||||||
.simplemde-container .CodeMirror-scroll{
|
.simplemde-container .CodeMirror-scroll{
|
||||||
|
@ -102,7 +106,6 @@ export default {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #E61E1E;
|
color: #E61E1E;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
|
<div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
|
||||||
<div class="pan-info">
|
<div class="pan-info">
|
||||||
<div class="pan-info-roles-container">
|
<div class="pan-info-roles-container">
|
||||||
<slot>pan</slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img class="pan-thumb" :src="image">
|
<img class="pan-thumb" :src="image">
|
||||||
|
|
|
@ -1,24 +1,29 @@
|
||||||
<template>
|
<template>
|
||||||
<div class='tinymce-container editor-container'>
|
<div class='tinymce-container editor-container'>
|
||||||
<textarea class='tinymce-textarea' :id="id"></textarea>
|
<textarea class='tinymce-textarea' :id="id"></textarea>
|
||||||
|
<!--业务需求可删除-->
|
||||||
<div class="editor-custom-btn-container">
|
<div class="editor-custom-btn-container">
|
||||||
<editorSlide v-if="customButton.indexOf('editorSlide')>=0" color="#3A71A8" class="editor-upload-btn" @successCBK="slideSuccessCBK"></editorSlide>
|
<editorSlide v-if="customButton.indexOf('editorSlide')>=0" color="#3A71A8" class="editor-upload-btn" @successCBK="slideSuccessCBK"></editorSlide>
|
||||||
<editorAudio v-if="customButton.indexOf('editorAudio')>=0" color="#30B08F" class="editor-upload-btn" @successCBK="aduioSuccessCBK"></editorAudio>
|
<editorAudio v-if="customButton.indexOf('editorAudio')>=0" color="#30B08F" class="editor-upload-btn" @successCBK="aduioSuccessCBK"></editorAudio>
|
||||||
<editorVideo v-if="customButton.indexOf('editorVideo')>=0" color="#E65D6E" class="editor-upload-btn" @successCBK="videoSuccessCBK"></editorVideo>
|
<editorVideo v-if="customButton.indexOf('editorVideo')>=0" color="#E65D6E" class="editor-upload-btn" @successCBK="videoSuccessCBK"></editorVideo>
|
||||||
<editorImage v-if="customButton.indexOf('editorImage')>=0" color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
|
<editorImage v-if="customButton.indexOf('editorImage')>=0" color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
|
||||||
|
<!--业务需求可删除-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// tinymce 在最外层目录static下 ,由index.html直接引入,挂载在window下。不通过impot,不打包
|
||||||
|
// 业务需求可删除
|
||||||
import editorAudio from './components/editorAudio';
|
import editorAudio from './components/editorAudio';
|
||||||
import editorVideo from './components/editorVideo';
|
import editorVideo from './components/editorVideo';
|
||||||
import editorSlide from './components/editorSlide';
|
import editorSlide from './components/editorSlide';
|
||||||
import editorImage from './components/editorImage';
|
import editorImage from './components/editorImage';
|
||||||
import { getToken, upload } from 'api/qiniu';
|
import { getToken, upload } from 'api/qiniu'; // 七牛
|
||||||
|
// 业务需求可删除
|
||||||
export default {
|
export default {
|
||||||
name: 'tinymce',
|
name: 'tinymce',
|
||||||
components: { editorImage, editorAudio, editorSlide, editorVideo },
|
components: { editorImage, editorAudio, editorSlide, editorVideo }, // 业务需求可删除
|
||||||
props: {
|
props: {
|
||||||
id: {
|
id: {
|
||||||
type: String,
|
type: String,
|
||||||
|
@ -100,6 +105,7 @@
|
||||||
this.$emit('input', editor.getContent({ format: 'raw' }));
|
this.$emit('input', editor.getContent({ format: 'raw' }));
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
// 整合七牛上传
|
||||||
// images_dataimg_filter(img) {
|
// images_dataimg_filter(img) {
|
||||||
// setTimeout(() => {
|
// setTimeout(() => {
|
||||||
// const $image = $(img);
|
// const $image = $(img);
|
||||||
|
@ -149,7 +155,7 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
editor.addButton('p', {
|
editor.addButton('p', {
|
||||||
title: '正文', // tooltip text seen on mouseover
|
title: '正文',
|
||||||
text: '正文',
|
text: '正文',
|
||||||
onclick() {
|
onclick() {
|
||||||
editor.execCommand('mceToggleFormat', false, 'p');
|
editor.execCommand('mceToggleFormat', false, 'p');
|
||||||
|
@ -167,6 +173,7 @@
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
/* 业务代码可删除 start*/
|
||||||
imageSuccessCBK(arr) {
|
imageSuccessCBK(arr) {
|
||||||
console.log(arr)
|
console.log(arr)
|
||||||
const _this = this;
|
const _this = this;
|
||||||
|
@ -212,6 +219,7 @@
|
||||||
node.className = 'wscnph editor-placeholder';
|
node.className = 'wscnph editor-placeholder';
|
||||||
tinymce.get(this.id).insertContent(node.outerHTML)
|
tinymce.get(this.id).insertContent(node.outerHTML)
|
||||||
}
|
}
|
||||||
|
/* 业务代码可删除 end*/
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
tinymce.get(this.id).destroy();
|
tinymce.get(this.id).destroy();
|
||||||
|
|
|
@ -11,14 +11,12 @@
|
||||||
|
|
||||||
elStyle.position = '-webkit-sticky';
|
elStyle.position = '-webkit-sticky';
|
||||||
elStyle.position = 'sticky';
|
elStyle.position = 'sticky';
|
||||||
|
|
||||||
// if the browser support css sticky(Currently Safari, Firefox and Chrome Canary)
|
// if the browser support css sticky(Currently Safari, Firefox and Chrome Canary)
|
||||||
// if (~elStyle.position.indexOf('sticky')) {
|
// if (~elStyle.position.indexOf('sticky')) {
|
||||||
// elStyle.top = `${stickyTop}px`;
|
// elStyle.top = `${stickyTop}px`;
|
||||||
// elStyle.zIndex = zIndex;
|
// elStyle.zIndex = zIndex;
|
||||||
// return
|
// return
|
||||||
// }
|
// }
|
||||||
|
|
||||||
const elHeight = el.getBoundingClientRect().height;
|
const elHeight = el.getBoundingClientRect().height;
|
||||||
const elWidth = el.getBoundingClientRect().width;
|
const elWidth = el.getBoundingClientRect().width;
|
||||||
elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;
|
elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;
|
||||||
|
|
|
@ -5,7 +5,6 @@ import Router from 'vue-router';
|
||||||
import Layout from '../views/layout/Layout';
|
import Layout from '../views/layout/Layout';
|
||||||
|
|
||||||
// dashboard
|
// dashboard
|
||||||
// import dashboard from '../views/dashboard/index';
|
|
||||||
const dashboard = resolve => require(['../views/dashboard/index'], resolve);
|
const dashboard = resolve => require(['../views/dashboard/index'], resolve);
|
||||||
|
|
||||||
/* error page*/
|
/* error page*/
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="components-container">
|
<div class="components-container">
|
||||||
<code>公司做的后台主要是一个cms系统,公司也是已自媒体为核心的,所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路,市面上常见的富文本都基本用过了,最终选择了tinymce</code>
|
<code>公司做的后台主要是一个cms系统,公司也是已自媒体为核心的,所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路,市面上常见的富文本都基本用过了,最终选择了tinymce</code>
|
||||||
<div class="editor-container">
|
<div class="editor-container">
|
||||||
<MdEditor id='contentEditor' ref="contentEditor" v-model='content' :height="150"></MdEditor>
|
<MdEditor id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></MdEditor>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in a new issue