npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

dialog-el

v0.1.8

Published

> 一个vue3.x的可以拖拽移动, 拖拽缩小和放大的dialog组件

Downloads

5

Readme

dialog-el

一个vue3.x的可以拖拽移动, 拖拽缩小和放大的dialog组件

安装

npm i dialog-el

演示

https://wangdageeee.gitee.io/componentel/

使用

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import dialogEl from "dialog-el"

createApp(App).use(dialogEl).mount('#app');
<!-- Vue -->
<template>
  <button @click="evClick">打开dialog</button>
  <button @click="evMask">打开遮罩层</button>
  <dialog-el
    title="这是一个标题"
    v-model="isShow"
    :mask="isMask"
    @evOpen="open"
  >
    <div class="box">
      鼠标移动至盒子边缘(鼠标样式发生改变),
      按住鼠标左键即可拖拽缩放和放大;鼠标移动到盒子内部按住鼠标左键即可移动;鼠标左键抬起事件取消
    </div>
  </dialog-el>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  setup() {
    const isShow = ref(false);
    const isMask = ref(false);

    const evClick = () => {
      isShow.value = true;
    };

    const evMask = () => {
      isMask.value = !isMask.value;
    };

    const open = (data) => {
      console.log("我打开了", data);
    };

    return {
      isShow,
      isMask,

      evClick,
      evMask,
      open,
    };
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  background: palegoldenrod;
  overflow-y: auto;
}
</style>

属性

| 属性 | 说明 | 类型 | 默认值 | | ------- | ------------------------------ | ------- | ------------------------------------------------------------ | | v-model | 是否打开dialogEl | Boolean | -- | | title | 标题 | String | -- | | mask | 是否展示dialogEl的遮罩层 | Boolean | false | | WHStyle | dialogEl的默认宽高(无需填写px) | Object | { width: window.innerWidth / 2,height: window.innerHeight / 2} | | isMove | dialogEl是否可以移动 | Boolean | true | | isZoom | dialogEl是否可以拖拽缩放 | Boolean | true | | isIcon | dialogEl是否展示放大图标 | Boolean | true |

插槽

| 插槽名 | 说明 | 默认 | | ------ | ------------------ | ---------------- | | -- | dialogEl的内容 | -- | | full | dialogEl的放大图标 | dialogEl自带图标 | | close | dialogEl的关闭图标 | dialogEl自带图标 |

方法

| 方法 | 说明 | 回调参数 | | -------- | -------------------------------- | -------- | | evOpen | dialogEl打开的回调 | data | | evClose | dialogEl关闭的回调 | data | | evMove | dialogEl移动的回调 | data | | evZoom | dialogEl拖拽缩放的回调 | data | | evFull | dialogEl最大化的回调 | data | | evNormal | dialogEl恢复为正常窗口时候的回调 | data |

Tip

鼠标移动至盒子边缘(鼠标样式发生改变), 按住鼠标左键即可拖拽缩放和放大;鼠标移动到盒子内部按住鼠标左键即可移动;鼠标左键抬起事件取消

由于选中文本会导致元素移动和缩放出现问题,所以只能在dialogEl禁止移动的时候才可以选中文件