github.com/AlpineAIO/wails/v2@v2.0.0-beta.32.0.20240505041856-1047a8fa5fef/pkg/templates/generate/assets/vue/frontend/src/components/HelloWorld.vue (about)

     1  <script setup>
     2  import {reactive} from 'vue'
     3  import {Greet} from '../../wailsjs/go/main/App'
     4  
     5  const data = reactive({
     6    name: "",
     7    resultText: "Please enter your name below 👇",
     8  })
     9  
    10  function greet() {
    11    Greet(data.name).then(result => {
    12      data.resultText = result
    13    })
    14  }
    15  
    16  </script>
    17  
    18  <template>
    19    <main>
    20      <div id="result" class="result">{{ data.resultText }}</div>
    21      <div id="input" class="input-box">
    22        <input id="name" v-model="data.name" autocomplete="off" class="input" type="text"/>
    23        <button class="btn" @click="greet">Greet</button>
    24      </div>
    25    </main>
    26  </template>
    27  
    28  <style scoped>
    29  .result {
    30    height: 20px;
    31    line-height: 20px;
    32    margin: 1.5rem auto;
    33  }
    34  
    35  .input-box .btn {
    36    width: 60px;
    37    height: 30px;
    38    line-height: 30px;
    39    border-radius: 3px;
    40    border: none;
    41    margin: 0 0 0 20px;
    42    padding: 0 8px;
    43    cursor: pointer;
    44  }
    45  
    46  .input-box .btn:hover {
    47    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
    48    color: #333333;
    49  }
    50  
    51  .input-box .input {
    52    border: none;
    53    border-radius: 3px;
    54    outline: none;
    55    height: 30px;
    56    line-height: 30px;
    57    padding: 0 10px;
    58    background-color: rgba(240, 240, 240, 1);
    59    -webkit-font-smoothing: antialiased;
    60  }
    61  
    62  .input-box .input:hover {
    63    border: none;
    64    background-color: rgba(255, 255, 255, 1);
    65  }
    66  
    67  .input-box .input:focus {
    68    border: none;
    69    background-color: rgba(255, 255, 255, 1);
    70  }
    71  </style>