Skip to content

Commit

Permalink
feat: 重构 Vue 官方组件到 CustomElement (#614)
Browse files Browse the repository at this point in the history
  • Loading branch information
yenshih authored Apr 28, 2019
1 parent e00812c commit 9928fda
Show file tree
Hide file tree
Showing 47 changed files with 2,673 additions and 12,344 deletions.
156 changes: 156 additions & 0 deletions components/mip-city-selection/example/data.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
{
"list": [{
"key": "热门",
"cities": [
{
"city": "北京",
"pinyin": "beijing",
"code": "1"
},
{
"city": "上海",
"pinyin": "shanghai",
"code": "2"
},
{
"city": "广州",
"pinyin": "guangzhou",
"code": "3"
},
{
"city": "深圳",
"pinyin": "shenzhen",
"code": "4"
},
{
"city": "重庆",
"pinyin": "chongqing",
"code": "5"
}
]
}, {
"key": "A",
"cities": [
{
"city": "澳门",
"pinyin": "aomen",
"code": "7"
},
{
"city": "安庆",
"pinyin": "anqing",
"code": "8"
},
{
"city": "安泽",
"pinyin": "anze",
"code": "9"
}
]
}, {
"key": "B",
"cities": [
{
"city": "宝清",
"pinyin": "baoqing",
"code": "10"
},
{
"city": "宝鸡",
"pinyin": "baoji",
"code": "11"
},
{
"city": "巴东",
"pinyin": "badong",
"code": "12"
}
]
}, {
"key": "C",
"cities": [
{
"city": "重庆",
"pinyin": "chongqing",
"code": "13"
},
{
"city": "成都",
"pinyin": "chengdu",
"code": "14"
},
{
"city": "苍山",
"pinyin": "cangshan",
"code": "15"
}
]
}, {
"key": "D",
"cities": [
{
"city": "大庆",
"pinyin": "daqing",
"code": "16"
},
{
"city": "大理",
"pinyin": "dali",
"code": "17"
},
{
"city": "东莞",
"pinyin": "dongguan",
"code": "18"
}
]
}, {
"key": "E",
"cities": [
{
"city": "鄂尔多斯",
"pinyin": "eerduosi",
"code": "19"
},
{
"city": "峨眉山",
"pinyin": "emeishan",
"code": "20"
}
]
}, {
"key": "F",
"cities": [
{
"city": "阜阳",
"pinyin": "fuyang",
"code": "21"
},
{
"city": "福州",
"pinyin": "fuzhou",
"code": "22"
},
{
"city": "防城港",
"pinyin": "fangchenggang",
"code": "23"
}
]
},
{
"key": "G",
"cities": [
{
"city": "广州",
"pinyin": "guangzhou",
"code": "24"
},
{
"city": "贵阳",
"pinyin": "guiyang",
"code": "25"
}
]
}]
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<!DOCTYPE html>
<html mip>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
Expand All @@ -9,19 +8,17 @@
<link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
<style mip-custom>
/* 自定义样式 */

</style>
</head>

<body>
<!-- <mip-test id="cityTest"></mip-test> 测试组件,模拟异步-->
<mip-city-selection class="mip-hidden" on="citySelected">
<!-- <mip-city-selection class="mip-hidden" on="citySelected:cityTest.print" data-src="http://172.24.138.98:8888/xxxxtest.json"> -->
<mip-test id="cityTest"></mip-test>
<mip-city-selection class="mip-hidden" on="citySelected:cityTest.print">
<script type="application/json">
{
"list": [{
"key": "热门",
"cities": [{
"cities": [
{
"city": "北京",
"pinyin": "beijing",
"code": "1"
Expand Down Expand Up @@ -49,7 +46,8 @@
]
}, {
"key": "A",
"cities": [{
"cities": [
{
"city": "澳门",
"pinyin": "aomen",
"code": "7"
Expand All @@ -67,7 +65,8 @@
]
}, {
"key": "B",
"cities": [{
"cities": [
{
"city": "宝清",
"pinyin": "baoqing",
"code": "10"
Expand All @@ -85,7 +84,8 @@
]
}, {
"key": "C",
"cities": [{
"cities": [
{
"city": "重庆",
"pinyin": "chongqing",
"code": "13"
Expand All @@ -103,7 +103,8 @@
]
}, {
"key": "D",
"cities": [{
"cities": [
{
"city": "大庆",
"pinyin": "daqing",
"code": "16"
Expand All @@ -121,7 +122,8 @@
]
}, {
"key": "E",
"cities": [{
"cities": [
{
"city": "鄂尔多斯",
"pinyin": "eerduosi",
"code": "19"
Expand All @@ -134,7 +136,8 @@
]
}, {
"key": "F",
"cities": [{
"cities": [
{
"city": "阜阳",
"pinyin": "fuyang",
"code": "21"
Expand All @@ -153,7 +156,8 @@
},
{
"key": "G",
"cities": [{
"cities": [
{
"city": "广州",
"pinyin": "guangzhou",
"code": "24"
Expand All @@ -170,6 +174,6 @@
</mip-city-selection>
<script src="https://c.mipcdn.com/static/v2/mip.js"></script>
<script src="/mip-city-selection/mip-city-selection.js"></script>
<script src="./mip-test.js"></script>
</body>

</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html mip>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>MIP page</title>
<link rel="canonical" href="对应的原页面地址">
<link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
<style mip-custom>
/* 自定义样式 */

</style>
</head>

<body>
<!-- 测试组件,模拟异步 -->
<mip-test id="cityTest"></mip-test>
<mip-city-selection
class="mip-hidden"
on="citySelected:cityTest.print"
data-src="./data.json">
</mip-city-selection>
<script src="https://c.mipcdn.com/static/v2/mip.js"></script>
<script src="/mip-city-selection/mip-city-selection.js"></script>
<script src="./mip-test.js"></script>
</body>

</html>
29 changes: 29 additions & 0 deletions components/mip-city-selection/example/mip-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/**
* @file 测试组件
* @author mj(zoumiaojiang@gmail.com)
*/

/* globals MIP */

class MIPTest extends MIP.CustomElement {
build () {
this.addEventAction('print', data => {
this.print(data)
})
}

/**
* 打印的测试内容
*
* @param {any} content 打印的内容
*/
print (content) {
if (typeof content === 'object') {
content = JSON.stringify(content, null, 2)
}

this.element.innerHTML = '<code><pre>' + content + '</pre></code>'
}
}

MIP.registerElement('mip-test', MIPTest)
Loading

0 comments on commit 9928fda

Please sign in to comment.