关于移动端框架(Vant)

407 阅读1分钟

这是我参与更文挑战的第4天,活动详情查看更文挑战

关于Vant的使用:

以CDN 的形式引入,外加VUE.min.js;使用中也遇见一些问题

引入样式文件

cdn.jsdelivr.net/npm/vant@2.…

引入 Vue 和 Vant 的 JS 文件

cdn.jsdelivr.net/npm/vue@2.6…

cdn.jsdelivr.net/npm/vant@2.…

注意:有可能在实际开发过程中,会遇见标签无法渲染的问题; 解决方法: 使用完整的闭合标签可以避免这个问题

但是有一个适配问题:(如何使用 rem)

image.png 官方文档确实是提供了有方案; 但是我是以CDN得形式引入的;进多次查找引入以下js:

<script src="js/amfe-flexible.js"></script>

amfe-flexible 这个js是 用于设置 rem 基准值;

关于单评分的问题:

<van-rate v-model="item.anwaer.usercontent" :size="25" color="#ffd21e" void-icon="star" icon='star' void-color="#eee" > </van-rate>

void-icon:图标未选中形状名称;

icon: 图标形状名称;

void-color:图标未选中的形状颜色;

color:图标选中的形状颜色

关于Area 省市区选择+ActionSheet 动作面板的使用:

<van-field label="职业" v-model="item" placeholder="选择职业" @click="showPopup()"></van-field> <van-popup v-model="showPicker" round position="bottom"> <van-picker show-toolbar :columns="occupation" @cancel="showPicker = false" > </van-picker> </van-popup>

在这需要注意的是:

confirm 点击右上方完成按钮;在这有可能需要完成你自己自定义的需求;只需要添加如下写法:

( values,index,picker)=> {onConfirm( values,index,item)}

position 表示顶部栏位置 默认值为 top;

columns 对象数组,配置每一列显示的数据;

show-toolbar 是否显示顶部栏 默认值为false;

以上是一些 我使用中遇见的问题,还有其他的一些问题,正在探索当中; 路是一步一走,坑是一个接着一个;每天不是在填坑 就是在探索; 欢迎大家指出不足之处!