|
|
@@ -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>
|