筑坐极_移动端Cell布局功能展示

采用vant框架,

利用cmd在项目文件夹下载vant和相关插件:

npm i vant -S; //安装vant

npm i babel-plugin-import -D; //安装vant插件

安装后在vue项目中main.js引用相关组件:

import { Switch } from 'vant';
import { Icon } from 'vant';
import {Calendar,Cell,CellGroup} from "vant";
import { Popup } from 'vant';
import { Form } from 'vant';
import { Field } from 'vant';
import { Button } from 'vant';
import { Toast } from 'vant';
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Switch);
Vue.use(Icon);
Vue.use(Popup);
Vue.use(Form);
Vue.use(Field);
Vue.use(Button);
Vue.use(Toast);

在vant官网文档中寻找并编辑核心代码:

<template>
    <div>
        <van-cell-group title="settings">
            <van-cell  title="Airplane Mode" icon="shop-o" value="">
                <template #right-icon>
                    <van-switch v-model="checked1" size="24" />
                </template>
            </van-cell>
            <van-cell title="WI-FI" is-link value="off" icon="star-o" @click="showPopup1"/>
            <van-popup v-model="show1" position="bottom" :style="{ height: '20%' }">
                <van-cell-group>
                    <van-cell value="on" center/>
                    <van-cell value="off" center/>
                </van-cell-group>
            </van-popup>
            <van-cell title="Bluetooth" is-link value="off" icon="good-job-o" @click="showPopup2"/>
            <van-popup v-model="show2" position="bottom" :style="{ height: '20%' }">
                <van-cell-group>
                    <van-cell value="on" center/>
                    <van-cell value="off" center/>
                </van-cell-group>
            </van-popup>

            <van-cell title="Cellular" is-link icon="tv-o" value="" to="vant2"/>
            <van-cell title="Personal Hotspot" is-link icon="flag-o" value="" to="vant2"/>
            <van-cell title="VPN" icon="bulb-o" value="">
                <template #right-icon >
                    <van-switch v-model="checked2" size="24" />
                </template>
            </van-cell>
        </van-cell-group>
    </div>
</template>

<script>
    export default {
        name: "Vant_demo1",
        data(){
            return{
                checked1:true,
                checked2:true,
                show1: false,
                show2: false,
                wifi:false,
                bluetooth:false
            }
        },
        methods:{
            showPopup1() {
                this.show1 = true;
            },
            showPopup2() {
                this.show2 = true;
            },
        }
    }
</script>

<style scoped>
.van-cell-group__title:nth-child(1){
    text-align: center;
    font-size: 20px;
    color: #333;
}
</style>

效果展示:

移动端Cell布局功能展示

移动端Cell布局功能展示

丁*

js,web,前端

移动端Cell布局功能展示

2020.08.23

1162人

丁*

河北省承德市围场满族蒙古族自治县

Hot:10673

丁*

当前作品暂无评分

还未获得评语哦~