<!DOCTYPE html>
|
<html lang="zh">
|
<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" />
|
<title>rpx4html-demo</title>
|
<!-- <script src="../../js/rpx4html.js"></script> -->
|
|
|
<!-- 引入样式文件 -->
|
<link rel="stylesheet" href="../../css/vant.css" />
|
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
|
<script src="../../js/vue.min.js"></script>
|
<script src="../../js/vant.min.js"></script>
|
|
<style>
|
html,
|
body {
|
padding: 0;
|
margin: 0;
|
width: 100%;
|
height: 100%;
|
}
|
|
.test {
|
width: 750px;
|
height: 100px;
|
font-size: 32px;
|
font-weight: bold;
|
background-color: #2e66af;
|
color: white;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-family: 'PingFangSC-Regular', '微软雅黑', 'Arial';
|
}
|
</style>
|
|
|
</head>
|
<body>
|
<div id="app">
|
<!-- <div class="test">标题栏</div> -->
|
<div style="height: 50px;">
|
<van-nav-bar title="标题" left-text="返回" right-text="按钮" left-arrow style="height: 1rem;width: 100%;"
|
@click-left="onClickLeft" @click-right="onClickRight" />
|
</div>
|
<div>
|
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
|
|
<div>
|
我的爱好是
|
<span @click='click' v-for="(item,index) in list" :key="index">
|
{{item}}{{index==list.length-1?'':'，'}}
|
<span>
|
</div>
|
<van-radio-group v-model="radio">
|
<van-radio name="1">单选框 1</van-radio>
|
<van-radio name="2">单选框 2</van-radio>
|
</van-radio-group>
|
<van-button type="primary">主要按钮</van-button>
|
|
|
<!-- <van-dialog v-model="show" title="标题" show-cancel-button>
|
<img src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
|
</van-dialog> -->
|
|
<p>刷新次数: {{ count }}</p>
|
</van-pull-refresh>
|
<!--
|
<van-card num="2" tag="标签" price="2.00" desc="描述信息" title="商品标题"
|
thumb="https://img01.yzcdn.cn/vant/ipad.jpeg" origin-price="10.00" /> -->
|
|
|
<van-popover
|
v-model="showPopover"
|
trigger="click"
|
:actions="actions"
|
@select="onSelect"
|
>
|
<template #reference>
|
<van-button type="primary">浅色风格</van-button>
|
</template>
|
</van-popover>
|
|
<van-dropdown-menu :overlay="false" style="width: 100px;">
|
<van-dropdown-item style="width: 100px;" v-model="value1" :options="option1" />
|
</van-dropdown-menu>
|
|
|
|
<van-radio-group v-model="radio">
|
<van-cell-group>
|
<div>1</div>
|
<van-cell title="单选框 1" clickable @click="radio = '1'">
|
<template #right-icon>
|
<van-radio name="1" />
|
</template>
|
</van-cell>
|
<div>2</div>
|
<div>3</div>
|
<van-cell title="单选框 2" clickable @click="radio = '2'">
|
<template #right-icon>
|
<van-radio name="2" />
|
</template>
|
</van-cell>
|
<div>4</div>
|
</van-cell-group>
|
</van-radio-group>
|
|
</div>
|
</div>
|
</body>
|
|
|
<script>
|
var app = new Vue({
|
el: '#app',
|
|
data: function() {
|
return {
|
list: ['听音乐', '旅游', '打游戏'],
|
radio: '',
|
show: false,
|
count: 0,
|
isLoading: false,
|
showPopover: false,
|
// 通过 actions 属性来定义菜单选项
|
actions: [{
|
text: '选项一'
|
}, {
|
text: '选项二'
|
}, {
|
text: '选项三'
|
}],
|
value1: 0,
|
// value2: 'a',
|
option1: [
|
{ text: '全部商品', value: 0 },
|
{ text: '新款商品', value: 1 },
|
{ text: '活动商品', value: 2 },
|
],
|
// option2: [
|
// { text: '默认排序', value: 'a' },
|
// { text: '好评排序', value: 'b' },
|
// { text: '销量排序', value: 'c' },
|
// ],
|
}
|
},
|
created() {
|
// console.log({
|
// Vue
|
// })
|
// console.log(vant.Toast('xxx'))
|
},
|
methods: {
|
|
onSelect(action) {
|
Toast(action.text);
|
},
|
onClickLeft() {
|
|
},
|
onClickRight() {
|
|
},
|
onRefresh() {
|
setTimeout(() => {
|
// Toast('刷新成功');
|
vant.Notify('通知内容');
|
// vant.Toast('xxx')
|
this.isLoading = false;
|
this.count++;
|
}, 1000);
|
},
|
click() {
|
console.log(window)
|
console.log('111')
|
// this.show=true
|
vant.Dialog.confirm({
|
title: '标题',
|
message: '弹窗内容',
|
})
|
.then(() => {
|
// on confirm
|
})
|
.catch(() => {
|
// on cancel
|
});
|
}
|
}
|
})
|
// 通过 CDN 引入时不会自动注册 Lazyload 组件
|
// 可以通过下面的方式手动注册
|
|
// Vue.use(vant.Lazyload);
|
// Vue.use(vant.Button);
|
// Vue.use(vant.TreeSelect);
|
// Vue.use(vant.Dialog);
|
// Vue.use(vant.Notify);
|
</script>
|
</html>
|
