利用iview UI 库使用穿梭器实现页面联动效果

 

<div>

 

<!-- <Layout> -->

<!--<Header>Header</Header>-->

<!-- <Content style="background-color: #ffffff;padding: 0px 0px;"> -->

<div v-if="content_flag == 1" style="min-height:648px;background-color: #ffffff;padding: 14px 24px;">

<i-form :model="formItem" label-position="left" :label-width="120" style="margin-top: 30px">

<Divider>欢迎页配置</Divider>

<form-item label="欢迎页图片">

<upload :format="['jpg','jpeg','png','bmp']" :show-upload-list="false" :on-success="frontImgSuccess" v-model="formItem.image" multiple type="drag" :action="api_domain + 'file/uploadfile'" style="width: 187px; height: auto;">

<div style="padding: 20px 0; color: #9EA0A5;margin-top:60px;" v-if="formItem.index_image == ''">

<icon type="md-add" size="30" style="color:rgb(158, 160, 165)"></icon>

<p style="color:rgb(158, 160, 165)">上传图片</p>

</div>

<img v-else :src="formItem.index_image | img_src(375,667)" width="187" height="333" style="color: #3399ff"></img>

</upload>

<div class="idcode">

<p>请上传手机图片,推荐大小为宽750×高1334</p>

<p>格式要求：支持.jpg .jpeg .bmp .png格式照片，大小不超过5M。</p>

</div>

</form-item>

<form-item label="欢迎页">

<i-switch v-model="formItem.index_switch" size="large">

<span slot="open">启用</span>

<span slot="close">关闭</span>

</i-switch>

</form-item>

<Divider>应用开关</Divider>

<br>

<form-item label="模块on/off">

<div class="MB30">

<span>微商城</span>

<i-switch v-model="formItem.model.mall.switch" size="large" class="switch" @on-change='setupStatus'>

<span slot="open">启用</span>

<span slot="close">关闭</span>

</i-switch>

<span>微文章</span>

<i-switch v-model="formItem.model.article.switch" size="large" class="switch" @on-change='setupStatus'>

<span slot="open">启用</span>

<span slot="close">关闭</span>

</i-switch>

<span>微活动</span>

<i-switch v-model="formItem.model.active.switch" size="large" class="switch" @on-change='setupStatus'>

<span slot="open">启用</span>

<span slot="close">关闭</span>

</i-switch>

</div>

</form-item>

<br>

<Divider>底部菜单配置</Divider>

<br>

<form-item label="选择菜单">

<Transfer :titles='titles' :data="nav_data" :target-keys="targetKeys1" :render-format="render1" @on-change="changeAuth" :operations="['移除','增加']"></Transfer>

<p style="margin-left: 275px;color: silver">最多只能搭配不超过5个导航项</p>

</form-item>

<Divider v-if='targetKeys1.length>1'>菜单定制</Divider>

<br>

<form-item label="菜单配置" v-if='targetKeys1.length>1'>

<collapse v-model="value" accordion style="width: 670px">

<panel name='1' v-if="nav_config.mall">

<p style="display:inline-flex;justify-content:space-between"><span style="display: inline-block;width:580px;">微商城</span><span>展开</span></p>

<p slot="content" style="padding-left:50px;">

<i-form :model="formItem.mall" :label-width="50">

<form-item label="文字" class="MT30">

<i-input v-model="formItem.mall.text" placeholder="请输入标题" style="width: 350px;"></i-input>

</form-item>

<form-item label="颜色" class="MT30">

<span>选中</span>

<color-picker v-model="formItem.mall.selectedColor"></color-picker>

<span style='margin-left:30px;'>非选中</span>

<color-picker v-model="formItem.mall.color"