an_xiao/police_uniapp/uni_modules/uview-ui/libs/mixin/style.js

229 lines
6.7 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

export default {
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 addStyle = uni.$u.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 uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
}
},
methods: {
// 获取margin或者padding的单位比如padding: 0 20转为padding: 0 20px
getUnit(unit = '') {
// 取出两端空格,分隔成数组,再对数组的每个元素添加单位,最后再合并成字符串
return uni.$u.trim(unit).split(' ').map((item) => uni.$u.addUnit(item)).join(' ')
}
}
}