创建新仓库
This commit is contained in:
86
static/dialog/addField.vue
Normal file
86
static/dialog/addField.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="addField">
|
||||
<div class="nav">
|
||||
<span>增加字段</span>
|
||||
<div @click="close">×</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="item">
|
||||
<span>字段名称：</span>
|
||||
<input type="text" v-model="field">
|
||||
</div>
|
||||
<!-- <div class="item">
|
||||
<span>字段类型：</span>
|
||||
</div>-->
|
||||
|
||||
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button @click="cancel">取消</button>
|
||||
<button @click="submit">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data: function() {
|
||||
return {
|
||||
field:""
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.field=""
|
||||
},
|
||||
methods: {
|
||||
close(){
|
||||
this.$parent.addFieldAble=false
|
||||
},
|
||||
cancel(){
|
||||
this.$parent.addFieldAble=false
|
||||
},
|
||||
submit(){
|
||||
console.log("要增加的字段为",this.field)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.addField{
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
transform: translate(-50%,-50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: #EEE;
|
||||
}
|
||||
.addField .nav{
|
||||
background: #656565;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
padding: 1px 10px;
|
||||
}
|
||||
.addField .nav>div{
|
||||
cursor: pointer;
|
||||
}
|
||||
.addField .content{
|
||||
|
||||
flex: auto;
|
||||
padding: 1px 10px;
|
||||
|
||||
}
|
||||
.addField .content .item{}
|
||||
.addField .btn button{
|
||||
margin:0 5px;
|
||||
float: right;
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
89
static/dialog/delField.vue
Normal file
89
static/dialog/delField.vue
Normal file
@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div class="delField">
|
||||
<div class="nav">
|
||||
<span>删除字段</span>
|
||||
<div @click="close">×</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="item">
|
||||
<span>字段名称：</span>
|
||||
<select ref="selectField">
|
||||
<option v-for="item in fieldArrs">{{ item }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button @click="cancel">取消</button>
|
||||
<button @click="submit">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data: function() {
|
||||
return {
|
||||
fieldArrs:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log(this.$parent.fieldArr)
|
||||
this.fieldArrs=this.$parent.fieldArr
|
||||
},
|
||||
methods: {
|
||||
init(arr) {
|
||||
this.fieldArrs=arr
|
||||
},
|
||||
close(){
|
||||
this.$parent.delFieldAble=false
|
||||
},
|
||||
cancel(){
|
||||
this.$parent.delFieldAble=false
|
||||
},
|
||||
submit(){
|
||||
console.log("要删除的字段为",this.$refs.selectField.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.delField{
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
transform: translate(-50%,-50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: #EEE;
|
||||
}
|
||||
.delField .nav{
|
||||
background: #656565;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
padding: 1px 10px;
|
||||
}
|
||||
.delField .nav>div{
|
||||
cursor: pointer;
|
||||
}
|
||||
.delField .content{
|
||||
|
||||
flex: auto;
|
||||
padding: 1px 10px;
|
||||
|
||||
}
|
||||
.delField .content .item{}
|
||||
.delField .btn button{
|
||||
margin:0 5px;
|
||||
float: right;
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
478
static/dialog/httpVueLoader.js
Normal file
478
static/dialog/httpVueLoader.js
Normal file
@ -0,0 +1,478 @@
|
||||
(function umd(root,factory){
|
||||
if(typeof module==='object' && typeof exports === 'object' )
|
||||
module.exports=factory()
|
||||
else if(typeof define==='function' && define.amd)
|
||||
define([],factory)
|
||||
else
|
||||
root.httpVueLoader=factory()
|
||||
})(this,function factory() {
|
||||
'use strict';
|
||||
|
||||
var scopeIndex = 0;
|
||||
|
||||
StyleContext.prototype = {
|
||||
|
||||
withBase: function(callback) {
|
||||
|
||||
var tmpBaseElt;
|
||||
if ( this.component.baseURI ) {
|
||||
|
||||
// firefox and chrome need the <base> to be set while inserting or modifying <style> in a document.
|
||||
tmpBaseElt = document.createElement('base');
|
||||
tmpBaseElt.href = this.component.baseURI;
|
||||
|
||||
var headElt = this.component.getHead();
|
||||
headElt.insertBefore(tmpBaseElt, headElt.firstChild);
|
||||
}
|
||||
|
||||
callback.call(this);
|
||||
|
||||
if ( tmpBaseElt )
|
||||
this.component.getHead().removeChild(tmpBaseElt);
|
||||
},
|
||||
|
||||
scopeStyles: function(styleElt, scopeName) {
|
||||
|
||||
function process() {
|
||||
|
||||
var sheet = styleElt.sheet;
|
||||
var rules = sheet.cssRules;
|
||||
|
||||
for ( var i = 0; i < rules.length; ++i ) {
|
||||
|
||||
var rule = rules[i];
|
||||
if ( rule.type !== 1 )
|
||||
continue;
|
||||
|
||||
var scopedSelectors = [];
|
||||
|
||||
rule.selectorText.split(/\s*,\s*/).forEach(function(sel) {
|
||||
|
||||
scopedSelectors.push(scopeName+' '+sel);
|
||||
var segments = sel.match(/([^ :]+)(.+)?/);
|
||||
scopedSelectors.push(segments[1] + scopeName + (segments[2]||''));
|
||||
});
|
||||
|
||||
var scopedRule = scopedSelectors.join(',') + rule.cssText.substr(rule.selectorText.length);
|
||||
sheet.deleteRule(i);
|
||||
sheet.insertRule(scopedRule, i);
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
// firefox may fail sheet.cssRules with InvalidAccessError
|
||||
process();
|
||||
} catch (ex) {
|
||||
|
||||
if ( ex instanceof DOMException && ex.code === DOMException.INVALID_ACCESS_ERR ) {
|
||||
|
||||
styleElt.sheet.disabled = true;
|
||||
styleElt.addEventListener('load', function onStyleLoaded() {
|
||||
|
||||
styleElt.removeEventListener('load', onStyleLoaded);
|
||||
|
||||
// firefox need this timeout otherwise we have to use document.importNode(style, true)
|
||||
setTimeout(function() {
|
||||
|
||||
process();
|
||||
styleElt.sheet.disabled = false;
|
||||
});
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
throw ex;
|
||||
}
|
||||
},
|
||||
|
||||
compile: function() {
|
||||
|
||||
var hasTemplate = this.template !== null;
|
||||
|
||||
var scoped = this.elt.hasAttribute('scoped');
|
||||
|
||||
if ( scoped ) {
|
||||
|
||||
// no template, no scopable style needed
|
||||
if ( !hasTemplate )
|
||||
return;
|
||||
|
||||
// firefox does not tolerate this attribute
|
||||
this.elt.removeAttribute('scoped');
|
||||
}
|
||||
|
||||
this.withBase(function() {
|
||||
|
||||
this.component.getHead().appendChild(this.elt);
|
||||
});
|
||||
|
||||
if ( scoped )
|
||||
this.scopeStyles(this.elt, '['+this.component.getScopeId()+']');
|
||||
|
||||
return Promise.resolve();
|
||||
},
|
||||
|
||||
getContent: function() {
|
||||
|
||||
return this.elt.textContent;
|
||||
},
|
||||
|
||||
setContent: function(content) {
|
||||
|
||||
this.withBase(function() {
|
||||
|
||||
this.elt.textContent = content;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function StyleContext(component, elt) {
|
||||
|
||||
this.component = component;
|
||||
this.elt = elt;
|
||||
}
|
||||
|
||||
|
||||
ScriptContext.prototype = {
|
||||
|
||||
getContent: function() {
|
||||
|
||||
return this.elt.textContent;
|
||||
},
|
||||
|
||||
setContent: function(content) {
|
||||
|
||||
this.elt.textContent = content;
|
||||
},
|
||||
|
||||
compile: function(module) {
|
||||
|
||||
var childModuleRequire = function(childURL) {
|
||||
|
||||
return httpVueLoader.require(resolveURL(this.component.baseURI, childURL));
|
||||
}.bind(this);
|
||||
|
||||
var childLoader = function(childURL, childName) {
|
||||
|
||||
return httpVueLoader(resolveURL(this.component.baseURI, childURL), childName);
|
||||
}.bind(this);
|
||||
|
||||
try {
|
||||
Function('exports', 'require', 'httpVueLoader', 'module', this.getContent()).call(this.module.exports, this.module.exports, childModuleRequire, childLoader, this.module);
|
||||
} catch(ex) {
|
||||
|
||||
if ( !('lineNumber' in ex) ) {
|
||||
|
||||
return Promise.reject(ex);
|
||||
}
|
||||
var vueFileData = responseText.replace(/\r?\n/g, '\n');
|
||||
var lineNumber = vueFileData.substr(0, vueFileData.indexOf(script)).split('\n').length + ex.lineNumber - 1;
|
||||
throw new (ex.constructor)(ex.message, url, lineNumber);
|
||||
}
|
||||
|
||||
return Promise.resolve(this.module.exports)
|
||||
.then(httpVueLoader.scriptExportsHandler.bind(this))
|
||||
.then(function(exports) {
|
||||
|
||||
this.module.exports = exports;
|
||||
}.bind(this));
|
||||
}
|
||||
};
|
||||
|
||||
function ScriptContext(component, elt) {
|
||||
|
||||
this.component = component;
|
||||
this.elt = elt;
|
||||
this.module = { exports:{} };
|
||||
}
|
||||
|
||||
|
||||
TemplateContext.prototype = {
|
||||
|
||||
getContent: function() {
|
||||
|
||||
return this.elt.innerHTML;
|
||||
},
|
||||
|
||||
setContent: function(content) {
|
||||
|
||||
this.elt.innerHTML = content;
|
||||
},
|
||||
|
||||
getRootElt: function() {
|
||||
|
||||
var tplElt = this.elt.content || this.elt;
|
||||
|
||||
if ( 'firstElementChild' in tplElt )
|
||||
return tplElt.firstElementChild;
|
||||
|
||||
for ( tplElt = tplElt.firstChild; tplElt !== null; tplElt = tplElt.nextSibling )
|
||||
if ( tplElt.nodeType === Node.ELEMENT_NODE )
|
||||
return tplElt;
|
||||
|
||||
return null;
|
||||
},
|
||||
|
||||
compile: function() {
|
||||
|
||||
return Promise.resolve();
|
||||
}
|
||||
};
|
||||
|
||||
function TemplateContext(component, elt) {
|
||||
|
||||
this.component = component;
|
||||
this.elt = elt;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Component.prototype = {
|
||||
|
||||
getHead: function() {
|
||||
|
||||
return document.head || document.getElementsByTagName('head')[0];
|
||||
},
|
||||
|
||||
getScopeId: function() {
|
||||
|
||||
if ( this._scopeId === '' ) {
|
||||
|
||||
this._scopeId = 'data-s-' + (scopeIndex++).toString(36);
|
||||
this.template.getRootElt().setAttribute(this._scopeId, '');
|
||||
}
|
||||
return this._scopeId;
|
||||
},
|
||||
|
||||
load: function(componentURL) {
|
||||
|
||||
return httpVueLoader.httpRequest(componentURL)
|
||||
.then(function(responseText) {
|
||||
|
||||
this.baseURI = componentURL.substr(0, componentURL.lastIndexOf('/')+1);
|
||||
var doc = document.implementation.createHTMLDocument('');
|
||||
|
||||
// IE requires the <base> to come with <style>
|
||||
doc.body.innerHTML = (this.baseURI ? '<base href="'+this.baseURI+'">' : '') + responseText;
|
||||
|
||||
for ( var it = doc.body.firstChild; it; it = it.nextSibling ) {
|
||||
|
||||
switch ( it.nodeName ) {
|
||||
case 'TEMPLATE':
|
||||
this.template = new TemplateContext(this, it);
|
||||
break;
|
||||
case 'SCRIPT':
|
||||
this.script = new ScriptContext(this, it);
|
||||
break;
|
||||
case 'STYLE':
|
||||
this.styles.push(new StyleContext(this, it));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return this;
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
_normalizeSection: function(eltCx) {
|
||||
|
||||
var p;
|
||||
|
||||
if ( eltCx === null || !eltCx.elt.hasAttribute('src') ) {
|
||||
|
||||
p = Promise.resolve(null);
|
||||
} else {
|
||||
|
||||
p = httpVueLoader.httpRequest(eltCx.elt.getAttribute('src'))
|
||||
.then(function(content) {
|
||||
|
||||
eltCx.elt.removeAttribute('src');
|
||||
return content;
|
||||
});
|
||||
}
|
||||
|
||||
return p
|
||||
.then(function(content) {
|
||||
|
||||
if ( eltCx !== null && eltCx.elt.hasAttribute('lang') ) {
|
||||
|
||||
var lang = eltCx.elt.getAttribute('lang');
|
||||
eltCx.elt.removeAttribute('lang');
|
||||
return httpVueLoader.langProcessor[lang.toLowerCase()].call(this, content === null ? eltCx.getContent() : content);
|
||||
}
|
||||
return content;
|
||||
}.bind(this))
|
||||
.then(function(content) {
|
||||
|
||||
if ( content !== null )
|
||||
eltCx.setContent(content);
|
||||
});
|
||||
},
|
||||
|
||||
normalize: function() {
|
||||
|
||||
return Promise.all(Array.prototype.concat(
|
||||
this._normalizeSection(this.template),
|
||||
this._normalizeSection(this.script),
|
||||
this.styles.map(this._normalizeSection)
|
||||
))
|
||||
.then(function() {
|
||||
|
||||
return this;
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
compile: function() {
|
||||
|
||||
return Promise.all(Array.prototype.concat(
|
||||
this.template && this.template.compile(),
|
||||
this.script && this.script.compile(),
|
||||
this.styles.map(function(style) { return style.compile(); })
|
||||
))
|
||||
.then(function() {
|
||||
|
||||
return this;
|
||||
}.bind(this));
|
||||
}
|
||||
};
|
||||
|
||||
function Component(name) {
|
||||
|
||||
this.name = name;
|
||||
this.template = null;
|
||||
this.script = null;
|
||||
this.styles = [];
|
||||
this._scopeId = '';
|
||||
}
|
||||
|
||||
function identity(value) {
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
function parseComponentURL(url) {
|
||||
|
||||
var comp = url.match(/(.*?)([^/]+?)\/?(\.vue)?(\?.*|#.*|$)/);
|
||||
return {
|
||||
name: comp[2],
|
||||
url: comp[1] + comp[2] + (comp[3] === undefined ? '/index.vue' : comp[3]) + comp[4]
|
||||
};
|
||||
}
|
||||
|
||||
function resolveURL(baseURL, url) {
|
||||
|
||||
if (url.substr(0, 2) === './' || url.substr(0, 3) === '../') {
|
||||
return baseURL + url;
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
|
||||
httpVueLoader.load = function(url, name) {
|
||||
|
||||
return function() {
|
||||
|
||||
return new Component(name).load(url)
|
||||
.then(function(component) {
|
||||
|
||||
return component.normalize();
|
||||
})
|
||||
.then(function(component) {
|
||||
|
||||
return component.compile();
|
||||
})
|
||||
.then(function(component) {
|
||||
|
||||
var exports = component.script !== null ? component.script.module.exports : {};
|
||||
|
||||
if ( component.template !== null )
|
||||
exports.template = component.template.getContent();
|
||||
|
||||
if ( exports.name === undefined )
|
||||
if ( component.name !== undefined )
|
||||
exports.name = component.name;
|
||||
|
||||
exports._baseURI = component.baseURI;
|
||||
|
||||
return exports;
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
httpVueLoader.register = function(Vue, url) {
|
||||
|
||||
var comp = parseComponentURL(url);
|
||||
Vue.component(comp.name, httpVueLoader.load(comp.url));
|
||||
};
|
||||
|
||||
httpVueLoader.install = function(Vue) {
|
||||
|
||||
Vue.mixin({
|
||||
|
||||
beforeCreate: function () {
|
||||
|
||||
var components = this.$options.components;
|
||||
|
||||
for ( var componentName in components ) {
|
||||
|
||||
if ( typeof(components[componentName]) === 'string' && components[componentName].substr(0, 4) === 'url:' ) {
|
||||
|
||||
var comp = parseComponentURL(components[componentName].substr(4));
|
||||
|
||||
var componentURL = ('_baseURI' in this.$options) ? resolveURL(this.$options._baseURI, comp.url) : comp.url;
|
||||
|
||||
if ( isNaN(componentName) )
|
||||
components[componentName] = httpVueLoader.load(componentURL, componentName);
|
||||
else
|
||||
components[componentName] = Vue.component(comp.name, httpVueLoader.load(componentURL, comp.name));
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
httpVueLoader.require = function(moduleName) {
|
||||
|
||||
return window[moduleName];
|
||||
};
|
||||
|
||||
httpVueLoader.httpRequest = function(url) {
|
||||
|
||||
return new Promise(function(resolve, reject) {
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url);
|
||||
xhr.responseType = 'text';
|
||||
|
||||
xhr.onreadystatechange = function() {
|
||||
|
||||
if ( xhr.readyState === 4 ) {
|
||||
|
||||
if ( xhr.status >= 200 && xhr.status < 300 )
|
||||
resolve(xhr.responseText);
|
||||
else
|
||||
reject(xhr.status);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.send(null);
|
||||
});
|
||||
};
|
||||
|
||||
httpVueLoader.langProcessor = {
|
||||
html: identity,
|
||||
js: identity,
|
||||
css: identity
|
||||
};
|
||||
|
||||
httpVueLoader.scriptExportsHandler = identity;
|
||||
|
||||
function httpVueLoader(url, name) {
|
||||
|
||||
var comp = parseComponentURL(url);
|
||||
return httpVueLoader.load(comp.url, name);
|
||||
}
|
||||
|
||||
return httpVueLoader;
|
||||
});
|
||||
BIN
static/dialog/img/next.png
Normal file
BIN
static/dialog/img/next.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 353 B |
BIN
static/dialog/img/prev.png
Normal file
BIN
static/dialog/img/prev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 348 B |
3
static/dialog/index.js
Normal file
3
static/dialog/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import addField from "./addField.vue";
|
||||
|
||||
console.log(addField);
|
||||
Reference in New Issue
Block a user