Vytvoření komponenty

4 years ago · 979d2ecb1b
5 changed files with 77 additions and 5 deletions
--- a/README.md
+++ b/README.md
@ -1,3 +1,22 @@
+#instalace 
+
+instalace vue CLI
+    $ npm install @vue/cli
+    $ node_module\.bin\vue create name_project
+
+    Přepnout se do projektu "cd ...."
+    Spustit server
+
+    $ npm run serve
+
+    (připojení repozitáře)
+
+
+
+
+
+
+
 # stavebniny

 ## Project setup
--- a/public/index.html
+++ b/public/index.html
@ -5,6 +5,7 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,17 +1,16 @@
 <template>
  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <stavebniny pocet="25"/>
  </div>
 </template>

 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import stavebniny from './components/stavebniny.vue'

 export default {
  name: 'App',
  components: {
-    HelloWorld
+    stavebniny
  }
 }
 </script>
@ -21,7 +20,6 @@ export default {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
 }
--- a/src/assets/brick.png
+++ b/src/assets/brick.png
--- a/src/components/stavebniny.vue
+++ b/src/components/stavebniny.vue
@ -0,0 +1,54 @@
+<template>
+    <div>
+        <div class="row">
+        <div class="col-6 brick">
+            <img v-on:click="prilozitCihlu(item)" v-for="item in pocet_cihel" :key="item" src="../assets/brick.png" alt="">
+        </div>
+        <div class="col-6 list">
+            <div class="row">
+                <div class="col-4">
+                    <label> Počet cihel </label>
+                        {{ komin }} cihli
+                </div>
+                <div class="col-4">
+                    <img v-for="item in komin" :key="item" src="../assets/brick.png" alt="">
+                </div>
+                <div class="col-4">
+                    <label> Hmotnost </label>
+                        60 kg
+                </div>
+            </div>
+        </div>
+    </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'stavebniny',
+  data: function() {
+      return {
+          komin: [],
+          pocet_cihel: [1, 2, 3, 4, 5,],
+      }
+  },
+  methods:{
+      prilozitCihlu: function(item) {
+          this.pocet_cihel.slice(this.pocet_cihel.indexOF(item), 1);
+          this.komin.push("cihla"+item);
+
+      }
+  },
+  props: {
+      pocet: {default: () => 0},
+  },
+}
+</script>
+
+<style scoped>
+    img {
+        width: 50px;
+        height: 50px;
+        margin: 5px
+    }
+</style>