vhen-vue3-layer

Vhen-vue3-layer是一款vue3+ts弹窗组件，可以拖曳、放大、缩小、最大化、最小化

一、安装

npm install -D vhen-vue3-layer或者yarn add vhen-vue3-layer

二、全局使用

// main.ts
import vhenVue3Layer from 'vhen-vue3-layer'
import 'vhen-vue3-layer/dist/style.css'

createApp(App).use(vhenVue3Layer).mount('#app')

// 页面中使用

 <LayerModal
    show-maxmize
    showMinmize
    :skin="{
      header: {
        bgColor: '#4476A7',
        titleColor:'#fff',
        optionColor:'#fff'
      },
    }"
    v-model="isShow"
  >
  </LayerModal>

  <!-- 挂在id -->
  <div id="modal"></div>
  <LayerModal  teleport="#modal" ></LayerModal>

三、 Vhen-vue3-layer属性

| 属性 | 类型 | 默认值 | 描述 | | ----| ---- | ---- | ---- | | width | string | 300px | 弹窗宽度 | | height | string |300px | 弹窗高度 | | title | string |Vhen-vue3-layer标题 | 弹窗标题 | | skin | Object | -- | 弹窗头部与底部皮肤 | | content | string | -- | 弹窗内容或者使用slot插槽 | | teleport | string | body | 弹窗挂载属性默认body, 可以挂载id如teleport="#app" | | v-model | boolean | false | 弹窗显示隐藏 | | position | string | center | 弹窗定位：top-left/top-center/top-right/left/center/right/bottom-left/bottom-center/bottom-right | | zIndex | number | 1 | 弹窗层级 | | showClose | boolean | true | 弹窗是否关闭按钮 | | full | boolean | false | 弹窗是否全屏 | | showHeader | boolean | true | 弹窗是否显示头部 | | showFooter | boolean | true | 弹窗是否显示底部 | | showMaxmize | boolean | true | 弹窗是否显示最大化 | resize | boolean | true | 是否拉伸放大/缩小弹窗 | | cancelText | string | 取消 | 弹窗取消按钮文案 | | confirmText | string | 确定 | 弹窗确认按钮文案 |

skin={
   header: {
          bgColor: "#f8f8f8",
          titleColor: "#666",
          titleSize: "14px",
          optionColor: "#666",
          optionSize: "16",
        },
        footer: {
          bgColor: "#fff",
          boderTop: "1px solid #f0f0f0",
          align: "flex-end",
          cancelBorder: "1px solid #f0f0f0",
          cancelBgColor: "#fff",
          cancelTextColor: "#666",
          cancelTextSize: "14px",
          confirmBorder: "1px solid #4476a7",
          confirmBgColor: "#4476a7",
          confirmTextColor: "#fff",
          confirmTextSize: "14px",
        }
}

四、Vhen-vue3-layer事件

| 时间 | 描述 | | ---- | ---- | | close | 取消弹窗回调事件 | | confirm | 确认弹窗回调事件 |

五、效果图