练习日常

匹配换行符/n

<div v-html="formatArticleContent"></div>

  computed: {
    formatArticleContent () {
      if (this.article.content) {
        const reg = /\s/g
        return this.article.content.replace(reg, '<br>')
      }
      return true
    },
  },

split(',') 字符串分割成数组

  str.split(',')

超出隐藏 不换行 和禁用状态

  .banner .title {
    display: block;
    width: 100%;
    overflow: hidden; // 超出隐藏 不换行 省略
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: 10px;
    font-size: 12px;
    color: #707070;
  }

  .control .disabled {
    color: #707070;
        cursor: not-allowed; //禁用状态
  }

字符串截取

  filters: {
    sliceContent (value) {      
      return value.slice(0, 75) + '……'
    }
  }

缓存组件 key 监听路由改变

  <div>
    <yd-nav></yd-nav>
    <keep-alive>
      <router-view :key="$route.path"></router-view>
    </keep-alive>
  </div>

vue中window绑定事件

  //注意是否存在事件的冒泡
  created () {
    const _this = this
    document.addEventListener('click', function () {
      if (_this.show) {
        _this.show = false
      }
    })
  }

根据id过滤 得到想要的结果

一、.includes(user.id) 返回值 是true || false

//对users进行过滤
    state.users = state.users.filter(user => {
      return !ids.includes(user.id) //判断id不存在于当前数组ids中
    })

二、.find()返回值是 查找到的对象（true）或者 underfined （false）

    state.users = state.users.filter(user => {
      return !ids.find(id => id === user.id)
    })

三、数组过滤

var shopList=[
            {
                checked:true,
                shopName:'拼多多',
                goods:[
                    {
                        cart_code:'123',
                        cart_num:'10',
                        sku_name:'UT28364'
                    },
                    {
                        a:true,
                        cart_code:'123',
                        cart_num:'10',
                        sku_name:'UT28364'
                    },
                    {
                        a:true,
                        cart_code:'123',
                        cart_num:'10',
                        sku_name:'UT28364'
                    },
                ]
            },
            {
                checked:true,
                shopName:'美团',
                goods:[
                    {
                        cart_code:'123',
                        cart_num:'10',
                        sku_name:'UT28364'
                    },
                    {
                        a:true,
                        cart_code:'123',
                        cart_num:'10',
                        sku_name:'UT28364'
                    },
                ]
            },
        ]

shopList.forEach(item => {
item.goods = item.goods.filter(good => {
return good.a ===true
})
return item
});

oncontextmenu="return false" ：禁止右键

<script type="text/javascript">
document.oncontextmenu=function(e){return false;};
document.onselectstart=function(e){return false;};
</script>

在页面的Body范围内，当触发客户端的ContextMenu事件时，返回false值，使右键不能弹出
如果需要额外处理的话，可以将return false写到其他的客户端脚本中，这样会更灵活

oncontextmenu="return false" ：禁止右键

onselectstart="return false" : 禁止选取

onpaste = "return false" : 禁止粘贴

oncopy = "return false" : 禁止复制

oncut = "return false" : 禁止剪贴