bri-components 1.5.21 → 1.6.0

package/src/components/other/DshColorPanel.vue

@@ -1,128 +1,128 @@
-<template>
-    <Dropdown
-        class="DshColorPanel"
-        :trigger="trigger"
-        :placement="placement"
-        :transfer="transfer"
-    >
-        <Icon
-            class="DshColorPanel-rel"
-            :type="dropdownObj.icon"
-            :size="dropdownObj.size"
-            :color="dropdownObj.color"
-        />
-
-        <DropdownMenu
-            slot="list"
-            class="DshColorPanel-list"
-            :class="menuClass"
-        >
-            <DropdownItem
-                v-for="dropdownItem in list"
-                :key="dropdownItem._id || dropdownItem.type"
-                class="DshColorPanel-list-item"
-                :selected="dropdownItem.selected"
-                @click.native="dispatchEvent(dropdownItem)"
-            >
-                <span
-                    class="DshColorPanel-list-item-small"
-                    :style="{background:dropdownItem}"
-                ></span>
-                <span
-                    class="DshColorPanel-list-item-big"
-                    :style="{borderColor:dropdownItem}"
-                ></span>
-            </DropdownItem>
-        </DropdownMenu>
-    </Dropdown>
-</template>
-
-<script>
-    export default {
-        name: "DshColorPanel",
-        props: {
-            dropdownObj: {
-                type: Object,
-                default () {
-                    return {
-                        icon: "ios-more",
-                        size: 18,
-                        showDropdownItemIcon: true
-                    };
-                }
-            },
-            list: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            placement: {
-                type: String,
-                default: "bottom-start"
-            },
-            trigger: {
-                type: String,
-                default: "click"
-            },
-            transfer: {
-                type: Boolean,
-                default: true
-            },
-            menuClass: String
-        },
-        data () {
-            return {};
-        },
-        computed: {},
-        created () {},
-        methods: {
-            dispatchEvent (dropdownItem) {
-                this.$emit("click", dropdownItem);
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .DshColorPanel {
-        &-rel {
-            cursor: pointer;
-        }
-
-        &-list {
-            font-size: 15px;
-            display: flex;
-            width: 293px;
-            height: 72px;
-            flex-wrap: wrap;
-            justify-content: space-around;
-            align-items: center;
-
-            &-item {
-                padding: 6px;
-
-                &-big {
-                    width: 15px;
-                    height: 15px;
-                    display: inline-block;
-                    border-radius: 50%;
-                }
-
-                &-small {
-                    width: 12px;
-                    height: 12px;
-                    position: absolute;
-                    display: inline-block;
-                    transform: translate(1.5px,1.5px);
-                    border-radius: 50%;
-
-                    &:hover + span {
-                        border-width: 1px;
-                        border-style: solid;
-                    }
-                }
-            }
-        }
-    }
-</style>
+<template>
+    <Dropdown
+        class="DshColorPanel"
+        :trigger="trigger"
+        :placement="placement"
+        :transfer="transfer"
+    >
+        <Icon
+            class="DshColorPanel-rel"
+            :type="dropdownObj.icon"
+            :size="dropdownObj.size"
+            :color="dropdownObj.color"
+        />
+
+        <DropdownMenu
+            slot="list"
+            class="DshColorPanel-list"
+            :class="menuClass"
+        >
+            <DropdownItem
+                v-for="dropdownItem in list"
+                :key="dropdownItem._id || dropdownItem.type"
+                class="DshColorPanel-list-item"
+                :selected="dropdownItem.selected"
+                @click.native="dispatchEvent(dropdownItem)"
+            >
+                <span
+                    class="DshColorPanel-list-item-small"
+                    :style="{background:dropdownItem}"
+                ></span>
+                <span
+                    class="DshColorPanel-list-item-big"
+                    :style="{borderColor:dropdownItem}"
+                ></span>
+            </DropdownItem>
+        </DropdownMenu>
+    </Dropdown>
+</template>
+
+<script>
+    export default {
+        name: "DshColorPanel",
+        props: {
+            dropdownObj: {
+                type: Object,
+                default () {
+                    return {
+                        icon: "ios-more",
+                        size: 18,
+                        showDropdownItemIcon: true
+                    };
+                }
+            },
+            list: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            placement: {
+                type: String,
+                default: "bottom-start"
+            },
+            trigger: {
+                type: String,
+                default: "click"
+            },
+            transfer: {
+                type: Boolean,
+                default: true
+            },
+            menuClass: String
+        },
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {
+            dispatchEvent (dropdownItem) {
+                this.$emit("click", dropdownItem);
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshColorPanel {
+        &-rel {
+            cursor: pointer;
+        }
+
+        &-list {
+            font-size: 15px;
+            display: flex;
+            width: 293px;
+            height: 72px;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            align-items: center;
+
+            &-item {
+                padding: 6px;
+
+                &-big {
+                    width: 15px;
+                    height: 15px;
+                    display: inline-block;
+                    border-radius: 50%;
+                }
+
+                &-small {
+                    width: 12px;
+                    height: 12px;
+                    position: absolute;
+                    display: inline-block;
+                    transform: translate(1.5px,1.5px);
+                    border-radius: 50%;
+
+                    &:hover + span {
+                        border-width: 1px;
+                        border-style: solid;
+                    }
+                }
+            }
+        }
+    }
+</style>

package/src/components/other/DshMenuNav.vue

@@ -1,188 +1,188 @@
-<template>
-    <div class="DshMenuNav">
-        <!-- 坑 -->
-        <div
-            v-if="position === 'right'"
-            class="DshMenuNav-view"
-        >
-            <router-view></router-view>
-        </div>
-
-        <div
-            v-if="showMenuList"
-            :class="[
-                'DshMenuNav-nav',
-                `DshMenuNav-nav-${position}`,
-                `DshMenuNav-nav-${layout}`
-            ]"
-            :style="{
-                width: `${+width}px`
-            }"
-        >
-            <div
-                v-if="title"
-                class="DshMenuNav-nav-title"
-            >
-                <!-- <Icon type="ios-settings" size="18" /> -->
-                <span>{{ title }}</span>
-            </div>
-
-            <div
-                class="list"
-                :style="{
-                    marginBottom: routeList.some(routeItem => routeItem.meta.bottom) ? '60px' : undefined
-                }"
-            >
-                <div
-                    v-for="routeItem in routeList"
-                    :key="routeItem.name"
-                    :class="['list-item', { 'list-item-active': routeItem.name === $getRouteName() }, { 'list-item-bottom': routeItem.meta.bottom } ]"
-                    :style="{ fontWeight: routeItem.meta.weight ? 600 : undefined }"
-                    @click="$goPage(routeItem)"
-                >
-                    <span
-                        v-if="routeItem.meta.beforeText"
-                        class="list-item-beforeText"
-                        @click.stop="0"
-                    >
-                        {{ routeItem.meta.beforeText }}
-                    </span>
-                    <Icon
-                        v-if="routeItem.meta.customIcon"
-                        class="list-item-iconClass"
-                        :custom="'bico-font ' + routeItem.meta.customIcon"
-                    />
-                    <span style="vertical-align:middle;">
-                        {{ routeItem.meta.title }}
-                    </span>
-                </div>
-            </div>
-        </div>
-
-        <!-- 坑 -->
-        <div
-            v-if="position === 'left'"
-            class="DshMenuNav-view"
-        >
-            <router-view></router-view>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "DshMenuNav",
-        props: {
-            position: {
-                type: String,
-                default: "left"
-            },
-            width: {
-                type: [String, Number],
-                default: "200"
-            },
-            title: String,
-            routeList: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            showMenuList: {
-                type: Boolean,
-                default: true
-            },
-            layout: String
-        },
-        data () {
-            return {};
-        },
-        computed: {},
-        created () {},
-        methods: {}
-    };
-</script>
-
-<style lang="less">
-    .DshMenuNav {
-        width: 100%;
-        height: 100%;
-        border-radius: 8px;
-        overflow: hidden;
-        display: flex;
-        flex-direction: row;
-
-        &-nav {
-            width: 121px;
-            height: 100%;
-            background-color: #ffffff;
-            display: flex;
-            flex-direction: column;
-            position: relative;
-            box-shadow: 5px 0px 9px rgba(0, 0, 0, 0.1);
-
-            &-left {
-            }
-            &-right {
-                border-left: 1px solid @borderColor;
-            }
-
-            &-title {
-                padding: 10px 20px;
-                height: 80px;
-                line-height: 60px;
-                font-weight: 600;
-                font-size: 16px;
-            }
-
-            .list {
-                flex: 1;
-                min-height: 0px;
-                overflow: auto;
-
-                &-item {
-                    padding: 10px 30px;
-                    background-color: #ffffff;
-                    line-height: 20px;
-                    font-size: @smallTitleSize;
-                    cursor: pointer;
-
-                    &:hover {
-                        color: @themeColor;
-                    }
-                    &-active {
-                        color: @themeColor;
-                        background-color: #F7FCFC;
-                    }
-
-                    &-bottom {
-                        width: 100%;
-                        border-top: 1px solid @borderColor;
-                        position: absolute;
-                        left: 0px;
-                        bottom: 0px;
-                    }
-                    &-beforeText {
-                        display: block;
-                        color: @textColor;
-                        padding: 15px 5px 5px 15px;
-                        margin: -10px -30px 10px -30px;
-                        font-size: 14px;
-                        background: #fff;
-                    }
-                    &-iconClass {
-                        color: @themeColor;
-                        padding-right: 5px;
-                        font-size: 18px;
-                    }
-                }
-            }
-        }
-
-        &-view {
-            flex: 1;
-            min-width: 0px;
-            height: 100%;
-        }
-    }
-</style>
+<template>
+    <div class="DshMenuNav">
+        <!-- 坑 -->
+        <div
+            v-if="position === 'right'"
+            class="DshMenuNav-view"
+        >
+            <router-view></router-view>
+        </div>
+
+        <div
+            v-if="showMenuList"
+            :class="[
+                'DshMenuNav-nav',
+                `DshMenuNav-nav-${position}`,
+                `DshMenuNav-nav-${layout}`
+            ]"
+            :style="{
+                width: `${+width}px`
+            }"
+        >
+            <div
+                v-if="title"
+                class="DshMenuNav-nav-title"
+            >
+                <!-- <Icon type="ios-settings" size="18" /> -->
+                <span>{{ title }}</span>
+            </div>
+
+            <div
+                class="list"
+                :style="{
+                    marginBottom: routeList.some(routeItem => routeItem.meta.bottom) ? '60px' : undefined
+                }"
+            >
+                <div
+                    v-for="routeItem in routeList"
+                    :key="routeItem.name"
+                    :class="['list-item', { 'list-item-active': routeItem.name === $getRouteName() }, { 'list-item-bottom': routeItem.meta.bottom } ]"
+                    :style="{ fontWeight: routeItem.meta.weight ? 600 : undefined }"
+                    @click="$goPage(routeItem)"
+                >
+                    <span
+                        v-if="routeItem.meta.beforeText"
+                        class="list-item-beforeText"
+                        @click.stop="0"
+                    >
+                        {{ routeItem.meta.beforeText }}
+                    </span>
+                    <Icon
+                        v-if="routeItem.meta.customIcon"
+                        class="list-item-iconClass"
+                        :custom="'bico-font ' + routeItem.meta.customIcon"
+                    />
+                    <span style="vertical-align:middle;">
+                        {{ routeItem.meta.title }}
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 坑 -->
+        <div
+            v-if="position === 'left'"
+            class="DshMenuNav-view"
+        >
+            <router-view></router-view>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshMenuNav",
+        props: {
+            position: {
+                type: String,
+                default: "left"
+            },
+            width: {
+                type: [String, Number],
+                default: "200"
+            },
+            title: String,
+            routeList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            showMenuList: {
+                type: Boolean,
+                default: true
+            },
+            layout: String
+        },
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {}
+    };
+</script>
+
+<style lang="less">
+    .DshMenuNav {
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: row;
+
+        &-nav {
+            width: 121px;
+            height: 100%;
+            background-color: #ffffff;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            box-shadow: 5px 0px 9px rgba(0, 0, 0, 0.1);
+
+            &-left {
+            }
+            &-right {
+                border-left: 1px solid @borderColor;
+            }
+
+            &-title {
+                padding: 10px 20px;
+                height: 80px;
+                line-height: 60px;
+                font-weight: 600;
+                font-size: 16px;
+            }
+
+            .list {
+                flex: 1;
+                min-height: 0px;
+                overflow: auto;
+
+                &-item {
+                    padding: 10px 30px;
+                    background-color: #ffffff;
+                    line-height: 20px;
+                    font-size: @smallTitleSize;
+                    cursor: pointer;
+
+                    &:hover {
+                        color: @themeColor;
+                    }
+                    &-active {
+                        color: @themeColor;
+                        background-color: #F7FCFC;
+                    }
+
+                    &-bottom {
+                        width: 100%;
+                        border-top: 1px solid @borderColor;
+                        position: absolute;
+                        left: 0px;
+                        bottom: 0px;
+                    }
+                    &-beforeText {
+                        display: block;
+                        color: @textColor;
+                        padding: 15px 5px 5px 15px;
+                        margin: -10px -30px 10px -30px;
+                        font-size: 14px;
+                        background: #fff;
+                    }
+                    &-iconClass {
+                        color: @themeColor;
+                        padding-right: 5px;
+                        font-size: 18px;
+                    }
+                }
+            }
+        }
+
+        &-view {
+            flex: 1;
+            min-width: 0px;
+            height: 100%;
+        }
+    }
+</style>