关于前端:前端日常笔记

1.CSS calc() 函数

calc() 函数用于动静计算长度值。

运算符前后都须要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都能够应用calc()函数进行计算；
calc()函数反对 "+", "-", "*", "/" 运算；
calc()函数应用规范的数学运算优先级规定

2. Vue.set( target, propertyName/index, value )

    addclick() {
      if (!this.numlik.count) {
        Vue.set(this.numlik, "count", 1); //例如点餐利用中，餐品从无到1数字的显示，触发视图更新
      } else {
        this.numlik.count++;
      }
    }

3.v-bottom-sheet API

相似轻量UI组件库，能够只利用其疾速api实现本人需要化的组件

  <v-bottom-sheet v-model="visible" width="7.5rem" overlay-opacity="0.7">
    <div>   
    </div>
  </v-bottom-sheet>

// 组件定制内容由你本人设计，然而外层管制这个bottom是否显示疾速交给v-model="visible"，有value为布尔值传到最外层v-bottom-sheet来疾速实现可见和暗藏的决定。
//父组件的监听事件是input，这个在v-dialog中有阐明，然而在v-bottom-sheet中没有。
  props: {
    value: Boolean,
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  }