phone_uni/uni_modules/uview-plus/libs/mixin/style.js

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(' ')
        }
    }
})