uniapp + Wot UI组件库封装app实用的公共组件

文章目录一、uniapp简介二、Wot UI简介三、头部搜索条件1、根目录 components 创建公共查询 HeaderSearch.vue 单页面2、父级调用页面使用规则3、组件效果展示四、卡片列表1、根目录 components 创建公共查询 Card.vue 单页面2、父级调用页面使用规则3、组件效果展示五、底部固定按钮组件1、根目录 components 创建公共查询 FooterButton.vue 单页面2、父级调用页面使用规则3、组件效果展示六、悬浮按钮组件1、根目录 components 创建公共查询 FabButton.vue 单页面2、父级调用页面使用规则3、组件效果展示七、成功失败状态组件1、根目录 components 创建公共查询 Status.vue 单页面2、父级调用页面使用规则3、组件效果展示八、空状态组件1、根目录 components 创建公共查询 Empty.vue 单页面2、父级调用页面使用规则3、组件效果展示九、选择城市组件1、根目录 components 创建公共查询 City.vue 单页面2、父级调用页面使用规则3、组件效果展示十、步骤条组件1、根目录 components 创建公共查询 Steps.vue 单页面2、父级调用页面使用规则3、组件效果展示一、uniapp简介uniapp是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。官方网址：https://uniapp.dcloud.net.cn/二、Wot UI简介Wot UI基于 vue3+Typescript构建，参照wot design的设计规范进行开发。关于以下安装及特性声明：此关于安装流程内容来源自 Wot UI 官方，仅供参考如有需要详细组件介绍及API还请前往官方查看详情关于安装：1、Wot UI 提供了 uni_modules 和 npm 两种安装方式，按需选择。。2、使用uni_modules安装无需额外配置，即插即用，但是每次更新组件库需要处理代码差异（一般直接覆盖就可以）。3、使用npm安装需要额外配置，更新组件库时无需处理代码差异。官方网址：https://wot-ui.cn/guide/introduction.html三、头部搜索条件1、根目录 components 创建公共查询 HeaderSearch.vue 单页面templateviewclass="header-search"input:value="modelValue"type="text":placeholder="placeholder"@input="onInput"wd-icon name="search-line"class="searchIcon"/wd-iconviewclass="headerSearch-right"@click="searchClick('search')"wd-divider verticalclass="searchDivider"/text{{buttonTitle}}/text/view/view/templatescript setup lang="ts"constprops=withDefaults(defineProps{modelValue?:string,placeholder?:string,buttonTitle?:string,}(),{modelValue:'',placeholder:'',buttonTitle:'',})// 定义抛出事件constemit=defineEmits{(e:'update:modelValue',value:string):void,(e:'click',type:'input'|'search'):void}()// 表单input事件监听constonInput=(event:any)={constvalue=event.detail.value// 触发 update:modelValue 更新父组件数据emit('update:modelValue',value)// 如果还需要保留原有的 input 点击逻辑通知，可以额外触发emit('click','input')}// 按钮点击事件抛出constsearchClick=(type:'input'|'search')={emit('click',type)}/scriptstyle lang="scss"scoped.header-search{width:100%;height:66rpx;color:#999999;font-size:30rpx;position:relative;uni-input{border-radius:33rpx 33rpx 33rpx 33rpx;border:1px solid #DDDDDD;background-color:#ffffff;width:100%;height:100%;padding:0136rpx067rpx;box-sizing:border-box;display:flex;align-items:center;}.searchIcon{font-size:28rpx;position:absolute;top:20rpx;left:23rpx;}.headerSearch-right{width:138rpx;height:66rpx;line-height:66rpx;display:flex;justify-content:flex-start;font-size:30rpx;font-weight:400;color:#333333;position:absolute;top:0;right:0;.searchDivider{background-color:#2469F1;width:3rpx;height:32rpx;margin:17rpx 34rpx00;}}}/style2、父级调用页面使用规则/*---------------------------- 模版中创建 HeaderSearch ----------------------------*/templateHeaderSearch v-model="searchData":buttonTitle="'搜索'"//传入搜索条件名称:placeholder="'请输入关键字搜索'"//传入搜索框input默认展示的placeholder@click="searchClick"//传入点击buttonTitle盒子发出的事件/HeaderSearch/templatescript setup lang="ts"/*----------------------------------- 引入组件 ------------------------------------*/importHeaderSearchfrom'@/components/HeaderSearch.vue'/*----------------------------------- 变量声明 ------------------------------------*/constsearchData=refstring();/*--------------------------------- 需要传入的方法 --------------------------------*/constsearchClick=(type:'input'|'search')={// 搜索输入框事件监听if(type==='input'){console.log('触发了输入框事件');}// 搜索按钮事件if(type==='search'){console.log('触发了搜索按钮');}}/script3、组件效果展示四、卡片列表1、根目录 components 创建公共查询 Card.vue 单页面templateviewclass="cardTemplate"wd-card:title="title":type="rectangleType"v-for="(item, index) in cardList":key="index"viewclass="list-group"viewclass="list-item"@click="handleItemClick(item, index)"image:src="item.Url"class="list-item__image"mode="aspectFill"v-if="item.Url (item.Url != '') (item.Url != null) (item.Url != 'string')"/viewclass="list-item__image"v-elseEmpty/Empty/viewviewclass="list-item__content"viewclass="list-item__text"v-for="field in parentFields":key="field.key"template v-if="item[field.key] !== undefined"text{{field.name}}/texttext:style="getTextStyle(field.key)"{{item[field.key]}}/text/template/view/view/view/viewtemplate #footer v-if="footerButton"wd-button size="small"plainclass="footerButton"编辑/wd-buttonwd-button size="small"type="danger"plainclass="footerButton"删除/wd-buttonwd-button size="small"type="info"plainclass="footerButton"查看/wd-button/template/wd-card/view/templatescript setup lang="ts"importEmptyfrom'@/components/Empty.vue'import{ref,computed}from'vue'// 默认变量constrectangleType=refString('rectangle');constprops=withDefaults(defineProps{title?:string,rectangle?:string,footerButton?:boolean,cardList?:Recordstring,any[]cardName?:{key:string;name:string}[],letterSpacingKeys?:string[],}(),{title:'',rectangle:'',footerButton:false,cardList:[],cardName:[],letterSpacingKeys:[]})// 卡片行事件定义constemit=defineEmits{(e:'itemClick',payload:{item:Recordstring,anyindex:number}):void}()// 卡片行点击事件向外层抛出consthandleItemClick=(item:Recordstring,any,index:number)={emit('itemClick',{item,index})}// 处理卡片名称constparentFields=computed(()=props.cardName||[])// 处理卡片数据样式两种方式（可选）/* 第一种：超出一行展示省略号 */constgetTextStyle=(key:string)={returnprops.letterSpacingKeys?.includes(key)?{whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}:{}}/* 第二种：内容过多在一行内压缩间距 */constgetTextStyle=(key:string)={returnprops.letterSpacingKeys?.includes(key)?{letterSpacing:'-3rpx'}:{}}/scriptstyle lang="scss"scoped.cardTemplate{width:100%;overflow:hidden;padding:30rpx0100rpx;box-sizing:border-box;.wd-card{background-color:#fff;margin:20rpx;:deep(.wd-card__content){padding:0;.list-item{background:#FFFFFF;box-shadow:0px 5rpx 5rpx-3pxrgba(40,90,204,0.1);border-radius:10rpx;width:100%;overflow:hidden;display:flex;justify-content:flex-start;padding:20rpx 24rpx024rpx;box-sizing:border-box;margin-bottom:30rpx;.list-item__image{border-radius:8rpx;width:280rpx;height:210rpx;img{width:100%;height: