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;
}
}]
}
)
})
}
}
}

View File

@ -1,127 +1,23 @@
<template>
<div class="material-input__component" :class="computedClasses">
<input
v-if="type === 'email'"
type="email"
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 === '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"
>
<input v-if="type === 'email'" type="email" 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 === '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>
@ -137,6 +33,7 @@
</template>
<script>
// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
export default {
name: 'material-input',
computed: {
@ -148,12 +45,8 @@
return {
'material--active': this.focus,
'material--disabled': this.disabled,
'material--has-errors': Boolean(
!this.valid ||
(this.errorMessages && this.errorMessages.length)),
'material--raised': Boolean(
this.focus ||
this.valueCopy || // has value
'material--has-errors': Boolean(!this.valid || (this.errorMessages && this.errorMessages.length)),
'material--raised': Boolean(this.focus || this.valueCopy || // has value
(this.placeholder && !this.valueCopy)) // has placeholder
}
}
@ -166,8 +59,8 @@
}
},
beforeMount() {
// Here we are following the Vue2 convention on custom v-model:
// https://github.com/vuejs/vue/issues/2873#issuecomment-223759341
// Here we are following the Vue2 convention on custom v-model:
// https://github.com/vuejs/vue/issues/2873#issuecomment-223759341
this.copyValue(this.value)
},
methods: {
@ -179,8 +72,7 @@
this.focus = focused
},
handleValidation() {
this.valid = this.$el ? this.$el.querySelector(
'.material-input').validity.valid : this.valid
this.valid = this.$el ? this.$el.querySelector('.material-input').validity.valid : this.valid
},
copyValue(value) {
this.valueCopy = value
@ -388,8 +280,6 @@
}
// Errors:
&.material--has-errors {
// These styles are required
// for custom validation:
&.material--active .material-label {
color: $color-red;
}

View File

@ -1,5 +1,5 @@
<template>
<div class='simplemde-container'>
<div class='simplemde-container' :style="{height:height+'px',zIndex:zIndex}">
<textarea :id='id'>
</textarea>
</div>
@ -24,11 +24,16 @@ export default {
type: String,
default: ''
},
height: {
type: Number,
default: 150
},
zIndex: {
type: Number,
default: 10
},
toolbar: {
type: Array
// default() {
// return ['bold', '|', 'link']
// }
}
},
data() {
@ -58,7 +63,6 @@ export default {
if (this.value) {
this.simplemde.value(this.value);
}
this.simplemde.codemirror.on('change', () => {
if (this.hasChange) {
this.hasChange = true
@ -74,7 +78,7 @@ export default {
<style>
.simplemde-container .CodeMirror {
height: 150px;
/*height: 150px;*/
min-height: 150px;
}
.simplemde-container .CodeMirror-scroll{
@ -102,7 +106,6 @@ export default {
font-weight: bold;
color: #E61E1E;
}
</style>

View File

@ -2,7 +2,7 @@
<div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
<div class="pan-info">
<div class="pan-info-roles-container">
<slot>pan</slot>
<slot></slot>
</div>
</div>
<img class="pan-thumb" :src="image">

View File

@ -1,24 +1,29 @@
<template>
<div class='tinymce-container editor-container'>
<textarea class='tinymce-textarea' :id="id"></textarea>
<!--业务需求可删除-->
<div class="editor-custom-btn-container">
<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>
<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>
<!--业务需求可删除-->
</div>
</div>
</template>
<script>
// tinymce static index.htmlwindowimpot
//
import editorAudio from './components/editorAudio';
import editorVideo from './components/editorVideo';
import editorSlide from './components/editorSlide';
import editorImage from './components/editorImage';
import { getToken, upload } from 'api/qiniu';
import { getToken, upload } from 'api/qiniu'; //
//
export default {
name: 'tinymce',
components: { editorImage, editorAudio, editorSlide, editorVideo },
components: { editorImage, editorAudio, editorSlide, editorVideo }, //
props: {
id: {
type: String,
@ -100,6 +105,7 @@
this.$emit('input', editor.getContent({ format: 'raw' }));
});
},
//
// images_dataimg_filter(img) {
// setTimeout(() => {
// const $image = $(img);
@ -149,7 +155,7 @@
}
});
editor.addButton('p', {
title: '正文', // tooltip text seen on mouseover
title: '正文',
text: '正文',
onclick() {
editor.execCommand('mceToggleFormat', false, 'p');
@ -167,6 +173,7 @@
});
},
methods: {
/* 业务代码可删除 start*/
imageSuccessCBK(arr) {
console.log(arr)
const _this = this;
@ -212,6 +219,7 @@
node.className = 'wscnph editor-placeholder';
tinymce.get(this.id).insertContent(node.outerHTML)
}
/* 业务代码可删除 end*/
},
destroyed() {
tinymce.get(this.id).destroy();

View File

@ -11,14 +11,12 @@
elStyle.position = '-webkit-sticky';
elStyle.position = 'sticky';
// if the browser support css stickyCurrently Safari, Firefox and Chrome Canary
// if (~elStyle.position.indexOf('sticky')) {
// elStyle.top = `${stickyTop}px`;
// elStyle.zIndex = zIndex;
// return
// }
// if the browser support css stickyCurrently Safari, Firefox and Chrome Canary
// if (~elStyle.position.indexOf('sticky')) {
// elStyle.top = `${stickyTop}px`;
// elStyle.zIndex = zIndex;
// return
// }
const elHeight = el.getBoundingClientRect().height;
const elWidth = el.getBoundingClientRect().width;
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';
// dashboard
// import dashboard from '../views/dashboard/index';
const dashboard = resolve => require(['../views/dashboard/index'], resolve);
/* error page*/

View File

@ -2,7 +2,7 @@
<div class="components-container">
<code>公司做的后台主要是一个cms系统公司也是已自媒体为核心的所以富文本是后台很核心的功能在选择富文本的过程中也走了不少的弯路市面上常见的富文本都基本用过了最终选择了tinymce</code>
<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>
</template>