Test: buttom

Author: yumao233

src/app/index.js

@@ -39,6 +39,10 @@ app.use(elementPlus);
 
 // global component
 import ItemGroup from "../components/ItemGroup";
+import FunctionGroup from "../components/FunctionGroup.vue";
+import FunctionGroupComponent from "../components/FunctionGroupComponent.vue";
 
 app.component("ItemGroup", ItemGroup);
+app.component("FunctionGroup", FunctionGroup);
+app.component("FunctionComponent", FunctionGroupComponent);
 app.mount("#app");

src/app/views/Instances.vue

@@ -37,7 +37,21 @@
           </ItemGroup>
         </el-col>
         <el-col :md="12" :offset="0">
-          <ItemGroup style="text-align: right">
+          <FunctionGroup :items="functionGroups">
+            <FunctionComponent
+              component="button"
+              type="success"
+              size="small"
+              :plain="true"
+              @click="toNewInstance"
+            >
+              New My Instance
+            </FunctionComponent>
+            <FunctionComponent component="button" size="small" :plain="true" @click="toNewInstance">
+              Delete My Instance
+            </FunctionComponent>
+          </FunctionGroup>
+          <!-- <ItemGroup style="text-align: right">
             <el-button
               type="primary"
               size="small"
@@ -54,6 +68,7 @@
               v-show="!showTableList"
               >{{ $t("instances.showTableList") }}</el-button
             >
+            
             <el-button size="small" type="success" @click="toNewInstance">
               <i class="el-icon-plus"></i> {{ $t("instances.newInstance") }}
             </el-button>
@@ -72,7 +87,7 @@
             <el-button size="small" type="danger" @click="batDelete(2)" v-if="showTableList">
               <i class="el-icon-delete"></i> {{ $t("instances.delete") }}
             </el-button>
-          </ItemGroup>
+          </ItemGroup> -->
         </el-col>
       </el-row>
 
@@ -390,6 +405,18 @@ export default {
   components: { Panel, CircleCheckFilled, CircleCloseFilled },
   data() {
     return {
+      functionGroups: [
+        {
+          type: "button",
+          binds: {
+            type: "success"
+          },
+          events: {
+            click: this.toNewInstance
+          },
+          label: "New Instance"
+        }
+      ],
       remoteList: [],
       currentRemoteUuid: null,
       instances: [],

src/components/Dialog.vue

@@ -64,6 +64,7 @@ export default {
   overflow-y: auto;
 }
 .component-dialog-wrapper {
+  text-align: left;
   position: fixed;
   top: 0;
   bottom: 0;

src/components/FunctionGroup.vue

@@ -0,0 +1,70 @@
+<!--
+  Copyright (C) 2022 MCSManager <[email protected]>
+-->
+
+<template>
+  <div>
+    <div v-if="!isPhone">
+      <div class="function_group">
+        <slot></slot>
+      </div>
+    </div>
+    <div v-else>
+      <el-button type="primary" size="small" @click="operationClickHandler">Operation</el-button>
+    </div>
+  </div>
+  <Dialog v-model="dialogVisible" :cancel="() => (dialogVisible = false)">
+    <template #title>Operation</template>
+    <template #default>
+      <slot></slot>
+    </template>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "./Dialog.vue";
+
+export default {
+  components: { Dialog },
+  props: {
+    style: {
+      type: String,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      isPhone: false
+    };
+  },
+  mounted() {
+    this.resizeHandler();
+    window.addEventListener("resize", this.resizeHandler);
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resizeHandler);
+  },
+  methods: {
+    resizeHandler() {
+      if (window.innerWidth <= 900) {
+        this.isPhone = true;
+      } else {
+        this.isPhone = false;
+      }
+    },
+    operationClickHandler() {
+      this.dialogVisible = true;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.func {
+  display: inline-block;
+}
+.function_group {
+  margin: -6px;
+}
+</style>

src/components/FunctionGroupComponent.vue

@@ -0,0 +1,92 @@
+<!--
+  Copyright (C) 2022 MCSManager <[email protected]>
+-->
+
+<template>
+  <div class="function-group-component" v-if="!isPhone" style="display: inline-block">
+    <el-button v-if="component === 'button'" type="primary" size="small" v-bind="this.$props">
+      <slot></slot>
+    </el-button>
+  </div>
+  <div class="item" v-else style="display: block">
+    <el-button
+      v-if="component === 'button'"
+      size="small"
+      plain
+      v-bind="this.$props"
+      style="width: 100%; margin: 4px 0px"
+    >
+      <slot></slot>
+    </el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: [
+    "component",
+    "type",
+    "plain",
+    "round",
+    "size",
+    "loading",
+    "circle",
+    "disabled",
+    "icon",
+    "autofocus",
+    "native-type"
+  ],
+  data: function () {
+    return {
+      isPhone: false
+    };
+  },
+  mounted() {
+    this.resizeHandler();
+    window.addEventListener("resize", this.resizeHandler);
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resizeHandler);
+  },
+  methods: {
+    resizeHandler() {
+      console.log(this);
+      if (window.innerWidth <= 900) {
+        this.isPhone = true;
+      } else {
+        this.isPhone = false;
+      }
+    }
+  }
+};
+</script>
+
+<style>
+.function-group-component {
+  display: inline-block;
+  margin: 6px;
+}
+/* @media (min-width: 900px) {
+  .function-group-component {
+    display: block;
+    width: 100%;
+  }
+} */
+</style>
+
+<style scoped>
+.list-item {
+  display: block;
+  font-size: 14px;
+  margin: 4px 0px;
+  border: 1px solid #dcdfe4;
+  border-top: 1px solid #dcdfe4;
+  border-bottom: 1px solid #dcdfe4;
+  padding: 16px 4px;
+  cursor: pointer;
+}
+
+.list-item :hover {
+  background-color: #dcdfe4;
+}
+</style>