Vhen-vue3-layer NPM

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",
        }
}