8.1 管道符| 使用技巧

//自定义过滤器，通过管道操作符|改变列表单元格的值
<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>

<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()
}

<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>

<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 /^1\d{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>