1. rem适配

1. 安装postcss-plugin-px2rem (推荐) ，也可使用官网的 postcss-pxtorem

   npm i postcss-plugin-px2rem --save
   

2. postCss配置

   // vue.config.js
   module.exports = {
     css: {
       loaderOptions: {
         postcss: {
           plugins: [
             require('postcss-plugin-px2rem')({
               // 换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
               rootValue: 75,
               unitPrecision: 2, // 允许REM单位增长到的十进制数字。
               propWhiteList: [],  // 默认值是一个空数组，这意味着禁用白名单并启用所有属性。
               propBlackList: [], // 黑名单
               // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
               exclude: /(node_module)/,
               selectorBlackList: [], // 要忽略并保留为px的选择器
               ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
               replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
               mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
               minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
             }),
           ]
         },
         stylus: {
           'resolve url': true,
           'import': []
         }
       }
     }
   }
   

3. 设置rem基准值

   npm i -S amfe-flexible
   

4. 引入ren基准值

   // main.js中
   import 'amfe-flexible'
   

2. 日历组件改造，可显示农历和节气

2.1 代码

<template>
  <div class="calendar-container">
    <van-calendar
      v-model="show"
      :min-date="minDate"
      :max-date="maxDate"
      :default-date="calendarDate"
      color="#1989fa"
      :show-confirm="false"
      :round="false"
      :show-subtitle="false"
      :formatter="formatter"
      @open="openCalendar"
      @confirm="onConfirm"
    >
      <template slot="title">
        <van-icon name="arrow-left" @click="changeYear(0)" />
        <p>{{ nowYear }}</p>
        <van-icon
          :class="{
            'arrow-disabled': isMaxYear
          }"
          name="arrow"
          @click="changeYear(1)"
        />
      </template>
    </van-calendar>
  </div>
</template>

<script>
// https://github.com/qian-yi/project-tools/tree/master/tools (calendar.js)
import { formatterCalendar } from '../utils'

export default {
  name: 'Calendar',
  data() {
    return {
      show: true,
      minDate: new Date(),
      maxDate: new Date(),
      calendarDate: new Date(),
      nowYear: '',
    }
  },
  computed: {
    // 是否为本年
    isMaxYear() {
      return this.nowYear === new Date().getFullYear()
    }
  },
  created() {
    this.nowYear = this.calendarDate.getFullYear() - 1
    this.changeYear(1)
  },
  methods: {
    // 处理阳历转农历
    formatter(day) {
      const year = day.date.getFullYear()
      const month = day.date.getMonth() + 1
      const date = day.date.getDate()
      day.bottomInfo = formatterCalendar(year, month, date)

      return day
    },
    /**
     * 改变年份
     * @param {number} type 点击的加还是减 0减 1加
     */
    changeYear(type) {
      if (type && this.isMaxYear) return

      !type ? this.nowYear-- : this.nowYear++
      this.maxDate = this.isMaxYear
        ? new Date()
        : new Date(this.nowYear, 11, 31)
      this.minDate = new Date(this.nowYear, 0, 1)
    },
    onConfirm(date) {
      this.calendarConfig.show = false
    },
    openCalendar() {
      // 解决部分机型刚打开白屏，滑动后才可以显示的bug
      this.$nextTick(() => {
        const dom = document.querySelector('.van-calendar__body')
        if (dom) {
          let scrollTop = dom.scrollTop
          // 模拟滑动，避免白屏
          setTimeout(() => {
            scrollTop = dom.scrollTop
            dom.scrollTop = scrollTop - 4
          }, 50)
          setTimeout(() => {
            dom.scrollTop = scrollTop
          }, 100)
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .calendar-container {
    .van-calendar__header-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      .arrow-disabled {
        color: #ccc;
      }
    }
    .van-calendar__selected-day {
      border-radius: 50%;
    }
    .van-popup__close-icon {
      display: none;
    }
  }
</style>

2.2 效果展示

2.3 参考文章

公农历互转

3. 级联选择改造

1. v-model绑定了值后初始化会默认跳到下一层级 -> 默认显示当前选中层级
2. 以前只能获取到最后一层级的数据 -> 能获取任意一层数据
3. 选中值超出屏幕时 初始化时不会定位到选中元素 -> 初始化时能定位到选中元素

3.1 代码

<template>
  <div class="cascader-container">
    <van-popup
      v-model="show"
      position="bottom"
    >
      <van-cascader
        ref="cascader"
        v-model="cascaderValue"
        :options="options"
        @close="popupConfig.show = false"
        @change="onChange"
      >
        <template slot="title">
          <span class="title">请选择食物</span>
          <van-button type="primary" size="small" @click="confirm">确定</van-button>
        </template>
      </van-cascader>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'Cascader',
  data() {
    return {
      cascaderValue: '',
      show: true,
      options: [],
      realValues: {
        text: '',
        value: ''
      }
    }
  },
  computed: {
    cascaderRef() {
      return this.$refs.cascader
    }
  },
  created() {
    this.options = this.initOptions()

    const value = 'fruit'
    this.realValues = {
      text: '水果',
      value
    }
    this.cascaderValue = value
  },
  mounted() {
    // 初始化时只显示到选中的当前层级
    const tabs = this.cascaderRef.tabs
    !tabs[tabs.length - 1].selectedOption && tabs.pop()

    const oTab = this.cascaderRef.$el.getElementsByClassName('van-tabs__nav--line')[0]
    oTab.addEventListener('click', this.clickTab)

    // 选中值超出屏幕 则自动定位到选中元素
    this.$nextTick(() => {
      const wrapDom = this.$refs.cascader.$el.getElementsByClassName('van-cascader__options')[0]
      const activeDom = this.$refs.cascader.$el.getElementsByClassName('van-cascader__option--selected')[0]
      wrapDom.scrollTop = (activeDom.offsetTop > wrapDom.offsetHeight) ? activeDom.offsetTop : 0
    })
  },
  methods: {
    initOptions() {
      return [
        { 
          text: '水果', 
          value: 'fruit', 
          children: [
            { text: '苹果', value: 'apple' },
            { text: '香蕉', value: 'banana' },
          ] 
        },
        { 
          text: '零食', 
          value: 'snack', 
          children: [
            { text: '辣条', value: 'latiao' },
            { text: '果干', value: 'guogan' },
          ] 
        }
      ]
    },
    onChange({ selectedOptions }) {
      const len = selectedOptions.length
      this.realValues = selectedOptions[len - 1]
    },
    // 点击确认
    confirm() {
      const { text, value } = this.realValues
      this.show = false
    },
    // 监听点击tab事件
    clickTab(e) {
      const target = e.target
      if (
        target.innerText !== '请选择' && 
        (
          target.className === 'van-tab__text' || target.className.includes('van-tab--active')
        )
      ) {
        const activeTab = this.cascaderRef.activeTab
        const tabs = this.cascaderRef.tabs
        tabs.splice(activeTab + 1)
        const { text, value } = tabs[activeTab].selectedOption
        this.realValues = {
          text,
          value
        }
      }
    }
  }
}
</script>

<style lang="scss">
  .cascader-container {
    .van-cascader__title {
      display: flex;
      align-items: center;
      .title {
        margin-right: 20px;
      }
    }
  }
</style>

3.2 效果展示