bri-components 1.5.21 → 1.6.0

package/src/components/small/DshButtons.vue

@@ -1,324 +1,324 @@
-<template>
-    <div
-        v-if="mode === 'default' ? list.length : true"
-        class="DshButtons"
-    >
-        <div
-            v-if="mode === 'between'"
-            class="DshButtons-flex"
-        >
-            <!-- 左侧按钮 -->
-            <div class="DshButtons-flex-left">
-                <template v-for="(operationItem, index) in leftFlatList">
-                    <Poptip
-                        v-if="operationItem.tipContent"
-                        :key="(operationItem._key || operationItem.type) + 'poptip'"
-                        :class="[
-                            index ? 'dsh-margin-left8' : undefined
-                        ]"
-                        trigger="hover"
-                        :title="operationItem.tipTitle"
-                        :content="operationItem.tipContent"
-                        word-wrap
-                        :width="operationItem.tipWidth || 220"
-                        :transfer="true"
-                    >
-                        <bri-button
-                            :key="operationItem._key || operationItem.type"
-                            :style="operationItem.style"
-                            :class="[
-                                !operationItem.loading && !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
-                                itemClass,
-                            ]"
-                            :propsObj="operationItem"
-                            @click="emit(operationItem)"
-                        >
-                            {{ operationItem.name }}
-                        </bri-button>
-                    </Poptip>
-
-                    <bri-button
-                        v-else
-                        :key="operationItem._key || operationItem.type"
-                        :style="operationItem.style"
-                        :class="[
-                            index ? 'dsh-margin-left8' : undefined,
-                            !operationItem.loading && !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
-                            itemClass,
-                        ]"
-                        :propsObj="operationItem"
-                        @click="emit(operationItem)"
-                    >
-                        {{ operationItem.name }}
-                    </bri-button>
-                </template>
-
-                <!-- 更多的 下拉按钮-->
-                <dsh-dropdown
-                    v-if="leftMoreList.length"
-                    class="DshButtons-dropdown"
-                    :list="leftMoreList"
-                    :trigger="'hover'"
-                    @click="emit($event)"
-                >
-                    <slot name="more">
-                        <bri-button
-                            class="DshButtons-dropdown-more"
-                            :propsObj="moreBtnOperationObj"
-                        >
-                            <span class="DshButtons-dropdown-more-name">
-                                {{ moreBtnOperationObj.name }}
-                            </span>
-                        </bri-button>
-                    </slot>
-                </dsh-dropdown>
-            </div>
-
-            <!-- 右侧按钮 -->
-            <div class="DshButtons-flex-right">
-                <slot></slot>
-
-                <template v-for="(operationItem, index) in rightList">
-                    <Poptip
-                        v-if="operationItem.tipContent"
-                        :key="(operationItem._key || operationItem.type) + 'poptip'"
-                        :class="[
-                            index ? 'dsh-margin-left8' : undefined
-                        ]"
-                        trigger="hover"
-                        :title="operationItem.tipTitle"
-                        :content="operationItem.tipContent"
-                        word-wrap
-                        :width="operationItem.tipWidth || 220"
-                        :transfer="true"
-                    >
-                        <bri-button
-                            :key="operationItem._key || operationItem.type"
-                            :style="operationItem.style"
-                            :class="[
-                                !operationItem.loading && !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
-                                itemClass,
-                            ]"
-                            :propsObj="operationItem"
-                            @click="emit(operationItem)"
-                        >
-                            {{ operationItem.name }}
-                        </bri-button>
-                    </Poptip>
-
-                    <bri-button
-                        v-else
-                        :key="operationItem._key || operationItem.type"
-                        :style="operationItem.style"
-                        :class="[
-                            index ? 'dsh-margin-left8' : undefined,
-                            !operationItem.loading && !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
-                            itemClass,
-                        ]"
-                        :propsObj="operationItem"
-                        @click="emit(operationItem)"
-                    >
-                        {{ operationItem.name }}
-                    </bri-button>
-                </template>
-            </div>
-        </div>
-
-        <template v-else>
-            <template v-for="(operationItem, index) in flatList">
-                <Poptip
-                    v-if="operationItem.tipContent"
-                    :key="(operationItem._key || operationItem.type) + 'poptip'"
-                    :class="[
-                        index ? 'dsh-margin-left8' : undefined
-                    ]"
-                    trigger="hover"
-                    :title="operationItem.tipTitle"
-                    :content="operationItem.tipContent"
-                    word-wrap
-                    :width="operationItem.tipWidth || 220"
-                    popper-class="DshButtons-poptip"
-                    :transfer="true"
-                >
-                    <bri-button
-                        :key="operationItem._key || operationItem.type"
-                        :style="operationItem.style"
-                        :class="[
-                            !operationItem.loading && !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
-                            itemClass,
-                        ]"
-                        :propsObj="operationItem"
-                        @click="emit(operationItem)"
-                    >
-                        {{ operationItem.name }}
-                    </bri-button>
-                </Poptip>
-
-                <bri-button
-                    v-else
-                    :key="operationItem._key || operationItem.type"
-                    :style="operationItem.style"
-                    :class="[
-                        index ? 'dsh-margin-left8' : undefined,
-                        !operationItem.loading && !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
-                        itemClass,
-                        ...(Array.isArray(operationItem.class) ? operationItem.class : [operationItem.class])
-                    ]"
-                    :propsObj="operationItem"
-                    @click="emit(operationItem)"
-                >
-                    {{ operationItem.name }}
-                </bri-button>
-            </template>
-
-            <!-- 更多 -->
-            <dsh-dropdown
-                v-if="moreList.length"
-                class="DshButtons-dropdown"
-                :list="moreList"
-                trigger="hover"
-                @click="emit($event)"
-            >
-                <slot name="more">
-                    <bri-button
-                        class="DshButtons-dropdown-more"
-                        :propsObj="moreBtnOperationObj"
-                    >
-                        <span class="DshButtons-dropdown-more-name">
-                            {{ moreBtnOperationObj.name }}
-                        </span>
-                    </bri-button>
-                </slot>
-            </dsh-dropdown>
-        </template>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "DshButtons",
-        props: {
-            mode: {
-                type: String,
-                default: "default",
-                validator (val) {
-                    return ["default", "between"].includes(val);
-                }
-            },
-
-            list: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            leftList: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            rightList: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            maxFlatNum: {
-                type: [Number, String],
-                default: 12
-            },
-            itemClass: String
-        },
-        data () {
-            return {
-                moreBtnOperationObj: {
-                    name: "更多",
-                    type: "more",
-                    size: "default",
-                    customIcon: "bico-gengduo",
-                    btnType: "linkText"
-                }
-            };
-        },
-        computed: {
-            flatList () {
-                return this.list.slice(0, this.maxFlatNum);
-            },
-            moreList () {
-                return this.list.slice(this.maxFlatNum);
-            },
-            leftFlatList () {
-                return this.leftList.slice(0, this.maxFlatNum);
-            },
-            leftMoreList () {
-                return this.leftList.slice(this.maxFlatNum);
-            }
-        },
-        created () {},
-        methods: {
-            emit (operationItem) {
-                this.$emit("click", operationItem);
-            }
-        }
-    };
-</script>
-
-<style lang="less" scoped>
-    .DshButtons {
-        &-flex {
-            width: 100%;
-            height: 100%;
-            .dsh-flex-row-between-center();
-
-            // 更多
-            .DshButtons-dropdown {
-                margin: 0 15px 0 0;
-                font-size: 16px;
-                font-weight: 400;
-                color: @themeColor;
-
-                &-more {
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: center;
-                    align-items: center;
-
-                    &-name {}
-                }
-            }
-        }
-
-        &-item {
-            > span {
-                width: 100%;
-                .dsh-ellipsis();
-            }
-        }
-    }
-</style>
-<style lang="less">
-    .DshButtons {
-        &-poptip {
-            .ivu-poptip-content {
-                .ivu-poptip-arrow {
-                    &:after {
-                        border-top-color: @textColor;
-                    }
-                }
-
-                .ivu-poptip-inner {
-                    background-color: @textColor;
-
-                    .ivu-poptip-body {
-                        &-content {
-                            &-inner {
-                                color: @textWhColor;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-</style>
+<template>
+    <div
+        v-if="mode === 'default' ? list.length : true"
+        class="DshButtons"
+    >
+        <div
+            v-if="mode === 'between'"
+            class="DshButtons-flex"
+        >
+            <!-- 左侧按钮 -->
+            <div class="DshButtons-flex-left">
+                <template v-for="(operationItem, index) in leftFlatList">
+                    <Poptip
+                        v-if="operationItem.tipContent"
+                        :key="(operationItem._key || operationItem.type) + 'poptip'"
+                        :class="[
+                            index ? 'dsh-margin-left8' : undefined
+                        ]"
+                        trigger="hover"
+                        :title="operationItem.tipTitle"
+                        :content="operationItem.tipContent"
+                        word-wrap
+                        :width="operationItem.tipWidth || 220"
+                        :transfer="true"
+                    >
+                        <bri-button
+                            :key="operationItem._key || operationItem.type"
+                            :style="operationItem.style"
+                            :class="[
+                                !operationItem.loading && !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
+                                itemClass,
+                            ]"
+                            :propsObj="operationItem"
+                            @click="emit(operationItem)"
+                        >
+                            {{ operationItem.name }}
+                        </bri-button>
+                    </Poptip>
+
+                    <bri-button
+                        v-else
+                        :key="operationItem._key || operationItem.type"
+                        :style="operationItem.style"
+                        :class="[
+                            index ? 'dsh-margin-left8' : undefined,
+                            !operationItem.loading && !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
+                            itemClass,
+                        ]"
+                        :propsObj="operationItem"
+                        @click="emit(operationItem)"
+                    >
+                        {{ operationItem.name }}
+                    </bri-button>
+                </template>
+
+                <!-- 更多的 下拉按钮-->
+                <dsh-dropdown
+                    v-if="leftMoreList.length"
+                    class="DshButtons-dropdown"
+                    :list="leftMoreList"
+                    :trigger="'hover'"
+                    @click="emit($event)"
+                >
+                    <slot name="more">
+                        <bri-button
+                            class="DshButtons-dropdown-more"
+                            :propsObj="moreBtnOperationObj"
+                        >
+                            <span class="DshButtons-dropdown-more-name">
+                                {{ moreBtnOperationObj.name }}
+                            </span>
+                        </bri-button>
+                    </slot>
+                </dsh-dropdown>
+            </div>
+
+            <!-- 右侧按钮 -->
+            <div class="DshButtons-flex-right">
+                <slot></slot>
+
+                <template v-for="(operationItem, index) in rightList">
+                    <Poptip
+                        v-if="operationItem.tipContent"
+                        :key="(operationItem._key || operationItem.type) + 'poptip'"
+                        :class="[
+                            index ? 'dsh-margin-left8' : undefined
+                        ]"
+                        trigger="hover"
+                        :title="operationItem.tipTitle"
+                        :content="operationItem.tipContent"
+                        word-wrap
+                        :width="operationItem.tipWidth || 220"
+                        :transfer="true"
+                    >
+                        <bri-button
+                            :key="operationItem._key || operationItem.type"
+                            :style="operationItem.style"
+                            :class="[
+                                !operationItem.loading && !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
+                                itemClass,
+                            ]"
+                            :propsObj="operationItem"
+                            @click="emit(operationItem)"
+                        >
+                            {{ operationItem.name }}
+                        </bri-button>
+                    </Poptip>
+
+                    <bri-button
+                        v-else
+                        :key="operationItem._key || operationItem.type"
+                        :style="operationItem.style"
+                        :class="[
+                            index ? 'dsh-margin-left8' : undefined,
+                            !operationItem.loading && !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
+                            itemClass,
+                        ]"
+                        :propsObj="operationItem"
+                        @click="emit(operationItem)"
+                    >
+                        {{ operationItem.name }}
+                    </bri-button>
+                </template>
+            </div>
+        </div>
+
+        <template v-else>
+            <template v-for="(operationItem, index) in flatList">
+                <Poptip
+                    v-if="operationItem.tipContent"
+                    :key="(operationItem._key || operationItem.type) + 'poptip'"
+                    :class="[
+                        index ? 'dsh-margin-left8' : undefined
+                    ]"
+                    trigger="hover"
+                    :title="operationItem.tipTitle"
+                    :content="operationItem.tipContent"
+                    word-wrap
+                    :width="operationItem.tipWidth || 220"
+                    popper-class="DshButtons-poptip"
+                    :transfer="true"
+                >
+                    <bri-button
+                        :key="operationItem._key || operationItem.type"
+                        :style="operationItem.style"
+                        :class="[
+                            !operationItem.loading && !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
+                            itemClass,
+                        ]"
+                        :propsObj="operationItem"
+                        @click="emit(operationItem)"
+                    >
+                        {{ operationItem.name }}
+                    </bri-button>
+                </Poptip>
+
+                <bri-button
+                    v-else
+                    :key="operationItem._key || operationItem.type"
+                    :style="operationItem.style"
+                    :class="[
+                        index ? 'dsh-margin-left8' : undefined,
+                        !operationItem.loading && !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
+                        itemClass,
+                        ...(Array.isArray(operationItem.class) ? operationItem.class : [operationItem.class])
+                    ]"
+                    :propsObj="operationItem"
+                    @click="emit(operationItem)"
+                >
+                    {{ operationItem.name }}
+                </bri-button>
+            </template>
+
+            <!-- 更多 -->
+            <dsh-dropdown
+                v-if="moreList.length"
+                class="DshButtons-dropdown"
+                :list="moreList"
+                trigger="hover"
+                @click="emit($event)"
+            >
+                <slot name="more">
+                    <bri-button
+                        class="DshButtons-dropdown-more"
+                        :propsObj="moreBtnOperationObj"
+                    >
+                        <span class="DshButtons-dropdown-more-name">
+                            {{ moreBtnOperationObj.name }}
+                        </span>
+                    </bri-button>
+                </slot>
+            </dsh-dropdown>
+        </template>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshButtons",
+        props: {
+            mode: {
+                type: String,
+                default: "default",
+                validator (val) {
+                    return ["default", "between"].includes(val);
+                }
+            },
+
+            list: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            leftList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            rightList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            maxFlatNum: {
+                type: [Number, String],
+                default: 12
+            },
+            itemClass: String
+        },
+        data () {
+            return {
+                moreBtnOperationObj: {
+                    name: "更多",
+                    type: "more",
+                    size: "default",
+                    customIcon: "bico-gengduo",
+                    btnType: "linkText"
+                }
+            };
+        },
+        computed: {
+            flatList () {
+                return this.list.slice(0, this.maxFlatNum);
+            },
+            moreList () {
+                return this.list.slice(this.maxFlatNum);
+            },
+            leftFlatList () {
+                return this.leftList.slice(0, this.maxFlatNum);
+            },
+            leftMoreList () {
+                return this.leftList.slice(this.maxFlatNum);
+            }
+        },
+        created () {},
+        methods: {
+            emit (operationItem) {
+                this.$emit("click", operationItem);
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshButtons {
+        &-flex {
+            width: 100%;
+            height: 100%;
+            .dsh-flex-row-between-center();
+
+            // 更多
+            .DshButtons-dropdown {
+                margin: 0 15px 0 0;
+                font-size: 16px;
+                font-weight: 400;
+                color: @themeColor;
+
+                &-more {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: center;
+                    align-items: center;
+
+                    &-name {}
+                }
+            }
+        }
+
+        &-item {
+            > span {
+                width: 100%;
+                .dsh-ellipsis();
+            }
+        }
+    }
+</style>
+<style lang="less">
+    .DshButtons {
+        &-poptip {
+            .ivu-poptip-content {
+                .ivu-poptip-arrow {
+                    &:after {
+                        border-top-color: @textColor;
+                    }
+                }
+
+                .ivu-poptip-inner {
+                    background-color: @textColor;
+
+                    .ivu-poptip-body {
+                        &-content {
+                            &-inner {
+                                color: @textWhColor;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>