江苏龙网

  1. 主页 > 生活百科 > >

Vant前端框架( 二 )

Vant


<!-- 通过 ref 属性将组件绑定到 this.$refs.checkbox 上 --><van-checkbox v-model="checked" ref="checkbox"> 复选框 </van-checkbox>export default {data() {return {checked: false,};},// 注意：组件挂载后才能访问到 ref 对象mounted() {this.$refs.checkbox.toggle();},}浏览器适配Viewport 布局
Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换 。
postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位 。
PostCSS PostCSS 示例配置
下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改 。
// postcss.config.jsmodule.exports = {plugins: {'postcss-px-to-viewport': {viewportWidth: 375,},},};

Tips: 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译 。
表单组件
使用表单组件实现登录页面,是Vant直接提供的组件
//先添加引用.引用之后 main.js文件内容为import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import Vant from 'vant'import 'vant/lib/index.css'import { Form } from 'vant';import { Field } from 'vant';Vue.use(Form);Vue.use(Field);Vue.use(Vant)Vue.config.productionTip = false// 略向vue文件中复制文档中提供的代码
注意复制的位置,我们以AboutView.vue为例
<template><div class="about"><van-form @submit="onSubmit"><van-fieldv-model="username"name="用户名"label="用户名"placeholder="用户名":rules="[{ required: true, message: '请填写用户名' }]"/><van-fieldv-model="password"type="password"name="密码"label="密码"placeholder="密码":rules="[{ required: true, message: '请填写密码' }]"/><div style="margin: 16px;"><van-button round block type="info" native-type="submit">提交</van-button></div></van-form></div></template><script>export default {data() {return {username: '',password: '',};},methods: {onSubmit(values) {console.log('submit', values);},},};</script>然后直接访问about页面即可
area省市区选择
我们在手机app上经常需要选择省市区
Vant直接提供了这个组件
我们创建AreaView.vue文件
<template><div><van-area title="标题" :area-list="areaList" /></div></template><script>const areaList = {province_list: {110000: '北京市',120000: '天津市',},city_list: {110100: '北京市',120100: '天津市',},county_list: {110101: '东城区',110102: '西城区',// ....},};export default{data(){return{areaList};}}</script>别忘了要设置路由才能访问这个页面
router文件夹下的index.js文件中添加路由代码
const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')},{path: '/area',name: 'area',component: () => import('../views/AreaView.vue')}]然后可以通过输入路径
localhost:8080/area访问这个页面
但是我们现在只能访问我们数组中定义的少数省市区
怎么才能想文档中显示所有省市区呢
需要引用官方提供的一个地址列表
//dos(Terminal中也可以)运行安装命令E:vue-homedemo-vant>npm i @vant/area-data这样就安装了所有省市区的数据到当前的项目
我们只需要修改js代码,让arealist引用这个数据内容即可
<script>import {areaList} from '@vant/area-data'export default{data(){return{areaList};}}</script>商品列表页
我们在开发酷鲨商城的过程中
移动端需要很多页面,商品列表页面是比较常见的页面之一
我们以商品列表页为例
带领大家开发一个页面
创建页面和路由配置
router/index.js添加路由信息
{path: '/list',name: 'list',component: () => import('../views/ListView.vue')}创建ListView.vue
<template><div><van-row><van-col span="8">综合</van-col><van-col span="8">销量</van-col><van-col span="8">价格</van-col></van-row><van-cardnum="1"price="268.00"desc="超10000人的信任"title="酷鲨牌鼠标键盘套装"thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"><template #tags><van-tag type="danger">自营</van-tag><van-tag plain type="danger">酷鲨物流</van-tag></template><template #footer><van-button size="mini">按钮</van-button><van-button size="mini">按钮</van-button></template></van-card><van-cardnum="1"price="268.00"desc="超10000人的信任"title="酷鲨牌鼠标键盘套装"thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"><template #tags><van-tag type="danger">自营</van-tag><van-tag plain type="danger">酷鲨物流</van-tag></template><template #footer><van-button size="mini">按钮</van-button><van-button size="mini">按钮</van-button></template></van-card></div></template><script>export default {name: "ListView"}</script>


推荐阅读


上一篇：一文教你实现Spring动态启停定时任务

下一篇：如何在 Windows 11 中更改屏幕截图文件夹位置