Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 97d66b78 作者: 方治民
操作

feat: 新增 Widget 小部件的使用说明，补充一个空白待开发的 AffixFilter

上级 e1729eff
正在显示 包含 212 行增加 和 31 行删除
src/components/Map/Widgets/AffixFilter/index.ts 0 → 100644
export type * from './src/types'
export * from './src/hook'
export { default as AffixFilterWidget } from './src/AffixFilter.vue'
/**
* 吸附过滤器组件
*
* 说明: 用于吸附在地图上的过滤器组件，可以用于筛选地图上的数据或改变查询条件等，支持的组件有: Select
*
* 可以应用到的一些模块:
* 1. 山洪地质灾害
* 2. 森林火险
* 3. 水情监测
* 4. 卫星云图
* 5. 形势场
* ...
*/
src/components/Map/Widgets/FloatFilterWidget.vue → src/components/Map/Widgets/AffixFilter/src/AffixFilter.vue
<!-- 浮动过滤组件 -->
<!-- 吸附过滤器组件 -->
<script setup lang="ts">
//
</script>
<template>
<view class="wrap float-filter">
<view class="wrap affix-filter">
<!-- -->
</view>
</template>
......
src/components/Map/Widgets/AffixFilter/src/hook.ts 0 → 100644
import { registerWidgetFactory, unpackWidgetInstance } from '../../utils'
import type { AffixFilterInstance, AffixFilterProps, OptionItem } from './types'
// 组件名称
export const name = 'LegendWidget'
/**
* 吸附过滤器组件
* @param props 组件参数
* @returns 组件响应式数据
*/
export function useAffixFilterWidget<T extends AffixFilterInstance, P extends AffixFilterProps>(
props: P,
): [(instance: T) => void, AffixFilterInstance] {
const instanceRef = ref<T>()
const register = registerWidgetFactory(instanceRef, props)
const { get, ...fns } = unpackWidgetInstance(instanceRef, name)
return [
register,
{
...fns,
setOptionItem: (key: string, item: OptionItem) => get()?.setOptionItem(key, item),
},
]
}
src/components/Map/Widgets/AffixFilter/src/types.ts 0 → 100644
import type { BasicWidgetInstance, BasicWidgetProps } from '../../utils'
export interface OptionItem {
text: string
value: string
[key: string]: any
}
export interface Option {
// 标识
key: string
// 选项
items: OptionItem[]
}
export interface AffixFilterProps extends BasicWidgetProps {
// 布局方式，水平或垂直
layout: 'horizontal' | 'vertical'
// 选项，仅支持 Select
option: Option
}
export interface AffixFilterInstance extends BasicWidgetInstance<AffixFilterProps> {
setOptionItem: (key: string, item: OptionItem) => void
}
src/components/Map/Widgets/BottomBar/index.ts
......@@ -2,3 +2,24 @@ export type * from './src/types'
export * from './src/hook'
export { default as BottomBarWidget } from './src/BottomBar.vue'
/**
* 底部工具栏组件
*
* 说明: 此组件仅提供一个可交互的容器，用于放置其他组件，如: Tabs、Button 等一些自定义场景
*
* 可以应用到的一些模块:（基于已有蓝湖设计稿评估，仅供参考）
* 1. 降水监测
* 2. 气温监测
* 3. 相对湿度
* 4. 雷达拼图
* 5. 强对流监测
* 6. 冰雪天气
* 7. 台风监测
* 8. 卫星云图
* 9. 环境监测
* 10. 山洪地质灾害、面雨量相关
* 11. 相关预报模块
* ...
*
*/
src/components/Map/Widgets/BottomBar/src/BottomBar.vue
......@@ -12,11 +12,21 @@
type: Boolean,
default: false,
},
// 展开按钮标题
expandTitle: {
type: String,
default: '',
},
// 是否有展开按钮
showExpandButton: {
type: Boolean,
default: true,
},
// 是否有展开按钮下边框
showExpandBorder: {
type: Boolean,
default: false,
},
// 高度
height: {
type: Number,
......@@ -37,7 +47,9 @@
const data = reactive({
show: props.show,
expand: props.expand,
expandTitle: props.expandTitle,
showExpandButton: props.showExpandButton,
showExpandBorder: props.showExpandBorder,
height: props.height,
maxHeight: props.maxHeight,
})
......@@ -67,8 +79,14 @@
<template>
<view class="wrap bottom-bar" :class="{ expand: data.expand }" v-show="data.show">
<view class="action flex-center" @tap="toggleExpand()" v-show="data.showExpandButton">
<Icon icon="solar-double-alt-arrow-up-line-duotone" size="60" class="icon" />
<view
class="action flex-center"
:class="{ border: data.showExpandBorder }"
v-show="data.showExpandButton"
@tap="toggleExpand()"
>
<text class="text" v-if="data.expandTitle">{{ data.expandTitle }}</text>
<Icon icon="solar-double-alt-arrow-up-line-duotone" size="42" color="#999" class="icon" />
</view>
<!-- 自定义内容 -->
......@@ -114,12 +132,23 @@
.action {
width: 100%;
position: relative;
top: -15rpx;
font-size: 24rpx;
color: #999;
padding-bottom: 10rpx;
&.border {
border-bottom: 2rpx solid #f6f6f6;
}
.text {
margin-right: 0.5em;
}
.icon {
@include animate();
position: relative;
top: -20rpx;
transform: rotateX(0);
transform-style: preserve-3d;
}
......
src/components/Map/Widgets/BottomBar/src/types.ts
......@@ -3,8 +3,12 @@ import type { BasicWidgetInstance, BasicWidgetProps } from '../../utils'
export interface BottomBarProps extends BasicWidgetProps {
// 是否展开
expand?: boolean
// 展开标题
expandTitle?: string
// 是否有展开按钮
showExpandButton?: boolean
// 是否有展开边框
showExpandBorder?: boolean
// 高度 rpx
height: number
// 最大高度 rpx
......
src/components/Map/Widgets/Legend/index.ts
......@@ -2,3 +2,14 @@ export type * from './src/types'
export * from './src/hook'
export { default as LegendWidget } from './src/Legend.vue'
/**
* 图例组件
*
* 说明: 配合地图上的数据展示的图例，支持动态配置
*
* 可以应用到的一些模块:（基于已有蓝湖设计稿评估，仅供参考）
* 所有需要用到图例展示的模块
* 各种场景下的配置项，可以参考: \src\pages\business\monitor\rain\config.ts defaultLegendConfig
*
*/
src/components/Map/Widgets/Legend/src/Legend.vue
......@@ -21,6 +21,11 @@
type: String,
default: '',
},
// 底部距离 rpx
bottom: {
type: String,
default: '30rpx',
},
// JSON 数据
option: {
type: Object as PropType<Option>,
......@@ -33,11 +38,13 @@
// 定义复用渲染组件
const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{ item: Recordable; sub?: boolean }>()
const positionBottom = computed(() => `calc(30rpx + ${data.bottom})`)
const data = reactive({
show: props.show,
expand: props.expand,
title: props.title,
option: props.option,
bottom: props.bottom,
})
function setTitle(title: string) {
......@@ -141,7 +148,7 @@
position: absolute;
left: 30rpx;
bottom: 30rpx;
bottom: v-bind(positionBottom);
z-index: 99;
}
......
src/components/Map/Widgets/Legend/src/types.ts
......@@ -27,6 +27,8 @@ export interface LegendProps extends BasicWidgetProps {
title: string
// 选项
option: Option
// 底部距离 rpx
bottom?: string
}
export interface LegendInstance extends BasicWidgetInstance<LegendProps> {
......
src/components/Map/Widgets/Switch/index.ts
......@@ -2,3 +2,13 @@ export type * from './src/types'
export * from './src/hook'
export { default as SwitchWidget } from './src/Switch.vue'
/**
* 前后切换组件
*
* 说明: 用于地图页面两侧的前后切换组件，通常与 TimeBarWidget 配合使用
*
* 可以应用到的一些模块:（基于已有蓝湖设计稿评估，仅供参考）
* 所有需要用到前后切换时间的场景，实况、预报等
*
*/
src/components/Map/Widgets/TimeBar/index.ts
......@@ -2,3 +2,13 @@ export type * from './src/types'
export * from './src/hook'
export { default as TimeBarWidget } from './src/TimeBar.vue'
/**
* 时间栏组件
*
* 说明: 用于页面顶部的时间选择和过滤
*
* 可以应用到的一些模块:（基于已有蓝湖设计稿评估，仅供参考）
* 所有需要用到时间轴的场景，实况、预报以及部分非地图的内页，均可以实现适配
*
*/
src/components/Map/Widgets/ToolBox/index.ts
......@@ -2,3 +2,13 @@ export type * from './src/types'
export * from './src/hook'
export { default as ToolBoxWidget } from './src/ToolBox.vue'
/**
* 工具箱组件
*
* 说明: 用于展示地图上的右侧的工具箱，支持的组件有: Select、Filter、Button 之类的实现
*
* 可以应用到的一些模块:（基于已有蓝湖设计稿评估，仅供参考）
* 所有需要用到工具箱的场景，实况、预报，以及部分需要使用 AffixFilter 的场景，也可以考虑并入到工具箱中
*
*/
src/components/Map/Widgets/ToolBox/src/ToolBox.vue
......@@ -20,6 +20,11 @@
type: Boolean,
default: false,
},
// 顶部距离 rpx
top: {
type: String,
default: '1rpx',
},
// 底部距离 rpx
bottom: {
type: String,
......@@ -42,11 +47,13 @@
// 定义复用渲染组件
const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{ items: ToolBoxButton[] }>()
const positionTop = computed(() => `calc(125rpx + ${data.top})`)
const height = computed(() => `calc(30rpx + ${data.bottomPadding} + ${data.bottom})`)
const data = reactive({
show: props.show,
expand: props.expand,
showExpandButton: props.showExpandButton,
top: props.top,
bottom: props.bottom,
bottomPadding: props.bottomPadding,
tools: props.tools,
......@@ -300,7 +307,7 @@
.top {
position: absolute;
top: 125rpx;
top: v-bind(positionTop);
right: 30rpx;
z-index: v-bind(zIndex);
}
......
src/components/Map/Widgets/ToolBox/src/types.ts
......@@ -54,6 +54,8 @@ export interface ToolBoxProps extends BasicWidgetProps {
expand?: boolean
// 是否显示是否展开按钮
showExpandButton?: boolean
// 顶部距离 rpx
top?: string
// 底部距离 rpx
bottom?: string
// 底部内边距 rpx
......
src/pages/business/monitor/rain/index.vue
......@@ -214,7 +214,7 @@
})
// 图例小部件
const [registerLegendWidget, { toggleExpand: toggleLegendWidgetExpand }] = useLegendWidget({
const [registerLegendWidget, { setProps: setLegendProps }] = useLegendWidget({
show: true,
expand: true,
title: defaultLegendConfig.title,
......@@ -225,22 +225,21 @@
const [registerBottomBarWidget, { height }] = useBottomBarWidget({
show: true,
expand: true,
// expandTitle: '工具栏',
// showExpandBorder: true,
showExpandButton: true,
height: 150,
maxHeight: 240,
})
function testPackUp() {
toggleLegendWidgetExpand()
}
watch(
() => height.value,
(value) => {
console.log('[useBottomBarWidget] height', value)
setToolBoxProps({ bottom: value })
setSwitchProps({ bottom: value })
setLegendProps({ bottom: value })
setToolBoxProps({ bottom: value })
},
)
</script>
......@@ -267,30 +266,31 @@
<!-- 底部 Bar 小部件 -->
<BottomBarWidget @register="registerBottomBarWidget">
<!-- 内容 Slot -->
<view class="flex-center c-gray" @tap="testPackUp">底部交互控件/展示内容</view>
<view class="flex-center c-gray">底部交互控件/展示内容</view>
</BottomBarWidget>
</view>
</view>
</template>
<style lang="scss" scoped>
.widgets {
// 覆盖图例小部件的默认样式
:deep(.legend) {
bottom: calc(30rpx + v-bind(height));
// .widgets {
// 覆盖图例小部件的默认样式
// :deep(.legend) {
// 现已调整为通过 watch 监听 height 值变化，动态设置底部 Bar 小部件的 bottom 值，这样方便由组件内部决定样式变化
// bottom: calc(30rpx + v-bind(height));
// 如果底部使用 bottom-left attribution 则需要加上 80rpx，默认显示在右侧，不会冲突
// bottom: calc(30rpx + 80rpx + v-bind(height));
}
// 如果底部使用 bottom-left attribution 则需要加上 80rpx，默认显示在右侧，不会冲突
// bottom: calc(30rpx + 80rpx + v-bind(height));
// }
// 覆盖底部 Bar 小部件的默认样式
// :deep(.bottom-bar) {
// }
// 覆盖底部 Bar 小部件的默认样式
// :deep(.bottom-bar) {
// }
// 前后切换小部件
// :deep(.switch-control) {
// }
}
// 前后切换小部件
// :deep(.switch-control) {
// }
// }
.page {
// #ifdef H5
......
types/components.d.ts
......@@ -7,14 +7,13 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
AffixFilter: typeof import('./../src/components/Map/Widgets/AffixFilter/src/AffixFilter.vue')['default']
BottomBar: typeof import('./../src/components/Map/Widgets/BottomBar/src/BottomBar.vue')['default']
CacheImage: typeof import('./../src/components/CacheImage/index.vue')['default']
CustomPicker: typeof import('./../src/components/CustomPicker/index.vue')['default']
Empty: typeof import('./../src/components/Empty/index.vue')['default']
FDragItem: typeof import('./../src/components/FirstUI/fui-drag/f-drag-item.vue')['default']
FIndexListItem: typeof import('./../src/components/FirstUI/fui-index-list/f-index-list-item.vue')['default']
FloatFillterWidget: typeof import('./../src/components/Map/Widgets/FloatFillterWidget.vue')['default']
FloatFilterWidget: typeof import('./../src/components/Map/Widgets/FloatFilterWidget.vue')['default']
FuiActionsheet: typeof import('./../src/components/FirstUI/fui-actionsheet/fui-actionsheet.vue')['default']
FuiAlert: typeof import('./../src/components/FirstUI/fui-alert/fui-alert.vue')['default']
FuiAnimation: typeof import('./../src/components/FirstUI/fui-animation/fui-animation.vue')['default']
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论