# bmapvgl

**Repository Path**: min_hacker/bmapvgl

## Basic Information

- **Project Name**: bmapvgl
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-07
- **Last Updated**: 2023-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 尝鲜百度地图案例，按自己喜欢的方式去配置代码。
## 尝试使用vue3新的状态管理工具 pinia。
## 加入tailwind，使css结构代码简约复杂化。
## 全局使用了element-plus
## 菜单加入 修改mune json文件按部就班就行了。id和pid是需要注意的。
## router文件设置了自动导入，开发时直接在comonents植入需要显示的文件，再按照文件夹名字加入进menu的菜单结构内部即可，二者有相关联系。


## vueUse的使用
    - 判断是否大于设置的尺寸 ref 响应式
    import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
    import { ref } from "vue";
    - 判断是否大于设置的尺寸 ref 响应式
    const breakpoints = useBreakpoints(breakpointsTailwind)
    const sm = breakpoints.greater('sm')
    const md = breakpoints.greater('md')
    const lg = breakpoints.greater('lg')
    const xl = breakpoints.greater('xl')

    在范围之间
    const breakpoints = useBreakpoints({
      tablet: 640,
      laptop: 1024,
      desktop: 1280,
    })

    const laptop = breakpoints.between('laptop', 'desktop')
    const wiw = ref(window.innerWidth)
    window.addEventListener("resize", () => {
      wiw.value = window.innerWidth
      console.log("laptop - desktop", laptop.value, wiw.value);
    }, false);

    - 一键改变主题色
    内部操作html的filter样式进行调整颜色。
    ```javascript <template>
      <div class="h-40 bg-slate-400">
          <button @click="next()">
            <carbon-moon class="align-middle" />
            <carbon-sun class="align-middle" />
            <carbon-cafe class="align-middle" />
            <carbon-contrast class="align-middle" />
            <span class="ml-2 capitalize">{{ mode }}</span>
          </button>
          <span class="p-4 opacity-50">← Click to change the color mode</span>
      </div>
    </template>

    <script setup>
    import { ref, watch } from "vue";
    import { useColorMode, useCycleList } from "@vueuse/core";

    const mode = useColorMode({
      modes: {
        contrast: 'dark contrast',
        cafe: 'cafe',
      },
    })
    const { next } = useCycleList(['dark', 'light', 'cafe', 'contrast'], { initialValue: mode })
    </script>

    <style>
    html.cafe {
      filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
    }
    html.contrast {
      filter: contrast(2);
    }
    </style>
    ```