8.1 管道符| 使用技巧

1. vue中管道操作符（|）的使用

//自定义过滤器，通过管道操作符|改变列表单元格的值
<el-table-column
    prop="status"
    label="状态"
    align="center"
    width="80">
    <template slot-scope="scope">
        {{scope.row.status | getStatus}}
    </template>
</el-table-column>

<script>    
    export default {
        data() {
            return {......}                     
        },
        filters: {
            getStatus: function(num){ 
                let str = ''
                if (num == 1){
                    str = '启用'
                } else {
                    str = '禁用'
                }
                return str;
            }
        },
        methods: {
            list(){......},                                       
        },
    }
</script>

View Code

参考：自定义过滤器

2. $refs获取指定元素

$refs的作用类似于以前jquery的 $('#id')获取指定的元素

使用方法：　　　　

<section class="login_message">
    <input type="text" maxlength="11" placeholder="验证码" v-model="captcha">
    <img class="get_verification" src="http://localhost:27017/captcha" alt="captcha" 
        @click="getCaptcha" ref="captcha"> // 先使用ref绑定元素
</section>

// 获取一个新的图片验证码
getCaptcha () {
    // 每次指定的src要不一样，才会重先发请求
    this.$refs.captcha.src = 'http://localhost:27017/captcha?time='+Date.now()
}

View Code

3. $emit分发事件

vm.$emit( eventName, […args] ) 用于触发当前实例上的事件。附加参数都会传给监听器回调。

使用方法：

单独定义了一个用于弹框的组件AlertTip.vue：

该组件接收一个参数alertText，同时向外暴露一个事件closeTip.

<template>
  <div class="alert_container">
    <section class="tip_text_container">
      <div class="tip_icon">
        <span></span>
        <span></span>
      </div>
      <p class="tip_text">{{alertText}}</p>
      <div class="confrim" @click="closeTip">确认</div>
    </section>
  </div>
</template>

<script>
  export default {
    props: {
      alertText: String
    },

    methods: {
      closeTip() {
        // 分发自定义事件(事件名: closeTip): 向外分发事件以后，在调用AlertTip组件时，可以调用closeTip事件关闭该弹框
        this.$emit('closeTip')
      }
    }
  }
</script>

View Code

使用该组件：如果表单验证没有通过，则弹框进行提示

<template>
    ... 省略表单部分
    <AlertTip :alertText="alertText" v-show="alertShow" @closeTip="closeTip"></AlertTip>  
</template>
<script>
  import AlertTip from '../../components/AlertTip/AlertTip'  

  export default {
    // 模板里面写的变量主要有三个来源：props、data、computed，写在哪的得看它的特点，
    // rightPhone数据，根据phone就能确定，说明它是个计算属性
    data () {
      return {
        phone: '', // 手机号
        alertText: '', // 提示文本
        alertShow: false, // 是否显示警告框
      }
    },
    computed: {
      rightPhone () {
        return /^1d{10}$/.test(this.phone)
      }
    },    
    methods: {      
      // 显示弹框
      showAlert(alertText){
        this.alertShow = true
        this.alertText = alertText
      },
      async login () {
        let result
        // 前台表单验证
        if (this.loginWay) { // 短信登录
          const {phone} = this
          if (!rightPhone) {
            // 手机号不正确
            this.showAlert('手机号不正确')
            return
          }
          // 发送ajax请求短信登录
          result = await reqSmsLogin(phone, code)        
        }
        
        // 根据结果数据处理
        if (result.code === 0) {
          const user = result.data
          // 将user保存到vuex的state
          this.$store.dispatch('recordUser', user)
          // 跳转路由去个人中心界面
          this.$router.replace('/profile')
        } else {
          // 显示新的图片验证码
          this.getCaptcha()
          // 显示警告提示
          const msg = result.msg
          this.showAlert(msg)
        }
      },
      // 关闭警告框
      closeTip () {
        this.alertShow = false
        this.alertText = ''
      },
    },
    components: {
      AlertTip
    }
  }
</script>

View Code

4. 动态增减表单项 + 自定义校验规则

form表单中对于单独的input使用自定义规则与系统提供的规则

<el-form-item label="购买数量" prop="point" :rules="[
        {required: true, message:'请输入购买数量'},
        {type: 'number', message: '数量必须为数字值'},
        {validator: this.validatePoint, trigger: 'blur'}]">
    <el-input v-model.number="formData.point"></el-input>
</el-form-item>           

<script>        
    export default {
        data() {
            let validatePoint = (rule, value, callback) => {
                if( Math.abs(value) < 500 || value%100 != 0){
                    callback(new Error('数量要大于500并且是500的整数倍'));
                } else {
                    callback();
                }
              };
            return {
                formData: {
                    point: ''                    
                },           
                // 方法二：自定义校验规则（改规则也可以直接写在data数据项里面）
                validatePoint: validatePoint
            }
        },

        methods: {
            // 方法一：自定义验证规则（该规则可以写在方法里面）
            validatePoint(rule, value, callback){
                if( Math.abs(value) < 500 || value%100 != 0){
                    callback(new Error('数量要大于500并且是500的整数倍'));
                } else {
                    callback();
                }
            },            
        },        
    }
</script>

View Code

5. 三目表达式的简化

三目表达式可以简化成以下写法，这样代码量更少，更加的直观:

<p class="user-info-top">{{userInfo.name || '登录/注册'}}</p>

6. 插槽slot-scope的使用