294 lines
12 KiB
HTML
294 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<!-- import CSS -->
|
|||
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|||
|
|
<style>
|
|||
|
|
.dividing-ine {
|
|||
|
|
height: 1px;
|
|||
|
|
background-color: #ccc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.m-t-m {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-flex {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.align-center {
|
|||
|
|
align-items: center
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.w-200 {
|
|||
|
|
width: 200px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.m-r-m {
|
|||
|
|
margin-right: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
i {
|
|||
|
|
font-size: 28px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-icon-circle-plus-outline {
|
|||
|
|
color: rgb(20, 130, 240);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
i.el-icon-remove-outline {
|
|||
|
|
color: red;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div id="app">
|
|||
|
|
<div>
|
|||
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|||
|
|
<el-tab-pane label="input输入框" name="input">
|
|||
|
|
<el-form ref="form" label-width="70px">
|
|||
|
|
<el-form-item label="尺寸">
|
|||
|
|
<el-radio v-model="inputSize" label="medium">medium</el-radio>
|
|||
|
|
<el-radio v-model="inputSize" label="small">small</el-radio>
|
|||
|
|
<el-radio v-model="inputSize" label="mini">mini</el-radio>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="提示框语">
|
|||
|
|
<el-input v-model="inputPlaceholder" size="small"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="默认值">
|
|||
|
|
<el-input v-model="inputValue" size="small"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<div class="dividing-ine"></div>
|
|||
|
|
<el-form-item class="m-t-m" label="示例">
|
|||
|
|
<el-input v-model="inputValue" :size="inputSize" :placeholder="inputPlaceholder"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="textarea文本框" name="textarea">
|
|||
|
|
<el-form ref="form" label-width="70px">
|
|||
|
|
<el-form-item label="行数">
|
|||
|
|
<el-input type="number" size="small" v-model="textareaRows"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="默认值">
|
|||
|
|
<el-input type="textarea" autosize v-model="textareaValue"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<div class="dividing-ine"></div>
|
|||
|
|
<el-form-item class="m-t-m" label="示例">
|
|||
|
|
<el-input v-model="textareaValue" type="textarea" :rows="textareaRows"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="radio单选" name="radio">
|
|||
|
|
<el-form ref="form" label-width="70px">
|
|||
|
|
<el-form-item label="添加选项">
|
|||
|
|
<div class="box-flex align-center" v-for="(item,index) in addRadiosItems">
|
|||
|
|
<el-input size="small" v-model="item.textValue" class="w-200 m-r-m" placeholder="请选择时段">
|
|||
|
|
</el-input>
|
|||
|
|
<span class="box-flex align-center m-r-m" @click="addRadiosItem">
|
|||
|
|
<i class="el-icon-circle-plus-outline"></i><span class="icon-name"></span>
|
|||
|
|
</span>
|
|||
|
|
<span class="box-flex align-center m-r-m" v-if="index>=1" @click="deleteItem(item)">
|
|||
|
|
<i class="el-icon-remove-outline"></i><span class="icon-name"></span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
<!-- <el-form-item label="提示框语">
|
|||
|
|
<el-input v-model="inputPlaceholder" size="small"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="默认值">
|
|||
|
|
<el-input v-model="radioValue" size="small"></el-input>
|
|||
|
|
</el-form-item> -->
|
|||
|
|
<div class="dividing-ine"></div>
|
|||
|
|
<el-form-item class="m-t-m" label="示例">
|
|||
|
|
<template v-for="item in addRadiosItems">
|
|||
|
|
<template v-if="item.textValue!=null && item.textValue!=''">
|
|||
|
|
<el-radio v-model="radioValue" :label="item.textValue"></el-radio>
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="select下拉选择框" name="select">
|
|||
|
|
<el-form ref="form" label-width="70px">
|
|||
|
|
<el-form-item label="添加选项">
|
|||
|
|
<div class="box-flex align-center" v-for="(item,index) in addCheckboxItems">
|
|||
|
|
<el-input size="small" v-model="item.textValue" class="w-200 m-r-m" placeholder="请选择时段">
|
|||
|
|
</el-input>
|
|||
|
|
<span class="box-flex align-center m-r-m" @click="addCheckboxItem">
|
|||
|
|
<i class="el-icon-circle-plus-outline"></i><span class="icon-name"></span>
|
|||
|
|
</span>
|
|||
|
|
<span class="box-flex align-center m-r-m" v-if="index>=1"
|
|||
|
|
@click="deleteCheckboxItem(item)">
|
|||
|
|
<i class="el-icon-remove-outline"></i><span class="icon-name"></span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
<!-- <el-form-item label="提示框语">
|
|||
|
|
<el-input v-model="inputPlaceholder" size="small"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="默认值">
|
|||
|
|
<el-input v-model="radioValue" size="small"></el-input>
|
|||
|
|
</el-form-item> -->
|
|||
|
|
<div class="dividing-ine"></div>
|
|||
|
|
<el-form-item class="m-t-m" label="示例">
|
|||
|
|
<template v-for="item in addCheckboxItems">
|
|||
|
|
<template v-if="item.textValue!=null && item.textValue!=''">
|
|||
|
|
<el-checkbox v-model="checkValue" :label="item.textValue"></el-checkbox>
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="upload文件上传" name="upload">
|
|||
|
|
<el-form ref="form" label-width="70px">
|
|||
|
|
<el-form-item class="m-t-m" label="示例">
|
|||
|
|
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple
|
|||
|
|
:limit="3">
|
|||
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|||
|
|
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
|||
|
|
</el-upload>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="node" style="display:none">
|
|||
|
|
<iframe src="/ueditor/formdesign/el-input.html" leipiplugins="element" style="height:100px;"></iframe>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
<!-- import Vue before Element -->
|
|||
|
|
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
|||
|
|
<!-- import JavaScript -->
|
|||
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|||
|
|
<script type="text/javascript" src="../dialogs/internal.js"></script>
|
|||
|
|
<script>
|
|||
|
|
var GetQueryString = function(name) {
|
|||
|
|
var search = decodeURI(decodeURI(window.location.search))
|
|||
|
|
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
|
|||
|
|
var r = search.substr(1).match(reg)
|
|||
|
|
if (r != null) return unescape(r[2])
|
|||
|
|
return null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// eslint-disable-next-line no-undef
|
|||
|
|
var appVue = new Vue({
|
|||
|
|
el: '#app',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
activeName: 'radio',
|
|||
|
|
inputSize: '',
|
|||
|
|
inputPlaceholder: '请输入',
|
|||
|
|
inputValue: '',
|
|||
|
|
textareaValue: '',
|
|||
|
|
textareaRows: '',
|
|||
|
|
radioValue: '',
|
|||
|
|
radioItems: [],
|
|||
|
|
checkValue: [],
|
|||
|
|
addRadiosItems: [{
|
|||
|
|
textValue: ''
|
|||
|
|
}],
|
|||
|
|
addCheckboxItems: [{
|
|||
|
|
textValue: ''
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
var info = GetQueryString('info')
|
|||
|
|
if (info && info.length > 0) {
|
|||
|
|
var infoObj = JSON.parse(info)
|
|||
|
|
if (infoObj && infoObj.gValue != '') {
|
|||
|
|
this.title = infoObj.gValue
|
|||
|
|
}
|
|||
|
|
console.log(infoObj)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
var _this = this
|
|||
|
|
var oNode = null
|
|||
|
|
if (UE.plugins['element'].editdom) {
|
|||
|
|
oNode = UE.plugins['element'].editdom
|
|||
|
|
console.log(oNode)
|
|||
|
|
}
|
|||
|
|
dialog.oncancel = function() {
|
|||
|
|
if (UE.plugins['element'].editdom) {
|
|||
|
|
delete UE.plugins['element'].editdom
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
dialog.onok = function() {
|
|||
|
|
var pararm = {
|
|||
|
|
activeName: _this.activeName,
|
|||
|
|
inputSize: _this.inputSize,
|
|||
|
|
inputPlaceholder: _this.inputPlaceholder,
|
|||
|
|
inputValue: _this.inputValue,
|
|||
|
|
textareaValue: _this.textareaValue,
|
|||
|
|
textareaRows: _this.textareaRows,
|
|||
|
|
radioValue: _this.radioValue,
|
|||
|
|
radioItems: _this.radioItems,
|
|||
|
|
checkValue: _this.checkValue,
|
|||
|
|
addRadiosItems: _this.addRadiosItems,
|
|||
|
|
addCheckboxItems: _this.addCheckboxItems
|
|||
|
|
}
|
|||
|
|
console.log(pararm)
|
|||
|
|
var pararmStr = encodeURI(JSON.stringify(pararm), 'utf-8')
|
|||
|
|
var iframeSrc = '/ueditor/formdesign/element-detail.html?info=' + pararmStr
|
|||
|
|
document.querySelector('iframe').setAttribute('src', iframeSrc)
|
|||
|
|
var html = document.getElementById('node').innerHTML
|
|||
|
|
editor.execCommand('insertHtml', html)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getInfo() {
|
|||
|
|
return this.fileList
|
|||
|
|
},
|
|||
|
|
handleSucess(response, file, fileList) {
|
|||
|
|
if (response.code == 200) {
|
|||
|
|
if (response.result.length > 0) {
|
|||
|
|
this.fileList.push({
|
|||
|
|
name: response.result[0].fileName,
|
|||
|
|
url: 'http://119.84.146.233:52789/' + response.result[0].filePath
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleRemove(file, fileList) {
|
|||
|
|
var indexOf = fileList.indexOf(file)
|
|||
|
|
this.fileList.split(indexOf, 1)
|
|||
|
|
},
|
|||
|
|
handleClick() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
addRadiosItem() {
|
|||
|
|
this.addRadiosItems.push({
|
|||
|
|
textValue: ''
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
deleteItem(item) {
|
|||
|
|
var indexOf = this.addRadiosItems.indexOf(item)
|
|||
|
|
this.addRadiosItems.splice(indexOf, 1)
|
|||
|
|
},
|
|||
|
|
addCheckboxItem() {
|
|||
|
|
this.addCheckboxItems.push({
|
|||
|
|
textValue: ''
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
deleteCheckboxItem(item) {
|
|||
|
|
var indexOf = this.addCheckboxItems.indexOf(item)
|
|||
|
|
this.addCheckboxItems.splice(indexOf, 1)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// eslint-disable-next-line no-unused-vars
|
|||
|
|
var getData = function() {
|
|||
|
|
return appVue.fileList
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</html>
|