iosSelect級聯選擇器插件 最多支持6級 本次演示為4級
官網
http://zhoushengfe.com/iosselect/website/index.html
備用網址: https://www.pengwf.com/iosselect/index.html
特點
- 0依賴，只需引用一個js和css即可
- 樣式可自己定制，也可使用默認樣式
- 一個頁面同時實例化多個組件
- jquery zepto angular vue react均適用
- 支持最多6級級聯
- 支持設置高度和高度單位
- 適用於android和iOS設備(PC端支持IE9+，不過PC端上滑動體驗不太實用)
起步
- npm
npm install iosselect
- 下載文件
點擊下載文件到項目目錄中，在HTML文件中插入以下代碼，並按需調整路徑。
<link rel="stylesheet" href="/static/css/iosSelect.css"> <script type="text/javascript" src="/static/js/iosSelect.js"></script> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="~/assets/apps/Element/vue.js"></script> <link href="~/assets/apps/iosSelect/iosSelect.css" rel="stylesheet" /> <script src="~/assets/apps/iosSelect/iosSelect.js"></script> <title>iosSelect級聯選擇</title> </head> <body> <p id="showDom">{{Screen.region}}</p> </div> </body> </html>
效果圖
- 實例化組件
<script> var showDom = document.querySelector('#showDom');// 綁定一個觸發元素 var valDom = document.querySelector('#valDom'); // 綁定一個存儲結果的元素 showDom.addEventListener('click', function () { // 添加監聽事件 $("#Eselect").css("display", "block") $(".olay ios-select-widget-box four-level-box").css("position", "relative"); $(".olay ios-select-widget-box four-level-box").css("top", "0"); var val = showDom.dataset['id']; //獲取元素的data-id屬性值 var val = showDom.dataset['value']; //獲取元素的data-value屬性值 // 實例化組件 var example = new IosSelect(4, // 第一個參數為級聯層級，演示為4 最高6 [app.IosSelectdata.firstStage, app.IosSelectdata.SecondLevel, app.IosSelectdata.TheThirdLevel, app.IosSelectdata.TheFourthLevel], // 演示數據 { container: '.container', // 容器class title: '區域', // 標題 itemHeight: 30, // 每個元素的高度 showAnimate: true, //是否顯示動畫 itemShowCount: 5, // 每一列顯示元素個數，超出將隱藏 oneLevelId: app.IosSelectdata.oneLevelId,// 第一級默認值 twoLevelId: app.IosSelectdata.twoLevelId,// 第二級默認值 threeLevelId: app.IosSelectdata.threeLevelId,// 第三級默認值 fourLevelId: app.IosSelectdata.fourLevelId, relation: [1, 1, 1], //是否關聯 按照順序 0：不關聯，1：關聯 本次全部關聯 callback: function (selectOneObj, selectTwoObj, selectThreeObj, selectFourObj) { // 用戶確認選擇后的回調函數 showDom.dataset['id'] = selectOneObj.id; app.IosSelectdata.oneLevelId = selectOneObj.id; app.IosSelectdata.twoLevelId = selectTwoObj.id; app.IosSelectdata.threeLevelId = selectThreeObj.id; app.IosSelectdata.fourLevelId = selectFourObj.id; app.contents = selectOneObj.value + "-" + selectTwoObj.value + "-" + selectThreeObj.value + "-" + selectFourObj.value; app.Screen.region = selectOneObj.value + "-" + selectTwoObj.value + "-" + selectThreeObj.value + "-" + selectFourObj.value; }, fallback: function (e) {//取消選擇的回調 }, maskCallback: function (e) {//點擊背景層關閉組件的回調 }, }); }); var app = new Vue({ el: '#app', data: { IosSelectdata: { // 如需關聯 后一級的parentId要等於前一級的id firstStage: [{ 'id': '10001', 'value': '演示數據1' }, { 'id': '10002', 'value': '演示數據2' }], SecondLevel: [ { "id": "130100", "value": "1222", "parentId": "10001" }, { "id": "7895", "value": "1.22", "parentId": "10001" }, { "id": "130110", "value": "2222", "parentId": "10002" } ], TheThirdLevel: [{ "id": "1234", "value": "1333", "parentId": "130100" }, { "id": "147", "value": "全部", "parentId": "7895" }, { "id": "8523", "value": "2333", "parentId": "130110" }], TheFourthLevel: [{ "id": "1w234", "value": "1444", "parentId": "1234" }, { "id": "www", "value": "2444", "parentId": "147" }, { "id": "eee", "value": "3444", "parentId": "8523" }], //默認選中值 要給每個層級分別賦值 oneLevelId: "全部", twoLevelId: "全部_全部", threeLevelId: "全部_全部_全部", fourLevelId: "全部_全部_全部_全部", },//區域數據 }, }) </script>
原文鏈接：https://github.com/zhoushengmufc/iosselect