1、点击图片预览文字
引入el-image中的组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="srcList" />
<el-button @click="onPreview" type="text" v-text="'点击查看图片('+srcList.length+')张'"></el-button>
2、监听
watch: {
'监听的参数': {
handler (n, o) {
},
deep: true, //监听对象或数组
immediate: true //当值第一次绑定时,立即执行
}
},
普通监听
watch: {
rangeDate: function (newVal, oldVal) {
if (newVal !== null) {
this.tableParams.beginDate = newVal[0]
this.tableParams.endDate = newVal[1]
} else {
this.tableParams.beginDate = null
this.tableParams.endDate = null
}
}
},
3、Vue项目cdn优化注意
1、index.html引入资源时注意 vue.js 必须在 vue-router、vuex、element-ui 之前引入。
2、bulid/webpack.base.conf.js 修改配置时 “element-ui”: “ELEMENT” 是固定写法。
3、如果 element-ui 采用 cdn 引入的方式,vue 不采用 cdn 引入的方式,这样打包以后打开 dist 下的 index.html 时页面空白报错,必须 vue 和 element-ui 都采用 cdn 引入的方式。
4、页面刷新或关闭时提醒
beforeunload事件在当页面卸载(关闭)或刷新时调用,事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页;
mounted () {
window.onbeforeunload = () => {
return 'tips'
}
},
5、上传图片并带参数
uploadDataFn () {
let config = {
headers: {
'Content-Type': 'multipart/form-data'
},
dataType: 'json'
}
axios.defaults.headers.common['token'] = this.$cookie.get('token')
this.uploadForm.append('username', this.username)
this.uploadForm.append('params', JSON.stringify(this.params))
axios .post(
this.$http.adornUrl('上传路径'),
this.uploadForm, //new FormData()
config
)
.then(res => {
})
.catch(res => {
console.log('出错啦!' + res)
})
},
6、导出excel表格
exportExcel () {
this.$confirm('是否导出表格中的数据', '提示', {
confirmButtonText: '是',
cancelButtonText: '否',
type: 'info'
}).then(() => {
this.exportLoading = true
axios.defaults.headers.common['token'] = this.$cookie.get('token')
axios({
method: 'post',
url: url,
data: this.tableParams,
timeout: 0,
responseType: 'blob'
}).then((res) => {
if (res && res.status === 200) {
this.exportLoading = false
const blob = res.data
const reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = (e) => {
const a = document.createElement('a')
a.download = '报表'
a.href = e.target.result
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
} else {
console.log(res.data)
}
})
})
},