@ddwl/ddwl-ui 1.0.1

package/src/packages/dialog/index.vue

@@ -0,0 +1,164 @@
+<!-- 弹窗 -->
+<template>
+  <el-dialog
+    :class="fullscreen ? 'cover-screen-dialog' : ''"
+    class="d-dialog"
+    v-bind="$attrs"
+    :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="submitBtnIcon"
+          :loading="loading"
+          @click="submit"
+        >
+          {{ submitBtnText }}
+        </el-button>
+        <el-button @click="cancel">
+          {{ cancelBtnText }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'DDialog',
+  components: {},
+  model: {
+    prop: 'modelValue',
+    event: 'change'
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: false
+    },
+    showButton: {
+      type: Boolean,
+      default: true
+    },
+    submitBtnText: {
+      type: String,
+      default: '确定'
+    },
+    submitBtnIcon: {
+      type: String,
+      default: ''
+    },
+    cancelBtnText: {
+      type: String,
+      default: '取消'
+    },
+    // 需要重置的表单ref
+    formRefs: {
+      type: [String, 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: {
+    async submit () {
+      // 是否需要进行表单校验
+      if (this.formRefs) {
+        // 多表单校验
+        if (Array.isArray(this.formRefs)) {
+          await Promise.all(this.formRefs.map(ref => this.$parent.$refs[ref] && this.$parent.$refs[ref].validate()))
+        } else {
+          this.$parent.$refs[this.formRefs] && (await this.$parent.$refs[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.$parent.$refs[ref] && this.$parent.$refs[ref].resetFields())
+        } else {
+          this.$parent.$refs[this.formRefs] && this.$parent.$refs[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

@@ -0,0 +1,99 @@
+<!-- 二次确认弹窗 -->
+<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

@@ -0,0 +1,127 @@
+<!-- 抽屉 -->
+<template>
+  <el-drawer
+    v-bind="$attrs"
+    :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="submitBtnIcon"
+          :loading="loading"
+          @click="submit"
+        >
+          {{ submitBtnText }}
+        </el-button>
+        <el-button @click="cancel">
+          {{ cancelBtnText }}
+        </el-button>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+export default {
+  name: 'DDrawer',
+  components: {},
+  model: {
+    prop: 'modelValue',
+    event: 'change'
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    showButton: {
+      type: Boolean,
+      default: true
+    },
+    submitBtnText: {
+      type: String,
+      default: '确定'
+    },
+    submitBtnIcon: {
+      type: String,
+      default: ''
+    },
+    cancelBtnText: {
+      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: {
+    async submit () {
+      // 是否需要进行表单校验
+      if (this.formRefs) {
+        // 多表单校验
+        if (Array.isArray(this.formRefs)) {
+          await Promise.all(this.formRefs.map(ref => this.$parent.$refs[ref] && this.$parent.$refs[ref].validate()))
+        } else {
+          this.$parent.$refs[this.formRefs] && (await this.$parent.$refs[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 () {
+      if (this.formRefs) {
+        // 多表单校验
+        if (Array.isArray(this.formRefs)) {
+          this.formRefs.forEach(ref => this.$parent.$refs[ref] && this.$parent.$refs[ref].resetFields())
+        } else {
+          this.$parent.$refs[this.formRefs] && this.$parent.$refs[this.formRefs].resetFields()
+        }
+      }
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,277 @@
+<template>
+  <div
+    v-if="visible && fileArr.length"
+    class="container"
+  >
+    <div
+      id="left"
+      class="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="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="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'
+const imgExts = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'svg']
+const videoExts = ['mp4']
+const audioExts = ['mp3', 'wav', 'ogg']
+export default {
+  name: 'DFilePreview',
+  components: { ElImageViewer },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    fileArr: {
+      type: Array,
+      default: () => {
+        return [
+          { name: '图片', type: 'image', urls: [] },
+          { name: '视频', type: 'video', urls: [] },
+          { name: '音频', type: 'audio', urls: [] }
+        ]
+      }
+    }
+  },
+  data () {
+    return {
+      fileList: [],
+      currentFileIndex: 0,
+      activeTab: ''
+    }
+  },
+  computed: {
+    currentFileList () {
+      return this.fileList.find(item => item.type === this.activeTab)?.urls || []
+    },
+    visible: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        this.removeEventFun()
+        this.$emit('change', value)
+      }
+    }
+  },
+  watch: {
+    fileArr: {
+      handler (val) {
+        if (val.length && typeof (val[0]) === 'string') {
+          let arr = [
+            { name: '图片', type: 'image', urls: [] },
+            { name: '视频', type: 'video', urls: [] },
+            { name: '音频', type: 'audio', urls: [] }
+          ]
+          val.map(url => {
+            if (imgExts.includes(url.substring(url.lastIndexOf('.') + 1))) {
+              arr[0].urls.push(url)
+            }
+            if (videoExts.includes(url.substring(url.lastIndexOf('.') + 1))) {
+              arr[1].urls.push(url)
+            }
+            if (audioExts.includes(url.substring(url.lastIndexOf('.') + 1))) {
+              arr[2].urls.push(url)
+            }
+          })
+          this.fileList = arr.filter(item => item.urls.length)
+        } else {
+          this.fileList = val
+        }
+        this.activeTab = this.fileList[0].type
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  mounted () {
+    this.addEventEventFun()
+  },
+  methods: {
+    deviceSupportUninstall () {
+      this.$refs.viewer.deviceSupportUninstall()
+    },
+    deviceSupportInstall () {
+      this.$refs.viewer.deviceSupportInstall()
+    },
+    addEventEventFun () {
+      const element = document.getElementById('left')
+      element.addEventListener('mouseenter', this.deviceSupportUninstall)
+      element.addEventListener('mouseleave', this.deviceSupportInstall)
+    },
+    removeEventFun () {
+      const element = document.getElementById('left')
+      element.removeEventListener('mouseenter', this.deviceSupportUninstall)
+      element.removeEventListener('mouseleave', this.deviceSupportInstall)
+    },
+    close () {
+      this.visible = false
+    },
+    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>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+
+  .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>