sdl-dialog

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

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')

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>

<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>

<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>

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

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

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