ZoneTop

Appearance

vueuse ​

Utilities ​

useToggle 切换 ​

文档

ts
import { useToggle } from '@vueuse/core'


const [l1, L1] = useToggle()
const [l2, L2] = useToggle()
const [l3, L3] = useToggle()


const [d1, D1] = useToggle()
const [d2, D2] = useToggle()
const [d3, D3] = useToggle()


const onActionO: any = { L1, L2, L3, D1, D2, D3 }


function onAdd(category: string) {
  return (key: string) => {
    console.log(category)
    key === 'add' && onActionO[category]()
  }
}
//
const onDrawerO = {
  onL1: onAdd('D1'),
  onL2: onAdd('D2'),
  onL3: onAdd('D3'),
}


function onTable(key, evt) {
  console.log(key, evt)


if (['L1', 'L2', 'L3'].includes(key))
    onActionO[key]()
}

useCycleList 轮询 ​

文档

ts
import { useCycleList } from '@vueuse/core'
const { state, next } = useCycleList(['1', '2', '3'])

usePrevious 上一个值 ​

文档

ts
import { usePrevious } from '@vueuse/core'


const panelState = ref<string>('')
// 上一个视图
const previous = usePrevious(panelState)
// 面板状态
const setState = (val?: any) => {
  panelState.value = val === undefined ? previous.value : val
  category.value = panelState.value
}

useThrottleFn 节流，防止重复点击 ​

文档

ts
import { useThrottleFn } from '@vueuse/core'
const onClick = useThrottleFn((prop, evt?) => {
  emit('cmd', prop, evt)
  props.cmd?.(prop, evt)
}, props.delay)

useIntervalFn 带控件的 setInterval 包装器 ​

文档

ts
import { useIntervalFn } from '@vueuse/core'


useIntervalFn(() => {
  fetch()
}, props.timer)

createEventHook 事件的钩子 ​

文档

ts


import { createEventHook } from '@vueuse/core'


// 增加事件的钩子, 用于取消标绘
const eventHook = createEventHook()
// 取消标绘
eventHook.trigger('marker-cancel')


return {
  onMarkerCancel: eventHook.on
}

useConfirmDialog 确认动作 ​

文档

vue
<script setup lang="ts">
import { useConfirmDialog } from '@vueuse/core'


const {
  isRevealed,
  reveal,
  confirm,
  cancel,
  onReveal,
  onConfirm,
  onCancel,
} = useConfirmDialog()


onConfirm((val) => {
  console.log(val)
})


onReveal((val) => {
  console.log(val)
})
onCancel((val) => {
  console.log(val)
})
</script>


<template>
  <div>
    <button @click="reveal">
      Reveal Modal
    </button>


<teleport to="body">
      <div v-if="isRevealed" class="modal-bg">
        <div class="modal">
          <h2>Confirm?</h2>
          <button @click="confirm('aa')">
            Yes
          </button>
          <button @click="cancel">
            Cancel
          </button>
        </div>
      </div>
    </teleport>
  </div>
</template>

____________________________________________________________Utilities-End

Elements ​

useFullscreen 全屏 ​

文档

ts
import { useFullscreen } from '@vueuse/core'
const { toggle } = useFullscreen()

useWindowSize 响应式获取窗口尺寸 ​

文档

ts
import { useWindowSize } from '@vueuse/core'
const { height } = useWindowSize()

useDraggable 使元素可拖拽。 ​

文档

vue
<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from '@vueuse/core'


const el = ref<HTMLElement | null>(null)


const { x, y, style } = useDraggable(el, {
  initialValue: { x: 40, y: 40 },
})
</script>


<template>
  <div ref="el" :style="style" style="position: fixed">
    Drag me! I am at {{ x }}, {{ y }}
  </div>
</template>

useElementVisibility 跟踪元素在视口中的可见性。 ​

文档

ts
import { ref, watch } from 'vue'


import { useElementVisibility } from '@vueuse/core'


export function useElementScroll() {
  const scrollbarEl = ref<HTMLElement | null>(null)


const landDOM = ref<HTMLElement | null>(null)
  const forestDOM = ref<HTMLElement | null>(null)


const activeTag = ref('land')


function onScroll(id) {
    let y = 0


if (id === 'land') {
      //
      y += landDOM.value!.offsetTop
    }
    else if (id === 'forest') {
    //
      y += forestDOM.value!.offsetTop
    }
    // console.log(y)
    activeTag.value = id


scrollbarEl.value!.scrollTo({ behavior: 'smooth', top: y })
  }


const landInfoRef = ref()
  const forestInfoRef = ref()
  const landInfoIsVisible = useElementVisibility(landInfoRef)
  const forestInfoIsVisible = useElementVisibility(forestInfoRef)


watch(landInfoIsVisible, (val) => {
    activeTag.value = val ? 'land' : ''
  })
  watch(forestInfoIsVisible, (val) => {
    activeTag.value = val ? 'forest' : ''
  })


return {
    scrollbarEl,
    landDOM,
    forestDOM,


activeTag,
    onScroll,
    landInfoRef,
    forestInfoRef,


}
}

____________________________________________________________Elements-End

Browser ​

useFileDialog 打开文件对话框。 ​

文档

示例代码

ts
import { useFileDialog } from '@vueuse/core'


import { request } from '@monorepo/vue-use'


const { open: onUpload, onChange: onUploadFileAnalysis } = useFileDialog({ accept: '.dwg,.txt' })


// 文件上传分析
onUploadFileAnalysis((files) => {
  if (!files || files.length === 0)
    return


const formdata = new FormData()
  formdata.append('file', files[0])


loading.open()
  request.post('/onemap/cgjk/CgjkDkgl/fileAnalysis', formdata).then((resp) => {
    const rings = JSON.parse(resp.data).rings
    share.rings = rings
    gis.shape('temp').removeAll()
    gis.shape('temp')
      .withPoint({ rings })
      .withSymbol(2, 'solid', 'red', 'rgba(255, 0, 0, 0.2)')
      .build()
      .goTo()
  }).finally(() => {
    loading.close()
    visible.value = false
  })
})

useEventListener 事件监听 ​

轻松使用事件监听。在挂载时使用 addEventListener 注册，在卸载时自动使用 removeEventListener 。

文档

ts
import { useEventListener } from '@vueuse/core'


useEventListener(window, 'unload', (evt) => {
  console.log(evt)
})


useEventListener(window, 'load', (evt) => {
  console.log(evt)
})

useBroadcastChannel 广播 ​

文档

ts
import { useBroadcastChannel } from '@vueuse/core'


const { data: channel } = useBroadcastChannel({ name: 'ztgis' })


watch(channel, (val) => {
  if (val === 'close')
    window.location.reload()
})

useClipboard 剪贴板 ​

文档

ts
import { useClipboard } from '@vueuse/core'
const { text, copy, copied, isSupported } = useClipboard()

____________________________________________________________Browser-End

State ​

createGlobalState 将状态保存全局作用域中，以便跨Vue实例复用。 ​

文档

ts
import { fetchJson } from '@monorepo/vue-use'
import { createGlobalState } from '@vueuse/core'
import { ref } from 'vue'


interface _Http {
  prop: string
  url: string
  desc: string
}


interface State {
  json: any
  srCode: string
  extent: string
  httpList: _Http[]


}
// 获取当前环境
const env = import.meta.env.VITE_ENV


console.log(`当前环境:${env}`)


export const useMapStore = createGlobalState(() => {
  const state: State = {
    json: {},
    srCode: '',
    extent: '',
    httpList: [],
  }


const queryPoint = ref<any>()
  const point = ref()


return {
    state,
    // 获取JSON数据
    fetch() {
      return fetchJson('/www/json/map.json').then((data: any) => {
        state.json = data


const item: any = data.srList.find((x: any) => x.default)
        state.srCode = item.srCode
        state.extent = item.extent
        state.httpList = data.httpList
      })
    },
    // 获取接口的URL
    httpFn(prop: string) {
      //
      const item = state.httpList
        .filter((x: any) => x.env === undefined || x.env === env)
        .find(x => x.prop === prop)


if (!item) {
        // console.info(`【${prop}】未配置`)
        return ''
      }


return item.url
    },
    setQueryPoint(val) {
      if (!val) {
        queryPoint.value = undefined
        return
      }
      point.value = val


/** 标准数据结构 */
      queryPoint.value = {
        xy: { x: val.x, y: val.y },
        point: val.point,
        mapExtent: val.extent,
        imageDisplay: window.gis.viewInfo().imageDisplay,
      }
    },
  }
})

Copyright © 2020-2025 KIT