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>