From 9f4e449a4159c9debf5520a797393bd5df2e5908 Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期一, 18 七月 2022 15:01:46 +0800 Subject: [PATCH] css --- src/views/facilityManagement/deviceType/component/Dailog.vue | 92 ++++++++++++++++++++++++++------------------- 1 files changed, 53 insertions(+), 39 deletions(-) diff --git a/src/views/facilityManagement/deviceType/component/Dailog.vue b/src/views/facilityManagement/deviceType/component/Dailog.vue index 6f8b671..83ab6f5 100644 --- a/src/views/facilityManagement/deviceType/component/Dailog.vue +++ b/src/views/facilityManagement/deviceType/component/Dailog.vue @@ -1,37 +1,38 @@ <template> - <el-dialog v-model="dialogVisible" title="新建设备设施类型管理" width="50%" draggable> - <el-form :model="form" label-width="120px"> - <el-row> - <el-col :span="11"> - <el-form-item label="是否为设备内容"> - <el-select v-model="form.region" placeholder="请选择" style="width:100%"> - <el-option label="Zone one" value="shanghai" /> - <el-option label="Zone two" value="beijing" /> - </el-select> - </el-form-item> - </el-col> - <el-col :span="11" :offset="2"> - <el-form-item label="父级编号"> - <el-select v-model="form.region" placeholder="请选择" style="width:100%"> - <el-option label="Zone one" value="shanghai" /> - <el-option label="Zone two" value="beijing" /> - </el-select> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="11"> - <el-form-item label="类别名称"> - <el-input v-model="form.name" /> - </el-form-item> - </el-col> - <el-col :span="11" :offset="2"> - <el-form-item label="排列序列"> - <el-input v-model="form.name" /> - </el-form-item> - </el-col> - </el-row> - </el-form> + <el-dialog v-model="dialogVisible" :fullscreen="full" title="新建设备设施类型管理" width="50%" draggable> + <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> + <el-form :model="form" label-width="120px"> + <el-row> + <el-col :span="11"> + <el-form-item label="是否为设备内容"> + <el-select v-model="form.region" placeholder="请选择" style="width: 100%"> + <el-option label="Zone one" value="shanghai" /> + <el-option label="Zone two" value="beijing" /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="11" :offset="2"> + <el-form-item label="父级编号"> + <el-select v-model="form.region" placeholder="请选择" style="width: 100%"> + <el-option label="Zone one" value="shanghai" /> + <el-option label="Zone two" value="beijing" /> + </el-select> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="11"> + <el-form-item label="类别名称"> + <el-input v-model="form.name" /> + </el-form-item> + </el-col> + <el-col :span="11" :offset="2"> + <el-form-item label="排列序列"> + <el-input v-model="form.name" /> + </el-form-item> + </el-col> + </el-row> + </el-form> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false">关闭</el-button> @@ -42,23 +43,36 @@ </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; +import { FullScreen } from '@element-plus/icons-vue'; export default defineComponent({ setup() { const dialogVisible = ref(false); const form = ref({}); - const openDailog=()=>{ - dialogVisible.value=true - } + const openDailog = () => { + dialogVisible.value = true; + }; + //全屏 + const full = ref(false); + const toggleFullscreen = () => { + if (full.value == false) { + full.value = true; + } else { + full.value = false; + } + }; return { dialogVisible, form, - openDailog + openDailog, + full, + toggleFullscreen, + FullScreen, }; }, }); </script> <style scoped> -.el-row{ - padding: 0 0 20px 0; +.el-row { + padding: 0 0 20px 0; } </style> -- Gitblit v1.9.2