1. rem适配
-
安装
postcss-plugin-px2rem(推荐) ，也可使用官网的postcss-pxtoremnpm i postcss-plugin-px2rem --save -
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': [] } } } } -
设置
rem基准值npm i -S amfe-flexible -
引入
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. 级联选择改造
-
v-model绑定了值后初始化会默认跳到下一层级 -> 默认显示当前选中层级 - 以前只能获取到最后一层级的数据 -> 能获取任意一层数据
- 选中值超出屏幕时 初始化时不会定位到选中元素 -> 初始化时能定位到选中元素
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 效果展示
