<!--
 * @Author: Billy
 * @Date: 2020-09-10 18:42:33
 * @LastEditors: Billy
 * @LastEditTime: 2021-12-19 03:26:04
 * @Description: 请输入
-->

<template>
  <div class="container">
    <div class="row">
      <el-button type="primary" @click="onBtnDialClick">弹窗</el-button>
    </div>
    <div class="row">
      <Ckeditor4 :editorData.sync="form.editor" />
    </div>
    <DraggableDialog
      class="draggable-dial"
      width="30vw"
      marginTop="0"
      :visible.sync="dial.visible"
      :minimized.sync="dial.minimized"
      :moveDirection="dial.moveDirection"
      :title="dial.title"
      :allowGoToOutside="false"
      :isCentered="true"
    >
      <div class="dial-content">
        <span>测试</span>
        <el-button type="primary" @click="dial.visible = false">关闭</el-button>
      </div>
    </DraggableDialog>
    <div class="row">
      <svg-icon
        icon-class="add"
        :icon-style="{ width: '30px', height: '30px' }"
        class-name="my-add-svg"
      ></svg-icon>
    </div>
  </div>
</template>
<script>
import Ckeditor4 from "../../../components/_Common/Ckeditor4.vue";
import DraggableDialog from "../../../components/_Common/Drag/DraggableDialog.vue";
export default {
  components: { Ckeditor4, DraggableDialog },
  data() {
    return {
      form: {
        editor: "",
      },
      dial: {
        visible: false,
        minimized: false,
        title: "弹窗",
        moveDirection: "both", // both/horizontal/vertical
      },
    };
  },
  methods: {
    onBtnDialClick() {
      this.dial.visible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .row {
    padding: 16px;
  }
  .draggable-dial {
    .dial-content {
      height: 200px;
    }
  }
}
</style>