标签：8.1 closeTip return 技巧 alertText phone 管道 result AlertTip

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

View Code

 

标签：8.1,closeTip,return,技巧,alertText,phone,管道,result,AlertTip
来源： https://www.cnblogs.com/shiyun32/p/11236978.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。