项目搭建

src/components/AppFooter.vue

@@ -0,0 +1,34 @@
+<script setup>
+function handleClickGithub() {
+  if (typeof window !== 'undefined' && window.open) {
+    window.open('https://github.com/uni-helper/create-uni')
+  }
+  else {
+    uni.showToast({
+      icon: 'none',
+      title: '请使用浏览器打开',
+    })
+  }
+}
+</script>
+
+<template>
+  <view class="footer" @click="handleClickGithub">
+    <image class="uni-helper-github__image" src="/static/github.svg" />
+  </view>
+</template>
+
+<style>
+.footer{
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #888;
+}
+.uni-helper-github__image {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+}
+</style>

src/components/InputEntry.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { ref } from "vue";
+
+const name = ref("");
+const show = ref(false);
+
+function handleClick() {
+  show.value = true;
+  setTimeout(() => {
+    show.value = false;
+  }, 3000);
+}
+</script>
+
+<template>
+  <view>
+    <view class="input-box">
+      <input v-model="name" placeholder="What's your name?" />
+    </view>
+    <view>
+      <button :disabled="!name" @click="handleClick">Hello</button>
+    </view>
+
+    <view v-show="show" class="popup">
+      <text class="popup_label"> Hello{{ `  ${name}` }} 👏 </text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.input-box {
+  margin: 1rem;
+  padding: 0.5rem;
+  border-bottom: 1px solid gray;
+}
+.popup {
+  position: fixed;
+  top: 2rem;
+  left: 0px;
+  right: 0px;
+  .popup_label {
+    padding: 0.5rem 2rem;
+    background: gray;
+    border-radius: 8px;
+  }
+}
+</style>