@netang/quasar 0.0.20

package/components/dragger/index.vue

@@ -0,0 +1,202 @@
+<template>
+    <div
+        class="n-dragger"
+        :class="{
+            dragging,
+        }"
+    >
+        <slot
+            :mousedown="mousedown"
+            :fromIndex="fromIndex"
+            :dragStart="dragStart"
+            :dragEnter="dragEnter"
+            :dragEnd="dragEnd"
+        />
+    </div>
+</template>
+
+<script>
+import { ref, computed } from 'vue'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NDragger',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 值
+        modelValue: Array,
+        // 是否开启拖拽
+        drag: {
+            type: Boolean,
+            default: true,
+        },
+    },
+
+    /**
+     * 声明事件
+     */
+    emits: [
+        'update:modelValue',
+    ],
+
+    /**
+     * 组合式
+     */
+    setup(props, { emit }) {
+
+        // ==========【数据】=============================================================================================
+
+        // 是否拖拽中
+        const dragging = ref(false)
+
+        // 原始位置 index
+        const fromIndex = ref(null)
+
+        // 目标位置 index
+        const toIndex = ref(null)
+
+        // ==========【计算属性】=========================================================================================
+
+        /**
+         * 是否开启拖拽
+         */
+        const isDrag = computed(function() {
+            return props.drag
+                && utils.isValidArray(props.modelValue)
+                && props.modelValue.length > 1
+        })
+
+        // ==========【方法】=============================================================================================
+
+        /**
+         * 鼠标点击事件
+         */
+        function mousedown() {
+            // 如果开启拖拽
+            if (isDrag.value) {
+                // 设置拖拽中
+                dragging.value = true
+            }
+        }
+
+        /**
+         * 拖拽开始
+         * dragstart: 开始拖元素触发
+         * dragenter: 当元素拖进可drop元素（绑定drop事件的元素）时触发
+         * dragover: 当元素拖动到drop元素上时触发
+         * drop: 当元素放下到drop元素触发
+         * dragleave : 当元素离开drop元素时触发
+         * drag: 每次元素被拖动时会触发
+         * dragend: 放开拖动元素时触发
+         */
+        function dragStart(e, index) {
+
+            // 如果开启拖拽
+            if (isDrag.value) {
+
+                // 如果为火狐浏览器, 则必须要setData
+                // if (_.ua.firefox) {
+                //     e.dataTransfer.setData('info', e.target.id)
+                // }
+
+                // 设置拖拽中
+                dragging.value = true
+
+                // 设置原始位置 index
+                fromIndex.value = index
+            }
+        }
+
+        /**
+         * 拖拽中
+         */
+        function dragEnter(e, index) {
+
+            // 如果开启拖拽
+            if (isDrag.value) {
+
+                // 设置目标位置 index
+                toIndex.value = index
+
+                // 如果拖拽中
+                if (dragging.value) {
+
+                    // 为需要移动的元素设置 dragstart 事件
+                    // e.dataTransfer.effectAllowed = 'move'
+
+                    // 原始位置 index
+                    const from = fromIndex.value
+                    // 目标位置 index
+                    const to = toIndex.value
+
+                    // 如果原始位置 === 目标位置
+                    if (from === to) {
+                        // 则无任何操作
+                        return
+                    }
+
+                    const val = [...props.modelValue]
+
+                    // 如果当前元素在拖动目标位置的下方, 先将当前元素从数组拿出, 数组长度-1, 我们直接给数组拖动目标位置的地方新增一个和当前元素值一样的元素,
+                    // 我们再把数组之前的那个拖动的元素删除掉, 所以要len+1
+                    if (from > to) {
+                        val.splice(to, 0, val[from])
+                        val.splice(from + 1, 1)
+
+                    } else {
+                        // 如果当前元素在拖动目标位置的上方, 先将当前元素从数组拿出, 数组长度-1, 我们直接给数组拖动目标位置+1的地方新增一个和当前元素值一样的元素,
+                        // 这时, 数组len不变, 我们再把数组之前的那个拖动的元素删除掉, 下标还是from
+                        val.splice(to + 1, 0, val[from])
+                        val.splice(from, 1)
+                    }
+
+                    fromIndex.value = to
+                    toIndex.value = from
+
+                    // 更新值
+                    emit('update:modelValue', val)
+                }
+            }
+        }
+
+        /**
+         * 拖拽结束
+         */
+        function dragEnd() {
+
+            // 如果开启拖拽
+            if (isDrag.value) {
+                fromIndex.value = null
+                toIndex.value = null
+                dragging.value = false
+            }
+        }
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 是否拖拽中
+            dragging,
+            // 原始位置 index
+            fromIndex,
+            // 目标位置 index
+            toIndex,
+
+            // 鼠标点击事件
+            mousedown,
+            // 拖拽开始
+            dragStart,
+            // 拖拽中
+            dragEnter,
+            // 拖拽结束
+            dragEnd,
+        }
+    },
+}
+</script>

package/components/drawer/index.vue

@@ -0,0 +1,262 @@
+<template>
+    <q-drawer
+        v-model="isShow"
+        :side="side"
+        :breakpoint="breakpoint"
+        :width="currentWidth"
+        v-bind="$attrs"
+    >
+        <!-- 插槽 -->
+        <slot />
+
+        <!-- 拖拽手柄 -->
+        <div
+            class="n-drawer__drag-handle"
+            :class="`n-drawer__drag-handle--${side}`"
+            v-touch-pan.horizontal.prevent.mouse.preserveCursor="onTouchPan"
+            v-if="! $q.platform.is.mobile && drag"
+        ></div>
+    </q-drawer>
+</template>
+
+<script>
+import { ref, inject, nextTick } from 'vue'
+import { useQuasar } from 'quasar'
+import { useRoute } from 'vue-router'
+
+import { layoutKey, emptyRenderFn } from 'quasar/src/utils/private/symbols.js'
+
+import { NLayoutKey } from '../../utils/symbols'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NDrawer',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        side: {
+            type: String,
+            default: 'left',
+            validator: v => [ 'left', 'right' ].includes(v)
+        },
+        width: {
+            type: Number,
+            default: 300
+        },
+        breakpoint: {
+            type: Number,
+            default: 1000,
+        },
+
+        // 【自定义属性】
+        // --------------------------------------------------
+        // 是否显示
+        show: Boolean,
+        // 手机端宽度(px / %)
+        mobileWidth: {
+            type: [String, Number],
+            default: '80%',
+        },
+        // 最小宽度
+        minWidth: {
+            type: Number,
+            default: 100,
+        },
+        // 最大宽度
+        maxWidth: Number,
+        // 是否可拖拽
+        drag: Boolean,
+        // 是否拖拽折叠
+        // dragCollapse: Boolean,
+        // 折叠宽度
+        // collapseWidth: {
+        //     type: Number,
+        //     default: 80,
+        // },
+        // 缓存名
+        cache: [Boolean, String],
+    },
+
+    /**
+     * 组合式
+     */
+    setup(props) {
+
+        // ==========【注入】============================================================================================
+
+        // 获取 quasar 注入
+        const $layout = inject(layoutKey, emptyRenderFn)
+        if ($layout === emptyRenderFn) {
+            console.error('NDrawer needs to be child of QLayout')
+            return emptyRenderFn
+        }
+
+        // 获取布局注入数据
+        const $nLayout = inject(NLayoutKey)
+
+        // ==========【数据】============================================================================================
+
+        // quasar 对象
+        const $q = useQuasar()
+
+        // 获取当前路由
+        const $route = useRoute()
+
+        // 是否显示
+        const isShow = ref($q.screen.width < props.breakpoint ? false : props.show)
+
+        // 更新布局数据
+        $nLayout.update(function(data) {
+            data[props.side].data = isShow
+        })
+
+        // 缓存名
+        let cacheName = ''
+
+        // 获取原始宽度
+        let originalWidth = props.width
+
+        // 如果是手机端
+        if ($q.platform.is.mobile) {
+
+            // 获取手机端百分比值
+            let res = utils.percentValue(props.mobileWidth, true)
+
+            // 如果是百分比值
+            if (! _.isNil(res)) {
+                // 原始尺寸 = 屏幕宽度 * 百分比
+                if (res) {
+                    originalWidth = $q.screen.width * res
+                }
+
+            } else {
+                // 原始尺寸 = 屏幕宽度像素
+                res = utils.pxValue(props.mobileWidth)
+                if (res) {
+                    originalWidth = res
+                }
+            }
+
+        // 否则如果开启拖拽 && 开启缓存
+        } else if (props.drag && props.cache) {
+
+            // 设置缓存名
+            cacheName = `drawer_${props.side}_${props.cache === true ? $route.fullPath : props.cache}`
+
+            // 从缓存获取宽度
+            const cache = utils.storage.get(cacheName)
+            if (cache) {
+                originalWidth = cache
+            }
+        }
+
+        // 当前宽度
+        const currentWidth = ref(originalWidth)
+
+        // 下次 DOM 更新
+        nextTick(function() {
+            if (isShow.value && $layout.totalWidth.value < props.breakpoint) {
+                isShow.value = false
+            }
+        })
+
+        // ==========【方法】=============================================================================================
+
+        /**
+         * 拖动事件
+         */
+        let initialWidth
+        function onTouchPan({ isFirst, offset: { x } }) {
+
+            // 设置初始宽度
+            if (isFirst === true) {
+                initialWidth = currentWidth.value
+            }
+
+            // 获取拖拽宽度
+            let dragWidth = initialWidth + (props.side === 'left' ? + x : - x)
+            let newWidth = dragWidth
+
+            // 如果宽度 < 最小宽度
+            if (props.minWidth && newWidth < props.minWidth) {
+                newWidth = props.minWidth
+            }
+
+            // 如果宽度 > 最大宽度
+            if (props.maxWidth && newWidth > props.maxWidth) {
+                newWidth = props.maxWidth
+            }
+
+            // if (
+            //     // 如果显示
+            //     isShow.value
+            //     // 如果开启折叠
+            //     && props.dragCollapse
+            //     // 如果有最小宽度
+            //     && props.minWidth
+            // ) {
+            //     const collapseWidth = props.collapseWidth < props.minWidth ? props.collapseWidth : props.minWidth - 10
+            //
+            //     // 如果 拖拽宽度 < 折叠宽度
+            //     if (dragWidth < collapseWidth) {
+            //         isShow.value = false
+            //     }
+            // }
+
+            // 如果开启缓存
+            if (props.cache) {
+                // 设置缓存(永久缓存)
+                utils.storage.set(cacheName, newWidth, 0)
+            }
+
+            // 设置当前宽度
+            currentWidth.value = newWidth
+        }
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 是否显示
+            isShow,
+            // 当前宽度
+            currentWidth,
+
+            // 拖动事件
+            onTouchPan,
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/sass/var.scss";
+
+.n-drawer {
+    // 拖拽手柄
+    &__drag-handle {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 10px;
+        cursor: e-resize;
+        user-select: none;
+        z-index: 10;
+        right: 0;
+
+        // 左边侧滑菜单
+        &--left {
+            right: -5px;
+        }
+
+        // 右边侧滑菜单
+        &--right {
+            left: -5px;
+        }
+    }
+}
+</style>