create-uniapps 1.0.0

package/template/src/uni_modules/uview-plus/libs/mixin/style.js

@@ -0,0 +1,249 @@
+import { defineMixin } from '../vue'
+import { addStyle, deepMerge, addUnit, trim } from '../function/index'
+
+export const style = defineMixin({
+    props: {
+        // flex排列方式
+        flexDirection: {
+            type: String,
+            default: ''
+        },
+        // flex-direction的简写
+        fd: {
+            type: String,
+            default: ''
+        },
+        // 展示类型
+        display: {
+            type: String,
+            default: ''
+        },
+        // display简写
+        d: {
+            type: String,
+            default: ''
+        },
+        // 主轴排列方式
+        justifyContent: {
+            type: String,
+            default: ''
+        },
+        // justifyContent的简写
+        jc: {
+            type: String,
+            default: ''
+        },
+        // 纵轴排列方式
+        alignItems: {
+            type: String,
+            default: ''
+        },
+        // align-items的简写
+        ai: {
+            type: String,
+            default: ''
+        },
+        color: {
+            type: String,
+            default: ''
+        },
+        // color简写
+        c: {
+            type: String,
+            default: ''
+        },
+        // 字体大小
+        fontSize: {
+            type: [String, Number],
+            default: 0
+        },
+        // font-size简写
+        fs: {
+            type: [String, Number],
+            default: ''
+        },
+        margin: {
+            type: [String, Number],
+            default: 0
+        },
+        // margin简写
+        m: {
+            type: [String, Number],
+            default: 0
+        },
+        // margin-top
+        marginTop: {
+            type: [String, Number],
+            default: 0
+        },
+        // margin-top简写
+        mt: {
+            type: [String, Number],
+            default: 0
+        },
+        // margin-right
+        marginRight: {
+            type: [String, Number],
+            default: 0
+        },
+        // margin-right简写
+        mr: {
+            type: [String, Number],
+            default: 0
+        },
+        // margin-bottom
+        marginBottom: {
+            type: [String, Number],
+            default: 0
+        },
+        // margin-bottom简写
+        mb: {
+            type: [String, Number],
+            default: 0
+        },
+        // margin-left
+        marginLeft: {
+            type: [String, Number],
+            default: 0
+        },
+        // margin-left简写
+        ml: {
+            type: [String, Number],
+            default: 0
+        },
+        // padding-left
+        paddingLeft: {
+            type: [String, Number],
+            default: 0
+        },
+        // padding-left简写
+        pl: {
+            type: [String, Number],
+            default: 0
+        },
+        // padding-top
+        paddingTop: {
+            type: [String, Number],
+            default: 0
+        },
+        // padding-top简写
+        pt: {
+            type: [String, Number],
+            default: 0
+        },
+        // padding-right
+        paddingRight: {
+            type: [String, Number],
+            default: 0
+        },
+        // padding-right简写
+        pr: {
+            type: [String, Number],
+            default: 0
+        },
+        // padding-bottom
+        paddingBottom: {
+            type: [String, Number],
+            default: 0
+        },
+        // padding-bottom简写
+        pb: {
+            type: [String, Number],
+            default: 0
+        },
+        // border-radius
+        borderRadius: {
+            type: [String, Number],
+            default: 0
+        },
+        // border-radius简写
+        radius: {
+            type: [String, Number],
+            default: 0
+        },
+        // transform
+        transform: {
+            type: String,
+            default: ''
+        },
+        // 定位
+        position: {
+            type: String,
+            default: ''
+        },
+        // position简写
+        pos: {
+            type: String,
+            default: ''
+        },
+        // 宽度
+        width: {
+            type: [String, Number],
+            default: null
+        },
+        // width简写
+        w: {
+            type: [String, Number],
+            default: null
+        },
+        // 高度
+        height: {
+            type: [String, Number],
+            default: null
+        },
+        // height简写
+        h: {
+            type: [String, Number],
+            default: null
+        },
+        top: {
+            type: [String, Number],
+            default: 0
+        },
+        right: {
+            type: [String, Number],
+            default: 0
+        },
+        bottom: {
+            type: [String, Number],
+            default: 0
+        },
+        left: {
+            type: [String, Number],
+            default: 0
+        }
+    },
+    computed: {
+        viewStyle() {
+            const style = {}
+            const addStyleTmp = addStyle(this.width || this.w)
+                && (style.width = addStyle(this.width || this.w))(this.height || this.h)
+                && (style.height = addStyle(this.height || this.h))(this.margin || this.m)
+                && (style.margin = addStyle(this.margin || this.m))(this.marginTop || this.mt)
+                && (style.marginTop = addStyle(this.marginTop || this.mt))(this.marginRight || this.mr)
+                && (style.marginRight = addStyle(this.marginRight || this.mr))(this.marginBottom || this.mb)
+                && (style.marginBottom = addStyle(this.marginBottom || this.mb))(this.marginLeft || this.ml)
+                && (style.marginLeft = addStyle(this.marginLeft || this.ml))(this.padding || this.p)
+                && (style.padding = addStyle(this.padding || this.p))(this.paddingTop || this.pt)
+                && (style.paddingTop = addStyle(this.paddingTop || this.pt))(this.paddingRight || this.pr)
+                && (style.paddingRight = addStyle(this.paddingRight || this.pr))(this.paddingBottom || this.pb)
+                && (style.paddingBottom = addStyle(this.paddingBottom || this.pb))(this.paddingLeft || this.pl)
+                && (style.paddingLeft = addStyle(this.paddingLeft || this.pl))(this.color || this.c)
+                && (style.color = this.color || this.c)(this.fontSize || this.fs)
+                && (style.fontSize = this.fontSize || this.fs)(this.borderRadius || this.radius)
+                && (style.borderRadius = this.borderRadius || this.radius)(this.position || this.pos)
+                && (this.position = this.position || this.pos)(this.flexDirection || this.fd)
+                && (this.flexDirection = this.flexDirection || this.fd)(this.justifyContent || jc)
+                && (this.justifyContent = this.justifyContent || jc)(this.alignItems || ai)
+                && (this.alignItems = this.alignItems || ai)
+            return deepMerge(style, addStyleTmp(this.customStyle))
+        }
+    },
+    methods: {
+        // 获取margin或者padding的单位，比如padding: 0 20转为padding: 0 20px
+        getUnit(unit = '') {
+            // 取出两端空格，分隔成数组，再对数组的每个元素添加单位，最后再合并成字符串
+            return trim(unit).split(' ').map((item) => addUnit(item)).join(' ')
+        }
+    }
+})

package/template/src/uni_modules/uview-plus/libs/mixin/touch.js

@@ -0,0 +1,61 @@
+import { defineMixin } from '../vue'
+
+const MIN_DISTANCE = 10
+
+function getDirection(x, y) {
+    if (x > y && x > MIN_DISTANCE) {
+        return 'horizontal'
+    }
+    if (y > x && y > MIN_DISTANCE) {
+        return 'vertical'
+    }
+    return ''
+}
+
+export const touchMixin = defineMixin({
+    methods: {
+        getTouchPoint(e) {
+            if (!e) {
+                return {
+                    x: 0,
+                    y: 0
+                }
+            } if (e.touches && e.touches[0]) {
+                return {
+                    x: e.touches[0].pageX,
+                    y: e.touches[0].pageY
+                }
+            } if (e.changedTouches && e.changedTouches[0]) {
+                return {
+                    x: e.changedTouches[0].pageX,
+                    y: e.changedTouches[0].pageY
+                }
+            }
+            return {
+                x: e.clientX || 0,
+                y: e.clientY || 0
+            }
+        },
+        resetTouchStatus() {
+            this.direction = ''
+            this.deltaX = 0
+            this.deltaY = 0
+            this.offsetX = 0
+            this.offsetY = 0
+        },
+        touchStart(event) {
+            this.resetTouchStatus()
+            const touch = this.getTouchPoint(event)
+            this.startX = touch.x
+            this.startY = touch.y
+        },
+        touchMove(event) {
+            const touch = this.getTouchPoint(event)
+            this.deltaX = touch.x - this.startX
+            this.deltaY = touch.y - this.startY
+            this.offsetX = Math.abs(this.deltaX)
+            this.offsetY = Math.abs(this.deltaY)
+            this.direction =				this.direction || getDirection(this.offsetX, this.offsetY)
+        }
+    }
+})