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

最新推荐文章于 2022-08-12 14:57:38 发布

原创最新推荐文章于 2022-08-12 14:57:38 发布 · 903 阅读

0 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何利用iView UI库中的穿梭器组件，结合Vue.js，实现页面的联动效果。内容包括配置欢迎页图片、应用开关、底部菜单以及自定义菜单的颜色和排序。通过穿梭器实现菜单的选择和定制，允许用户在不同模块之间切换并调整显示设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div>

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

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

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

</div>

</upload>

<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">

</i-switch>

</form-item>

<br>

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

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

</i-switch>

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

</i-switch>

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

</i-switch>

</div>

</form-item>

<br>

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

<br>

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

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

</form-item>

<br>

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

<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">

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

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

</form-item>

<form-item label='排序' class="MT30">

<i-select style="width: 350px;" v-model="formItem.mall.round" @change='selectRound'>

<i-option v-for="item in round_list" :value="item.value" :key="item.value">{{ item.label }}</i-option>

</i-select>

</form-item>

</i-form>

</p>

</panel>

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

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

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

</form-item>

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

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

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

</form-item>

<form-item label='排序' class="MT30">

<i-select style="width: 350px;" v-model="formItem.article.round" @change='selectRound'>

<i-option v-for="item in round_list" :value="item.value" :key="item.value">{{ item.label }}</i-option>

</i-select>

</form-item>

</i-form>

</p>

</panel>

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

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

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

</form-item>

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

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

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

</form-item>

<form-item label='排序' class="MT30">

<i-select style="width: 350px;" v-model="formItem.active.round" @change='selectRound'>

<i-option v-for="item in round_list" :value="item.value" :key="item.value">{{ item.label }}</i-option>

</i-select>

</form-item>

</i-form>

</p>

</panel>

<p style="display:inline-flex;justify-content:space-between"><span style="display: inline-block;width:580px;">{{formItem.mall_class.text}}</span><span>展开</span></p>

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

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

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

</form-item>

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

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

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

</form-item>

<form-item label='排序' class="MT30">

<i-select style="width: 350px;" v-model="formItem.mall_class.round" @change='selectRound'>

<i-option v-for="items in round_list" :value="items.value" :key="items.value">{{ items.label }}</i-option>

</i-select>

</form-item>

</i-form>

</p>

</panel>

<p style="display:inline-flex;justify-content:space-between"><span style="display: inline-block;width:580px;">{{formItem.mall_cart.text}}</span><span>展开</span></p>

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

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

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

</form-item>

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

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

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

</form-item>

<form-item label='排序' class="MT30">

<i-select style="width: 350px;" v-model="formItem.mall_cart.round" @change='selectRound'>

<i-option v-for="items in round_list" :value="items.value" :key="items.value">{{ items.label }}</i-option>

</i-select>

</form-item>

</i-form>

</p>

</panel>

</collapse>

</form-item>

<form-item>

<i-button style="float: right;margin-right: 46px" type="primary" @click="setMiniappConfig(formItem)">保存</i-button>

</form-item>

</i-form>

</div>

</div>

Array.prototype.remove = function(val) {

var index = this.indexOf(val);

console.log(index)

if (index > -1) {

this.splice(index, 1);

}

};

new Vue({

el: '#content',

data: {

theme2: 'light',

value: '1',

formItem: {

index_switch: false,

index_image: '',

mall: {

text: '微商城',

color: '#707070',

selectedColor: '#E54341',

switch: false,

round: '0'

article: {

text: '微文章',

color: '#707070',

selectedColor: '#E54341',

switch: false,

round: '0'

active: {

text: '微活动',

color: '#707070',

selectedColor: '#E54341',

switch: false,

round: '0'

mall_class: {

text: '分类',

color: '#707070',

selectedColor: '#E54341',

switch: false,

round: '0'

mall_cart: {

text: '购物车',

color: '#707070',

selectedColor: '#E54341',

switch: false,

round: '0'

model: {

mall: {

switch: true,

model: ['1', '4', '5']

article: {

switch: true,

model: ['2']

active: {

switch: true,

model: ['3']

}

round_list: [{

label: '请选择顺序',

value: '0'

}, {

label: '1',

value: '1'

}, {

label: '2',

value: '2'

}, {

label: '3',

value: '3'

}, {

label: '4',

value: '4'

}, {

label: '5',

value: '5'

}, ],

visible: false,

modal: false,

url: '',

minapp: {},

all_domian: all_domian,

theme3: 'light',

content_flag: 1,

is_open: '',

expire_at: 0,

expired: false,

pay_qrcode: false,

global_nav: [{

"key": "1",

"label": '微商城',

"disabled": false,

"switch": false,

'desc': 'mall'

}, {

"key": "2",

"label": '微文章',

"disabled": false,

"switch": false,

'desc': 'article'

}, {

"key": "3",

"label": '微活动',

"disabled": false,

"switch": false,

'desc': 'active'

}, {

"key": "5",

"label": '购物车',

"disabled": false,

"switch": false,

'desc': 'mall_cart'

}, {

"key": "4",

"label": '分类',

"disabled": false,

"switch": false,

'desc': 'mall_class'

}],

static_nav: {

"key": "100",

"label": '我的',

"disabled": true,

"switch": false,

'desc': ''

active_nav: [],

nav_data: [],

targetKeys1: ["100"],

titles: ['可选菜单', '选定菜单'],

direction: "",

nav_config: {

'mall': false,

'article': false,

'active': false,

'mall_class': false,

'mall_cart': false,

sort_check: []

created() {

// this.getAppUserList()

// 排序列表内容

async mounted() {

this.getMiniappConfig()

methods: {

setNavData() {

this.nav_data = [];

for (var i = 0; i < this.active_nav.length; i++) {

for (var j = 0; j < this.global_nav.length; j++) {

if (this.global_nav[j]['key'] == this.active_nav[i]) {

this.nav_data.push(this.global_nav[j])

}

this.nav_data.push(this.static_nav)

// 修改导航栏配置状态

setupStatus(active = []) {

var model = this.formItem.model

this.active_nav = []

for (var i in model) {

if (model[i].switch == true) {

var sub_model = model[i].model

for (var j = 0; j < sub_model.length; j++) {

this.active_nav.push(sub_model[j])

}

} else {

var sub_model = model[i].model

for (var j = 0; j < sub_model.length; j++) {

let str = sub_model[j] + ''

this.targetKeys1.remove(str)

}

this.setNavData()

this.testMenu()

// 检测显示菜单

testMenu() {

for (let i in this.nav_config) {

this.nav_config[i] = false

}

var targetKeys1 = this.targetKeys1

var nav_config = this.nav_config

var global_nav = this.global_nav

for (var i in targetKeys1) {

for (var j in global_nav) {

if (global_nav[j]['key'] == targetKeys1[i]) {

var pro = global_nav[j]['desc']

for (var k in nav_config) {

if (k == pro) {

nav_config[k] = true

}

for (let i in this.formItem) {

for (let j in this.nav_config) {

if (i == j) {

this.formItem[i].switch = this.nav_config[i]

}

console.log(this.formItem, 'form')

//修改权限

changeAuth(newTargetKeys, direction, moveKeys) {

if (newTargetKeys.length > 5) {

layer.msg("菜单最多只能显示5个，请重新选择", {

time: 2500

});

return

} else {

this.targetKeys1 = newTargetKeys;

this.testMenu()

}

render1(item) {

return item.label;

// 排序选择

selectRound(res) {

handleOpen() {

this.visible = true;

handleClose() {

this.visible = false;

frontImgSuccess(res, file) {

this.formItem.index_image = res.data.key

getMiniappConfig() {

var _that = this

ajax.get('miniapp/show').then(res => {

if (res.code === 200) {

// this.formItem = res.data

_that.setDefaultData(res.data)

} else {

ajax.post('miniapp/store')

}

})

// 渲染默认数据

setDefaultData(data) {

for (var i in data) {

if (data[i] != '') {

for (var j in this.nav_config) {

if (typeof data[i] == "string" && i != 'index_image') {

if (this.isJSON(data[i])) {

this.formItem[i] = JSON.parse(data[i])

} else {

this.formItem[i] = data[i]

}

} else {

this.formItem[i] = data[i]

}

if (data.target_keys != '') {

this.targetKeys1 = JSON.parse(data.target_keys)

}

this.setupStatus()

// 验证数据

vailData(res) {

if (res.index_switch == true && res.index_image == '') {

layer.msg("请上传首页图片", {

time: 2500

});

return false

}

var item_1 = this.formItem

var nav_config = this.nav_config

for (var i in item_1) {

if (item_1[i].round && item_1[i].round != 0) {

var item_2 = this.formItem

for (var j in item_2) {

if (item_2[j].round && item_2[i].round != 0 && i != j) {

if (item_1[i].round == item_2[j].round && nav_config[i] == true && nav_config[j] == true) {

console.log(item_1[i], item_2[j])

layer.msg(item_1[i].text + '与' + item_2[j].text + '排序冲突', {

time: 2500

});

return false

}

return true

isJSON(str) {

console.log(str, 'str')

if (typeof str == 'string') {

try {

var obj = JSON.parse(str);

if (typeof obj == 'object' && obj) {

return true;

} else {

return false;

}

} catch (e) {

console.log('error：' + str + '!!!' + e);

return false;

}

// 提交数据

setMiniappConfig(formItem) {

var data = {

index_image: formItem.index_image,

index_switch: formItem.index_switch,

mall: this.formItem.mall,

article: this.formItem.article,

active: this.formItem.active,

model: this.formItem.model,

mall_class: this.formItem.mall_class,

mall_cart: this.formItem.mall_cart,

target_keys: this.targetKeys1

}

if (this.vailData(data)) {

ajax.post('miniapp/update', data).then(res => {

if (res.message == 'Success') {

layer.msg("修改成功", {

time: 2500

});

}

}).catch(res => {

console.log(res, 'miniapp/update```````error')

})

}

isExpired(expire_at) {

if (expire_at) {

let timestamp = parseInt(new Date().getTime() / 1000)

timestamp >= expire_at ? this.expired = true : this.expired = false

}

})

</script>

</div>

</section>

</div>

$app.set_title(plats_info.s_name + '号公众平台');

// 获取URL路由

var url;

var off = (!pages_info) ? 2 : 3;

var mulu = $app.get_router(off);

url = mulu + '/' + $app.get_router(off + 1);

console.log(url)

// 控制顶部

var header = new Vue({

el: '#header',

created() {

this.url = url;

methods: {

// 用户中心

gerenzongxin: function() {

this.$Message.info('亲，你当前页就在用户中心!');

// 安全退出

logout: function() {

docCookies.removeItem('token', '/', '.dev.wezchina.com');

docCookies.removeItem('user', '/', '.wezchina.com');

docCookies.removeItem('weid', '/', '.dev.wezchina.com');

ajax.get('logout').then(res => {

if (res.code === 200) {

this.$Message.info('退出成功')

$app.del_cookie('token'); //清除token

setTimeout(() => {

window.location.href = '/login';

}, 1000)

}

})

}

})

// 控制左侧

var left_app = new Vue({

el: '#left_app',

data: {

left_info: 'light',

url: '',

mulu,

beforeCreate() {

this.$Loading.start();

created() {

// 渲染左侧菜单栏

this.url = url

console.log(url, '/*--------------*/*-/*-')

// this.$Loading.finish();

// this.url = url;

// if (url === '/') {

// $app.set_title(configMenu.data.user);

// }

// console.log(configMenu.data, '获取用户数据')

// for (let i = 0; i < configMenu.data.list.length; i++) {

// const element = configMenu.data.list[i].children;

// for (let j = 0; j < element.length; j++) {

// const childElement = element[j];

// if (url == childElement.url) {

// $app.set_title(plats_user_info.real_name + '的' + childElement.name);

// }

}

})

</script>