pnpm add -D @base-stone/vue https://unpkg.com/@base-stone/vue

常规项目代码目录

├── components
│   ├── empty
│   │   ├── index.scss
│   │   ├── index.ts
│   │   └── index.vue
│   ├── loading
│   │   ├── index.scss
│   │   ├── index.ts
│   │   └── index.vue
│   ├── modal
│   │   ├── index.scss
│   │   ├── index.ts
│   │   └── index.vue
│   ├── overlay
│   │   ├── index.scss
│   │   ├── index.ts
│   │   └── index.vue
│   ├── page-loading
│   │   ├── index.scss
│   │   ├── index.ts
│   │   └── index.vue
│   ├── scroll-list
│   │   ├── index.ts
│   │   └── index.vue
│   ├── swiper
│   │   ├── index.scss
│   │   ├── index.ts
│   │   └── index.vue
│   └── toast
│       ├── index.scss
│       ├── index.ts
│       └── index.vue
├── directives
│   └── lazyLoad.ts
├── env.d.ts
├── main.ts
└── style
    ├── animate.scss
    ├── app.scss
    ├── color.scss
    ├── font.scss
    ├── index.scss
    ├── layout.scss
    ├── reset.scss
    └── ui-method.scss

plugins 插件使用

  import { getCurrentInstance } from "vue"
  const {
    proxy: { $showModal, $showToast, $showLoading, $hideLoading }
  } = getCurrentInstance() as any
  
  //提示对话框
  $showModal({
    title: "注销提示",
    content: "该门店已被认领，若不是您本人使用，请提交相关资料申诉",
    cancelText: "取消",
    confirmText: "申诉"
 })
 
 $showToast("请输入手机号")  //弱提示
 $showLoading()  //页面显示loading
 $hideLoading()  //页面隐藏loading 

lazyLoad 使用

  import { lazyLoad } from '@leafront/design-vue'

  const app = createApp(App as any)
  app.directive("lazy", {
    mounted(el, binding, vnode) {
      setTimeout(() => {
        lazyLoad.init(el, binding, vnode)
      })
    }
  })

  <template>
    <div
      class="ui-lazyLoad-pic"
      v-lazy
      data-src="image"
    >
    </div>
  </template>

  <script lang="ts">
     
     import { defineComponent, onMounted, onBeforeUnmount } from "vue"
     import { lazyLoad } from "@leafront/design-vue"
     export default defineComponent({
       setup() {
         onMounted(() => {
            lazyLoad.start()
         })  
         onBeforeUnmount(() => {
            lazyLoad.remove()
         })
       }
     })      
  </script> 
 

header 组件

  import { Header } from '@leafront/design-vue'
  <ui-header
    title="需求列表"
  >
  </ui-header>

| 参数名 | 描述 | 默认值 | | :----: | :----: | :----: | | title | 标题 | 空 | | backIcon | 返回按钮 | black 可选 white、black | | rightTitle | 头部右边标题 | 空 | | bgColor | 头部背景颜色 | 空 | | statusBgColor | 状态栏背景颜色 | 空 |

空状态组件

  import { UiEmpty } from '@leafront/design-vue'
 
  <ui-empty
    title="暂时没有相关数据哦～"
    image="/h5-static/img/empty-bg.png"
  >
  </ui-empty>

| 参数名 | 描述 | 默认值 | | :----: | :----: | :----: | | title | 标题 | 暂时没有任何数据哦 | | image | 图片地址 | /h5-static/img/empty-bg.png |

  import { PageLoading } from '@leafront/design-vue'

  <ui-page-loading></ui-page-loading> 底部loading

轮播图

  import { Swiper } from '@leafront/design-vue'
  <ui-swiper
    :list="bannerList"
    :index="index"
    :itemWidth="itemWidth"
    :itemHeight="itemHeight"
    @toggleIndex="toggleIndex"
  >
    <template #banner={list}>
      <ul class="slideshow-item" :style="{'height': itemHeight}">
        <li
          v-for="(item, $index) in list"
          :key="$index"
          :style="{
          'width': itemWidth,
          'backgroundImage': `url(${item.image})`
        }"
        >
        </li>
      </ul>
    </template>
    <template #dot>
      <ul class="slideshow-dots">
        <li
          v-for="(item, $index) in bannerList"
          :key="$index"
          :class="{ active: $index == index - 1 }"
        >
        </li>
      </ul>
    </template>
  </ui-swiper>

| 参数名 | 描述 | 默认值 | | :----: | :----: | :----: | | index | 索引开始位置 | 1 | | list | 列表array | [] | | isAutoPlay | 是否自动播放 | false | | autoTime | 自动播放时间 | 5000 | | itemWidth | banner 宽度 | 750px | | itemHeight | banner 宽度 | 500px |

遮罩层

  import { Overlay } from '@leafront/design-vue'
  <ui-overlay
    v-model:show="show3"
    fadeIn="bottom"  
    closeButton="true"
  >
    <div class="test-overlay bgfff">1234342344</div>
  </ui-overlay>

| 参数名 | 描述 | 默认值 | | :----: | :----: | :----: | | fadeIn | 显示方式 | center 可选center/bottom | | show | 是否显示 | false | | closeButton | 是否需要关闭按钮 | false |

Store 使用

  import { localStore, sessionStore } from '@leafront/design-vue' 
  localStore.set("name", {age: 1}) //localStorage
  localStore.get("name")
  sessionStore.set("name", {age: 1}) //sessionStorage
  sessionStore.get("name")