Mercurial > gemma
annotate client/src/components/Layerselect.vue @ 531:9c036b32c852
refac: Layer selection componentized
POC from 22cca659e40b splitted into a layerselection component and
iterative rendering. Now more vuelike.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 28 Aug 2018 12:53:56 +0200 |
parents | |
children | 505656a9947f |
rev | line source |
---|---|
531
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
2 <div class="d-flex"> |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
3 <label :for="layername">{{this.layername}}</label> |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
4 <input @change="visibilityToggled" |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
5 :id="layername" |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
6 type="checkbox" |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
7 :checked="isVisible"> |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
8 </div> |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
9 </template> |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
10 |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
11 <style lang="sass"> |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
12 |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
13 </style> |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
14 |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
15 |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
16 <script> |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
17 export default { |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
18 props: ["layername", "layerindex", "isVisible"], |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
19 name: "layerselect", |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
20 methods: { |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
21 visibilityToggled() { |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
22 this.$emit("visibilityToggled", this.layerindex); |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
23 } |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
24 } |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
25 }; |
9c036b32c852
refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
26 </script> |