console
var Main = {
data() {
return {
fromShow: false,
activeName: '1',
radio1: '常量',
inputshow: 1,
cascadershow: 0,
cascader1show: 0,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
delivery1: false,
delivery2: false,
delivery3: false,
delivery4: false,
type: [],
resource: '',
desc: ''
},
options1: [{
value: 'zujian1',
label: '变量1'},{
value: 'zujian1',
label: '变量2'}
]
,
options: [{
value: 'zujian1',
label: '组件1',
children: [{
value: 'shuxing1',
label: '组件1属性1'
}, {
value: 'shuxing2',
label: '组件1属性2'
}, {
value: 'shuxing3',
label: '组件1属性3'
}, {
value: 'shuxing4',
label: '组件1属性4'
}, {
value: 'shuxing5',
label: '组件1属性5'
}, {
value: 'shuxing6',
label: '组件1属性6'
}, {
value: 'shuxing7',
label: '组件1属性7'
}, {
value: 'shuxing8',
label: '组件1属性8'
}, {
value: 'shuxing9',
label: '组件1属性9'
}, {
value: 'shuxing10',
label: '组件1属性10'
}]
},{
value: 'zujian2',
label: '组件2',
children: [{
value: 'shejiyuanze',
label: '组件2属性1'
}, {
value: 'daohang',
label: '组件2属性2'
}, {
value: 'daohang',
label: '组件2属性3'
}, {
value: 'daohang',
label: '组件2属性4'
}, {
value: 'daohang',
label: '组件2属性5'
}, {
value: 'daohang',
label: '组件2属性6'
}, {
value: 'daohang',
label: '组件2属性7'
}, {
value: 'daohang',
label: '组件2属性8'
}, {
value: 'daohang',
label: '组件2属性9'
}, {
value: 'daohang',
label: '组件2属性10'
}]
},{
value: 'zujian3',
label: '组件3',
children: [{
value: 'shejiyuanze',
label: '组件3属性1'
}, {
value: 'daohang',
label: '组件3属性2'
}, {
value: 'daohang',
label: '组件3属性3'
}, {
value: 'daohang',
label: '组件3属性4'
}, {
value: 'daohang',
label: '组件3属性5'
}, {
value: 'daohang',
label: '组件3属性6'
}, {
value: 'daohang',
label: '组件3属性7'
}, {
value: 'daohang',
label: '组件3属性8'
}, {
value: 'daohang',
label: '组件3属性9'
}, {
value: 'daohang',
label: '组件3属性10'
}]
}],
selectedOptions: [],
selectedOptions2: []
}
},
methods: {
radiochange (obj) {
if(obj==="常量"){
this.inputshow = 1
this.cascadershow = 0
this.cascader1show = 0
}
if(obj==="变量"){
this.inputshow = 0
this.cascadershow = 1
this.cascader1show = 0
}
if(obj==="对象属性"){
this.inputshow = 0
this.cascadershow = 0
this.cascader1show = 1
}
},
closeForm () {
this.fromShow = false
},
openForm () {
this.fromShow = true
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<div id="app">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>配置</span>
<el-button style="float: right; padding: 3px 0" type="text">X</el-button>
</div>
<el-tabs type="border-card">
<el-tab-pane label="事件配置">
<el-collapse v-model="activeName" accordion>
<el-collapse-item name="1">
<template slot="title">
点击事件 <i class="el-icon-star-off"></i>
</template>
<el-row :gutter="10">
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="collapseTitle">来源对象</div>
<div class="collapseContent">
<el-radio-group v-model="radio1" @change="radiochange">
<el-radio-button label="常量"></el-radio-button>
<el-radio-button label="变量"></el-radio-button>
<el-radio-button label="对象属性"></el-radio-button>
</el-radio-group>
<el-input v-show="inputshow" style="margin-top:10px;" v-model="input" placeholder="请输入内容"></el-input>
<el-cascader
v-show="cascadershow"
style="margin-top:10px;"
expand-trigger="hover"
:options="options1"
v-model="selectedOptions"
@change="handleChange"
placeholder="请选择变量">
</el-cascader>
<el-cascader
v-show="cascader1show"
style="margin-top:10px;"
expand-trigger="hover"
:options="options"
v-model="selectedOptions2"
@change="handleChange"
placeholder="请选择对象属性">
</el-cascader>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="collapseTitle">目标对象</div>
<div class="collapseContent">
<el-radio-group v-model="radio1" @change="radiochange">
<el-radio-button label="常量"></el-radio-button>
<el-radio-button label="变量"></el-radio-button>
<el-radio-button label="对象属性"></el-radio-button>
</el-radio-group>
<el-input v-show="inputshow" style="margin-top:10px;" v-model="input" placeholder="请输入内容"></el-input>
<el-cascader
v-show="cascadershow"
style="margin-top:10px;"
expand-trigger="hover"
:options="options1"
v-model="selectedOptions"
@change="handleChange"
placeholder="请选择变量">
</el-cascader>
<el-cascader
v-show="cascader1show"
style="margin-top:10px;"
expand-trigger="hover"
:options="options"
v-model="selectedOptions2"
@change="handleChange"
placeholder="请选择对象属性">
</el-cascader>
</div>
</div>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item name="2">
<template slot="title">
双击事件 <i class="el-icon-star-on"></i>
</template>
<el-row :gutter="10">
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="collapseTitle">来源对象</div>
<div class="collapseContent">
<el-radio-group v-model="radio1" @change="radiochange">
<el-radio-button label="常量"></el-radio-button>
<el-radio-button label="变量"></el-radio-button>
<el-radio-button label="对象属性"></el-radio-button>
</el-radio-group>
<el-input v-show="inputshow" style="margin-top:10px;" v-model="input" placeholder="请输入内容"></el-input>
<el-cascader
v-show="cascadershow"
style="margin-top:10px;"
expand-trigger="hover"
:options="options1"
v-model="selectedOptions"
@change="handleChange"
placeholder="请选择变量">
</el-cascader>
<el-cascader
v-show="cascader1show"
style="margin-top:10px;"
expand-trigger="hover"
:options="options"
v-model="selectedOptions2"
@change="handleChange"
placeholder="请选择对象属性">
</el-cascader>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="collapseTitle">目标对象</div>
<div class="collapseContent">
<el-radio-group v-model="radio1" @change="radiochange">
<el-radio-button label="常量"></el-radio-button>
<el-radio-button label="变量"></el-radio-button>
<el-radio-button label="对象属性"></el-radio-button>
</el-radio-group>
<el-input v-show="inputshow" style="margin-top:10px;" v-model="input" placeholder="请输入内容"></el-input>
<el-cascader
v-show="cascadershow"
style="margin-top:10px;"
expand-trigger="hover"
:options="options1"
v-model="selectedOptions"
@change="handleChange"
placeholder="请选择变量">
</el-cascader>
<el-cascader
v-show="cascader1show"
style="margin-top:10px;"
expand-trigger="hover"
:options="options"
v-model="selectedOptions2"
@change="handleChange"
placeholder="请选择对象属性">
</el-cascader>
</div>
</div>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item name="3">
<template slot="title">
改变事件 <i class="el-icon-star-off"></i>
</template>
<el-row :gutter="10">
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="collapseTitle">来源对象</div>
<div class="collapseContent">
<el-radio-group v-model="radio1" @change="radiochange">
<el-radio-button label="常量"></el-radio-button>
<el-radio-button label="变量"></el-radio-button>
<el-radio-button label="对象属性"></el-radio-button>
</el-radio-group>
<el-input v-show="inputshow" style="margin-top:10px;" v-model="input" placeholder="请输入内容"></el-input>
<el-cascader
v-show="cascadershow"
style="margin-top:10px;"
expand-trigger="hover"
:options="options1"
v-model="selectedOptions"
@change="handleChange"
placeholder="请选择变量">
</el-cascader>
<el-cascader
v-show="cascader1show"
style="margin-top:10px;"
expand-trigger="hover"
:options="options"
v-model="selectedOptions2"
@change="handleChange"
placeholder="请选择对象属性">
</el-cascader>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="collapseTitle">目标对象</div>
<div class="collapseContent">
<el-radio-group v-model="radio1" @change="radiochange">
<el-radio-button label="常量"></el-radio-button>
<el-radio-button label="变量"></el-radio-button>
<el-radio-button label="对象属性"></el-radio-button>
</el-radio-group>
<el-input v-show="inputshow" style="margin-top:10px;" v-model="input" placeholder="请输入内容"></el-input>
<el-cascader
v-show="cascadershow"
style="margin-top:10px;"
expand-trigger="hover"
:options="options1"
v-model="selectedOptions"
@change="handleChange"
placeholder="请选择变量">
</el-cascader>
<el-cascader
v-show="cascader1show"
style="margin-top:10px;"
expand-trigger="hover"
:options="options"
v-model="selectedOptions2"
@change="handleChange"
placeholder="请选择对象属性">
</el-cascader>
</div>
</div>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item name="4">
<template slot="title">
回车事件 <i class="el-icon-star-off"></i>
</template>
<el-row :gutter="10">
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="collapseTitle">来源对象</div>
<div class="collapseContent">
<el-radio-group v-model="radio1" @change="radiochange">
<el-radio-button label="常量"></el-radio-button>
<el-radio-button label="变量"></el-radio-button>
<el-radio-button label="对象属性"></el-radio-button>
</el-radio-group>
<el-input v-show="inputshow" style="margin-top:10px;" v-model="input" placeholder="请输入内容"></el-input>
<el-cascader
v-show="cascadershow"
style="margin-top:10px;"
expand-trigger="hover"
:options="options1"
v-model="selectedOptions"
@change="handleChange"
placeholder="请选择变量">
</el-cascader>
<el-cascader
v-show="cascader1show"
style="margin-top:10px;"
expand-trigger="hover"
:options="options"
v-model="selectedOptions2"
@change="handleChange"
placeholder="请选择对象属性">
</el-cascader>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="collapseTitle">目标对象</div>
<div class="collapseContent">
<el-radio-group v-model="radio1" @change="radiochange">
<el-radio-button label="常量"></el-radio-button>
<el-radio-button label="变量"></el-radio-button>
<el-radio-button label="对象属性"></el-radio-button>
</el-radio-group>
<el-input v-show="inputshow" style="margin-top:10px;" v-model="input" placeholder="请输入内容"></el-input>
<el-cascader
v-show="cascadershow"
style="margin-top:10px;"
expand-trigger="hover"
:options="options1"
v-model="selectedOptions"
@change="handleChange"
placeholder="请选择变量">
</el-cascader>
<el-cascader
v-show="cascader1show"
style="margin-top:10px;"
expand-trigger="hover"
:options="options"
v-model="selectedOptions2"
@change="handleChange"
placeholder="请选择对象属性">
</el-cascader>
</div>
</div>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
</el-tab-pane>
</el-tabs>
<el-button type="primary" @click="onSubmit" style="margin-top:5px;">应用</el-button>
<el-button type="primary" @click="onSubmit" style="margin-top:5px;">确定</el-button>
</el-card>
</div>
@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 780px;
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple {
background: #ebeef5;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
.collapseTitle{
padding:5px;
text-align:center;
border-bottom:1px solid #fff;
}
.collapseContent{
padding:10px;
}