使用cdn实现Vue+Vant

最新推荐文章于 2024-07-13 13:08:34 发布

1241575230

最新推荐文章于 2024-07-13 13:08:34 发布

阅读量1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_51249969/article/details/130249255

版权

 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
 
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <title>塑颜工匠</title>
    <style>
      body,html{
        padding: 0;
        margin: 0;
        background: #f5f5f5;
      }
      .box{
        width: 80vw;
        margin: 0 auto;
      }
      .van-form{
        margin-top: 10px;
        height: 200px;
      }
      .van-cell-group{
        padding: 5px 15px;
        border-radius: 5px;
        margin-bottom: 10px;
      }
      .address{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
      p{
        margin: 0;
        height: 24px;
      }
    </style>
</head>
 
<body>
    <div id="app">
      <div class="box">
        <van-image
          width="100%"
          fit="fill"
          src="./applyForAd.jpg"
        />
        <van-form @submit="onSubmit">
          <van-cell-group>
            <van-field
            v-model="name"
            label="姓名"
            placeholder="姓名"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="tel"
            type="tel"
            label="手机号"
            placeholder="手机号"
          />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button @click="onSubmit" round block type="info" native-type="submit">立即提交</van-button>
          </div>
        </van-form>
        <div class="address">
          <p>佛山市南海区芸薇美容服务中心</p>
          <p>佛山市南海区芸薇美容服务中心</p>
          <p>电话：13809086754</p>
        </div>
      </div>
    </div>
    <script>
        // 调用函数组件，弹出一个 Toast
 
       
        // 在 #app 标签下渲染一个按钮组件
        new Vue({
            el: '#app',
            data() {
                return {
                  name:'',
                  tel:''
                };
            },
            methods: {
              onSubmit() {
                let isNull=false;
                if(this.name===''||this.tel===''){
                  isNull=true
                }
                this.$dialog.alert({
                  message:isNull?'请正确填写信息':'已经提交信息',
                }).then(() => {
                  // on close
                });
              },
            },
        })
        // 通过 CDN 引入时不会自动注册 Lazyload 组件
        // 可以通过下面的方式手动注册
        Vue.use(vant.Lazyload);
    </script>
 
    <body>
 
    </body>
 
</html>