vsyswin-ui 0.2.80 → 0.2.82

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vsyswin-ui",
-    "version": "0.2.80",
+    "version": "0.2.82",
     "main": "lib/vsyswin-ui.umd.min.js",
     "private": false,
     "description": "Vue2.x的应用组件库.",

package/packages/base-dialog/index.js

@@ -0,0 +1,10 @@
+// 导入组件
+import baseDialog from './src/base-dialog.vue'
+
+// 为组件提供 install 安装方法，供按需引入
+baseDialog.install = function (Vue) {
+  Vue.component(baseDialog.name, baseDialog)
+}
+
+// 默认导出组件
+export default baseDialog

package/packages/base-dialog/src/base-dialog.vue

@@ -0,0 +1,107 @@
+<template>
+  <!-- 封装弹框 -->
+  <div class="popup">
+      <el-dialog :title="dialogTitle" appendToBody custom-class="syswin-dialog-center-footer" :visible.sync="dialogVisible" :width="width" :before-close="handleClose" :close-on-click-modal="closeOnClickModal">
+          <slot>
+              <p>弹框自定义的内容</p>
+          </slot>
+          <span v-if="!$slots.footer" slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="Save" size="small" :loading="loading">确 定</el-button>
+              <el-button @click="Cancel" size="small">取 消</el-button>
+          </span>
+          <div v-else class="my-footer">
+              <slot name="footer" />
+          </div>
+      </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SyBaseDialog',
+  props: {
+      dialogTitle: {
+          type: String,
+          default: '标题'
+      },
+      visible: {
+          type: Boolean,
+          default: false
+      },
+      width: {
+          type: String,
+          default: '550px'
+      },
+      closeOnClickModal: {
+          type: Boolean,
+          default: false
+      },
+      loading: {
+          type: Boolean,
+          default: false
+      }
+  },
+  computed: {
+      dialogVisible: {
+          get() {
+              return this.visible
+          },
+          set(val) {
+              // 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 centerDialogVisible的值
+              this.$emit('update:visible', val)
+          }
+      }
+  },
+  methods: {
+      Cancel() {
+          this.$emit('update:visible', false)
+      },
+      Save() {
+          this.$emit('confirm')
+      },
+      handleClose() {
+          this.$emit('update:visible', false)
+      }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.popup {
+  .el-dialog {
+      background-color: #ffffff;
+      box-shadow: 0px 0px 10px 0px rgba(17, 130, 251, 0.5);
+      border-radius: 5px;
+      margin-top: 10% !important;
+  }
+  .el-dialog__header {
+      width: 100%;
+      height: 40px;
+      line-height: 38px;
+      border-bottom: 1px solid #f6f7f9;
+      box-sizing: border-box;
+      padding: 0 20px;
+      font-size: 16px;
+  }
+  .el-dialog__close.el-icon.el-icon-close {
+      font-size: 20px;
+      width: 17px;
+      height: 17px;
+  }
+  .el-button.el-button--default {
+      // width: 88px;
+      color: var(--primary-color);
+      border: 1px solid var(--primary-color);
+  }
+
+  .el-dialog__headerbtn {
+      top: 4px;
+  }
+  .el-dialog__title {
+      color: #3c4354;
+      font-family: PingFangSC-Regular;
+      font-size: 16px;
+      line-height: 16px;
+  }
+}
+</style>

package/packages/button-ellipsis/src/button-list.vue

@@ -20,7 +20,7 @@
             // 最多显示多少数量的按钮，超过此数量是显示下拉菜单
             num: {
                 type: Number,
-                default: 5
+                default: 3
             }
         },
         data() {

package/packages/index.js

@@ -10,6 +10,7 @@ import SearchBar from './search-bar' // 搜索工具栏
 import simpleSearchBar from './simple-search-bar' // 简单搜索栏组件
 import inputMore from './input-more' // 简单搜索栏组件
 import paging from './paging'
+import baseDialog from './base-dialog'
 import newSearchBar from './newSearchBar' // 高级筛选
 import table from './table' // 表格组件
 import dragSet from './drag-set'
@@ -19,7 +20,7 @@ export { default as Progress } from './progress';
 const { buttonList, buttonItem } = buttonEllipsis
 
 // 存储组件列表
-const components = [layout, searchTree, selectProject, selectTree, buttonItem, buttonList, SearchBar, simpleSearchBar, inputMore, paging, newSearchBar, table, dragSet, topTabs]
+const components = [layout, searchTree, selectProject, selectTree, buttonItem, buttonList, SearchBar, simpleSearchBar, inputMore, paging, newSearchBar, table, dragSet, topTabs, baseDialog]
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
 const install = function (Vue) {
@@ -51,5 +52,6 @@ export default {
   newSearchBar,
   table,
   topTabs,
-  dragSet
+  dragSet,
+  baseDialog
 }

package/packages/styles/common.scss

@@ -411,6 +411,21 @@ $alien: left, center, right;
         }
     }
 }
+
+/*
+  BaseDialog组件使用到的样式，使底部按钮居中
+*/
+.syswin-dialog-center-footer {
+    .el-dialog__body {
+        padding: 10px;
+        box-sizing: border-box;
+    }
+    .el-dialog__footer,
+    .my-footer {
+        text-align: center;
+    }
+}
+
 //  侧滑窗（使用el-drawer, direction=rtl 添加 class=syswin-drawer）
 // 例：
 // <el-drawer title="我是标题" :visible.sync="drawer" :direction="rtl" class="syswin-drawer">