Some of my commonly used tool methods

#css #javascript #ticks

ellipsis text

@mixin ellipsis($line) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

.desc{
 @include ellipsis(2) // over 2 line will be fold and show ...
}

Safe decimal

import Decimal from 'decimal.js-light'

export default function(value) {
  return new Decimal(value || 0)
}

new Decimal(null) // will be new Decimal(0)

Vuex extend

import isArray from 'lodash/isArray'
import Vue from 'vue'

export function setState({ commit }, attrs, value = null) {
  commit('mutationState', attrs, value)
}

/*
 * setState('key',value)
 * setState(['key','value'])
 * setState({key: 'key', value: 'value'})
 * setState([{key: 'key', value: 'value'}])
 */
export function mutationState(state, attrs, value = null) {
  if (value) {
    Vue.set(state, attrs, value)
  } else if (isArray(attrs)) {
    // [{key: 'xx', value: 'xx'}, ['key', 'value']]
    while (attrs.length) {
      const ele = attrs.pop()
      if (isArray(ele)) {
        const [key, value] = ele
        Vue.set(state, key, value)
      } else {
        const { key, value } = ele
        Vue.set(state, key, value)
      }
    }
  } else {
    // setState({key: 'key', value: 'value'})
    const { key, value } = attrs
    Vue.set(state, key, value)
  }
}

// store/user.js
import { mutationState, setState } from '@/utils/vuex'
export const actions = {
  setState
}
export const mutations = {
  mutationState
}

this.$store.dispatch("user/setState",data)

You can use setState method to update vuex state values

Generate utils class in scss

@for $i from 1 through 8 {
  .mt-#{$i*4} {
    margin-top: #{$i * 4}px !important;
  }
  .mb-#{$i*4} {
    margin-bottom: #{$i * 4}px !important;
  }
  .pb-#{$i*4} {
    padding-bottom: #{$i * 4}px !important;
  }
  .pt-#{$i*4} {
    padding-top: #{$i * 4}px !important;
  }
  .ml-#{$i*4} {
    margin-left: #{$i * 4}px !important;
  }
  .mr-#{$i*4} {
    margin-right: #{$i * 4}px !important;
  }
}

// will out put css
.mt-4{margin-top:4px}
.mb-4{margin-bottom:4px}
.ml-4{margin-left:4px}
.mr-4{margin-right:4px}
...
.mt-32{margin-top:32px}
.mb-32{margin-bottom:32px}
.ml-32{margin-left:32px}
.mr-32{margin-right:32px}

.pt-4{padding-top:4px}
...
.pt-32{padding-top:32px}

.pb-4{padding-bottom:4px}
...
.pb-32{padding-bottom:32px}