vsyswin-ui 0.2.61 → 0.2.64

package/package.json

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

package/packages/button-ellipsis/index.js

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

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

@@ -0,0 +1,72 @@
+<script>
+export default {
+  name: 'SyButtonContainer',
+  props: {
+    buttons: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+      trigger() {
+        return this.$parent.trigger
+      },
+      num() {
+        return this.$parent.num
+      }
+  },
+  render(h) {
+    let contents = []
+    if (this.buttons.length <= this.num) {
+      contents = this.buttons.map((btn) => {
+        return btn.$slots.default
+      })
+    } else {
+      const idx = this.num - 1
+      const preBtns = this.buttons.slice(0, idx).map((btn) => btn.$slots.default)
+      const moreBtns = this.buttons.slice(idx).map((btn) => {
+        const slotDefault = btn.$slots.default
+        const elBtn = slotDefault[0].componentOptions.children[0]
+        const listenersFn = slotDefault[0].componentOptions.listeners.click
+        const icon = slotDefault[0].componentOptions.propsData.icon || ''
+        const text = elBtn.text
+        return h(
+          'el-dropdown-item',
+          {
+            props: { icon },
+            nativeOn: {
+              click: listenersFn
+            }
+          },
+          [text]
+        )
+      })
+      const moreDiv = h('div', { class: 'sy-button-dots' }, [h('i', { class: 'el-icon-more' })])
+      const dropDown = h(
+        'el-dropdown',
+        {
+          props: { trigger: this.trigger, size: 'medium', placement: 'bottom-end' }
+        },
+        [moreDiv, h('el-dropdown-menu', { slot: 'dropdown' }, moreBtns)]
+      )
+      contents = [...preBtns, dropDown]
+    }
+
+    return h(
+      'div',
+      {
+        class: 'sy-buttons'
+      },
+      contents
+    )
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sy-button-dots {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,15 @@
+<script>
+    export default {
+        name: 'SyButtonItem',
+        mounted() {
+            this.$parent.buttons.push(this)
+        },
+        render(h) {
+            return h('div', { style: { display: 'none' } })
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,36 @@
+<template>
+    <div class="sy-btn-ellipsis">
+        <slot></slot>
+        <button-container :buttons="buttons"></button-container>
+    </div>
+</template>
+
+<script>
+    import buttonContainer from './button-container.vue'
+    export default {
+        name: 'SyButtonList',
+        components: { buttonContainer },
+        props: {
+            // 触发下拉框的方式
+            trigger: {
+                type: String,
+                default: 'hover',
+                validator: (value) => ['hover', 'click'].includes(value)
+            },
+            // 最多显示多少数量的按钮，超过此数量是显示下拉菜单
+            num: {
+                type: Number,
+                default: 3
+            }
+        },
+        data() {
+            return {
+                buttons: []
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/index.js

@@ -13,9 +13,12 @@ import paging from './paging'
 import newSearchBar from './newSearchBar' // 高级筛选
 import table from './table' // 表格组件
 import dragSet from './drag-set'
+import buttonEllipsis from './button-ellipsis'
+
+const { buttonList, buttonItem } = buttonEllipsis
 
 // 存储组件列表
-const components = [layout, searchTree, selectProject, selectTree, SearchBar, simpleSearchBar, inputMore, paging, newSearchBar, table, dragSet]
+const components = [layout, searchTree, selectProject, selectTree, buttonItem, buttonList, SearchBar, simpleSearchBar, inputMore, paging, newSearchBar, table, dragSet]
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
 const install = function (Vue) {
@@ -38,6 +41,8 @@ export default {
   searchTree,
   selectProject,
   selectTree,
+  buttonItem,
+  buttonList,
   SearchBar,
   simpleSearchBar,
   inputMore,

package/packages/styles/common-old.scss

@@ -504,3 +504,14 @@ input:focus {
     color: #000;
   }
 }
+
+.sy-btn-ellipsis {
+  .el-button {
+      outline: none !important;
+  }
+  .el-button:hover, .el-button:active, .el-button:focus {
+      background: none !important;
+      color: #66b1ff !important;
+      border: 1px solid transparent !important;
+  }
+}