sdl-package v1.0.1

1.安装

1.安装依赖

npm i sdl-package

2.main.js

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


import SdlDialog from 'sdl-package'
import 'sdl-package/sdl.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>

Attributes

参数 说明 类型 默认值

show 是否显示 Dialog boolean false

title Dialog 的标题，也可通过具名 slot （见下表）传入 string 标题

styleDialog 弹窗样式 Object { width: '100vw',height: '100vh' }

Slot

name 说明

title Dialog 标题区的内容

footer Dialog 按钮操作区的内容

Events

事件名称 说明 回调参数

@close Dialog 关闭的回调 (弹窗右上角x关闭按钮) -