feat: 通用混入封装

src/utils/mixins/el-tabs-sticky.js

@@ -0,0 +1,39 @@
+export const tabsSticky = {
+  data () {
+    return {
+      navFixed: false
+    }
+  },
+  created () {
+    this.fixedNavEvents()
+  },
+  methods: {
+    fixedNavEvents () {
+      // 绑定
+      this.$once('hook:mounted', () => {
+        window.addEventListener('scroll', this.__handleScroll)
+      })
+      // 及时销毁
+      this.$once('hook:beforeDestroy', () => {
+        console.log('hook:beforeDestroy')
+        window.removeEventListener('scroll', this.__handleScroll)
+      })
+    },
+    __handleScroll () {
+      const tabsWrapper = this.$root.$el
+      const tabs = tabsWrapper.querySelector('.sticky-tab-container')
+      const stickyd = tabs.querySelector('.el-tabs__header')
+      const tabsOffsetTop = tabs.offsetTop // Tabs 组件距离页面顶部的距离
+      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 页面滚动的距离
+      if (scrollTop >= tabsOffsetTop - 64) {
+        this.navFixed = true
+        stickyd.classList.add('fixed-nav')
+        tabs.style.paddingTop = `${stickyd.clientHeight}px`
+      } else {
+        this.navFixed = false
+        tabs.style.paddingTop = 0
+        stickyd.classList.remove('fixed-nav')
+      }
+    }
+  }
+}

src/utils/mixins/selector-cascader.js

@@ -0,0 +1,27 @@
+import { Popover, Cascader, CascaderPanel, Icon } from 'element-ui'
+
+export const cascaderMixin = {
+  components: {
+    [Popover.name]: Popover,
+    [Icon.name]: Icon,
+    [CascaderPanel.name]: CascaderPanel,
+    [Cascader.name]: Cascader
+  },
+  data () {
+    return {
+      popover: {
+        show: false
+      }
+    }
+  },
+  methods: {
+    onPopoverShow () {
+      this.popover.show = true
+      this.$emit('show')
+    },
+    onPopoverHide () {
+      this.popover.show = false
+      this.$emit('hide')
+    }
+  }
+}

src/utils/mixins/selector-v-model.js

@@ -0,0 +1,23 @@
+export const selectorVModelMixin = {
+  props: {
+    state: {
+      type: [Object, Array]
+    }
+  },
+  model: {
+    prop: 'state',
+    event: 'change'
+  },
+  watch: {
+    state (n) {
+      this.setState(n)
+    }
+  },
+  methods: {
+    onChange () {
+      const payload = this.getState()
+      console.log(payload)
+      this.$emit('change', payload)
+    }
+  }
+}