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：

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

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import '../../common/stylus/mixins.styl';

  @keyframes tipMove
    0%
      transform: scale(1)
    35%
      transform: scale(.8)
    70%
      transform: scale(1.1)
    100%
      transform: scale(1)

  .alert_container
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: rgba(0, 0, 0, .5)
    .tip_text_container
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -90px
      margin-left: -110px
      width: 60%
      animation: tipMove .4s;
      background-color: rgba(255, 255, 255, 1);
      border: 1px;
      padding-top: 20px
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      border-radius: 5px
      .tip_icon
        width: 55px
        height: 55px
        border: 2px solid #f8cb86;
        border-radius: 50%;
        font-size 20px
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        span:nth-of-type(1)
          width: 2px
          height: 30px
          background-color: #f8cb86;
        span:nth-of-type(2)
          width: 2px
          height: 2px
          border: 1px;
          border-radius: 50%;
          margin-top: 2px
          background-color #f8cb86
      .tip_text
        font-size 14px
        color #333
        line-height 20px
        text-align center
        margin-top 10px
        padding 0 5px
      .confrim
        font-size 18px
        font-weight bold
        margin-top 10px
        background-color #4cd964
        width 100%
        text-align center
        line-height 35px
        border 1px
        color #fff
        border-bottom-left-radius 5px
        border-bottom-right-radius 5px
</style>

View Code

来源：https://www.cnblogs.com/shiyun32/p/11236978.html

标签

stylus