From ee23a5c87d3fb6131f5c1b81a1f7f5089255599d Mon Sep 17 00:00:00 2001 From: RedPing97 <1978141412@qq.com> Date: Thu, 24 Dec 2020 16:31:44 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=BF=AB=E6=8D=B7=E8=8F=9C?= =?UTF-8?q?=E5=8D=95=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app-quick-menus/app-quick-menus.less | 18 +++++ .../app-quick-menus/app-quick-menus.vue | 72 +++++++++++++++++++ 2 files changed, 90 insertions(+) create mode 100644 src/components/app-quick-menus/app-quick-menus/app-quick-menus.less create mode 100644 src/components/app-quick-menus/app-quick-menus/app-quick-menus.vue diff --git a/src/components/app-quick-menus/app-quick-menus/app-quick-menus.less b/src/components/app-quick-menus/app-quick-menus/app-quick-menus.less new file mode 100644 index 0000000..525b986 --- /dev/null +++ b/src/components/app-quick-menus/app-quick-menus/app-quick-menus.less @@ -0,0 +1,18 @@ +.app-quick-menus{ + .menuIcon{ + padding: 0px; + display: flex; + width: 140px; + height: 80px; + border: 1px #F68080 solid; + align-items: center; + margin: 0; + background-color: #FCCFCF; + justify-content: space-around; + flex-direction: column; + span{ + font-size: 40px; + } + } +} + diff --git a/src/components/app-quick-menus/app-quick-menus/app-quick-menus.vue b/src/components/app-quick-menus/app-quick-menus/app-quick-menus.vue new file mode 100644 index 0000000..56ed116 --- /dev/null +++ b/src/components/app-quick-menus/app-quick-menus/app-quick-menus.vue @@ -0,0 +1,72 @@ +<template> + <div class="app-quick-menus"> + <template v-for="(item,index) in menus"> + <card :bordered="false" v-if="item.items && Array.isArray(item.items)" :key="index"> + <p slot="title" @click="$emit('menuClick',item.name, [item.name])"> + <span style="margin-right:12px"> + <img :src="item.icon" v-if="!Object.is(item.icon, '')" /> + <img :src="item.iconcls" v-else-if="!Object.is(item.iconcls, '')" /> + <i class="fa fa-cogs" v-else></i> + </span> + <span>{{$t('app.menus.iconmenu.' + item.name)}}</span> + <span class="line"></span> + </p> + <p style=" display: 'flex' "> + <app-quick-menus :menus="item.items" :ctrlName = "ctrlName"></app-quick-menus> + </p> + </card> + <card + :key="index" + :style=" { + width:'140px', + height: '80px', + wordBreak: 'break-all', + cursor: 'pointer', + margin: '0', + border:'0', + padding:'0', + display: 'flex', + alignItems: 'center' + }" + :padding="0" + v-else + > + <div @click="$emit('menuClick',item.name, [item.name])" class="menuIcon"> + <span> + <img :src="item.icon" v-if="!Object.is(item.icon, '')" /> + <img :src="item.iconcls" v-else-if="!Object.is(item.iconcls, '')" /> + <i class="fa fa-cogs" v-else></i> + </span> + <h4>{{$t('app.menus.iconmenu.' + item.name)}}</h4> + </div> + </card> + </template> + </div> +</template> + +<script lang='ts'> +import { Component, Vue, Prop, Model, Watch } from "vue-property-decorator"; + +@Component({}) +export default class AppQuickMenus extends Vue { + /** + * 鑿滃崟鏁版嵁 + * + * @type {*} + * @memberof AppQuickMenus + */ + @Prop({ default: [] }) public menus!: any; + + /** + * 閮ㄤ欢鍚嶇О + * + * @type {String} + * @memberof AppQuickMenus + */ + @Prop() public ctrlName!:String; +} +</script> + +<style lang='less'> +@import "./app-quick-menus.less"; +</style> \ No newline at end of file -- 2.21.0