最近學習了一下js組件相關知識，但找到的資料比較少，一知半解，先做個簡單的筆記吧。 首先定義一個類，可以在裡面添加方法： //這是個下拉框組件，放在select.js里 <script> var tree = { treeList: function(myContent) { var list='< ...
最近學習了一下js組件相關知識，但找到的資料比較少，一知半解，先做個簡單的筆記吧。
首先定義一個類，可以在裡面添加方法：
//這是個下拉框組件，放在select.js里
<script>
var tree = {
treeList: function(myContent) {
var list='<select class="select">'+
'<option value ="type1">selectOne</option>'+
'<option value ="type2">selectTwo</option>'+
'<option value ="type3">selectThree</option>'+
'<option value ="type4">selectFour</option>'+
'<option value ="type5">selectFive</option>'+
'<select>';
document.getElementById(myContent).innerHTML=list;
}
};
</script>
然後就可以在前端頁面直接調用這個方法：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>js組件</title>
<script src="select.js"></script> //封裝起來調用即可
<style>
.select{
line-height: 21px;
width: 100%;
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0,0,0,.2);
border-radius: 3px;
background-color: #fff;
}
.select:hover{
background: :blue;
}
.txt{
width: :20%;
float: left;
padding:10px;
}
</style>
</head>
<body>
<div id="box">
<p>
<span class="txt">請選擇類型</span>
<span style="width:70%;float: right;" id="type"></span>
</p>
</div>
<script>tree.treeList("type");</script> //此處調用
</body>
</html>
實現自動打字效果的組件：https://wenwen.sogou.com/z/q719005033.htm，共同進步吧，少年。
