共计 6294 个字符，预计需要花费 16 分钟才能阅读完成。
AVM（Application-View-Model）前端组件化开发模式基于规范 Web Components 组件化思维，提供蕴含虚构 DOM 和 Runtime 的编程框架 avm.js 以及多端对立编译工具，齐全兼容 Web Components 规范，同时兼容 Vue 和 React 语法糖编写代码，编译工具将 Vue 和 React 相干语法糖编译转换为 avm.js 代码。
基于规范 Web Components 组件化思维，兼容 Vue / React 语法个性，通过一次编码，别离编译为 App、小程序代码，实现多端开发。
组件性能介绍
省市区级联抉择框，也可用于其余多层级数据的抉择，典型场景为省市区抉择。
目前场景设定的是 3 级，可依据本人的理论需要改成 2 级或者 4 级或者更多级。
数据源就是典型的树形构造的 JSON 数组数据。理论代码中我封装了一个对于省市区三级数据的 js 插件，具体应用办法省市区三级行政区划数据 JS 插件
示例展现
组件开发 - 组件文件
area-cascader.stml
| <template> | |
| <view class="area-cascader_container"> | |
| <view class="area-cascader_box"> | |
| <view class="area-cascader_box-header"> | |
| <text class="area-cascader_box-header-label"> 请抉择所在地区 </text> | |
| <text class="area-cascader_box-header-button" @click="closeCascader">×</text> | |
| </view> | |
| <view class="area-cascader_box-nav"> | |
| <view class="area-cascader_box-nav-item" v-for="(item,index) in result" data-index={index} @click="setSelect"> | |
| <text class='area-cascader_box-nav-item--selected' v-if="this.data.selectIndex==index && item.value">{item.text}</text> | |
| <text class='area-cascader_box-nav-item--unselected' v-else-if="this.data.selectIndex==index && !item.value"> 请抉择 </text> | |
| <text class='area-cascader_box-nav-item--result' v-else-if="this.data.selectIndex!=index && item.value">{{item.text}}</text> | |
| </view> | |
| </view> | |
| <scroll-view class="area-cascader_pane" scroll-y=""> | |
| <view class="area-cascader_pane-option" v-for="(item,index) in selectArea" data-value={item.value} data-text={item.text} @click="setSelectItem"> | |
| <text>{item.text}</text> | |
| </view> | |
| </scroll-view> | |
| </view> | |
| </view> | |
| </template> | |
| <script> | |
| export default { | |
| name: 'area-cascader', | |
| props:{options:Array}, | |
| install(){this.data.result[0]={value:null,text:''}; | |
| }, | |
| installed(){this.data.selectArea = this.props.options;}, | |
| data() { | |
| return{result:[], | |
| selectIndex:0, | |
| selectArea:[]} | |
| }, | |
| methods: {setSelectItem(e){if(this.data.selectIndex<3){this.data.result[this.data.selectIndex].value=e.currentTarget.dataset.value; | |
| this.data.result[this.data.selectIndex].text=e.currentTarget.dataset.text; | |
| // 追加下一级 | |
| this.data.selectIndex+=1; | |
| if(this.data.selectIndex<3){this.data.result[this.data.selectIndex]={value:null,text:''}; | |
| var parentOption=this.data.selectArea.filter(item=>item.value==e.currentTarget.dataset.value); | |
| this.data.selectArea = parentOption[0].children; | |
| } | |
| if(this.data.selectIndex==3){this.fire('finish',this.data.result); | |
| } | |
| } | |
| }, | |
| closeCascader(){this.fire('close',''); | |
| }, | |
| setSelect(e){ | |
| this.data.selectIndex=e.currentTarget.dataset.index; | |
| if(this.data.selectIndex==0){this.data.selectArea = this.props.options;} | |
| else if(this.data.selectIndex==1){var parentOption=this.props.options.filter(item=>item.value==this.data.result[0].value); | |
| this.data.selectArea = parentOption[0].children; | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .area-cascader_container { | |
| position: absolute; | |
| height: 100%; | |
| width: 100%; | |
| background-color: rgba(0,0,0,0.1); | |
| } | |
| .area-cascader_box{ | |
| align-items: center; | |
| position: absolute; | |
| bottom: 0; | |
| width: 100%; | |
| height: 70%; | |
| background-color: #ffffff; | |
| border-top-left-radius: 30px; | |
| border-top-right-radius: 30px; | |
| } | |
| .area-cascader_box-header{ | |
| width: 100%; | |
| flex-flow: row nowrap; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 10px 15px 0 15px; | |
| } | |
| .area-cascader_box-header-label{font-size: 18px;} | |
| .area-cascader_box-header-button{ | |
| font-size: 40px; | |
| color: #ccc; | |
| } | |
| .area-cascader_box-nav{ | |
| width: 100%; | |
| flex-flow: row nowrap; | |
| justify-content: flex-start; | |
| align-items: center; | |
| padding: 15px; | |
| } | |
| .area-cascader_box-nav-item{ | |
| box-sizing: border-box; | |
| align-items: center; | |
| /* background-color: #452334; */ | |
| margin-right: 20px; | |
| justify-content: center; | |
| } | |
| .area-cascader_box-nav-item--selected{ | |
| font-size: 16px; | |
| padding-bottom: 10px; | |
| border-bottom: 3px solid #49c916; | |
| } | |
| .area-cascader_box-nav-item--unselected{ | |
| font-size: 16px; | |
| padding-bottom: 10px; | |
| border-bottom: 3px solid #49c916; | |
| } | |
| .area-cascader_box-nav-item--result{ | |
| font-size: 16px; | |
| padding-bottom: 13px; | |
| border-bottom: 0; | |
| } | |
| .area-cascader_pane{ | |
| padding-left: 15px; | |
| padding-right: 10px; | |
| width: 100%; | |
| height: 80%; | |
| } | |
| .area-cascader_pane-option{ | |
| flex-flow: row nowrap; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| padding: 5px 0; | |
| } | |
| </style> |
组件应用阐明
本组件是基于 AVM.js 开发的多端组件，通常同时适配 Android、iOS、小程序、H5 , 具体反对状况还要看每个组件的阐明文档。
首先须要登录开发平台，http://www.apicloud.com。通过管制平台右上方的模块 Store 进入，而后抉择 AVM 组件。
找到对应模块进入
也可通过搜寻栏，通过组件名称关键字进行检索。
进入模块详情，点击立刻下载下载残缺的组件安装包。
组件压缩包的文件目录如下
也可通过查看模块文档 来理解模块的具体参数，援用的原生模块，注意事项等。
具体在我的项目中的应用步骤是，第一步将压缩文件中的 easy-area-cascader.stml 文件拷贝到我的项目的 components 目录，通过浏览 readme.md 文档和查看 demo 示例文件 demo-easy-area-cascader.stml 在须要开发的 stml 文件中，引入组件文件，实现页面的开发。
areaList.js 文件，可依据理论我的项目放到对应的文件夹中，我放在了 utils 这个文件夹中。本插件基于 ES6 语法封装的，封装了 areaList,getTree,getArea,getCity,getProvince 四个办法，本组件中用到的事 getTree, 返回的是树形构造的 JSON 格局数据。
demo-area-cascader.stml
| <template> | |
| <view class="page"> | |
| <safe-area></safe-area> | |
| <text style="padding:10px;font-size:20px;"> 地区级联抉择 </text> | |
| <view class="box" @click="openCascader"> | |
| <text> 地区 </text> | |
| <text>{selectArea}</text> | |
| <image class="more" src={ico} mode="widthFix"></image> | |
| </view> | |
| <area-cascader | |
| :options="areaValue" | |
| onfinish="getArea" | |
| onclose="closeCascader" | |
| v-if="isShowCascader" | |
| > | |
| </area-cascader> | |
| </view> | |
| </template> | |
| <script> | |
| import '../../components/area-cascader.stml' | |
| import {areaList,getTree,getArea,getProvince,getCity} from '../../utils/areaList.js' | |
| export default { | |
| name: 'demo-area-cascader', | |
| apiready(){this.data.areaValue = getTree(); | |
| // getCity('130000'); | |
| // getProvince(); | |
| // getArea('130200'); | |
| }, | |
| data() { | |
| return{ | |
| selectArea:'', | |
| areaValue:[], | |
| isShowCascader:false, | |
| ico:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAZRJREFUeF7t2z1KxEAYgOF3D2Old7AVsdlirS3sBEE9gB5gYQtLC3utxZPYeRgZ2CKEXSGT+X4nqUIgkPfJzBQZsqLzY9V5PwvAMgLsBDbAGjgHPoAHi0exnALvwM0g+hO41kawBNgCT6NgdQRLgAvg+8AbV0WwBCjtZR0o8398qCFYA5gjeAAwRfACYIbgCcAEwRuAOoJHAFUErwBqCJ4BVBC8A4gjRAAQRYgCIIYQCUAEIRpAc4SIAE0RogI0Q4gM0AQhOsBshAwAsxCyAFQjZAKoQsgGMBkhI8B/CK/A/fATdFaAYwi/wEnPAD/AWQ8AxzZcdsBjdoBJu03Z1oBJ8WUkZAKYHJ8JoCo+C0B1fAaAWfHRAWbHRwZoEh8VoFl8RICm8dEAmsdHAhCJjwIgFh8BQDTeO4B4vGcAlXivAGrxHgFU470BqMd7AjCJ9wJgFu8BwDTeGuAS+Bp+ot6fq/0rYA3wBtyOAFTjrQFegOcBgHq8NcDV/qepU6DE3x2YDuKXMu0LVGEtAFVsiW7qfgT8AYVYcEHJaD3BAAAAAElFTkSuQmCC', | |
| } | |
| }, | |
| methods: {getArea(e){// console.log(JSON.stringify(e)); | |
| this.data.selectArea = e.detail[0].text+'/'+e.detail[1].text+'/'+e.detail[2].text; | |
| this.data.isShowCascader = false; | |
| }, | |
| openCascader(e){this.data.isShowCascader = true;}, | |
| closeCascader(e){this.data.isShowCascader = false;} | |
| } | |
| } | |
| </script> | |
| <style> | |
| .page { | |
| height: 100%; | |
| background-color: #ffffff; | |
| } | |
| .box{ | |
| flex-flow: row nowrap; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin: 10px; | |
| border-radius: 5px; | |
| background-color: #f0f0f0; | |
| padding: 10px; | |
| } | |
| .more{width: 20px;} | |
| </style> |
如果在 AVM 组件库中，没有找到理论我的项目中须要的组件，能够本人尝试封装组件。
这是组件化开发的在线文档地址
正文完
