601f1f4e9f79741fd21d89001122bab58e51cb2daee8aea576a5cf257ab8b5255c5e39b6b6bcc0904e485499f5be618f2dcfd891f436ee0954fac6444b6b92 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. /* @flow */
  2. import { cached, camelize, isPlainObject } from 'shared/util'
  3. import { parseText } from 'compiler/parser/text-parser'
  4. import {
  5. getAndRemoveAttr,
  6. getBindingAttr,
  7. baseWarn
  8. } from 'compiler/helpers'
  9. type StaticStyleResult = {
  10. dynamic: boolean,
  11. styleResult: string | Object | void
  12. };
  13. const normalize = cached(camelize)
  14. function transformNode (el: ASTElement, options: CompilerOptions) {
  15. const warn = options.warn || baseWarn
  16. const staticStyle = getAndRemoveAttr(el, 'style')
  17. const { dynamic, styleResult } = parseStaticStyle(staticStyle, options)
  18. if (process.env.NODE_ENV !== 'production' && dynamic) {
  19. warn(
  20. `style="${String(staticStyle)}": ` +
  21. 'Interpolation inside attributes has been deprecated. ' +
  22. 'Use v-bind or the colon shorthand instead.',
  23. el.rawAttrsMap['style']
  24. )
  25. }
  26. if (!dynamic && styleResult) {
  27. // $flow-disable-line
  28. el.staticStyle = styleResult
  29. }
  30. const styleBinding = getBindingAttr(el, 'style', false /* getStatic */)
  31. if (styleBinding) {
  32. el.styleBinding = styleBinding
  33. } else if (dynamic) {
  34. // $flow-disable-line
  35. el.styleBinding = styleResult
  36. }
  37. }
  38. function genData (el: ASTElement): string {
  39. let data = ''
  40. if (el.staticStyle) {
  41. data += `staticStyle:${el.staticStyle},`
  42. }
  43. if (el.styleBinding) {
  44. data += `style:${el.styleBinding},`
  45. }
  46. return data
  47. }
  48. function parseStaticStyle (staticStyle: ?string, options: CompilerOptions): StaticStyleResult {
  49. // "width: 200px; height: 200px;" -> {width: 200, height: 200}
  50. // "width: 200px; height: {{y}}" -> {width: 200, height: y}
  51. let dynamic = false
  52. let styleResult = ''
  53. if (typeof staticStyle === 'string') {
  54. const styleList = staticStyle.trim().split(';').map(style => {
  55. const result = style.trim().split(':')
  56. if (result.length !== 2) {
  57. return
  58. }
  59. const key = normalize(result[0].trim())
  60. const value = result[1].trim()
  61. const dynamicValue = parseText(value, options.delimiters)
  62. if (dynamicValue) {
  63. dynamic = true
  64. return key + ':' + dynamicValue.expression
  65. }
  66. return key + ':' + JSON.stringify(value)
  67. }).filter(result => result)
  68. if (styleList.length) {
  69. styleResult = '{' + styleList.join(',') + '}'
  70. }
  71. } else if (isPlainObject(staticStyle)) {
  72. styleResult = JSON.stringify(staticStyle) || ''
  73. }
  74. return { dynamic, styleResult }
  75. }
  76. export default {
  77. staticKeys: ['staticStyle'],
  78. transformNode,
  79. genData
  80. }