elementPlus el-dialog 自适应
<template>
<div>
<el-dialog v-model="bannerSettingVisible" :fullscreen="isfullscreen" :width="dialogWidth" :show-close="false" :close-on-click-modal="false">
<template #header="{ screen,close }">
<div class="flex flex-row justify-between">
<h4 v-if="!flag">新增轮播图设置</h4>
<h4 v-if="flag">编辑轮播图设置</h4>
<div>
<el-tooltip
effect="dark"
content="全屏"
placement="bottom"
>
<el-icon class="mx-5 cursor-pointer" @click="isfullscreen = !isfullscreen">
<FullScreen/>
</el-icon>
</el-tooltip>
<el-tooltip
effect="dark"
content="关闭"
placement="bottom"
>
<el-icon class="mx-5 cursor-pointer" @click="resetForm(bannerSettingFormRef),close()">
<Close/>
</el-icon>
</el-tooltip>
</div>
</div>
</template>
<el-form :model="bannerSettingForm" :rules="bannerSettingFormRules" :inline="true" :scroll-to-error="true" ref="bannerSettingFormRef">
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="指示器的触发方式" prop="bannerTrigger" label-width="200px">
<el-radio-group v-model="bannerSettingForm.bannerTrigger">
<el-radio :label="0">悬浮</el-radio>
<el-radio :label="1">点击</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="是否自动切换" prop="bannerAutoplay" label-width="200px">
<el-radio-group v-model="bannerSettingForm.bannerAutoplay">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="指示器的位置" prop="bannerIndicatorPosition" label-width="200px">
<el-radio-group v-model="bannerSettingForm.bannerIndicatorPosition">
<el-radio :label="0">outside</el-radio>
<el-radio :label="1">none</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="切换箭头的显示时机" prop="bannerArrow" label-width="200px">
<el-radio-group v-model="bannerSettingForm.bannerArrow">
<el-radio :label="0">总是</el-radio>
<el-radio :label="1">悬浮</el-radio>
<el-radio :label="2">从不</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="类型" prop="bannerType" label-width="200px">
<el-radio-group v-model="bannerSettingForm.bannerType">
<el-radio :label="0">无</el-radio>
<el-radio :label="1">卡片</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="是否循环显示" prop="bannerLoop" label-width="200px">
<el-radio-group v-model="bannerSettingForm.bannerLoop">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="展示的方向" prop="bannerDirection" label-width="200px">
<el-radio-group v-model="bannerSettingForm.bannerDirection">
<el-radio :label="0">水平</el-radio>
<el-radio :label="1">垂直</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="鼠标悬浮时是否暂停自动切换" prop="bannerPauseOnHover" label-width="200px">
<el-radio-group v-model="bannerSettingForm.bannerPauseOnHover">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="是否启用" prop="bannerStatus" label-width="200px">
<el-radio-group v-model="bannerSettingForm.bannerStatus">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-form-item label="使用的地方" prop="bannerUsedPlace" label-width="200px">
<el-input v-model="bannerSettingForm.bannerUsedPlace" maxlength="30" clearable placeholder="使用的地方" style="width: 100%"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-form-item label="自动切换的时间间隔" prop="bannerInterval" label-width="200px">
<el-slider v-model="bannerSettingForm.bannerInterval" show-input size="small" :min="1000" :max="6000" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="resetForm(bannerSettingFormRef)">重置表单</el-button>
<el-button type="primary" @click="confirmBannerInfo(bannerSettingForm)">发送</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import {
Refresh,
Plus,
Switch,
Setting,
Delete,
Edit,
FullScreen,
Close,
} from '@element-plus/icons-vue'
const bannerSettingFormRules = {
bannerTrigger: [{ required: true, message: "请选择指示器的触发方式", trigger: "blur" }],
bannerStatus: [{ required: true, message: "请选择状态", trigger: "blur" }],
bannerPauseOnHover: [{ required: true, message: "请选择鼠标悬浮时是否暂停自动切换", trigger: "blur" }],
bannerDirection: [{ required: true, message: "请选择展示的方向", trigger: "blur" }],
bannerLoop: [{ required: true, message: "请选择是否循环显示", trigger: "blur" }],
bannerType: [{ required: true, message: "请选择类型", trigger: "blur" }],
bannerArrow: [{ required: true, message: "请选择切换箭头的显示时机", trigger: "blur" }],
bannerIndicatorPosition: [{ required: true, message: "请选择指示器的位置", trigger: "blur" }],
bannerAutoplay: [{ required: true, message: "请选择是否自动切换", trigger: "blur" }],
bannerInterval: [{ required: true, message: "请选择时间", trigger: "blur" }],
};
let ids = ref([])
let isfullscreen = ref(false)
const flag = ref(false);
const bannerSettingForm = ref({})
const bannerSettingVisible = ref(false)
const bannerSettingFormRef = ref(null)
let dialogWidth = ref("1000px")
onMounted(() => {
setDialogWidth()
window.onresize = () => {
setDialogWidth()
}
})
let setDialogWidth = (()=>{
let val = document.body.clientWidth
const def = 1000
if (val < def) {
dialogWidth.value = '100%'
} else {
dialogWidth.value = def + 'px'
}
})
</script>
<style scoped lang="scss">
</style>
|