<template>
|
<el-dialog class="carouselHigLevel" title="轮播高级设置" :close-on-click-modal="false" :modal-append-to-body="false" width="550px" :visible.sync="dialogFormVisible">
|
<el-form :model="configForm" size="mini">
|
<el-form-item>
|
<el-checkbox v-model="configForm.fixedPosition">固定轮播位置
|
<span class="itemTips">
|
轮播会始终固定在用户当前屏幕，不随用户上下滑动而消失
|
</span>
|
</el-checkbox>
|
</el-form-item>
|
<el-form-item>
|
<el-checkbox v-model="configForm.closeBtn">显示关闭按钮
|
<span class="itemTips">
|
关闭按钮会出现在轮播的右上方，点此可关闭轮播
|
</span>
|
</el-checkbox>
|
</el-form-item>
|
<el-form-item>
|
<el-checkbox v-model="configForm.connectMove">开始衔接滑动
|
<span class="itemTips">
|
开启此项后轮播图切换时，会有走马灯效果
|
</span>
|
</el-checkbox>
|
</el-form-item>
|
<el-form-item>
|
<el-checkbox v-model="configForm.indicatorPoint">轮播图指示点
|
<span class="itemTips">
|
提示用户浏览的轮播是第几张的指示器
|
</span>
|
</el-checkbox>
|
</el-form-item>
|
<!-- <el-form-item label="" v-show="configForm.indicatorPoint">
|
<el-checkbox v-model="configForm.indicatorPointActive">
|
指示点选中色
|
</el-checkbox>
|
<el-color-picker class="higLevelItem" v-model="configForm.indicatorPointActiveColor"></el-color-picker>
|
</el-form-item>
|
<el-form-item label="" v-show="configForm.indicatorPoint">
|
<el-checkbox v-model="configForm.indicatorPointDefault">
|
指示点默认色
|
</el-checkbox>
|
<el-color-picker class="higLevelItem" v-model="configForm.indicatorPointDefaultColor"></el-color-picker>
|
</el-form-item> -->
|
<el-form-item>
|
<el-checkbox @change="changeSwitch" v-model="configForm.switch">启用自动切换
|
<span class="itemTips">
|
关闭按钮会出现在轮播的右上方，点此可关闭轮播
|
</span>
|
</el-checkbox>
|
</el-form-item>
|
<el-form-item v-show="configForm.switch">
|
<el-checkbox v-model="configForm.isSwitchTime">自动切换间隔
|
</el-checkbox>
|
<el-input-number v-model="configForm.switchTime" class="higLevelItem" :min="0"></el-input-number> 毫秒
|
</el-form-item>
|
<el-form-item v-show="configForm.switch">
|
<el-checkbox v-model="configForm.isSwitchAnimationTime">切换动画时间
|
</el-checkbox>
|
<el-input-number class="higLevelItem" v-model="configForm.switchAnimationTime" :min="0"></el-input-number> 毫秒
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer buttonPosition">
|
<el-button size="mini" type="primary" @click="submit()">确 定</el-button>
|
<el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { mapMutations } from 'vuex'
|
export default {
|
props: {
|
show: {
|
type: Boolean,
|
default: false
|
},
|
form: {
|
type: Object,
|
default: function () {
|
return {}
|
}
|
}
|
},
|
watch: {
|
dialogFormVisible () {
|
this.$emit('update:show', this.dialogFormVisible)
|
},
|
show () {
|
this.dialogFormVisible = this.show
|
if (this.dialogFormVisible) {
|
this.configForm = JSON.parse(JSON.stringify(this.form))
|
}
|
}
|
},
|
data () {
|
return {
|
dialogFormVisible: false,
|
configForm: {}
|
}
|
},
|
methods: {
|
...mapMutations(['updateCurrent']),
|
// 当自动切换杠关闭时，清空切换时间
|
changeSwitch (val) {
|
if (!val) {
|
this.configForm.isSwitchTime = false
|
this.configForm.switchTime = null
|
this.configForm.isSwitchAnimationTime = false
|
this.configForm.switchAnimationTime = null
|
}
|
},
|
// 点击确定按钮时
|
submit () {
|
this.updateCurrent({ ...this.configForm })
|
this.dialogFormVisible = false
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.carouselHigLevel{
|
.el-form .el-form-item{
|
display: block;
|
}
|
.higLevelItem{
|
margin-left: 10px;
|
.el-color-picker__trigger{
|
vertical-align: middle;
|
}
|
}
|
}
|
|
</style>
|
