feat: add cdn demo

AmKang · Sep 14, 2019 · 95b21a6 · 95b21a6
1 parent 47dafe8
commit 95b21a6
Show file tree

Hide file tree

Showing 2 changed files with 162 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -3,10 +3,15 @@ Vant 示例工程，基于 vue-cli 3 搭建。
 
 ## 目录
 
+### cdn
+
+cdn 目录下包含了通过 CDN 引入 Vant 的示例，在浏览器内打开 cdn/index.html 即可查看效果。
+
 ### base
 
-base 工程示范了如何用 vant 搭建几个简单的电商页面，包含如下功能：
-- 基于 vant 搭建
+base 工程示范了如何用 Vant 搭建几个简单的电商页面，包含如下功能：
+
+- 基于 Vant 搭建
 - 基于 vue-router 的单页面应用
 - 组件按需引入
 - 视图异步加载

diff --git a/cdn/index.html b/cdn/index.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
+  <title>Vant CDN Demo</title>
+
+  <!-- 引入样式文件 -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css">
+
+  <!-- 自定义样式 -->
+  <style>
+    body {
+      color: #333;
+      background-color: #f8f8f8;
+    }
+
+    .goods {
+      padding-bottom: 50px;
+    }
+
+    .goods-swipe img {
+      width: 100%;
+      display: block;
+    }
+
+    .goods-title {
+      font-size: 16px;
+    }
+
+    .goods-price {
+      color: #f44;
+    }
+
+    .goods-express {
+      font-size: 12px;
+      padding: 5px 15px;
+    }
+
+    .goods-cell-group {
+      margin: 15px 0;
+    }
+
+    .goods-tag {
+      margin-left: 5px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app">
+    <!-- 模板 -->
+    <div class="goods">
+      <van-swipe class="goods-swipe" :autoplay="3000">
+        <van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
+          <img :src="thumb" >
+        </van-swipe-item>
+      </van-swipe>
+
+      <van-cell-group>
+        <van-cell>
+          <div class="goods-title">{{ goods.title }}</div>
+          <div class="goods-price">{{ formatPrice(goods.price) }}</div>
+        </van-cell>
+        <van-cell class="goods-express">
+          <van-col span="10">运费：{{ goods.express }}</van-col>
+          <van-col span="14">剩余：{{ goods.remain }}</van-col>
+        </van-cell>
+      </van-cell-group>
+
+      <van-cell-group class="goods-cell-group">
+        <van-cell value="进入店铺" icon="shop-o" is-link @click="enterShop">
+          <template slot="title">
+            <span class="van-cell-text">有赞的店</span>
+            <van-tag class="goods-tag" type="danger">官方</van-tag>
+          </template>
+        </van-cell>
+        <van-cell title="查看商品详情" is-link @click="showGoodsDetail" />
+      </van-cell-group>
+
+      <van-goods-action>
+        <van-goods-action-icon icon="chat-o" @click="showChat">
+          客服
+        </van-goods-action-icon>
+        <van-goods-action-icon icon="cart-o" @click="showCart">
+          购物车
+        </van-goods-action-icon>
+        <van-goods-action-button type="warning" @click="addCart">
+          加入购物车
+        </van-goods-action-button>
+        <van-goods-action-button type="danger" @click="buy">
+          立即购买
+        </van-goods-action-button>
+      </van-goods-action>
+    </div>
+  </div>
+
+  <!-- 引入 Vue 和 Vant 的 JS 文件 -->
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>
+
+  <script>
+    // 初始化 Vue 实例
+    new Vue({
+      el: '#app',
+
+      data() {
+        return {
+          goods: {
+            title: '美国伽力果（约680g/3个）',
+            price: 2680,
+            express: '免运费',
+            remain: 19,
+            thumb: [
+              'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
+              'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
+            ]
+          }
+        };
+      },
+
+      methods: {
+        formatPrice() {
+          return '¥' + (this.goods.price / 100).toFixed(2);
+        },
+
+        enterShop() {
+          vant.Toast('进入店铺');
+        },
+
+        showGoodsDetail() {
+          vant.Toast('查看商品详情');
+        },
+
+        showChat() {
+          vant.Toast('进入客服页面');
+        },
+
+        showCart() {
+          vant.Toast('进入购物车页面');
+        },
+
+        addCart() {
+          vant.Toast('加入购物车');
+        },
+
+        buy() {
+          vant.Toast('立即购买');
+        }
+      }
+    });
+  </script>
+</body>
+</html>