2016-07-31 35 views

Antwort

0

Vielleicht ist der einfachste Weg, einen Beobachter zu haben, das wird oberen Fall der Eingangswert?

Ein Verhalten ist natürlich eine Option, um die toUpper Funktion wiederverwendbar zu machen.

Polymer({ 
 
    is: 'my-elem', 
 
    properties: { 
 
    value: { 
 
     type: String, 
 
     value: 'I will alwasy be upper case', 
 
     observer: 'toUpper' 
 
    } 
 
    }, 
 
    toUpper: function(val) { 
 
    this.value = val.toUpperCase(); 
 
    } 
 
});
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <base href="https://polygit.org/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
    <link href="polymer/polymer.html" rel="import"/> 
 
    <link href="paper-input/paper-input.html" rel="import"/> 
 
</head> 
 

 
<body> 
 
    <my-elem></my-elem> 
 
    
 
    <dom-module id="my-elem"> 
 
    <template> 
 
     <paper-input value="{{value}}"></paper-input> 
 
    </template> 
 
    </dom-module> 
 

 
</body> 
 
</html>

1

Da die Commens haben die CSS-Lösung ohne Mixins angegeben wird nicht funktionieren, wenn Schatten dom so aktiviert ist, die Lösung Mixins mit:

<paper-input class="uppercase2"></paper-input> 

Und eine benutzerdefinierte definieren Stil auf dem Eingang mit dem Mixin - Papier-Eingang-Container-Eingang::

<style is="custom-style"> 
    paper-input.uppercase2 { 
     --paper-input-container-input: {     
      text-transform:uppercase; 
     } 
    }  
</style> 

können Sie sehen es in Laufen: https://jsfiddle.net/0u45v46e/5/

+0

wird diese Lösung nicht mit Schatten DOM arbeiten. Es sei denn, Sie verwenden '/ deep /' das ist, was keine gute Idee ist –

+0

Obwohl ich nicht shadow dom verwenden möchte, mit Mixins können Sie es mit CSS tun, finden Sie hier ein Beispiel: [mit und ohne Mixins ] (https://jsfiddle.net/0u45v46e/4/) – stp18

+0

@ stp18 Ihr 'ohne mixin case' wird scheitern, wenn' shadow-dom' eingeschaltet ist, also warum es besser ist, Mixin zu verwenden – a1626