Vue弹窗-可调整大小和可拖动元素的组件

1.安装

1.安装依赖

npm i sdl-dialog

2.main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

//引入使用
import SdlDialog from 'sdl-dialog'
import 'sdl-dialog/sdl-dialog.css'
Vue.use(SdlDialog);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

2.基本用法

Dialog 弹出一个对话框，适合需要定制性更大的场景。

需要设置show属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为'标题'。最后，本例还展示了close的用法。

<button @click="handleShow">点击打开 Dialog</button>

<sdl-dialog
    :show="show"
    title="我是标题"
    :styleDialog="style"
    @close="handleClose"
>
    <span>这是一段信息</span>
</sdl-dialog>

<script>
  export default {
    data() {
      return {
        show: false,
        style: {
          width: "100vw",
          height: "100vh",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        },
      };
    },
    methods: {
      handleShow() {
        this.show = true;
      },
      handleClose() {
        this.show = false;
      },
    }
  };
</script>

3.slot Dialog 使用

<button @click="handleShow">点击打开 Dialog</button>

<sdl-dialog
    :show="show"
    :styleDialog="style"
    @close="handleClose"
>
    <span slot="title">
        我是标题
    </span>
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
        <button @click="show = false">取 消</button>
        <button @click="show = false">确 定</button>
    </span>
</sdl-dialog>

<script>
  export default {
    data() {
      return {
        show: false,
        style: {
          width: "100vw",
          height: "100vh",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        },
      };
    },
    methods: {
      handleShow() {
        this.show = true;
      },
      handleClose() {
        this.show = false;
      },
    }
  };
</script>

4.完整使用

<button @click="handleShow">点击打开 Dialog</button>

<sdl-dialog
    :show="show"
    :styleDialog="style"
    :styleMin="styleMin"
    @close="handleClose"
>
    <span slot="title">
        我是标题
    </span>
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
        <button @click="show = false">取 消</button>
        <button @click="show = false">确 定</button>
    </span>
</sdl-dialog>

<script>
  export default {
    data() {
      return {
        show: false,
        style: {
          width: "100vw",
          height: "100vh",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        },
        styleMin:{
          width: "50vw",
          height: "30vh",
        },
      };
    },
    methods: {
      handleShow() {
        this.show = true;
      },
      handleClose() {
        this.show = false;
      },
    }
  };
</script>

注意

如果这种方法传递标题title="标题" 没有数据就使用插槽的方式进行传递

<span slot="title">
  我是标题
</span>

Attributes

| 参数 | 说明 | 类型 | 默认值 | | ----------- | ----------------------------------------------- | ------- | ---------------------------------- | | show | 是否显示 Dialog | boolean | false | | title | Dialog 的标题，也可通过具名 slot （见下表）传入 | string | 标题 | | styleDialog | 外层弹窗样式 | Object | { width: '100vw',height: '100vh' } | | styleMin | 最小化弹窗样式 | Object | { width: '50vw',height: '50vh' } |

Slot

| name | 说明 | | ------ | ----------------------- | | title | Dialog 标题区的内容 | | footer | Dialog 按钮操作区的内容 |

Events

| 事件名称 | 说明 | 回调参数 | | -------- | ----------------------------------------- | -------- | | @close | Dialog 关闭的回调 (弹窗右上角 x 关闭按钮) | - | | Esc | Dialog 关闭弹窗 | - |