You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

249 lines
7.1 KiB

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