เริ่มต้น (บน browser)

ไฟล์

ไฟล์ที่ต้องเพิ่มเข้าไปในหน้าเว็บมีดังนี้

CSS:

  • vue-thailand-address.css หรือ vue-thailand-address.min.css
คุณไม่จำเป็นต้องใช้ไฟล์นี้ก็ได้ ถ้าหากต้องการใช้ style ที่เขียนขึ้นเอง

JavaScript:

  1. db.web.js หรือ db.web.min.js
  2. vue-thailand-address.web.js หรือ vue-thailand-address.web.min.js
กรุณาเพิ่มไฟล์ตามลำดับ มิฉะนั้นอาจพบข้อผิดพลาด

CDN

jsDelivr

CSS:

  • vue-thailand-address.css
    • https://cdn.jsdelivr.net/npm/vue-thailand-address@3/dist/vue-thailand-address.css
    • https://cdn.jsdelivr.net/npm/vue-thailand-address@3/dist/vue-thailand-address.min.css

JavaScript:

  • db.web.jsvue-thailand-address.web.js
    • https://cdn.jsdelivr.net/combine/npm/vue-thailand-address@3/dist/db.web.js,npm/vue-thailand-address@3/dist/vue-thailand-address.web.js
    • https://cdn.jsdelivr.net/combine/npm/vue-thailand-address@3/dist/db.web.min.js,npm/vue-thailand-address@3

unpkg

CSS:

  • vue-thailand-address.css
    • https://unpkg.com/vue-thailand-address@3/dist/vue-thailand-address.css
    • https://unpkg.com/vue-thailand-address@3/dist/vue-thailand-address.min.css

JavaScript:

  • db.web.js
    • https://unpkg.com/vue-thailand-address@3/dist/db.web.js
    • https://unpkg.com/vue-thailand-address@3/dist/db.web.min.js
  • vue-thailand-address.web.js
    • https://unpkg.com/vue-thailand-address@3/dist/vue-thailand-address.web.js
    • https://unpkg.com/vue-thailand-address@3

ตัวอย่าง

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Vue Thailand Address</title> <!-- Vue --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <!-- CSS (optional) --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-thailand-address@3/dist/vue-thailand-address.min.css" /> <!-- JavaScript --> <script src="https://cdn.jsdelivr.net/combine/npm/vue-thailand-address@3/dist/db.web.min.js,npm/vue-thailand-address@3"></script> </head> <body> <div id="app"> <addressinput-subdistrict v-model="subdistrict" ></addressinput-subdistrict> <addressinput-district v-model="district"></addressinput-district> <addressinput-province v-model="province"></addressinput-province> <addressinput-zipcode v-model="zipcode"></addressinput-zipcode> </div> <script> new Vue({ el: '#app', data: { subdistrict: '', district: '', province: '', zipcode: '' } }); </script> </body> </html>