style.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. export default {
  2. props: {
  3. // flex排列方式
  4. flexDirection: {
  5. type: String,
  6. default: ''
  7. },
  8. // flex-direction的简写
  9. fd: {
  10. type: String,
  11. default: ''
  12. },
  13. // 展示类型
  14. display: {
  15. type: String,
  16. default: ''
  17. },
  18. // display简写
  19. d: {
  20. type: String,
  21. default: ''
  22. },
  23. // 主轴排列方式
  24. justifyContent: {
  25. type: String,
  26. default: ''
  27. },
  28. // justifyContent的简写
  29. jc: {
  30. type: String,
  31. default: ''
  32. },
  33. // 纵轴排列方式
  34. alignItems: {
  35. type: String,
  36. default: ''
  37. },
  38. // align-items的简写
  39. ai: {
  40. type: String,
  41. default: ''
  42. },
  43. color: {
  44. type: String,
  45. default: ''
  46. },
  47. // color简写
  48. c: {
  49. type: String,
  50. default: ''
  51. },
  52. // 字体大小
  53. fontSize: {
  54. type: [String, Number],
  55. default: 0
  56. },
  57. // font-size简写
  58. fs: {
  59. type: [String, Number],
  60. default: ''
  61. },
  62. margin: {
  63. type: [String, Number],
  64. default: 0
  65. },
  66. // margin简写
  67. m: {
  68. type: [String, Number],
  69. default: 0
  70. },
  71. // margin-top
  72. marginTop: {
  73. type: [String, Number],
  74. default: 0
  75. },
  76. // margin-top简写
  77. mt: {
  78. type: [String, Number],
  79. default: 0
  80. },
  81. // margin-right
  82. marginRight: {
  83. type: [String, Number],
  84. default: 0
  85. },
  86. // margin-right简写
  87. mr: {
  88. type: [String, Number],
  89. default: 0
  90. },
  91. // margin-bottom
  92. marginBottom: {
  93. type: [String, Number],
  94. default: 0
  95. },
  96. // margin-bottom简写
  97. mb: {
  98. type: [String, Number],
  99. default: 0
  100. },
  101. // margin-left
  102. marginLeft: {
  103. type: [String, Number],
  104. default: 0
  105. },
  106. // margin-left简写
  107. ml: {
  108. type: [String, Number],
  109. default: 0
  110. },
  111. // padding-left
  112. paddingLeft: {
  113. type: [String, Number],
  114. default: 0
  115. },
  116. // padding-left简写
  117. pl: {
  118. type: [String, Number],
  119. default: 0
  120. },
  121. // padding-top
  122. paddingTop: {
  123. type: [String, Number],
  124. default: 0
  125. },
  126. // padding-top简写
  127. pt: {
  128. type: [String, Number],
  129. default: 0
  130. },
  131. // padding-right
  132. paddingRight: {
  133. type: [String, Number],
  134. default: 0
  135. },
  136. // padding-right简写
  137. pr: {
  138. type: [String, Number],
  139. default: 0
  140. },
  141. // padding-bottom
  142. paddingBottom: {
  143. type: [String, Number],
  144. default: 0
  145. },
  146. // padding-bottom简写
  147. pb: {
  148. type: [String, Number],
  149. default: 0
  150. },
  151. // border-radius
  152. borderRadius: {
  153. type: [String, Number],
  154. default: 0
  155. },
  156. // border-radius简写
  157. radius: {
  158. type: [String, Number],
  159. default: 0
  160. },
  161. // transform
  162. transform: {
  163. type: String,
  164. default: ''
  165. },
  166. // 定位
  167. position: {
  168. type: String,
  169. default: ''
  170. },
  171. // position简写
  172. pos: {
  173. type: String,
  174. default: ''
  175. },
  176. // 宽度
  177. width: {
  178. type: [String, Number],
  179. default: null
  180. },
  181. // width简写
  182. w: {
  183. type: [String, Number],
  184. default: null
  185. },
  186. // 高度
  187. height: {
  188. type: [String, Number],
  189. default: null
  190. },
  191. // height简写
  192. h: {
  193. type: [String, Number],
  194. default: null
  195. },
  196. top: {
  197. type: [String, Number],
  198. default: 0
  199. },
  200. right: {
  201. type: [String, Number],
  202. default: 0
  203. },
  204. bottom: {
  205. type: [String, Number],
  206. default: 0
  207. },
  208. left: {
  209. type: [String, Number],
  210. default: 0
  211. }
  212. },
  213. computed: {
  214. viewStyle() {
  215. const style = {}
  216. 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)
  217. return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
  218. }
  219. },
  220. methods: {
  221. // 获取margin或者padding的单位,比如padding: 0 20转为padding: 0 20px
  222. getUnit(unit = '') {
  223. // 取出两端空格,分隔成数组,再对数组的每个元素添加单位,最后再合并成字符串
  224. return uni.$u.trim(unit).split(' ').map((item) => uni.$u.addUnit(item)).join(' ')
  225. }
  226. }
  227. }