首页 > 其他分享 >通过对elements混入的方式设置一些公共方法

通过对elements混入的方式设置一些公共方法

时间:2024-09-03 10:04:59浏览次数:11  
标签:picker 混入 elements MdElementUi Element start 公共 Date new

import Vue from 'vue'
import Element from 'element-ui'
import i18n from '@/lang'
// import '../element-variables.scss'

import { closeMenuOnScroll } from '@/mixin/close-menu-onscroll.js'
import message from '@/mixin/message.js'
import dragDialog from '@/mixin/dragDialog.js'
import router from '@/router/router'

import MdElementUi from 'mdzy-component-frontend'
import 'mdzy-component-frontend/dist/mdzy-component-frontend.css'

let ElementConfig = {
  size: 'mini'
}
console.log('%c 第20行', 'color: red; font-size: 2em')
console.log(Element)
// 扩展下拉框选项的过滤方法,使可以匹配非绑定字段的搜索
Element.Option.mixins[Element.Option.mixins.length] = {
  props: {
    optionData: {
      type: Object
    },
    filterVal: {
      type: String
    },
    customFilterMethod: Function
  },
  watch: {
    filterVal: {
      handler(val) {
        if (this.customFilterMethod && val) {
          this.visible = this.visible || this.customFilterMethod(val, this.optionData)
        }
      },
      deep: true,
      immediate: true
    }
  }
}
Element.Select.mixins[Element.Select.mixins.length] = {
  props: {
    onOptionsOneSelect: {
      // 当只有一个选项的时候默认选择第一个选项
      type: Boolean,
      default: false
    },
    bindKey: {
      type: String
    }
  },
  watch: {
    options: {
      handler(val) {
        if (this.onOptionsOneSelect) {
          if (val.length === 1) {
            if (val[0].value && typeof val[0].value === 'string') {
              this.$emit('input', val[0].value)
            }
          }
        }
      },
      deep: true,
      immediate: true
    },
    previousQuery: {
      handler(val) {
        this.$emit('filter-change', val, this.bindKey)
      },
      deep: true,
      immediate: true
    }
  }
}

Element.DatePicker.mixins[Element.DatePicker.mixins.length] = {
  created() {
    let shortcuts = []

    if (!this.pickerOptions.shortcuts) {
      if (this.type === 'date' || this.type === 'datetime') {
        shortcuts = [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      }

      if (this.type === 'daterange') {
        shortcuts = [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }

      if (this.type === 'monthrange') {
        shortcuts = [
          {
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          },
          {
            text: '今年至今',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
      if (shortcuts.length > 0) {
        this.$set(this.pickerOptions, 'shortcuts', shortcuts)
      }
    }
  }
}

// 全局弹窗可以拖动
dragDialog(Element)
// 页面滚动时关闭展开的下拉框,下拉菜单等
closeMenuOnScroll(Element)
// 全局弹窗默认点击外面不关闭
Element.Dialog.props.closeOnClickModal.default = false
// 默认全局弹窗设置为append-to-body
Element.Dialog.props.appendToBody.default = true

Element.MessageBox.setDefaults({
  closeOnClickModal: false,
  closeOnPressEscape: false
})

// console.log(MdElementUi);
try {
  // 拦截button click时间  阻止冒泡
  let _buttonClick = MdElementUi.MdButton.methods.onclick
  MdElementUi.MdButton.methods.onclick = function (e) {
    e.stopPropagation()
    _buttonClick.apply(this, arguments)
  }
} catch {}
if (!MdElementUi.MdButton.mixins) {
  MdElementUi.MdButton.mixins = []
}
MdElementUi.MdButton.mixins[MdElementUi.MdButton.mixins.length] = {
  props: {
    menuCode: {
      type: String,
      default: ''
    },
    menuCodePrifix: {
      //自定义权限前缀,有该值不用路由名拼接
      type: String,
      default: ''
    }
  },
  mounted() {
    // console.log('mounted-button', this.menuCode, router.app._route.name)
    this.initBtnConfig()
  },
  watch: {
    menuCode(val) {
      this.initBtnConfig()
    },
    '$store.state.permissionList': {
      handler(val) {
        this.initBtnConfig()
      }
    }
  },
  activated() {
    // console.log('activated-button', this.menuCode, router.app._route.name)
    this.initBtnConfig()
  },
  methods: {
    initBtnConfig() {
      if (!this.menuCode) return
      if (this.menuCode && this.menuCode === 'alwaysShow') return
      this.$nextTick(() => {
        setTimeout(() => {
          let list = this.$store.state.permissionList || {}
          // 获取当前路由和权限编码
          let routerName = this.menuCodePrifix || router.app._route.name //这个就是用来获取路由name
          let id = routerName + '-' + this.menuCode // 获取到 v-permission的值
          let exit = list[id.toLowerCase()]
          // console.log('idididididid', routerName, id, exit)
          if (!exit) {
            this.$el.style.display = 'none'
            return
          }
          if (this.$el.style.display === 'none') {
            this.$el.style.display = null
          }
          let spanElement = this.$el.querySelector('span')
          let checkboxEl = this.$el.querySelector('.el-checkbox__label')
          if (checkboxEl) {
            spanElement = checkboxEl
          }
          if (!spanElement) return
          if (exit) {
            // 设置按钮的文本内容,并保留icon
            spanElement.innerText = exit[0]
            // 设置按钮的排序
            this.$el.style.order = exit[1]
          }
        })
      })
    }
  }
}

if (!MdElementUi.MdSelect.mixins) {
  MdElementUi.MdSelect.mixins = []
}
MdElementUi.MdSelect.mixins[MdElementUi.MdSelect.mixins.length] = {
  props: {
    groupCode: {
      type: Number | String,
      default: ''
    }
  },
  created() {
    if (this.groupCode) {
      this.$commonMethods.getSelectData(this.groupCode).then((res) => {
        this.computedOptions = res
      })
    }
  }
}
Vue.use(MdElementUi, MdElementUi)
Vue.use(Element, ElementConfig)
message(Vue)

//重写element的$comirm,便于国际化处理
Vue.prototype.$confirm = function (message, title, options) {
  if (options?.cancelButtonText) {
    options.cancelButtonText = i18n.t(options.cancelButtonText)
  }
  if (options?.confirmButtonText) {
    options.confirmButtonText = i18n.t(options.confirmButtonText)
  }
  if (!options.hasOwnProperty('type')) {
    options.type = 'warning'
  }
  return Element.MessageBox.confirm(i18n.t(message), i18n.t(title), options)
}

标签:picker,混入,elements,MdElementUi,Element,start,公共,Date,new
From: https://www.cnblogs.com/yibottlec/p/18393985

相关文章

  • 智慧公厕系统,重塑公共卫生间新生态@卓振思众
    在快节奏的现代生活中,公共卫生间作为城市基础设施的重要组成部分,其管理效率和使用体验直接关系到市民的生活质量。近年来,随着科技的飞速发展,智慧卫生间系统应运而生,以其智能化、便捷化的特点,正逐步改变着我们对公共卫生间的传统认知。【卓振思众】智慧公厕系统的全面解析智慧......
  • 将Laravel项目中的"Remove public directory"翻译成中文为"移除公共目录"
    将"Removepublicdirectory"翻译成中文为"移除公共目录"是正确的。"public"通常指的是公共的、共享的或公开的,"directory"则是目录、文件夹的意思。因此,"Removepublicdirectory"的意思是移除公共目录,即删除或取消该目录的公共访问权限,或者将其从项目中删除。这样的翻译能够准......
  • [蓝桥杯 2016 省 A] 密码脱落--最长公共子序列题解
    题目复述:题目链接:[蓝桥杯2016省A]密码脱落-洛谷#[蓝桥杯2016省A]密码脱落##题目描述X星球的考古学家发现了一批古代留下来的密码。这些密码是由A、B、C、D四种植物的种子串成的序列。仔细分析发现,这些密码串当初应该是前后对称的(也就是我们说的回文串)。......
  • 【公共科目】简单概率问题
    问:在人寿保险事业中,很重视某一年龄段的投保人的死亡率,计入每个投保人能活到65的概率为0.6,问3个投保人中有2个人活到65岁的概率是多少?A 0.126B 0.388C 0.432【正确答案】D 0.534首先看到这道题,很感慨能活到65岁的人数只有6成。。。真实情况应该差不多,参考《用ppt图表分析人口数......
  • python读取配置文件&&简单封装 公共配置文件 config
    之前有做过把爬虫数据写到数据库中的练习,这次想把数据库信息抽离到一个ini配置文件中,这样做的好处在于可以在配置文件中添加多个数据库,方便切换(另外配置文件也可以添加诸如邮箱、url等信息)1.configparser模块python使用自带的configparser模块用来读取配置文件,配置文......
  • 代码随想录day44 || 1143 最长公共子序列, 1035 不相交的线, 53 最大子序列和, 392 判
    1143最长公共子序列funclongestCommonSubsequence(text1string,text2string)int{ //思路和判断最长公共数组一样 //dp[i][j]表示以text1[i],text2[j]为结尾的最长公共子序列的长度 //iftext1[i]==text2[j]{dp[i+1][j+1]=dp[i][j]+1}else{dp[i+1][j+1]=......
  • 二叉树的最近公共祖先
    ​​......
  • 代码随想录算法训练营第十九天| 530.二叉搜索树的最小绝对差 501.二叉搜索树中的众数
    530.二叉搜索树的最小绝对差1.这题的关键在于二叉搜索树的中序遍历就是有序序列。classSolution{private:vector<int>vec;voidtraversal(TreeNode*root){if(root==NULL)return;//中序遍历树,得到有序序列traversal(root->le......
  • 代码随想录算法训练营第二十天| 235. 二叉搜索树的最近公共祖先 701.二叉搜索树中的插
    235.二叉搜索树的最近公共祖先不想动脑子,沿用了普通二叉树的最近公共祖先,和昨天那题一样classSolution{public:TreeNode*lowestCommonAncestor(TreeNode*root,TreeNode*p,TreeNode*q){if(root==NULL||root==p||root==q)returnroot;......
  • (算法)最⻓公共前缀————<链表—模拟>
    1.题⽬链接:14.最⻓公共前缀2.题⽬描述:3.解法:算法思路:解法⼀(两两⽐较):我们可以先找出前两个的最⻓公共前缀,然后拿这个最⻓公共前缀依次与后⾯的字符串⽐较,这样就可以找出所有字符串的最⻓公共前缀。C++算法代码: classSolution{public: stringlongestCommonPr......