github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/libs/vue-1.0.24/src/directives/internal/style.js (about)

     1  import {
     2    extend,
     3    isArray,
     4    hyphenate,
     5    camelize,
     6    warn
     7  } from '../../util/index'
     8  
     9  const prefixes = ['-webkit-', '-moz-', '-ms-']
    10  const camelPrefixes = ['Webkit', 'Moz', 'ms']
    11  const importantRE = /!important;?$/
    12  const propCache = Object.create(null)
    13  
    14  let testEl = null
    15  
    16  export default {
    17  
    18    deep: true,
    19  
    20    update (value) {
    21      if (typeof value === 'string') {
    22        this.el.style.cssText = value
    23      } else if (isArray(value)) {
    24        this.handleObject(value.reduce(extend, {}))
    25      } else {
    26        this.handleObject(value || {})
    27      }
    28    },
    29  
    30    handleObject (value) {
    31      // cache object styles so that only changed props
    32      // are actually updated.
    33      var cache = this.cache || (this.cache = {})
    34      var name, val
    35      for (name in cache) {
    36        if (!(name in value)) {
    37          this.handleSingle(name, null)
    38          delete cache[name]
    39        }
    40      }
    41      for (name in value) {
    42        val = value[name]
    43        if (val !== cache[name]) {
    44          cache[name] = val
    45          this.handleSingle(name, val)
    46        }
    47      }
    48    },
    49  
    50    handleSingle (prop, value) {
    51      prop = normalize(prop)
    52      if (!prop) return // unsupported prop
    53      // cast possible numbers/booleans into strings
    54      if (value != null) value += ''
    55      if (value) {
    56        var isImportant = importantRE.test(value)
    57          ? 'important'
    58          : ''
    59        if (isImportant) {
    60          /* istanbul ignore if */
    61          if (process.env.NODE_ENV !== 'production') {
    62            warn(
    63              'It\'s probably a bad idea to use !important with inline rules. ' +
    64              'This feature will be deprecated in a future version of Vue.'
    65            )
    66          }
    67          value = value.replace(importantRE, '').trim()
    68          this.el.style.setProperty(prop.kebab, value, isImportant)
    69        } else {
    70          this.el.style[prop.camel] = value
    71        }
    72      } else {
    73        this.el.style[prop.camel] = ''
    74      }
    75    }
    76  
    77  }
    78  
    79  /**
    80   * Normalize a CSS property name.
    81   * - cache result
    82   * - auto prefix
    83   * - camelCase -> dash-case
    84   *
    85   * @param {String} prop
    86   * @return {String}
    87   */
    88  
    89  function normalize (prop) {
    90    if (propCache[prop]) {
    91      return propCache[prop]
    92    }
    93    var res = prefix(prop)
    94    propCache[prop] = propCache[res] = res
    95    return res
    96  }
    97  
    98  /**
    99   * Auto detect the appropriate prefix for a CSS property.
   100   * https://gist.github.com/paulirish/523692
   101   *
   102   * @param {String} prop
   103   * @return {String}
   104   */
   105  
   106  function prefix (prop) {
   107    prop = hyphenate(prop)
   108    var camel = camelize(prop)
   109    var upper = camel.charAt(0).toUpperCase() + camel.slice(1)
   110    if (!testEl) {
   111      testEl = document.createElement('div')
   112    }
   113    var i = prefixes.length
   114    var prefixed
   115    if (camel !== 'filter' && (camel in testEl.style)) {
   116      return {
   117        kebab: prop,
   118        camel: camel
   119      }
   120    }
   121    while (i--) {
   122      prefixed = camelPrefixes[i] + upper
   123      if (prefixed in testEl.style) {
   124        return {
   125          kebab: prefixes[i] + prop,
   126          camel: prefixed
   127        }
   128      }
   129    }
   130  }