按钮ui

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

-.app-mob-button {
+// 加载更多按钮样式
+.loadmore_btn {
+    width: 100%;
+    margin: 0;
+    --border-radius: 0;
+}
+
+// 过滤按钮样式
+.filter-btn {
+    position: relative;
+    top: 5px;
+    margin: 5px 10px 5px 0;
+}
+
+// 实体移动端多数据选择视图 底部选择按钮
+.mobpickupview_button,
+.demobmpickupview_button {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .pick-btn {
+        height: 40px;
+        width: auto;
+        --border-radius: 2px;
+        width: 45%;
+        height: 40px;
+        width: auto;
+        --border-radius: 10px;
+    }
+}
+// 快速操作按钮
+.app-quick-toolbar {
+    text-align: center;
+    .app-mob-button {
+        --background: transparent;
+    }
+}
+
+// 多选按钮
+.demobmpickupview_button .pick-btn {
+    width: 45%;
+    height: 35px;
+    width: auto;
+    --border-radius: 4px;
+}
 
+//搜索表单按钮
+.search-btn {
+    display: flex;
+    margin-bottom: 15px;
+    .search-btn-item {
+        width: 50%;
+    }
+}
+//  移动端实体选项操作视图 底部按钮
+.option-btn {
+    width: 45%;
+}
+// 工作流动态编辑按钮
+.wf_btns {
+    --border-radius: 50%;
+    width: 60px;
+    height: 60px;
+}
+
+.fab_container {
+    width: 60px;
+    position: absolute;
+    bottom: 4px;
+    right: 16px;
+    ion-button {
+        width: 60px;
+        height: 60px;
+        position: relative;
+        padding: 0;
+        --border-radius: 50%;
+        --padding-bottom: 0;
+        --padding-end: 0;
+        --padding-start: 0;
+        --padding-top: 0;
+    }
+}
+.sub-item {
+    margin-top: 10px;
+    box-sizing: border-box;
+    flex: 0 0 25%;
+    height: 100px;
+    display: flex;
+    color: black;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    ion-button {
+        color: white !important;
+        border: 0 !important;
+    }
+}
+
+// 门户按钮
+.app-mob-portlet {
+    .edit_title_btn {
+        text-align: right;
+        overflow: hidden;
+        transition: all 0.5s;
+        height: 0;
+        margin: 0;
+        ion-button {
+            width: 50px;
+            height: 25px;
+            --border-radius: 0;
+            font-size: 12px;
+        }
+        ion-button:nth-child(1) {
+            --background: #bbb;
+        }
+    }
+}
+// 多数据批操作按钮
+.batch_btn {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #fff;
+    .batch_btn_content {
+        display: flex;
+        justify-self: center;
+        ion-button {
+            color: #505050;
+            --background: transparent;
+            font-size: 12px;
+            --color-activated: #505050;
+            --background-activated: transparent;
+        }
+    }
 }

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" />
+    <ion-button v-if="styleType==='default'" class="app-mob-button" :disabled="disabled" @click="on_button_click">
+        <ion-icon v-if="iconName" :name="iconName" />
         {{ text }} 
     </ion-button>
 </template>
@@ -24,12 +24,6 @@ export default class AppMobButton extends Vue {
     @Prop() 
     private text?: string;
 
-    /**
-     * 按钮class名称
-     */
-    @Prop() 
-    private className?: string;
-
     /**
      * 按钮类型
      */
@@ -54,6 +48,8 @@ export default class AppMobButton extends Vue {
     private on_button_click() {
         this.$emit('click')
     }
+
+
 }
 </script>
 <style lang="less">