@ddwl/ddwl-ui 1.2.1 → 1.2.3-beta.1

package/src/packages/dialog/index.vue

@@ -1,172 +0,0 @@
-<!-- 弹窗 -->
-<template>
-  <el-dialog
-    :class="fullscreen ? 'cover-screen-dialog' : ''"
-    class="d-dialog"
-    v-bind="$attrs"
-    :title="title"
-    :close-on-click-modal="closeOnClickModal"
-    :visible.sync="visible"
-    :width="width"
-    v-on="$listeners"
-    @closed="closed"
-  >
-    <template slot="title">
-      <slot name="title" />
-    </template>
-    <slot />
-    <template slot="footer">
-      <slot name="footer" />
-      <div v-if="showButton" class="ar">
-        <el-button
-          type="primary"
-          :icon="submitButtonIcon"
-          :loading="loading"
-          @click="submit"
-        >
-          {{ submitButtonText }}
-        </el-button>
-        <el-button @click="cancel">
-          {{ cancelButtonText }}
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<script>
-export default {
-  name: 'DDialog',
-  components: {},
-  model: {
-    prop: 'modelValue',
-    event: 'change'
-  },
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    closeOnClickModal: {
-      type: Boolean,
-      default: false
-    },
-    showButton: {
-      type: Boolean,
-      default: true
-    },
-    submitButtonText: {
-      type: String,
-      default: '确定'
-    },
-    submitButtonIcon: {
-      type: String,
-      default: ''
-    },
-    cancelButtonText: {
-      type: String,
-      default: '取消'
-    },
-    // 需要重置的表单ref, 支持ref字符串或ref对象或ref字符串|对象数组
-    formRefs: {
-      type: [String, Object, Array],
-      default: ''
-    },
-    width: {
-      type: String,
-      default: '70%'
-    },
-    maxWidth: {
-      type: String,
-      default: '70%'
-    },
-    // 是否高度撑满
-    fullscreen: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      loading: false
-    }
-  },
-  computed: {
-    visible: {
-      get () {
-        return this.modelValue
-      },
-      set (value) {
-        this.$emit('change', value)
-      }
-    }
-  },
-  methods: {
-    getRef (ref) {
-      return typeof ref === 'string' ? this.$parent.$refs[ref] : ref
-    },
-    async submit () {
-      // 是否需要进行表单校验
-      if (this.formRefs) {
-        // 多表单校验
-        if (Array.isArray(this.formRefs)) {
-          await Promise.all(this.formRefs.map(ref => this.getRef(ref)?.validate()))
-        } else {
-          await this.getRef(this.formRefs)?.validate()
-        }
-      }
-      this.loading = true
-      this.$emit('submit', (status) => {
-        this.loading = false
-        if (!status) {
-          this.visible = false
-        }
-      })
-    },
-    cancel () {
-      this.$emit('cancel')
-      this.visible = false
-    },
-    /**
-     * @description: 弹窗关闭时清除表单校验
-     */
-    closed () {
-      this.$emit('closed')
-      if (this.formRefs) {
-        // 多表单校验
-        if (Array.isArray(this.formRefs)) {
-          this.formRefs.forEach(ref => this.getRef(ref)?.resetFields())
-        } else {
-          this.getRef(this.formRefs)?.resetFields()
-        }
-      }
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.d-dialog {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  :deep(.el-dialog) {
-    max-height: 90vh;
-    display: flex;
-    flex-direction: column;
-    margin: 0 !important;
-    .el-dialog__body {
-      flex: 1;
-      overflow: auto;
-    }
-  }
-}
-.cover-screen-dialog {
-  :deep(.el-dialog) {
-    height: 90vh;
-  }
-}
-</style>

package/src/packages/dialog-confirm/index.vue

@@ -1,99 +0,0 @@
-<!-- 二次确认弹窗 -->
-<template>
-  <div class="inline">
-    <span
-      v-if="button === 'text'"
-      slot="reference"
-      :class="`${buttonType || 'primary'}-text-btn ${disabled ? 'disabled': ''}`"
-      @click="() => { visible = true }"
-    >
-      {{ buttonName }}
-    </span>
-    <el-button
-      v-else
-      :disabled="disabled"
-      :icon="buttonIcon"
-      :type="buttonType"
-      @click="() => { visible = true }"
-    >
-      {{ buttonName }}
-    </el-button>
-    <d-dialog
-      v-model="visible"
-      :title="title"
-      width="374px"
-      append-to-body
-      @submit="submit"
-    >
-      <div class="d-dialog-confirm-container">
-        <i class="el-icon-warning" />
-        <p class="d-dialog-confirm-content">
-          <slot>您确定删除该信息？</slot>
-        </p>
-      </div>
-    </d-dialog>
-  </div>
-</template>
-
-<script>
-import DDialog from '../dialog'
-
-export default {
-  name: 'DDialogConfirm',
-  components: { DDialog },
-  props: {
-    buttonName: {
-      default: '批量删除',
-      type: String
-    },
-    buttonIcon: {
-      default: '',
-      type: String
-    },
-    buttonType: {
-      default: '',
-      type: String
-    },
-    title: {
-      default: '提示',
-      type: String
-    },
-    disabled: {
-      default: false,
-      type: Boolean
-    },
-    button: {
-      default: 'button',
-      type: String
-    }
-  },
-  data () {
-    return {
-      visible: false
-    }
-  },
-  methods: {
-    submit (callback) {
-      this.$emit('submit', callback)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.d-dialog-confirm-container {
-  display: flex;
-  align-items: center;
-  & > i {
-    font-size: 28px;
-    color: rgb(255, 153, 0);
-    margin-right: 8px;
-  }
-  & > div {
-    flex: 1;
-  }
-  .d-dialog-confirm-content {
-    white-space: normal;
-  }
-}
-</style>

package/src/packages/drawer/index.vue

@@ -1,136 +0,0 @@
-<!-- 抽屉 -->
-<template>
-  <el-drawer
-    v-bind="$attrs"
-    :title="title"
-    :close-on-click-modal="false"
-    :visible.sync="visible"
-    :size="width"
-    v-on="$listeners"
-    @closed="closed"
-  >
-    <template slot="title">
-      <slot name="title" />
-    </template>
-    <div class="flex-col hf">
-      <div class="flex-1">
-        <slot />
-      </div>
-      <div v-if="showButton" class="ar mt16">
-        <el-button
-          type="primary"
-          :icon="submitButtonIcon"
-          :loading="loading"
-          @click="submit"
-        >
-          {{ submitButtonText }}
-        </el-button>
-        <el-button @click="cancel">
-          {{ cancelButtonText }}
-        </el-button>
-      </div>
-    </div>
-  </el-drawer>
-</template>
-
-<script>
-export default {
-  name: 'DDrawer',
-  components: {},
-  model: {
-    prop: 'modelValue',
-    event: 'change'
-  },
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    showButton: {
-      type: Boolean,
-      default: true
-    },
-    submitButtonText: {
-      type: String,
-      default: '确定'
-    },
-    submitButtonIcon: {
-      type: String,
-      default: ''
-    },
-    cancelButtonText: {
-      type: String,
-      default: '取消'
-    },
-    // 需要重置的表单ref
-    formRefs: {
-      type: [String, Array],
-      default: ''
-    },
-    width: {
-      type: String,
-      default: '70%'
-    }
-  },
-  data () {
-    return {
-      loading: false
-    }
-  },
-  computed: {
-    visible: {
-      get () {
-        return this.modelValue
-      },
-      set (value) {
-        this.$emit('change', value)
-      }
-    }
-  },
-  methods: {
-    getRef (ref) {
-      return typeof ref === 'string' ? this.$parent.$refs[ref] : ref
-    },
-    async submit () {
-      // 是否需要进行表单校验
-      if (this.formRefs) {
-        // 多表单校验
-        if (Array.isArray(this.formRefs)) {
-          await Promise.all(this.formRefs.map(ref => this.getRef(ref)?.validate()))
-        } else {
-          await this.getRef(this.formRefs)?.validate()
-        }
-      }
-      this.loading = true
-      this.$emit('submit', (status) => {
-        this.loading = false
-        if (!status) {
-          this.visible = false
-        }
-      })
-    },
-    cancel () {
-      this.$emit('cancel')
-      this.visible = false
-    },
-    /**
-     * @description: 弹窗关闭时清除表单校验
-     */
-    closed () {
-      this.$emit('closed')
-      if (this.formRefs) {
-        // 多表单校验
-        if (Array.isArray(this.formRefs)) {
-          this.formRefs.forEach(ref => this.getRef(ref)?.resetFields())
-        } else {
-          this.getRef(this.formRefs)?.resetFields()
-        }
-      }
-    }
-  }
-}
-</script>

package/src/packages/file-preview/index.vue

@@ -1,275 +0,0 @@
-<template>
-  <div
-    v-if="visible && list.length"
-    class="d-file-preview"
-  >
-    <div
-      ref="leftRef"
-      class="d-file-preview_left"
-    >
-      <el-tabs
-        v-model="activeTab"
-        @tab-click="handleTabClick"
-      >
-        <el-tab-pane
-          v-for="(v, i) in fileList"
-          :key="i"
-          :label="v.name"
-          :name="v.type"
-        />
-      </el-tabs>
-      <ul class="d-file-preview_list">
-        <li
-          v-for="(url, i) in currentFileList"
-          :key="i"
-          :class="currentFileIndex === i ? 'active_left' : ''"
-          @click="handleClickLeft(url, i)"
-        >
-          <el-image
-            style="width: 140px; height: 140px"
-            :src="getUrl(url)"
-            fit="cover"
-          />
-        </li>
-      </ul>
-    </div>
-    <el-image-viewer
-      v-show="activeTab === 'image'"
-      ref="viewer"
-      :mask-closable="false"
-      :append-to-body="false"
-      :url-list="[activeTab === 'image' ? currentFileList[currentFileIndex] : '']"
-      :on-close="close"
-    />
-    <div
-      v-show="activeTab !== 'image'"
-      class="d-file-preview_box"
-    >
-      <span
-        class="el-image-viewer__btn el-image-viewer__close"
-        @click="close"
-      >
-        <i class="el-icon-close" />
-      </span>
-      <audio
-        v-show="activeTab === 'audio'"
-        controls
-        style="width: 60%"
-      >
-        <source :src="currentFileList[currentFileIndex]">
-        您的浏览器不支持 audio 元素。
-      </audio>
-      <video
-        v-show="activeTab === 'video'"
-        controls
-        style="min-width: 80%;max-height: 90%"
-      >
-        <source :src="currentFileList[currentFileIndex]">
-        您的浏览器不支持 HTML5 video 标签。
-      </video>
-    </div>
-  </div>
-</template>
-
-<script>
-import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
-import {imgExts, videoExts, audioExts} from '../../utils/constant'
-export default {
-  name: 'DFilePreview',
-  components: { ElImageViewer },
-  props: {
-    value: {
-      type: Boolean,
-      default: false
-    },
-    list: {
-      type: Array,
-      default: () => {
-        return [
-          { name: '图片', type: 'image', urls: [] },
-          { name: '视频', type: 'video', urls: [] },
-          { name: '音频', type: 'audio', urls: [] }
-        ]
-      }
-    },
-    defaultIndex: {
-      type: Number,
-      default: 0
-    } 
-  },
-  data () {
-    return {
-      fileList: [],
-      currentFileIndex: 0,
-      activeTab: 'image',
-      visible: true
-    }
-  },
-  computed: {
-    currentFileList () {
-      return this.fileList.find(item => item.type === this.activeTab)?.urls || []
-    }
-  },
-  watch: {
-    list: {
-      handler (val) {
-        if (val.length && typeof (val[0]) === 'string') {
-          let arr = [
-            { name: '图片', type: 'image', urls: [] },
-            { name: '视频', type: 'video', urls: [] },
-            { name: '音频', type: 'audio', urls: [] }
-          ]
-          const exts = [imgExts, videoExts, audioExts]
-          val.map((url, index) => {
-            exts.forEach((item, i) => {
-              if (item.includes(url.substring(url.lastIndexOf('.') + 1))) {
-                arr[i].urls.push(url)
-                // 判断初始化tab、index
-                if (this.defaultIndex === index) {
-                  this.activeTab = arr[i].type
-                  this.currentFileIndex = arr[i].urls.length - 1
-                }
-              }
-            })
-          })
-          this.fileList = arr.filter(item => item.urls.length)
-        } else {
-          this.fileList = val
-        }
-      },
-      immediate: true,
-      deep: true
-    },
-    visible: {
-      handler (val) {
-        if (val) {
-          this.addEventEventFun()
-        } else {
-          this.removeEventFun()
-        }
-      }
-    }
-  },
-  methods: {
-    deviceSupportUninstall () {
-      this.$refs.viewer.deviceSupportUninstall()
-    },
-    deviceSupportInstall () {
-      this.$refs.viewer.deviceSupportInstall()
-    },
-    addEventEventFun () {
-      const elRef = this.$refs.leftRef
-      elRef.addEventListener('mouseenter', this.deviceSupportUninstall)
-      elRef.addEventListener('mouseleave', this.deviceSupportInstall)
-    },
-    removeEventFun () {
-      const elRef = this.$refs.leftRef
-      elRef.removeEventListener('mouseenter', this.deviceSupportUninstall)
-      elRef.removeEventListener('mouseleave', this.deviceSupportInstall)
-    },
-    close () {
-      this.visible = false
-      this.$emit('close')
-    },
-    getUrl (val) {
-      switch (this.activeTab) {
-        case 'video':
-          return require('./static/video.png')
-        case 'image':
-          return val
-        case 'audio':
-          return require('./static/audio.png')
-        default:
-          break
-      }
-    },
-    handleClickLeft (url, index) {
-      this.currentFileIndex = index
-    },
-    handleTabClick () {
-      this.currentFileIndex = 0
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.d-file-preview {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 99999;
-
-  &_box {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1001;
-    padding-left: 250px;
-    background-color: rgba($color: #000000, $alpha: 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &_left {
-    position: fixed;
-    z-index: 3000;
-    width: 220px;
-    height: 100vh;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    overflow: hidden;
-    padding: 12px 12px 12px 20px;
-    display: flex;
-    flex-direction: column;
-    background: #606266;
-
-    :deep(.el-tabs__nav-wrap::after) {
-      background-color: transparent;
-    }
-
-    :deep(.el-tabs__item) {
-      color: #fff;
-    }
-
-    :deep(.el-tabs__item.is-active) {
-      color: #5f9efd;
-    }
-
-    &_list {
-      flex: 1;
-      overflow: auto;
-      text-align: center;
-      font-size: 0;
-
-      li {
-        margin-bottom: 7px;
-        border: 2px solid transparent;
-        margin-right: 2px;
-      }
-
-      .active_left {
-        border: 2px solid #5f9efd;
-      }
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
-
-  :deep(.el-image-viewer__wrapper) {
-    left: calc(220px);
-  }
-
-  :deep(.el-icon-close) {
-    color: #fff;
-  }
-}
-</style>