| | |
|---|
| | | <title>rpx4html-demo</title> |
|---|
| | | <!-- <script src="../../js/rpx4html.js"></script> --> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | <!-- 引入样式文件 --> |
|---|
| | | <link rel="stylesheet" href="../../css/vant.css" /> |
|---|
| | | <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 { |
|---|
| | |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app"> |
|---|
| | |
|---|
| | | |
|---|
| | | <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-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> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | |
|---|
| | | show: false, |
|---|
| | | count: 0, |
|---|
| | | isLoading: false, |
|---|
| | | showPopover: false, |
|---|
| | | // 通过 actions 属性来定义菜单选项 |
|---|
| | | actions: [{ |
|---|
| | | text: '选项一' |
|---|
| | | }, { |
|---|
| | | text: '选项二' |
|---|
| | | }, { |
|---|
| | | text: '选项三' |
|---|
| | | }], |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | |
|---|
| | | // console.log(vant.Toast('xxx')) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | onSelect(action) { |
|---|
| | | Toast(action.text); |
|---|
| | | }, |
|---|
| | | onClickLeft() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | |
|---|
| | | setTimeout(() => { |
|---|
| | | // Toast('刷新成功'); |
|---|
| | | vant.Notify('通知内容'); |
|---|
| | | // vant.Toast('xxx') |
|---|
| | | // vant.Toast('xxx') |
|---|
| | | this.isLoading = false; |
|---|
| | | this.count++; |
|---|
| | | }, 1000); |
|---|
| | |
|---|
| | | console.log('111') |
|---|
| | | // this.show=true |
|---|
| | | vant.Dialog.confirm({ |
|---|
| | | title: '标题', |
|---|
| | | message: '弹窗内容', |
|---|
| | | }) |
|---|
| | | .then(() => { |
|---|
| | | // on confirm |
|---|
| | | }) |
|---|
| | | .catch(() => { |
|---|
| | | // on cancel |
|---|
| | | }); |
|---|
| | | title: '标题', |
|---|
| | | message: '弹窗内容', |
|---|
| | | }) |
|---|
| | | .then(() => { |
|---|
| | | // on confirm |
|---|
| | | }) |
|---|
| | | .catch(() => { |
|---|
| | | // on cancel |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
