/** * 创建唯一的字符串 * @return {string} ojgdvbvaua40 */ function createUniqueString () { const timestamp = +new Date() + '' const randomNum = parseInt((1 + Math.random()) * 65536) + '' return (+(randomNum + timestamp)).toString(32) } // elementui日期时间范围 快捷选项 const pickerOptionsRange = { shortcuts: [ { text: '今天', onClick (picker) { const end = new Date() const start = new Date(new Date().toDateString()) start.setTime(start.getTime()) picker.$emit('pick', [start, end]) } }, { text: '最近一周', onClick (picker) { const end = new Date() const start = new Date() start.setTime(end.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]) } } ] } // elementui月份范围 快捷选项 const pickerOptionsRangeMonth = { shortcuts: [ { 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]) } }, { text: '最近一年', onClick (picker) { const end = new Date() const start = new Date() start.setMonth(start.getMonth() - 12) picker.$emit('pick', [start, end]) } } ] }
（4）一些elmentui全局样式的修改
// el-input-number (controls-position="right") .el-input-number.is-controls-right { .el-input-number__decrease { display: none; } .el-input-number__increase { display: none; top: 2px; // fix style bug } &:hover { .el-input-number__decrease { display: inline-block; } .el-input-number__increase { display: inline-block; } } .el-input__inner { text-align: left; padding-left: 5px; padding-right: 40px; } } // el-date-picker datetimerange .el-date-editor.el-date-editor--datetimerange { .el-range-separator { width: 24px; color: #999; padding: 0; } .el-range__icon { margin-left: 0; } &.el-input__inner { vertical-align: middle; padding: 3px 5px; } &.el-range-editor--medium { width: 380px; .el-range-separator { line-height: 30px; } } &.el-range-editor--mini { width: 330px; .el-range-separator { line-height: 22px; } } } // el-date-picker not datetimerange .el-date-editor { .el-input__prefix { left: 0; top: 1px; } .el-input__suffix { right: 0; top: 1px; } .el-input__inner { padding: 0 25px; } &.el-input--mini { width: 175px; } &.el-input--medium { width: 195px; } } // input padding .el-input__inner { padding: 0 5px; }
总结
以上所述是小编给大家介绍的vue elementui 实现搜索栏公共组件封装，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！