fancyalert

Author: nuochong

app/components/example/Fancyalert.vue

@@ -0,0 +1,39 @@
+<template>
+  <Page class="page">
+    <ActionBar class="action-bar" title="Fancyalert">
+      <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" @tap="$navigateBack" />
+    </ActionBar>
+
+    <StackLayout class="hello-world">
+      <Button class="btn btn-primary" @tap="btnfancyalert" text="Fancyalert" />
+    </StackLayout>
+  </Page>
+</template>
+
+<script>
+import { TNSFancyAlert, TNSFancyAlertButton } from 'nativescript-fancyalert';
+export default {
+  data() {
+    return {
+      title: ''
+    };
+  },
+  mounted() {},
+  methods: {
+    btnfancyalert: function() {
+      console.log('xxx');
+      TNSFancyAlert.showSuccess('Success!', 'Fancy alerts are nice.', 'Yes they are!');
+    }
+  }
+};
+</script>
+
+<style scoped>
+.hello-world {
+  margin: 20;
+}
+
+label {
+  color: red;
+}
+</style>

app/components/example/Main.vue

@@ -28,24 +28,17 @@
         <Button class="btn btn-primary" @tap="counter">计数器【Counter】</Button>
         <Button class="btn btn-primary" @tap="hello">Vuex及相机</Button>
         <Button class="btn btn-primary" @tap="login">模拟登录【login】</Button>
-
         <Button class="btn btn-primary" @tap="btnToast">提示【Toast】</Button>
         <Button class="btn btn-primary" @tap="btnAlert">精美提示框【Alert】</Button>
         <Button class="btn btn-primary" @tap="info">消息通知【Info】</Button>
-
         <Button class="btn btn-primary" @tap="btnDialog">对话框【Dialog】</Button>
-
         <Button class="btn btn-primary" @tap="btnPlatformModule">平台型号【PlatformModule】</Button>
-
         <Button class="btn btn-primary" @tap="btnPhone">电话【Phone】</Button>
         <Button class="btn btn-primary" @tap="btnSms">短信【Sms】</Button>
-
         <Button class="btn btn-primary" @tap="btnGeolocation">定位</Button>
         <Button class="btn btn-primary" @tap="btnPermissions">获取权限1</Button>
-
         <Button class="btn btn-primary" @tap="btnPlatformModule">获取设备信息</Button>
         <Button class="btn btn-primary btn-green" @tap="btnChange" ref="btn">改变按钮【Change Btn】</Button>
-
         <Label class="message" :text="msg" col="0" row="0" />
         <Button class="btn btn-primary" text="路由跳转" @tap="onButtonTap" />
         <Button class="btn btn-primary" text="本地存储示例" @tap="onInput" />
@@ -78,9 +71,8 @@
 import Counter from './Counter';
 import HelloWorlds from './HelloWorld';
 import Login from './Login';
-
-import * as Toast from 'nativescript-toast';
-import { TNSFancyAlert, TNSFancyAlertButton } from 'nativescript-fancyalert';
+import Toast from './toast';
+import fancyalert from './Fancyalert';
 //import * as LocalNotifications from "nativescript-local-notifications";
 import { LocalNotifications } from 'nativescript-local-notifications';
 //var LocalNotifications = require("nativescript-local-notifications");
@@ -155,15 +147,23 @@ export default {
       });
     },
     btnToast: function() {
-      console.log('111');
-      let toast = Toast.makeText('你好世界【Hello World】', 'long');
-      toast.show();
+      this.$navigateTo(Toast, {
+        animated: true,
+        transition: {
+          name: 'slide',
+          duration: 380,
+          curve: 'easeIn'
+        }
+      });
     },
     btnAlert: function() {
-      console.log('xxx');
-      //TNSFancyAlert.showSuccess('Success!', 'Fancy alerts are nice.', 'Yes they are!');
-      TNSFancyAlert.showSuccess('成功！Success!', '花哨的提醒很不错。【Fancy alerts are nice.】', '是的【Yes they are!】').then(() => {
-        /* user pressed the button */
+      this.$navigateTo(fancyalert, {
+        animated: true,
+        transition: {
+          name: 'slide',
+          duration: 380,
+          curve: 'easeIn'
+        }
       });
     },
     info: function() {

app/components/example/toast.vue

@@ -0,0 +1,39 @@
+<template>
+  <Page class="page">
+    <ActionBar class="action-bar" title="提示">
+      <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" @tap="$navigateBack" />
+    </ActionBar>
+
+    <StackLayout class="hello-world">
+      <Button class="btn btn-primary" @tap="btnToast" text="提示" />
+    </StackLayout>
+  </Page>
+</template>
+
+<script>
+import * as Toast from 'nativescript-toast';
+export default {
+  data() {
+    return {
+      title: ''
+    };
+  },
+  mounted() {},
+  methods: {
+    btnToast: function() {
+      let toast = Toast.makeText('你好世界【Hello World】', 'long');
+      toast.show();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.hello-world {
+  margin: 20;
+}
+
+label {
+  color: red;
+}
+</style>

package.json

@@ -17,7 +17,7 @@
     "@vue/devtools": "^5.1.1",
     "nativescript-app-shortcuts": "^2.1.0",
     "nativescript-camera": "^4.5.0",
-    "nativescript-fancyalert": "^2.0.0",
+    "nativescript-fancyalert": "^3.0.9",
     "nativescript-geolocation": "5.1.0",
     "nativescript-local-notifications": "^3.1.0",
     "nativescript-permissions": "^1.2.3",
@@ -59,4 +59,4 @@
     "webpack-bundle-analyzer": "~2.13.1",
     "webpack-cli": "^3.1.0"
   }
-}
+}

yarn.lock

@@ -4273,10 +4273,10 @@ nativescript-dev-webpack@next:
     webpack-cli "~3.1.1"
     webpack-sources "~1.3.0"
 
-nativescript-fancyalert@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/nativescript-fancyalert/-/nativescript-fancyalert-2.0.1.tgz#36f8effb7e9ae36891a754a98791547b14199336"
-  integrity sha512-wxAhqLOdfX7a9gpz5Ze+wZ6DAKlw1WrImeG426vEiUal/JfTCuGUBCv2Z47r9nxRWhMNpSGItQYFgHDg2u+UmA==
+nativescript-fancyalert@^3.0.9:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/nativescript-fancyalert/-/nativescript-fancyalert-3.0.9.tgz#a841b3a6e2bb5f0f495f90037da1390a8fff17d1"
+  integrity sha512-pXWXko+vXv9dQi/A2Vyme7rbb6H2m7LSipRVIyY7bksTg+YmL5Ud2zb0m0Tlhq1N4cZEhNPYBRXtLCAwSY2wmQ==
 
 nativescript-geolocation@5.1.0:
   version "5.1.0"