Parcourir la source

增加水印页面

ChenGanBin il y a 2 ans
Parent
commit
260d56e3a8
3 fichiers modifiés avec 57 ajouts et 0 suppressions
  1. 1 0
      src/app.config.ts
  2. 3 0
      src/pages/watermark/index.config.ts
  3. 53 0
      src/pages/watermark/index.vue

+ 1 - 0
src/app.config.ts

@@ -1,5 +1,6 @@
 export default defineAppConfig({
   pages: [
+    'pages/watermark/index',
     'pages/index/index'
   ],
   window: {

+ 3 - 0
src/pages/watermark/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '首页'
+})

+ 53 - 0
src/pages/watermark/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="index">
+    <view>
+      <img src="" alt="">
+    </view>
+    {{ msg }} <Dongdong />
+    <view class="btn">
+      <nut-button type="primary" @click="handleClick('text', msg2, true)">点我</nut-button>
+    </view>
+    <nut-toast :msg="msg2" v-model:visible="show" :type="type" :cover="cover"/>
+  </view>
+</template>
+
+<script>
+import { reactive, toRefs } from 'vue';
+import { Dongdong } from '@nutui/icons-vue-taro';
+export default {
+  name: 'Index',
+  components: {
+    Dongdong
+  },
+  setup() {
+    const state = reactive({
+      msg: '欢迎使用 NutUI4.0 开发小程序',
+      msg2: '你成功了~',
+      type: 'text',
+      show: false,
+      cover: false
+    });
+
+    const handleClick = (type, msg, cover = false) => {
+      state.show = true;
+      state.msg2 = msg;
+      state.type = type;
+      state.cover = cover;
+    };
+
+    return {
+      ...toRefs(state),
+      handleClick
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.index {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+}
+</style>