Mint-UI静态页面实例Demo

最新推荐文章于 2024-07-28 21:55:01 发布

swiftlinlei

最新推荐文章于 2024-07-28 21:55:01 发布

阅读量6.9k

点赞数

分类专栏：软件开发文章标签： Vue

本文链接：https://blog.csdn.net/swiftlinlei/article/details/80338973

版权

本文介绍了一个使用Mint-UI构建的Vue静态页面实例，详细解析了App.vue和main.js两个关键文件的实现过程，展示如何利用Mint-UI组件库提升前端界面开发效率。

摘要由CSDN通过智能技术生成

前言：使用Mint-UI做的一个静态页面实例（Mint-UI是基于Vue开发的UI组件库）

1.App.vue:

<template>  
  <div id="app" v-bind:style="appstyle" style="margin:-3% -3% -3% -3%;"> 
  <mt-popup v-model="shitangVisible" position="left" style="border:2px solid;border-radius:25px;">
     <mt-radio title="" v-model="shitang" :options="shitangs" style="margin:8px 8px 8px 8px;"></mt-radio>
  </mt-popup>
  <div style="padding:10% 10% 0 10%;">
  <mt-header title="员工自助报餐单" style="color:black;font-size:100%;opacity:0.2;"></mt-header>
  </div>
  <div style="padding:0% 10% 0 10%;">
  <mt-field label="工号" placeholder="请输入工号" v-model="workcode" style="padding:5% 5% 0% 5%;"></mt-field>
  <mt-field label="用户名" placeholder="请输入用户名" v-model="username" style="padding:5% 5% 0% 5%;"></mt-field>
  </div>
  <div style="padding:0 10% 0 10%;">
  <mt-cell title="就餐食堂" :value="shitang" @click.native="handleClick1" style="padding:5% 5% 0% 5%;"></mt-cell>
  <mt-cell title="餐别选择" :value="canbieStr" @click.native="handleClick2" style="padding:5% 5% 0% 5%;"></mt-cell>
  </div>
  <div style="padding:0% 10% 0 10%;">
  <mt-cell title=