为VUE3量身定制的一款弹窗类UI组件,不依赖任何第三方组件库,简单轻便
为Win类添加可配置静态属性defaultContentBox
为Message类添加可配置静态属性defaultContentBox
为defaultContentBox类添加可配置静态属性defaultContentBox
defaultContentBox：顶级弹窗盒子（默认为document.body）
优化Win实例属性的可访问性，将config更新为可访问属性
优化Win实例属性的可访问性，将status更新为可访问属性
优化Win实例属性的可访问性，将zIndex更新为可访问属性
new Menu(el: HTMLElement | HTMLElement[],options)
Loading类new Loading(options)
demo下的使用方法$ npm install -S new-dream
import "new-dream-plus/dist/index.css"
Win全局配置| key | 必须 | 类型 | 描述 | 默认值 |
|---|---|---|---|---|
| showMiniList | 否 | boolean | 是否显示最小化列表 | true |
import { Win } from "new-dream-plus"
// 是否显示最小化列表
Win.showMiniList = false
// 顶级弹窗盒子
Win.defaultContentBox = document.body
// 其他默认配置项
import { defaultConfig } from 'new-dream/src/Win';
import createElement from 'new-dream/src/utils/createElement';
import img from "@/assets/logo/logo.png"
const logo = createElement({ name: "img" });
logo.setAttribute("src", img)
// 修改弹窗默认logo
defaultConfig.icon = logo
// 修改弹窗默认标题
defaultConfig.title = "财合税"
close方法不支持链式操作import { Win } from "new-dream-plus"
const app = new Win(options)
app.onmounted(()=>{
// 窗口第一次加载完成回调函数
})
app.ontop(()=>{
// 窗口置顶回调
})
app.onmove(()=>{
// 窗口移动结束回调
})
app.onmax(()=>{
// 窗口最大化切换回调
})
app.onmini(()=>{
// 窗口最小化切换回调
})
app.onclose(()=>{
// 窗口关闭回调
})
// 窗口置顶
app.setTop();
// 切换最小化
app.setMini();
// 切换最大化
app.setMax();
// 关闭窗口
app.close();
| key | 必须 | 类型 | 描述 | 默认值 |
|---|---|---|---|---|
| url | 是 | string | 要打开的网页地址，与component二选一 | "http://www.bauble.vip" |
| component | 是 | DefineComponent | 要打开的VUE组件，与url二选一 | undefined |
| parentId | 否 | string | 父窗口ID | undefined |
| id | 否 | string | 要打开的窗口ID | 随机分配ID |
| title | 否 | string | 窗口标题 | "新窗口" |
| width | 否 | string | 窗口宽 | "800px" |
| height | 否 | string | 窗口高 | "600px" |
| miniBtn | 否 | boolean | 是否显示最小化按钮 | false |
| maxBtn | 否 | boolean | 是否显示最大化按钮 | false |
| resize | 否 | boolean | 窗口是否可缩放 | false |
| icon | 否 | string/HTMLImageElement | 窗口图标 | svg string |
| props | 否 | { [key:string] : any } | 打开VUE组件时，所需要的props参数 | undefined |
options可选配置项时，会优先使用组件自带的配置项<script>
export default{
title:"这是一个窗口",
width:"600px",
height:"400px"
......
}
</script>
import { Menu } from "new-dream-plus";
new Menu(HTMLElement, options[])
| key | 必须 | 类型 | 描述 |
|---|---|---|---|
| id | 是 | string/number | 菜单选项ID |
| icon | 否 | string/HTMLImageElement | 菜单选项图标 |
| name | 是 | string | 菜单选项名称 |
| method | 是 | function | 菜单选项回调 |
<div
style="
width: 600px;
height: 600px;
border: 1px solid #aaa;
margin: 10px auto;
text-align: center;
"
id="menu-box"
>
尝试在此区域内设置点击鼠标右键
</div>
<script lang="ts" setup>
onMounted(()=>{
const menuBox = document.getElementById
if(!menuBox){return}
new Menu(menuBox, [
{
id: 1,
name: "查看(V)",
method: function () {
console.log("你点击了【查看】")
}
},
{
id: 2,
name: "排序方式(O)",
method: function () {
console.log("你点击了【排序方式】")
}
},
{
id: 3,
name: "刷新",
method: function () {
console.log("你点击了【刷新】")
}
},
])
})
</script>
import Vue from 'vue'
import "@/new-dream-plus/dist/index.css"
import NewDreamPlus from "@/new-dream-plus/src/main"
Vue.use(NewDreamPlus)
<div
style="
width: 600px;
height: 600px;
border: 1px solid #aaa;
margin: 10px auto;
text-align: center;
"
v-Rclick="options[]"
>
尝试在此区域内设置点击鼠标右键
</div>
import { Message } from "new-dream-plus";
// 用法1
new Message("info text");
// 用法2
new Message({ msg: "error text", type: "error" })
// 用法3
Message.success("success text")
new MessageBox(string | options)
.submit(() => {
console.log("继续")
}).cancel(() => {
console.log("取消")
})
| key | 必须 | 描述 | 默认值 |
|---|---|---|---|
| msg | 是 | 弹窗消息 | "确认消息" |
| title | 否 | 弹窗标题 | "提示" |
| cancelName | 否 | 取消按钮文字 | "取消" |
| submitName | 否 | 确认按钮文字 | "确定" |
<template>
<div class="home">
<button @click="slictWin">截图</button>
<img :src="imgdata">
</div>
</template>
<script>
import { Screen } from "new-dream-plus"
export default{
data(){
return {
imgdata:""
}
},
methods:{
slictWin() {
new Screen().start().onsuccess((data) => {
console.log(data)
if (data) {
imgdata.value = data
}
})
}
}
}
</script>
<template>
<div class="home">
<button @click="loading">加载</button>
</div>
</template>
<script>
import { Loading } from "@/new-dream/src/main";
const l = new Loading();
export default{
methods:{
loading() {
l.satrt([options])
setTimeout(() => {
l.close();
}, 2000);
},
}
}
</script>
| key | 必须 | 描述 | 默认值 |
|---|---|---|---|
| text | 否 | 文字提示 | "拼命加载中..." |
| type | 否 | 类型("default" | "skip" |
| backgroundColor | 否 | 背景颜色 | "rgba(0,0,0,.8)" |
| color | 否 | 文字颜色 | "#E6A23C" |
<template>
<div class="home">
<button @click="showWin">窗口1</button>
<button @click="showSon">窗口1的子窗口</button>
<div id="menu-box" style="
width: 600px;
height: 600px;
border: 1px solid #aaa;
margin: 10px auto;
text-align: center;
">
尝试在此区域内设置点击鼠标右键
</div>
<button @click="showMsg">info轻消息</button>
<button @click="showMsgError">error轻消息</button>
<button @click="showMsgSuccess">success轻消息</button>
<button @click="showMsgBox">确认提示框</button>
</div>
</template>
<script lang="ts">
import { Message, MessageBox, Win, Menu } from "new-dream-plus";
import HelloWorld from "@/components/HelloWorld.vue";
export default{
mounted(){
const menuBox = document.getElementById("menu-box")
if(!menuBox){return}
new Menu(menuBox, [
{
id: 0,
icon: `<svg t="1664646175246" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="24565">
<path
d="M918.673 883H104.327C82.578 883 65 867.368 65 848.027V276.973C65 257.632 82.578 242 104.327 242h814.346C940.422 242 958 257.632 958 276.973v571.054C958 867.28 940.323 883 918.673 883z"
fill="#FFE9B4" p-id="24566"></path>
<path d="M512 411H65V210.37C65 188.597 82.598 171 104.371 171h305.92c17.4 0 32.71 11.334 37.681 28.036L512 411z"
fill="#FFB02C" p-id="24567"></path>
<path
d="M918.673 883H104.327C82.578 883 65 865.42 65 843.668V335.332C65 313.58 82.578 296 104.327 296h814.346C940.422 296 958 313.58 958 335.332v508.336C958 865.32 940.323 883 918.673 883z"
fill="#FFCA28" p-id="24568"></path>
</svg>`,
name: "新建文件夹",
method: function () {
console.log("你点击了【新建文件夹】")
}
},
{
id: 1,
name: "查看(V)",
method: function () {
console.log("你点击了【查看】")
}
},
{
id: 2,
name: "排序方式(O)",
method: function () {
console.log("你点击了【排序方式】")
}
},
{
id: 3,
name: "刷新",
method: function () {
console.log("你点击了【刷新】")
}
},
{
id: 4,
icon: `<svg t="1664646671674" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="5280" >
<path
d="M960 80H64c-35.3 0-64 28.6-64 64v576c0 35.3 28.7 64 64 64h312c4.4 0 8 3.6 8 8v84c0 2.2-1.8 4-4 4h-60c-17.7 0-32 14.3-32 32v32h448v-32c0-17.7-14.3-32-32-32h-60c-2.2 0-4-1.8-4-4v-84c0-4.4 3.6-8 8-8h312c35.3 0 64-28.7 64-64V144c0-35.4-28.7-64-64-64zM576 876c0 2.2-1.8 4-4 4H452c-2.2 0-4-1.8-4-4v-52c0-4.4 3.6-8 8-8h112c4.4 0 8 3.6 8 8v52z m384-172c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16v-44c0-2.2 1.8-4 4-4h888c2.2 0 4 1.8 4 4v44z"
p-id="5281" fill="#1296db"></path>
</svg>`,
name: "显示设置",
method: function () {
console.log("你点击了【显示设置】")
}
},
{
id: 4,
icon: `<svg t="1664646621764" class="icon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="4311">
<path d="M320 768H0V0h834v64H64v640h256z" fill="#727272" p-id="4312"></path>
<path d="M0 832h1024v192H0z" p-id="4313"></path>
<path
d="M1004.3 83.8c-26.4-26.4-68.9-26.4-95.2 0l-47.6 47.8 95.2 95.5 47.6-47.7c26.3-26.5 26.3-69.2 0-95.6zM812.4 178.8L526.8 465.2l95.2 95.5 285.6-286.4zM384 704l190.4-95.5-95.2-95.5z"
fill="#5280C1" p-id="4314"></path>
</svg>`,
name: "个性化",
method: function () {
console.log("你点击了【个性化】")
}
},
])
},
methods:{
showWin() {
new Win({
id: "win-01",
title: "不知道是干什么的窗口",
maxBtn: true,
miniBtn: true,
resize: true,
width: "600px",
height: "500px",
component: HelloWorld,
props: {
msg: "Hello World",
},
})
.onmounted((e) => {
console.log(e);
})
.onclose(() => {
console.log(Win.WinIdMap);
});
},
showSon() {
new Win({
parentId: "win-01",
title: "不知道是干什么的窗口",
url: "http://bauble.vip",
maxBtn: true,
miniBtn: true,
resize: true,
width: "500px",
height: "300px",
})
.onmounted((e) => {
console.log(e);
})
.onclose(() => {
console.log(Win.WinIdMap);
});
},
showMsg() {
new Message("hello world");
},
showMsgError() {
Message.error("error");
},
showMsgSuccess() {
Message.success("success");
},
showMsgBox() {
new MessageBox("这是一个确认框")
.cancel(() => {
console.log("点击了取消按钮");
})
.submit(() => {
console.log("点击了确定按钮");
});
}
}
}
</script>
<style>
.home {
padding: 20px;
}
button+button {
margin-left: 10px;
}
</style>
FAQs
The pop-up UI component of Vue2
The npm package new-dream receives a total of 4 weekly downloads. As such, new-dream popularity was classified as not popular.
We found that new-dream demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Sonar’s acquisition of Tidelift highlights a growing industry shift toward sustainable open source funding, addressing maintainer burnout and critical software dependencies.
Security News
Ransomware negotiators share how modern cybercriminals operate like corporations, using specialized teams, negotiation tactics, and reputation management.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.