css 穿透
/* ::v-deep */
::v-deep .类名 {
}
引入本地文件
require()
获取原始数据
// 访问初始值
this.$options.data().xx
dom 渲染后执行
//dom渲染完执行
this.$nextTick(() => {})
子组件调用父组件的事件
//调用父组件的事件
this.$parent.xx
父组件调用子组件的事件
// 子组件
<Foods ref="foods"></Foods>
// 调取
this.$refs.foods.show()
路由跳转传参
//跳转时页面
this.$router.push({
path: '/detail',
query: {
name: '张三',
id: 1,
}
})
//跳转后页面获取参数对象
this.$route.query
// ---------------------------------------------------------------
//跳转时页面
this.$router.push({
name: 'Detail',
params: {
name: '张三',
id: 1,
}
})
//跳转后页面获取参数对象
this.$route.params
// ---------------------------------------------------------------------
// 3. 直接跳转(返回上一级或者往前一级)
router.go(1)//在浏览器记录中前进一步,
router.go(-1)// 后退一步记录,等同于 history.back()
router.go(3)// 前进 3 步记录
发送验证码
<el-button :disabled="codeDisabled" @click="sendVerification"
>{{send}}</el-button
>
<script>
data() {
return {
timer: null,
send: '获取验证码',
countdown: 60,
codeDisabled: false
}
},
// 发送验证
sendVerification() {
Passwordcode({
phone: this.Form.phone,
smsMsgType: 'FORGET_THE_PWD_TYPE'
}).then(res => {
this.codeDisabled = true
if (res.code == '200') {
if (!this.timer) {
this.timer = setInterval(() => {
if (this.countdown > 0 && this.countdown <= 60) {
this.countdown--
if (this.countdown !== 0) {
this.send = '重新发送(' + this.countdown + ')'
} else {
clearInterval(this.timer)
this.send = '获取验证码'
this.countdown = 60
this.timer = null
this.codeDisabled = false
}
}
}, 1000)
}
} else {
this.codeDisabled = false
this.$message({
message: res.errMsg,
type: 'warning'
})
}
})
}
</script>