elementPlus el-dialog 自适应

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>