• 动态绑定了静态class与动态class结合

      动态的class和静态的class结合 ```javascript :class=”[‘info-block’ ,index == 3 ? ‘afterborder’ :’’]”

    afterborder为class类名，要传指定的变量需要用:style

    2. -  动态绑定style样式
    3. ```javascript
    4. :style="isHide === true ? { display: 'none' } : {}"

    • computed写法

      1.   bottomActive() {
      2.     let barValue = ''
      3.     this.bottomBar === true ? barValue = 100 : barValue = 0
      4.     return `marginBottom: ${barValue}px`
      5.   },
      7.     只能用到style

    • 获取屏幕滚动的距离

    注意好

    2. mounted() {
    3.       // 滚动条的获取
    4.     window.addEventListener('scroll', this.handleScroll, true)
    5.   },
    7.  methods: {
    8.     handleScroll() {
    9.       const a = document.getElementById('mainBox').scrollTop
    10.       const switchValue = a > 200 ?this.isHide = true :this.isHide=false;
    11.       // console.log(switchValue)
    12.       // this.isHide = switchValue
    14.     }
    15.   }
    17. 销毁滚动条信息
    18.   destroyed() {
    19.     // 获取layout.vue的滚动区域的高度
    20.     const dom = document.getElementById('mainBox')
    21.     if (dom) {
    22.       dom.removeEventListener('scroll', this.handleScroll)
    23.       dom.scrollTop = 0
    24.     }
    25.   },

    span标签字体强制不换行

    1. white-space: nowrap;  /*强制span不换行*/
    2. display: inline-block;  /*将span当做块级元素对待*/
    3. width: 260px;  /*限制宽度*/
    4. overflow: hidden;  /*超出宽度部分隐藏*/
    5. text-overflow: ellipsis;  /*超出部分以点号代替*/
    6. line-height: 0.9;  /*数字与之前的文字对齐*/
    1. 父
    2. <text slot="icon" class="iconfont font-lg py-1">&#xe667;</text>
    4. 子
    5. <slot name="icon"></slot>
    1.     // 获取屏幕信息 
    2. getClientInfo() {
    3.       var userAgentInfo = navigator.userAgent
    4.       console.log(userAgentInfo)
    5.       var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
    6.       var agentinfo = null
    7.       for (var i = 0; i < Agents.length; i++) {
    8.         if (userAgentInfo.indexOf(Agents[i]) > 0) { agentinfo = userAgentInfo; break }
    9.       }
    10.       if (agentinfo) {
    11.         console.log(agentinfo)
    12.         return agentinfo
    13.       } else {
    14.         return 'PC'
    15.       }
    16.     }
    18. // 获取屏幕宽度判断
    19.     const that = this
    20.     window.onresize = () => {
    21.       return (() => {
    22.         window.screenWidth = document.body.clientWidth
    23.         that.screenWidth = window.screenWidth
    24.       })()
    25.     }
    • 伪类元素扩大点击范围、
      1.       .icon-box {
      2.         position: relative;
      3.         &::after {
      4.           position: absolute;
      5.           content: "";
      6.           top: -5px;
      7.           bottom: -5px;
      8.           left: -5px;
      9.           right: -5px;
      10.           background-color: red;
      11.         }
      12.       }

    textarea自适应高度

    1. <template>
    2.     <div class="my-textarea">
    3.       <textarea ref="textarea" :style="{'height': height}" v-model="value" class="textarea" ></textarea>
    4.     </div>
    5. </template>
    7. <script>
    8.   import calcTextareaHeight from '@/assets/calcTextareaHeight';
    10.   export default {
    11.     name: 'my-textarea',
    12.     data() {
    13.       return {
    14.         // textarea内容
    15.         value: '',
    16.         // 动态高度
    17.         height: '30px'
    18.       }
    19.     },
    20.     watch: {
    21.       value() {
    22.         this.getHeight();
    23.       }
    24.     },
    25.     methods: {
    26.       getHeight() {
    27.         this.height = calcTextareaHeight(this.$refs.textarea, 1, null).height;
    28.       }
    29.     }
    30.   }
    31. </script>
    33. <style scoped>
    34.   .my-textarea .textarea {
    35.     display: inline-block;
    36.     width: 400px;
    37.     /*height: 30px;*/
    38.     line-height: 30px;
    39.     font-size: 30px;
    40.     resize: none;
    41.   }
    42. </style>