refine code

This commit is contained in:
Pan 2017-04-26 14:50:36 +08:00
parent db83dd50d1
commit 168150ff20
8 changed files with 54 additions and 157 deletions

View file

@ -105,8 +105,7 @@
return idx * 20; return idx * 20;
} }
}] }]
} })
)
} }
} }
} }

View file

@ -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;
} }

View file

@ -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>

View file

@ -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">

View file

@ -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.htmlwindowimpot
//
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();

View file

@ -11,14 +11,12 @@
elStyle.position = '-webkit-sticky'; elStyle.position = '-webkit-sticky';
elStyle.position = 'sticky'; elStyle.position = 'sticky';
// if the browser support css stickyCurrently Safari, Firefox and Chrome Canary // if the browser support css stickyCurrently 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}`;

View file

@ -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*/

View file

@ -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>