vue项目总结

鼠标框选效果

代码参考了网友[小豪看世界]的文章 (opens new window)

查看这个演示 (opens new window)

HTML 和 CSS 布局

┌────box────────┐
│┌───mask──────┐│
││      checkbox          ││
│└────────────┘│
└──────────────┘

🎉继续优化

1. mask(蓝色的框) 使用translate替换position, 用scale替换width和height。
2. 在移动鼠标时, 为了避免卡顿, 减少重复计算, 使用 window.cancelAnimationFrame和window.requestAnimationFrame更新mask的位置和尺寸属性。

局部打印

• JS实现页面打印（整体、局部） (opens new window)
• 插件Print.js (opens new window)
• 插件jQuery PrintArea (opens new window)
• 我封装的简易版

webpack 方便查看项目发布时间

在build/webpack.prod.conf.js:

var moment = require('moment')

// 当前时间作为更新版本号
const VERSION = moment().format('YYYY-MM-DD HH:mm:ss')

plugins: [
    new webpack.DefinePlugin({
        'process.env': env,
        'VERSION': '"' + VERSION + '"'
    })
]

在登录页显示:

<div class="version">更新时间:<span id="updateTime"></span></div>

mounted() {
    if (VERSION) {
        document.getElementById('updateTime').innerText = VERSION
    }
}

在src/main.js:

console.log('项目更新时间:' + VERSION)

vite 方便查看项目发布时间

在src/vite.config.js添加:

define: {
    __APP_VERSION__: JSON.stringify(new Date().toLocaleString())
},

在src/main.js:

console.log('项目更新时间:' + __APP_VERSION__)

Element UI默认配置

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 默认开启悬浮提示样式
ElementUI.TableColumn.props.showOverflowTooltip = { type: Boolean, default: true }
// 全局修改默认配置，点击空白处不能关闭弹窗
ElementUI.Dialog.props.closeOnClickModal.default = false
// 全局修改默认配置，输入框可清空
ElementUI.Input.props.clearable.default = true

Vue.use(ElementUI, { size: 'small' })

在src/styles/element-ui.scss:

/* 有些地方不显示清空按钮 */
.el-input--suffix {
  &.hide-clearable .el-input__suffix {
    display: none;
  }
  .el-input__inner {
    padding-right: 15px;
  }
  input[type=password],
  input[type=number] {
    & + .el-input__suffix {
      display: none;
    }
  }
}

避免后退时遮照层还存在

在main.js:

// fix: element 弹窗浏览器后退-遮照层还存在问题 以及跟vue keep-alive冲突
ElementUI.Dialog.deactivated = function() {
    if (this.visible) this.$emit('update:visible', false)
}

避免重复点击, 点击后自动失去焦点

在main.js:

import { throttle } from 'lodash'

// 防止按钮连续点击, 0.5s内只能点一次, 点击后自动失去焦点
ElementUI.Button.methods.handleClick = throttle(
    function(evt) {
        let target = evt.target
        if (target.nodeName == 'SPAN') {
            target = evt.target.parentNode
        }
        target.blur()
        this.$emit('click', evt);
    },
    500,
    {
        trailing: false
    }
)

在api.js:

import { throttle } from 'lodash'
export const match = throttle(
    function(data) {
        return request({
            url: '/create',
            method: 'post',
            data
        })
    },
    500,
    {
        trailing: false
    }
)

el-table自动调整列宽

在宁夏六期项目src/main.js:

import FitTable from './components/FitTable'
Vue.use(FitTable)

在el-table中添加auto-fit-column属性即可使用