YonBuilder 移动开发平台 AVM 框架 封装省市区级联选择弹框
作者：APICloud
- 2022-12-19 北京
本文字数：4747 字
阅读完需：约 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 组件库中，没有找到实际项目中需要的组件，可以自己尝试封装组件。
这是组件化开发的在线文档地址
划线
评论
复制
发布于: 刚刚阅读数: 5
APICloud
关注
一次编码多端运行，移动应用低代码开发平台 2020-12-22 加入
用友YonBuilder移动端低代码开发平台，快速构建高性能多端应用
评论