按钮ui封装

src/app-register.ts

@@ -116,7 +116,6 @@ export const AppComponents = {
 
         //界面行为操作栏
         v.component('app-actionbar',() => import('@/components/app-actionbar/app-actionbar.vue'));
-
         // 路由缓存
         v.component('app-keep-alive', AppKeepAlive);
         v.component('app-list-index',() => import('@/components/app-list-index/app-list-index.vue'));
@@ -158,5 +157,9 @@ export const AppComponents = {
         v.component('app-mob-group-select',() => import('@/components/app-mob-group-select/app-mob-group-select.vue'));
         // 树选择
         v.component('app-tree',() => import('@/components/app-tree/app-tree.vue'));
+
+        // ui组件 BEGIN
+        // 按钮
+        v.component('app-mob-button',() => import('@/components/ui-components/app-mob-button/app-mob-button.vue'));
     },
 };
\ No newline at end of file

src/components/ui-components/app-mob-button/app-mob-button.less

+.app-mob-button {
+    
+}

src/components/ui-components/app-mob-button/app-mob-button.vue

+<template>
+    <ion-button v-if="styleType==='default'" class="app-mob-button" :disabled="disabled" :class="className" @click="on_button_click">
+        <ion-icon :name="iconName" />
+        {{ text }} 
+    </ion-button>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
+@Component({
+    components: {}
+})
+export default class AppMobButton extends Vue {
+
+    /**
+     * 按钮图标名称
+     */
+    @Prop() 
+    private iconName?: string;
+
+    /**
+     * 按钮名称
+     */
+    @Prop() 
+    private text?: string;
+
+    /**
+     * 按钮class名称
+     */
+    @Prop() 
+    private className?: string;
+
+    /**
+     * 按钮类型
+     */
+    @Prop() 
+    private type?: string;
+
+    /**
+     * 按钮样式风格
+     */
+    @Prop({ default: 'default' }) 
+    private styleType?: string;
+
+    /**
+     * 按钮是否禁用
+     */
+    @Prop({ default: false }) 
+    private disabled?: boolean;
+
+    /**
+     * 按钮点击事件
+     */
+    private on_button_click() {
+        this.$emit('on_button_click')
+    }
+}
+</script>
+<style lang="less">
+  @import "./app-mob-button.less";
+</style>
\ No newline at end of file