cdn引入vant框架使用在html頁面使用
阿新 • • 發佈：2020-08-19
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css" /> <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> // 在 #app 標籤下渲染一個按鈕元件 new Vue({ el: '#app', template: '#counter-template', data: { items: [{ text: '分組 1', children: [{ id: 1, text: '1' }, { id: 2, text: '2' }, { id: 3,text: '3'}] }, { text: '分組 2' }], activeId: 1, activeIndex: 0, show: false, }, }); // 呼叫函式元件，彈出一個 Toast vant.Toast('提示'); // 通過 CDN 引入時不會自動註冊 Lazyload 元件 // 可以通過下面的方式手動註冊 Vue.use(vant.Lazyload); Vue.use(vant.Button); Vue.use(vant.TreeSelect);</script>
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> </head> <body> <div id="app"> </div> </body> </html>
<template id="counter-template"> <div> <van-button type="primary" @@click="show=true">顯示遮罩層</van-button> <van-overlay :show="show" @@click="show=false"> <div class="wrapper" @@click.stop> <div class="block"> <van-tree-select :items="items" :active-id.sync="activeId" :main-active-index.sync="activeIndex" /> </div> </div> </van-overlay> </div> </template>