ElementUI表单使用和Vue-router

ElementUI表单校验、表单可选属性,Vue-router部分知识。
114阅读 · 0评论 · 2020-9-2 23:50发布

Element-UI使用

Form表单的用法

  • 表单的基本结构。

    <template>
          <div id="app">
              <el-form inline :model="data">
                  <el-form-item label="审批人">
                      <el-input v-model="data.user" placeholder="审批人"></el-input>
                  </el-form-item>
                  <el-form-item label="活动区域">
                      <el-select v-model="data.region" placeholder="活动区域">
                          <el-option label="区域一" value="shanghai"></el-option>
                          <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" @click="onSubmit">查询</el-button>
                  </el-form-item>
              </el-form>
          </div>
      </template>
    
      <script>
          export default {
              name: 'app',
              data() {
                  return {
                      data: {
                          user: '',
                          region: ''
                      }
                  }
              },
              methods: {
                  /* eslint-disable */
                  onSubmit() {
                      console.log(this.data)
                  }
              }
          }
      </script>
    

表单校验

  • element-ui使用:rules属性做表单校验逻辑(需使用prop指定label的校验名称)。

    <template>
          <div id="app">
              <el-form inline :model="data" :rules="rules">
                  <el-form-item label="审批人" prop="user">
                      <el-input v-model="data.user" placeholder="审批人"></el-input>
                  </el-form-item>
                  <el-form-item label="活动区域">
                      <el-select v-model="data.region" placeholder="活动区域">
                          <el-option label="区域一" value="shanghai"></el-option>
                          <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" @click="onSubmit">查询</el-button>
                  </el-form-item>
              </el-form>
          </div>
      </template>
    
      <script>
          export default {
              name: 'app',
              data() {
                  const userValidator = (rule, value, callback) => {
                      if(value.length>3){
                          callback()
                      }else{
                          callback(new Error('用户名长度必须大于3'))
                      }
                  }
                  return {
                      data: {
                          user: '',
                          region: ''
                      },
                      rules: {
                          user:[
                              {required:true,trigger:'change',message:'用户名必须输入'},
                              {validator: userValidator,trigger: 'change'}
                          ]
                      }
                  }
              },
              methods: {
                  /* eslint-disable */
                  onSubmit() {
                      console.log(this.data)
                  }
              }
          }
      </script>
    
  • 调用表单验证。使用ref属性即可。
    ...省略...
      <div id="app">
          <el-form inline :model="data" :rules="rules" ref="form">
      ...省略...
      methods: {
          /* eslint-disable */
          onSubmit() {
              console.log(this.data)
              this.$refs.form.validate((isValid, errors)=>{
                  console.log(isValid,errors)
              })
          }
      }
      ...省略...
    

表单属性

表单可选属性

属性 说明
label-position 标签位置,left和top
label-width 标签宽度
label-suffix 标签后缀
inline 行内表单
disabled 设置form表单全部disabled
hide-required-asterisk 必填时也不添加星号

Vue-router

组件路由

  1. 使用vue-router之前需要先安装vue-router。
    cnpm i -S vue-router
    
  2. 在项目的src下创建router.js文件。

    import Vue from 'vue'
     import Route from 'vue-router'
     import HelloWorld from './components/HelloWorld'
    
     Vue.use(Route)
     const routes = [
         {path: '/hello-world',component: HelloWorld}
     ]
     const router = new Route({
         routes
     })
    
     export default router
    
  3. 在main.js中引入router.js。

    import router from './router.js'
    
     new Vue({
       render: h => h(App),
       router
     }).$mount('#app')
    
  4. 在App.vue中添加router-view。
    <router-view></router-view>
    
  5. 此时就可以通过this.$router和this.$route获取路由对象。或者访问http://localhost:8080/#/hello-world 即可看到效果。

vue-router路由守卫

路由守卫既路由的钩子函数,路由守卫和组件的生命周期概念相似。路由守卫分为两种:全局守卫、局部守卫。

  • 全局守卫:每一个路由都会触发的函数。

    //写在router.js中
      //路由进入之前触发
      router.beforeEach((to,from,next)=>{
          console.log('beforeEach', to, from)
          next()
      })
    
      //vue2.5之后新增,路由被解析之前调用
      router.beforeResolve((to, from, next) => {
          console.log('beforeResolve', to, from)
          next()
      })
    
      //路由进入后触发
      router.afterEach((to, from) => {
          console.log('afterEach', to, from)
      })
    
  • 局部守卫:写在组件的生命周期当中。
    beforeRouteEnter (to, from, next){
          console.log('beforeRouteEnter', to, from)
          next()
      },
      //组件发生变化时触发,比如参数改变
      beforeRouteUpdate (to, from, next){
          console.log('beforeRouteUpdate', to, from)
          next()
      },
      beforeRouteLeave (to, from, next){
          console.log('beforeRouteLeave', to, from)
          next()
      }
    

路由元信息

可以通过meta定义路由元信息,例如修改title信息。

在meta中添加title属性

const routes = [
    { path: '/a', component: A, meta: { title: 'Custom Title A'}}
]

方法一(推荐):在路由守卫中做判断并修改title信息。

router.beforeEach((to, from, next) => {
    if(to.meta.title) {
        document.title = to.meta.title
    }else {
        document.title = 'default-title'
    }
})

方法二:通过mixin修改title信息。

Vue.mixin({
    beforeCreate(){
        if (this.$route.meta.title){
            document.title = to.meta.title
        }else{
            document.title = 'default-title'
        }
    }
})

共有0 条评论

暂无评论