css

shj

2022-07-18 9f4e449a4159c9debf5520a797393bd5df2e5908

 src/views/goalManagement/IncentiveRecording/component/DailogSearch.vue

@@ -1,5 +1,6 @@
<template>
   <el-dialog v-model="dialogVisible" title="奖惩类型" width="50%" draggable>
   <el-dialog v-model="dialogVisible" :fullscreen="full" title="奖惩类型" width="50%" draggable>
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-row>
         <el-col :span="17">
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
@@ -44,7 +45,15 @@
      />
      </el-col>
      <el-col :span="7">
         <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
            <el-tag
               v-for="tag in dynamicTags"
               :key="tag"
               class="mx-1"
               style="margin: 5px"
               closable
               :disable-transitions="false"
               @close="handleClose(tag)"
            >
               {{ tag }}
            </el-tag>
      </el-col>
@@ -59,7 +68,7 @@
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { Delete } from '@element-plus/icons-vue';
import { Delete, FullScreen } from '@element-plus/icons-vue';
export default defineComponent({
   setup() {
      const dialogVisible = ref<boolean>(false);
@@ -106,6 +115,15 @@
      const handleClose = (tag: string) => {
         dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
      };
      //全屏
      const full = ref(false);
      const toggleFullscreen = () => {
         if (full.value == false) {
            full.value = true;
         } else {
            full.value = false;
         }
      };
      return {
         dialogVisible,
         openDailog,
@@ -117,6 +135,9 @@
         dynamicTags,
         handleClose,
         Delete,
         full,
         toggleFullscreen,
         FullScreen,
      };
   },
});