mirror of
https://github.com/sahadev/vue-component-creater-ui.git
synced 2025-06-06 13:04:05 +08:00
update: 集成vant,可以正常渲染
This commit is contained in:
shangbin
parent
4829c39f42
commit
6b848ea950
@ -1,19 +1,16 @@
|
||||
// 其它UI组件库应该在这里集成
|
||||
function loadVant() {
|
||||
const vantLoadPromise = (() => import("vant"))();
|
||||
(() => import("vant/lib/index.css"))();
|
||||
vantLoadPromise.then((vantModule) => {
|
||||
self.globalApp.use(vantModule);
|
||||
});
|
||||
const vantLoadPromise = (() => import("vant"))();
|
||||
return vantLoadPromise;
|
||||
}
|
||||
|
||||
function loadAntD() {
|
||||
const vantLoadPromise = (() => import("ant-design-vue"))();
|
||||
(() => import("ant-design-vue/dist/antd.css"))();
|
||||
vantLoadPromise.then((vantModule) => {
|
||||
self.globalApp.use(vantModule);
|
||||
});
|
||||
const vantLoadPromise = (() => import("ant-design-vue"))();
|
||||
return vantLoadPromise;
|
||||
}
|
||||
|
||||
loadAntD();
|
||||
loadVant();
|
||||
export default function loadCompontents() {
|
||||
return Promise.all([loadAntD(), loadVant()]);
|
||||
}
|
||||
|
||||
@ -71,7 +71,7 @@ export class MainPanelProvider {
|
||||
if (this.editMode) {
|
||||
// 渲染当前代码
|
||||
const readyForMoutedElement = this.createMountedElement();
|
||||
createBaseApp(componentOptions).mount(readyForMoutedElement);
|
||||
createBaseAppAsync(componentOptions).then(app => app.mount(readyForMoutedElement));
|
||||
|
||||
// 拍平数据结构
|
||||
this.flatDataStructure(rawDataStructure);
|
||||
@ -80,7 +80,7 @@ export class MainPanelProvider {
|
||||
this.enableEditMode();
|
||||
} else {
|
||||
// 渲染当前代码
|
||||
createBaseApp(componentOptions).mount(this.mountedEle);
|
||||
createBaseAppAsync(componentOptions).then(app => app.mount(this.mountedEle));
|
||||
}
|
||||
|
||||
return this;
|
||||
|
||||
@ -21,4 +21,7 @@ const store = createStore({
|
||||
}
|
||||
})
|
||||
|
||||
globalApp.use(store);
|
||||
export default function loadStore(app) {
|
||||
app.use(store);
|
||||
return app;
|
||||
}
|
||||
49
src/main.js
49
src/main.js
@ -11,27 +11,44 @@ import {
|
||||
import "element-plus/dist/index.css";
|
||||
|
||||
import APP from "./App.vue";
|
||||
import loadCompontents from "@/libs/UIComponentInit.js";
|
||||
import loadStore from "@/libs/store.js";
|
||||
|
||||
function createBaseApp(renderComponent = {}) {
|
||||
function loadTemplate(renderComponent, loadFinished = () => {}) {
|
||||
const app = createApp(renderComponent);
|
||||
app.use(ElementPlus);
|
||||
|
||||
app.component("question-filled", QuestionFilled);
|
||||
app.component("circle-plus", CirclePlus);
|
||||
app.component("refresh", Refresh);
|
||||
app.component("delete", Delete);
|
||||
app.component("document-copy", DocumentCopy);
|
||||
app.component("minus", Minus);
|
||||
|
||||
loadCompontents().then((modules) => {
|
||||
for (let index = 0; index < modules.length; index++) {
|
||||
const module = modules[index];
|
||||
app.use(module);
|
||||
loadFinished(app);
|
||||
}
|
||||
});
|
||||
return app;
|
||||
}
|
||||
|
||||
const globalApp = createBaseApp(APP);
|
||||
globalApp.mount("#app");
|
||||
function createBaseAppSync(renderComponent = {}) {
|
||||
return loadTemplate(renderComponent);
|
||||
}
|
||||
|
||||
function createBaseAppAsync(renderComponent = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
loadTemplate(renderComponent, (app) => {
|
||||
resolve(app);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const app = createBaseAppSync(APP);
|
||||
|
||||
app.component("question-filled", QuestionFilled);
|
||||
app.component("circle-plus", CirclePlus);
|
||||
app.component("refresh", Refresh);
|
||||
app.component("delete", Delete);
|
||||
app.component("document-copy", DocumentCopy);
|
||||
app.component("minus", Minus);
|
||||
|
||||
loadStore(app).mount("#app");
|
||||
|
||||
// 内部需要同样配置的全局Vue
|
||||
self.createBaseApp = createBaseApp;
|
||||
self.globalApp = globalApp; // 内部需要使用Vuex
|
||||
|
||||
import("@/libs/store.js");
|
||||
import("@/libs/UIComponentInit.js");
|
||||
self.createBaseAppAsync = createBaseAppAsync;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
export default {".container":"",".row":"margin-bottom: 10px;",".icon":"margin-right: 10px; margin-left: 10px; font-size: 18px;",".el-header":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-footer":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-aside":"background-color: #d3dce6; color: #333; text-align: center; line-height: 200px;",".el-main":"background-color: #e9eef3; color: #333; text-align: center; line-height: 160px;","body > .el-container":"margin-bottom: 40px;",".el-container:nth-child(5) .el-aside":"line-height: 260px;",".el-container:nth-child(6) .el-aside":"line-height: 260px;",".el-container:nth-child(7) .el-aside":"line-height: 320px;",".avatar-uploader ::v-deep .el-upload":"border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden;",".avatar-uploader .el-upload:hover":"border-color: #409eff;",".avatar-uploader-icon":"font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center;",".avatar":"width: 178px; height: 178px; display: block;",".demo-border":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","[label-lc-mark]":"display: inline-block; width: 200px; border: 1px grey dashed; min-height: 1rem; border-radius: 5px;",".item":"margin-top: 10px; margin-right: 40px;",".el-carousel__item h3":"color: #475669; font-size: 14px; opacity: 0.75; line-height: 150px; margin: 0;",".el-carousel__item:nth-child(2n)":"background-color: #99a9bf;",".el-carousel__item:nth-child(2n + 1)":"background-color: #d3dce6;",".el-row":"margin-bottom: 20px;",".el-row:last-child":"margin-bottom: 0;",".el-col":"border-radius: 4px;",".bg-purple-dark":"background: #99a9bf;",".bg-purple":"background: #d3dce6 !important;",".bg-purple-light":"background: #e5e9f2;",".grid-content":"border-radius: 4px; min-height: 36px;",".row-bg":"padding: 10px 0; background-color: #f9fafc;",".icon1":"margin-left: 10px; margin-right: 10px;",".layout":"border: 1px solid #d7dde4; background: #f5f7f9; position: relative; border-radius: 4px; overflow: hidden;",".layout-logo":"width: 100px; height: 30px; background: #5b6270; border-radius: 3px; float: left; position: relative; top: 15px; left: 20px;",".layout-nav":"width: 420px; margin: 0 auto; margin-right: 20px;",".demonstration":"font-size: 12px; color: #1f2f3d; padding: 10px 0 0 0;",".title":"width: 120px;",".demonstration-raw":"padding: 10px 0;","[div-lc-mark]":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","button + button":"margin-top: 10px;",".colon":"display: inline-block; margin: 0 4px; color: #ee0a24;",".block":"display: inline-block; width: 22px; color: #fff; font-size: 12px; text-align: center; background-color: #ee0a24;",".my-swipe .van-swipe-item":"color: #fff; font-size: 20px; line-height: 150px; text-align: center; background-color: #39a9ed;",".icon-c":"margin-left: 10px; margin-right: 10px;","::v-deep .van-tabbar--fixed":"position: initial;","::v-deep .van-address-list__bottom":"position: initial;","::v-deep .van-goods-action":"position: initial;","::v-deep .van-submit-bar":"position: initial;"}
|
||||
export default {".container":"",".row":"margin-bottom: 10px;",".icon":"margin-right: 10px; margin-left: 10px; font-size: 18px;",".el-header":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-footer":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-aside":"background-color: #d3dce6; color: #333; text-align: center; line-height: 200px;",".el-main":"background-color: #e9eef3; color: #333; text-align: center; line-height: 160px;","body > .el-container":"margin-bottom: 40px;",".el-container:nth-child(5) .el-aside":"line-height: 260px;",".el-container:nth-child(6) .el-aside":"line-height: 260px;",".el-container:nth-child(7) .el-aside":"line-height: 320px;",".avatar-uploader :v-deep(.el-upload)":"border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden;",".avatar-uploader .el-upload:hover":"border-color: #409eff;",".avatar-uploader-icon":"font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center;",".avatar":"width: 178px; height: 178px; display: block;",".demo-border":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","[label-lc-mark]":"display: inline-block; width: 200px; border: 1px grey dashed; min-height: 1rem; border-radius: 5px;",".item":"margin-top: 10px; margin-right: 40px;",".el-carousel__item h3":"color: #475669; font-size: 14px; opacity: 0.75; line-height: 150px; margin: 0;",".el-carousel__item:nth-child(2n)":"background-color: #99a9bf;",".el-carousel__item:nth-child(2n + 1)":"background-color: #d3dce6;",".el-row":"margin-bottom: 20px;",".el-row:last-child":"margin-bottom: 0;",".el-col":"border-radius: 4px;",".bg-purple-dark":"background: #99a9bf;",".bg-purple":"background: #d3dce6 !important;",".bg-purple-light":"background: #e5e9f2;",".grid-content":"border-radius: 4px; min-height: 36px;",".row-bg":"padding: 10px 0; background-color: #f9fafc;",".icon1":"margin-left: 10px; margin-right: 10px;",".layout":"border: 1px solid #d7dde4; background: #f5f7f9; position: relative; border-radius: 4px; overflow: hidden;",".layout-logo":"width: 100px; height: 30px; background: #5b6270; border-radius: 3px; float: left; position: relative; top: 15px; left: 20px;",".layout-nav":"width: 420px; margin: 0 auto; margin-right: 20px;",".demonstration":"font-size: 12px; color: #1f2f3d; padding: 10px 0 0 0;",".title":"width: 120px;",".demonstration-raw":"padding: 10px 0;","[div-lc-mark]":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","button + button":"margin-top: 10px;","#vant-button > *":"margin: 0 5px 5px 0;",".colon":"display: inline-block; margin: 0 4px; color: #ee0a24;",".block":"display: inline-block; width: 22px; color: #fff; font-size: 12px; text-align: center; background-color: #ee0a24;",".my-swipe .van-swipe-item":"color: #fff; font-size: 20px; line-height: 150px; text-align: center; background-color: #39a9ed;",".icon-c":"margin-left: 10px; margin-right: 10px;",":v-deep(.van-tabbar--fixed)":"position: initial;",":v-deep(.van-address-list__bottom)":"position: relative;",":v-deep(.van-submit-bar)":"position: initial;",".van-action-bar":"position: relative; padding-bottom: 0;"}
|
||||
File diff suppressed because one or more lines are too long
@ -1,32 +1,30 @@
|
||||
<template lc_id="YNC0Scb/Nu">
|
||||
<div lc_id="pN7LcslOJR">
|
||||
<div lc_id="jr3zjZhDqz">
|
||||
<div class="demonstration-antd" lc_id="fRuphkeIKC">Button 按钮</div>
|
||||
<div lc_id="k+t156NFRt">
|
||||
<a-button lc-mark type="primary">Primary Button</a-button>
|
||||
<a-button lc-mark>Default Button</a-button>
|
||||
<a-button lc-mark type="dashed">Dashed Button</a-button>
|
||||
<a-button lc-mark type="text">Text Button</a-button>
|
||||
<a-button lc-mark type="link">Link Button</a-button>
|
||||
|
||||
<a-button lc-mark type="primary" danger>Primary</a-button>
|
||||
<a-button lc-mark danger>Default</a-button>
|
||||
<template lc_id="YNC0Scb/Nu">
|
||||
<div lc_id="pN7LcslOJR">
|
||||
<div lc_id="jr3zjZhDqz">
|
||||
<div class="demonstration-antd" lc_id="fRuphkeIKC">Button 按钮</div>
|
||||
<div lc_id="k+t156NFRt">
|
||||
<a-button lc-mark type="primary" lc_id="nAzBA7pWsh">Primary Button</a-button>
|
||||
<a-button lc-mark lc_id="rMeh8dMkYC">Default Button</a-button>
|
||||
<a-button lc-mark type="dashed" lc_id="5+qgpMthx2">Dashed Button</a-button>
|
||||
<a-button lc-mark type="text" lc_id="UoFnE3nJv9">Text Button</a-button>
|
||||
<a-button lc-mark type="link" lc_id="kIu/utVuLA">Link Button</a-button>
|
||||
<a-button lc-mark type="primary" danger lc_id="BQ4AmOTe8D">Primary</a-button>
|
||||
<a-button lc-mark danger lc_id="98eGo5RB7m">Default</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="O9JGjMpAKq">
|
||||
<div class="demonstration-antd" lc_id="4rqJIQ2Mzz">ButtonGroup 按钮组</div>
|
||||
<div lc_id="pONPOBBNro">
|
||||
<a-button lc-mark type="primary" block lc_id="YmqXKUio63">Primary</a-button>
|
||||
<a-button lc-mark block lc_id="ObahIU2Sa7">Default</a-button>
|
||||
<a-button lc-mark type="dashed" block lc_id="rqL+CH9y8P">Dashed</a-button>
|
||||
<a-button lc-mark danger block lc_id="97Yrk61JBe">Danger</a-button>
|
||||
<a-button lc-mark type="link" block lc_id="P7LUIU1mZb">Link</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="O9JGjMpAKq">
|
||||
<div class="demonstration-antd" lc_id="4rqJIQ2Mzz">ButtonGroup 按钮组</div>
|
||||
<div lc_id="pONPOBBNro">
|
||||
<a-button lc-mark type="primary" block>Primary</a-button>
|
||||
<a-button lc-mark block>Default</a-button>
|
||||
<a-button lc-mark type="dashed" block>Dashed</a-button>
|
||||
<a-button lc-mark danger block>Danger</a-button>
|
||||
<a-button lc-mark type="link" block>Link</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: [],
|
||||
components: {},
|
||||
@ -47,9 +45,6 @@ export default {
|
||||
onButtonClick() { },
|
||||
},
|
||||
fillter: {},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
}
|
||||
</style>
|
||||
} </script>
|
||||
<style scoped>.container {
|
||||
}</style>
|
||||
|
||||
@ -1,54 +1,51 @@
|
||||
<template >
|
||||
<div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Button 按钮</div>
|
||||
<div id="vant-button">
|
||||
<van-button lc-mark type="primary">主要按钮</van-button>
|
||||
<van-button lc-mark type="success">成功按钮</van-button>
|
||||
<van-button lc-mark type="default">默认按钮</van-button>
|
||||
<van-button lc-mark type="warning">警告按钮</van-button>
|
||||
<van-button lc-mark type="danger">危险按钮</van-button>
|
||||
|
||||
<van-button lc-mark plain type="primary">朴素按钮</van-button>
|
||||
<van-button lc-mark plain type="primary">朴素按钮</van-button>
|
||||
|
||||
<van-button lc-mark loading type="primary" />
|
||||
<van-button lc-mark loading type="primary" loading-type="spinner" />
|
||||
<van-button lc-mark loading type="primary" loading-text="加载中..." />
|
||||
|
||||
<van-button lc-mark square type="primary">方形按钮</van-button>
|
||||
<van-button lc-mark round type="primary">圆形按钮</van-button>
|
||||
|
||||
<van-button lc-mark icon="plus" type="primary" />
|
||||
<van-button lc-mark icon="plus" type="primary">按钮</van-button>
|
||||
<van-button lc-mark icon="https://img.yzcdn.cn/vant/user-active.png" type="primary">
|
||||
按钮
|
||||
</van-button>
|
||||
|
||||
<van-button lc-mark type="primary" size="large">大号按钮</van-button>
|
||||
<van-button lc-mark type="primary" size="normal">普通按钮</van-button>
|
||||
<van-button lc-mark type="primary" size="small">小型按钮</van-button>
|
||||
<van-button lc-mark type="primary" size="mini">迷你按钮</van-button>
|
||||
|
||||
<van-button lc-mark type="primary" block>块级元素</van-button>
|
||||
|
||||
<van-button lc-mark color="#7232dd">单色按钮</van-button>
|
||||
<van-button lc-mark color="#7232dd" plain>单色按钮</van-button>
|
||||
<van-button lc-mark color="linear-gradient(to right, #ff6034, #ee0a24)">
|
||||
渐变色按钮
|
||||
<template lc_id="mUQG+E4AcV">
|
||||
<div lc_id="AacFAo8xlp">
|
||||
<div lc_id="H8AE6/LSfT">
|
||||
<div class="demonstration-vant" lc_id="BW6xbV1Jkz">Button 按钮</div>
|
||||
<div id="vant-button" lc_id="0xAc0+UTl0">
|
||||
<van-button lc-mark type="primary" lc_id="O1Kc1IjqyA">主要按钮</van-button>
|
||||
<van-button lc-mark type="success" lc_id="LWUrTRjiN3">成功按钮</van-button>
|
||||
<van-button lc-mark type="default" lc_id="Lor6xJLyXO">默认按钮</van-button>
|
||||
<van-button lc-mark type="warning" lc_id="B2mwHpjnn4">警告按钮</van-button>
|
||||
<van-button lc-mark type="danger" lc_id="g8aJMV07tv">危险按钮</van-button>
|
||||
<van-button lc-mark plain type="primary" lc_id="B6Z0HCAfII">朴素按钮</van-button>
|
||||
<van-button lc-mark plain type="primary" lc_id="Kl0A4kmfxN">朴素按钮</van-button>
|
||||
<van-button lc-mark loading type="primary" lc_id="H7ASlo2i6q">
|
||||
<van-button lc-mark loading type="primary" loading-type="spinner" lc_id="DYCEFZzcgc">
|
||||
<van-button lc-mark loading type="primary" loading-text="加载中..." lc_id="SS7BJIzMsg">
|
||||
<van-button lc-mark square type="primary" lc_id="S7BYt/eLuR">方形按钮</van-button>
|
||||
<van-button lc-mark round type="primary" lc_id="xqEMwr1sRA">圆形按钮</van-button>
|
||||
<van-button lc-mark icon="plus" type="primary" lc_id="7ja7xPbWmm">
|
||||
<van-button lc-mark icon="plus" type="primary" lc_id="XG3GYBBrEU">按钮</van-button>
|
||||
<van-button lc-mark icon="https://img.yzcdn.cn/vant/user-active.png" type="primary" lc_id="X//pnSGqLF">
|
||||
按钮</van-button>
|
||||
<van-button lc-mark type="primary" size="large" lc_id="pwjoF9kQPG">大号按钮</van-button>
|
||||
<van-button lc-mark type="primary" size="normal" lc_id="1ShXXx6uM0">普通按钮</van-button>
|
||||
<van-button lc-mark type="primary" size="small" lc_id="NJoWdzL3ps">小型按钮</van-button>
|
||||
<van-button lc-mark type="primary" size="mini" lc_id="hOCsi5Nd7f">迷你按钮</van-button>
|
||||
<van-button lc-mark type="primary" block lc_id="0MRQ5LCYcF">块级元素</van-button>
|
||||
<van-button lc-mark color="#7232dd" lc_id="nrrWnpVDmN">单色按钮</van-button>
|
||||
<van-button lc-mark color="#7232dd" plain lc_id="l0tFmVZGj9">单色按钮</van-button>
|
||||
<van-button lc-mark color="linear-gradient(to right, #ff6034, #ee0a24)" lc_id="RXwG5PrfLY">渐变色按钮
|
||||
</van-button>
|
||||
</van-button>
|
||||
</van-button>
|
||||
</van-button>
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Cell 单元格</div>
|
||||
<van-cell-group lc-mark>
|
||||
<van-cell title="单元格" value="内容" />
|
||||
<van-cell title="单元格" value="内容" label="描述信息" />
|
||||
<div lc_id="an/3DkuLE6">
|
||||
<div class="demonstration-vant" lc_id="w8jEqp6M5d">Cell 单元格</div>
|
||||
<van-cell-group lc-mark lc_id="YIna8H61Ze">
|
||||
<van-cell title="单元格" value="内容" lc_id="TFcKdvoBUi">
|
||||
<van-cell title="单元格" value="内容" label="描述信息" lc_id="wCy+AFO6oA"></van-cell>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
<br>
|
||||
<van-cell-group inset lc-mark>
|
||||
<van-cell title="单元格" value="内容" />
|
||||
<van-cell title="单元格" value="内容" label="描述信息" />
|
||||
<van-cell-group inset lc-mark lc_id="GDUu8grqyq">
|
||||
<van-cell title="单元格" value="内容" lc_id="R/yvDgWEzu">
|
||||
<van-cell title="单元格" value="内容" label="描述信息" lc_id="nH8Z1dpWkB"></van-cell>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,96 +1,99 @@
|
||||
<template >
|
||||
<div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Collapse 折叠面板</div>
|
||||
<van-collapse v-model="activeNames" lc-mark>
|
||||
<van-collapse-item title="标题1" name="1">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题2" name="2">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题3" name="3" disabled>内容</van-collapse-item>
|
||||
<template lc_id="Q6tpxgu3Af">
|
||||
<div lc_id="SUq1dM6mx7">
|
||||
<div lc_id="bVMFhQWWZi">
|
||||
<div class="demonstration-vant" lc_id="aksDVgfMhj">Collapse 折叠面板</div>
|
||||
<van-collapse v-model="activeNames" lc-mark lc_id="npKi1y5bk5">
|
||||
<van-collapse-item title="标题1" name="1" lc_id="wlqZiTcBQn">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题2" name="2" lc_id="lVEmjp4jgU">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题3" name="3" disabled lc_id="LJVFOApV8X">内容</van-collapse-item>
|
||||
</van-collapse>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">CountDown 倒计时</div>
|
||||
<van-count-down :time="time" lc-mark></van-count-down>
|
||||
<van-count-down :time="time" lc-mark format="DD 天 HH 时 mm 分 ss 秒"></van-count-down>
|
||||
<van-count-down :time="time" lc-mark>
|
||||
<template #default="timeData">
|
||||
<span class="block">{{ timeData.hours }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ timeData.minutes }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ timeData.seconds }}</span>
|
||||
<div lc_id="C3lXrwAiNI">
|
||||
<div class="demonstration-vant" lc_id="0boIDS47ol">CountDown 倒计时</div>
|
||||
<van-count-down :time="time" lc-mark lc_id="/EaLzL88MM"></van-count-down>
|
||||
<van-count-down :time="time" lc-mark format="DD 天 HH 时 mm 分 ss 秒" lc_id="lagIK/uwCC"></van-count-down>
|
||||
<van-count-down :time="time" lc-mark lc_id="Xyg4NSoxBX">
|
||||
<template #default="timeData" lc_id="tPDMWuGJW6">
|
||||
<span class="block" lc_id="64ZZJDy0a/">{{ timeData.hours }}</span>
|
||||
<span class="colon" lc_id="uOEZ/JgPc8">:</span>
|
||||
<span class="block" lc_id="JqxW3i6P8w">{{ timeData.minutes }}</span>
|
||||
<span class="colon" lc_id="S8yWEUqu8P">:</span>
|
||||
<span class="block" lc_id="uCI9UGXbjM">{{ timeData.seconds }}</span>
|
||||
</template>
|
||||
</van-count-down>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Divider 分割线</div>
|
||||
<van-divider lc-mark></van-divider>
|
||||
<van-divider lc-mark>文字</van-divider>
|
||||
<van-divider lc-mark content-position="left">文字</van-divider>
|
||||
<van-divider lc-mark content-position="right">文字</van-divider>
|
||||
<van-divider lc-mark :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">文字</van-divider>
|
||||
<div lc_id="+TRSEJ64CC">
|
||||
<div class="demonstration-vant" lc_id="uaaKUshda6">Divider 分割线</div>
|
||||
<van-divider lc-mark lc_id="O+mmvHZU5g"></van-divider>
|
||||
<van-divider lc-mark lc_id="ZFHen1KfO4">文字</van-divider>
|
||||
<van-divider lc-mark content-position="left" lc_id="2YAd2q9KCC">文字</van-divider>
|
||||
<van-divider lc-mark content-position="right" lc_id="07IIi1+FZz">文字</van-divider>
|
||||
<van-divider lc-mark :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" lc_id="UtOxHb5Qfg">
|
||||
文字</van-divider>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Empty 空状态</div>
|
||||
<van-empty image="error" lc-mark description="描述文字"></van-empty>
|
||||
<van-empty image="network" lc-mark description="描述文字"></van-empty>
|
||||
<van-empty image="search" lc-mark description="描述文字"></van-empty>
|
||||
<div lc_id="T6tvspYttI">
|
||||
<div class="demonstration-vant" lc_id="tQEA1/gYgR">Empty 空状态</div>
|
||||
<van-empty image="error" lc-mark description="描述文字" lc_id="LT8YsAR9bR"></van-empty>
|
||||
<van-empty image="network" lc-mark description="描述文字" lc_id="4Y26THSVSF"></van-empty>
|
||||
<van-empty image="search" lc-mark description="描述文字" lc_id="XG4M0i9r7v"></van-empty>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">List 列表</div>
|
||||
<van-list v-model="loading" :finished="finished" lc-mark finished-text="没有更多了" @load="onLoad">
|
||||
<van-cell v-for="item in list" :key="item" :title="item"></van-cell>
|
||||
<div lc_id="7cp54ntFq/">
|
||||
<div class="demonstration-vant" lc_id="NlDW984NIX">List 列表</div>
|
||||
<van-list v-model="loading" :finished="finished" lc-mark finished-text="没有更多了" @load="onLoad" lc_id="lPqQztunQp">
|
||||
<van-cell v-for="item in list" :key="item" :title="item" lc_id="5KzyZuonQL"></van-cell>
|
||||
</van-list>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">NoticeBar 通知栏</div>
|
||||
<van-notice-bar left-icon="volume-o" lc-mark text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"></van-notice-bar>
|
||||
<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" lc-mark></van-notice-bar>
|
||||
<van-notice-bar :scrollable="false" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" lc-mark></van-notice-bar>
|
||||
<div lc_id="sl50gl586K">
|
||||
<div class="demonstration-vant" lc_id="2fzVlX0csX">NoticeBar 通知栏</div>
|
||||
<van-notice-bar left-icon="volume-o" lc-mark text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" lc_id="k61bYFFVQm">
|
||||
</van-notice-bar>
|
||||
<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" lc-mark lc_id="hVnGw6dGn5"></van-notice-bar>
|
||||
<van-notice-bar :scrollable="false" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" lc-mark lc_id="xlMfxzUiEv">
|
||||
</van-notice-bar>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Progress 进度条</div>
|
||||
<div style="margin: 20px 0">
|
||||
<van-progress :percentage="50" lc-mark></van-progress>
|
||||
<div lc_id="7E/zp4vYl5">
|
||||
<div class="demonstration-vant" lc_id="Z0VWmNgtun">Progress 进度条</div>
|
||||
<div style="margin: 20px 0" lc_id="ihlAnxtUTt">
|
||||
<van-progress :percentage="50" lc-mark lc_id="iN1Pn4Vd84"></van-progress>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Skeleton 骨架屏</div>
|
||||
<van-skeleton title :row="3" lc-mark></van-skeleton>
|
||||
<div lc_id="mllWNtm7WD">
|
||||
<div class="demonstration-vant" lc_id="XU1g37b7Bj">Skeleton 骨架屏</div>
|
||||
<van-skeleton title :row="3" lc-mark lc_id="B9ypSupDLY"></van-skeleton>
|
||||
<br>
|
||||
<van-skeleton title avatar :row="3" lc-mark></van-skeleton>
|
||||
<van-skeleton title avatar :row="3" lc-mark lc_id="LH6oqOei+U"></van-skeleton>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Steps 步骤条</div>
|
||||
<van-steps :active="active" lc-mark>
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
<van-step>交易完成</van-step>
|
||||
<div lc_id="H2zy4AGqzd">
|
||||
<div class="demonstration-vant" lc_id="f2BUM74AC2">Steps 步骤条</div>
|
||||
<van-steps :active="active" lc-mark lc_id="wIsGLQipbg">
|
||||
<van-step lc_id="wDpEEfwDFg">买家下单</van-step>
|
||||
<van-step lc_id="0uH+uG0y/J">商家接单</van-step>
|
||||
<van-step lc_id="7MxYVitFqU">买家提货</van-step>
|
||||
<van-step lc_id="zmTz+icNFP">交易完成</van-step>
|
||||
</van-steps>
|
||||
<van-steps direction="vertical" :active="0" lc-mark>
|
||||
<van-step>
|
||||
<h3>【城市】物流状态1</h3>
|
||||
<p>2016-07-12 12:40</p>
|
||||
<van-steps direction="vertical" :active="0" lc-mark lc_id="wfouplCxlS">
|
||||
<van-step lc_id="IzJ4DePPuF">
|
||||
<h3 lc_id="fM4sXWg+61">【城市】物流状态1</h3>
|
||||
<p lc_id="plNiYCktIK">2016-07-12 12:40</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>【城市】物流状态2</h3>
|
||||
<p>2016-07-11 10:00</p>
|
||||
<van-step lc_id="EHQFSQQ7XN">
|
||||
<h3 lc_id="+coqZkw2U2">【城市】物流状态2</h3>
|
||||
<p lc_id="lNLIsZhFdm">2016-07-11 10:00</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>快件已发货</h3>
|
||||
<p>2016-07-10 09:30</p>
|
||||
<van-step lc_id="6L725lSdnl">
|
||||
<h3 lc_id="wYQrSnGkOm">快件已发货</h3>
|
||||
<p lc_id="EAMHuHntXW">2016-07-10 09:30</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Swipe 轮播</div>
|
||||
<div>
|
||||
<van-swipe lc-mark class="my-swipe" :autoplay="3000" indicator-color="white">
|
||||
<van-swipe-item>1</van-swipe-item>
|
||||
<van-swipe-item>2</van-swipe-item>
|
||||
<van-swipe-item>3</van-swipe-item>
|
||||
<van-swipe-item>4</van-swipe-item>
|
||||
<div lc_id="ag50o0J0rJ">
|
||||
<div class="demonstration-vant" lc_id="ZKGeQcO9+f">Swipe 轮播</div>
|
||||
<div lc_id="hGMjfspfr6">
|
||||
<van-swipe lc-mark class="my-swipe" :autoplay="3000" indicator-color="white" lc_id="vAbfSeM0cO">
|
||||
<van-swipe-item lc_id="kO0d+y55zE">1</van-swipe-item>
|
||||
<van-swipe-item lc_id="WME2UWPHDF">2</van-swipe-item>
|
||||
<van-swipe-item lc_id="ze6m85Fe/y">3</van-swipe-item>
|
||||
<van-swipe-item lc_id="ugTofY2Spf">4</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,54 +1,51 @@
|
||||
<template >
|
||||
<div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Form 表单</div>
|
||||
<van-form @submit="onSubmit6" lc-mark>
|
||||
<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
|
||||
:rules="[{ required: true, message: '请填写用户名' }]"></van-field>
|
||||
<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
|
||||
:rules="[{ required: true, message: '请填写密码' }]"></van-field>
|
||||
<div style="margin: 16px">
|
||||
<van-button round block plain native-type="submit">提交</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Picker 选择器</div>
|
||||
<van-picker title="标题" show-toolbar lc-mark :columns="columns" @confirm="onConfirm" @cancel="onCancel"
|
||||
@change="onChange"></van-picker>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Rate 评分</div>
|
||||
<van-rate v-model="value" lc-mark></van-rate>
|
||||
<van-rate v-model="value" lc-mark icon="like" void-icon="like-o"></van-rate>
|
||||
<van-rate v-model="value" :size="25" lc-mark color="#ffd21e" void-icon="star" void-color="#eee"></van-rate>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Search 搜索</div>
|
||||
<div style="padding: 10px 0">
|
||||
<van-search v-model="search" lc-mark placeholder="请输入搜索关键词"></van-search>
|
||||
<template lc_id="YewM0Fpxez">
|
||||
<div lc_id="/u9MrfDUSF">
|
||||
<div lc_id="elcsTETZKP">
|
||||
<div class="demonstration-vant" lc_id="J+JyznaSGx">Form 表单</div>
|
||||
<van-form @submit="onSubmit6" lc-mark lc_id="Bb6KSvo7iV">
|
||||
<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" lc_id="cQHslSjUh0"></van-field>
|
||||
<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" lc_id="Z62w8chtA6"></van-field>
|
||||
<div style="margin: 16px" lc_id="FTIfo2F7fb">
|
||||
<van-button round block plain native-type="submit" lc_id="OnpChGM4FG">提交</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</div>
|
||||
<div lc_id="a6J+tHBXfx">
|
||||
<div class="demonstration-vant" lc_id="3UqmMJaGUs">Picker 选择器</div>
|
||||
<van-picker title="标题" show-toolbar lc-mark :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" lc_id="FbUA+gwYwD"></van-picker>
|
||||
</div>
|
||||
<div lc_id="FqUz9WN+J4">
|
||||
<div class="demonstration-vant" lc_id="x10zfQk8GP">Rate 评分</div>
|
||||
<van-rate v-model="value" lc-mark lc_id="9Q2B165SWb"></van-rate>
|
||||
<van-rate v-model="value" lc-mark icon="like" void-icon="like-o" lc_id="o25A/Nsm+q"></van-rate>
|
||||
<van-rate v-model="value" :size="25" lc-mark color="#ffd21e" void-icon="star" void-color="#eee" lc_id="udpZtvnYaM"></van-rate>
|
||||
</div>
|
||||
<div lc_id="aYGRCZj0NF">
|
||||
<div class="demonstration-vant" lc_id="beXwEGxE8d">Search 搜索</div>
|
||||
<div style="padding: 10px 0" lc_id="X0fmlZxEoc">
|
||||
<van-search v-model="search" lc-mark placeholder="请输入搜索关键词" lc_id="fiUNBFaJfb"></van-search>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="xACj+8KsPj">
|
||||
<div class="demonstration-vant" lc_id="SZ2gOWJLtH">Slider 滑块</div>
|
||||
<div style="margin: 10px" lc_id="3tMNXghyqk">
|
||||
<van-slider v-model="slideValue" @change="onChange" lc-mark lc_id="+KskhfWNet"></van-slider>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="yx9fIH6YT1">
|
||||
<div class="demonstration-vant" lc_id="/DC9chV2f8">Stepper 步进器</div>
|
||||
<van-stepper lc-mark v-model="stepValue" lc_id="dG2w3gK8iM"></van-stepper>
|
||||
</div>
|
||||
<div lc_id="bRF7t/PiSs">
|
||||
<div class="demonstration-vant" lc_id="p4NWwVwgEJ">Switch 开关</div>
|
||||
<van-switch v-model="checked" lc-mark lc_id="Puwkg/BZL3"></van-switch>
|
||||
</div>
|
||||
<div lc_id="FLUufSgaoY">
|
||||
<div class="demonstration-vant" lc_id="ljrW/4PCCr">Uploader 文件上传</div>
|
||||
<van-uploader :after-read="afterRead" lc-mark lc_id="vfLysz9Um7"></van-uploader>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Slider 滑块</div>
|
||||
<div style="margin: 10px">
|
||||
<van-slider v-model="slideValue" @change="onChange" lc-mark></van-slider>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Stepper 步进器</div>
|
||||
<van-stepper lc-mark v-model="stepValue"></van-stepper>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Switch 开关</div>
|
||||
<van-switch v-model="checked" lc-mark></van-switch>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Uploader 文件上传</div>
|
||||
<van-uploader :after-read="afterRead" lc-mark></van-uploader>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<template >
|
||||
<div >
|
||||
<div >
|
||||
<div class="demonstration-vant" >Icon 图标</div>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" ></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" ></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" dot ></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" badge="9" ></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" badge="99+" ></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" color="#1989fa" ></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" color="#07c160" ></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" size="40" ></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" size="3rem" ></van-icon>
|
||||
<template lc_id="TBkLMGiz7W">
|
||||
<div lc_id="fQEAdgBTN1">
|
||||
<div lc_id="m1u4gZJq0G">
|
||||
<div class="demonstration-vant" lc_id="XkrSmnFhSd">Icon 图标</div>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" lc_id="hAFJmwR+W5"></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" lc_id="LWUy/mK0g3"></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" dot lc_id="TLp3uMYtba"></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" badge="9" lc_id="mHZSrd9UI8"></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" badge="99+" lc_id="2fxRon5qER"></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" color="#1989fa" lc_id="Fnr+GiGmOd"></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" color="#07c160" lc_id="ZkMYCkbTSh"></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" size="40" lc_id="iaAB8jHgYk"></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" size="3rem" lc_id="lOFApDm4Xl"></van-icon>
|
||||
</div>
|
||||
<div >
|
||||
<div class="demonstration-vant" >Image 图片</div>
|
||||
<van-image width="100" lc-mark height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" ></van-image>
|
||||
<div lc_id="owULuWxte2">
|
||||
<div class="demonstration-vant" lc_id="mDpsujAB1h">Image 图片</div>
|
||||
<van-image width="100" lc-mark height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" lc_id="5y86cWjjuo"></van-image>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,66 +1,65 @@
|
||||
<template >
|
||||
<div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Field 输入框</div>
|
||||
<div lc-mark style="padding: 10px;">
|
||||
<van-field lc-mark v-model="text" label="文本"></van-field>
|
||||
<van-field lc-mark v-model="tel" type="tel" label="手机号"></van-field>
|
||||
<van-field lc-mark v-model="digit" type="digit" label="整数"></van-field>
|
||||
<van-field lc-mark v-model="number" type="number" label="数字"></van-field>
|
||||
<van-field lc-mark v-model="password" type="password" label="密码"></van-field>
|
||||
<template lc_id="oV+qpNVI6k">
|
||||
<div lc_id="m5KY8rTxt1">
|
||||
<div lc_id="5CmAJnEb1P">
|
||||
<div class="demonstration-vant" lc_id="SM70eEXO+9">Field 输入框</div>
|
||||
<div lc-mark style="padding: 10px;" lc_id="f/reOjq1IJ">
|
||||
<van-field lc-mark v-model="text" label="文本" lc_id="DIxZNSoiax"></van-field>
|
||||
<van-field lc-mark v-model="tel" type="tel" label="手机号" lc_id="mmGmLLyGW5"></van-field>
|
||||
<van-field lc-mark v-model="digit" type="digit" label="整数" lc_id="T+vzBFNZhS"></van-field>
|
||||
<van-field lc-mark v-model="number" type="number" label="数字" lc_id="O36q2Fx7Xv"></van-field>
|
||||
<van-field lc-mark v-model="password" type="password" label="密码" lc_id="dk6ah1vXDq"></van-field>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="L5fPGRqjYZ">
|
||||
<div class="demonstration-vant" lc_id="3qMdltHE4i">DatetimePicker 时间选择</div>
|
||||
<van-datetime-picker v-model="currentDate" type="date" title="选择年月日" lc-mark :min-date="minDate" :max-date="maxDate" lc_id="14vPN9ntBV"></van-datetime-picker>
|
||||
</div>
|
||||
<div lc_id="ODgqdaL6ED">
|
||||
<div class="demonstration-vant" lc_id="hrPSBFZ6Hh">Checkbox 复选框</div>
|
||||
<van-checkbox-group lc-mark v-model="result" lc_id="F2p5QIbo3W">
|
||||
<van-checkbox name="a" lc_id="90jCPURt8o">复选框 a</van-checkbox>
|
||||
<van-checkbox lc-mark name="b" lc_id="bvtnBJfQnk">复选框 b</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</div>
|
||||
<div lc_id="V9/vkUb/HX">
|
||||
<div class="demonstration-vant" lc_id="hnZi6s2mpt">Checkbox 复选框(全选与反选)</div>
|
||||
<div lc-mark lc_id="JHg6xi7Ws5">
|
||||
<van-checkbox-group v-model="result" ref="checkboxGroup" lc_id="8EUt8S6cIj">
|
||||
<van-checkbox name="a" lc_id="vAZDx+cKaQ">复选框 a</van-checkbox>
|
||||
<van-checkbox name="b" lc_id="lNhFITM1W/">复选框 b</van-checkbox>
|
||||
<van-checkbox lc-mark name="c" lc_id="BVLbIHoPpi">复选框 c</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
<br>
|
||||
<van-button type="primary" size="small" @click="checkAll" lc_id="azfVg1jydO">全选</van-button>
|
||||
<van-button plain size="small" @click="toggleAll" lc_id="FxjbFUMiWD">反选</van-button>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="jl0/Xq6pS6">
|
||||
<div class="demonstration-vant" lc_id="5GzBrVy4XX">Radio 单选框</div>
|
||||
<div lc_id="TT2Onqet2I">
|
||||
<van-radio-group lc-mark v-model="radio10" lc_id="Fq7xqCU/Ul">
|
||||
<van-radio name="1" lc_id="eX5Wd5A8M+">单选框 1</van-radio>
|
||||
<van-radio lc-mark name="2" lc_id="QN9H1HdL7S">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
<br>
|
||||
<van-radio-group lc-mark v-model="radio10" lc_id="p/WdWJotYb">
|
||||
<van-cell-group lc_id="7SU7k9W/RI">
|
||||
<van-cell title="单选框 1" clickable @click="radio10 = '1'" lc-mark lc_id="cu2BQ/D1Gt">
|
||||
<template #right-icon lc_id="yLUfrpVFId">
|
||||
<van-radio name="1" lc_id="9sKStrXAMF"></van-radio>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="单选框 2" clickable @click="radio10 = '2'" lc_id="KnbWE2AKwX">
|
||||
<template #right-icon lc_id="vSyCi55TWO">
|
||||
<van-radio name="2" lc_id="gDzRZVWQxz"></van-radio>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">DatetimePicker 时间选择</div>
|
||||
<van-datetime-picker v-model="currentDate" type="date" title="选择年月日" lc-mark :min-date="minDate"
|
||||
:max-date="maxDate"></van-datetime-picker>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Checkbox 复选框</div>
|
||||
<van-checkbox-group lc-mark v-model="result">
|
||||
<van-checkbox name="a">复选框 a</van-checkbox>
|
||||
<van-checkbox lc-mark name="b">复选框 b</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Checkbox 复选框(全选与反选)</div>
|
||||
<div lc-mark>
|
||||
<van-checkbox-group v-model="result" ref="checkboxGroup">
|
||||
<van-checkbox name="a">复选框 a</van-checkbox>
|
||||
<van-checkbox name="b">复选框 b</van-checkbox>
|
||||
<van-checkbox lc-mark name="c">复选框 c</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
<br>
|
||||
<van-button type="primary" size="small" @click="checkAll">全选</van-button>
|
||||
<van-button plain size="small" @click="toggleAll">反选</van-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Radio 单选框</div>
|
||||
<div>
|
||||
<van-radio-group lc-mark v-model="radio10">
|
||||
<van-radio name="1">单选框 1</van-radio>
|
||||
<van-radio lc-mark name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
<br>
|
||||
<van-radio-group lc-mark v-model="radio10">
|
||||
<van-cell-group>
|
||||
<van-cell title="单选框 1" clickable @click="radio10 = '1'" lc-mark>
|
||||
<template #right-icon>
|
||||
<van-radio name="1"></van-radio>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="单选框 2" clickable @click="radio10 = '2'">
|
||||
<template #right-icon>
|
||||
<van-radio name="2"></van-radio>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
||||
@ -1,69 +1,68 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Grid 宫格</div>
|
||||
<van-grid lc-mark>
|
||||
<van-grid-item icon="photo-o" text="文字"></van-grid-item>
|
||||
<van-grid-item icon="photo-o" text="文字"></van-grid-item>
|
||||
<van-grid-item icon="photo-o" text="文字"></van-grid-item>
|
||||
<van-grid-item icon="photo-o" text="文字"></van-grid-item>
|
||||
</van-grid>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">NavBar 导航栏</div>
|
||||
<van-nav-bar lc-mark title="标题" left-text="返回" right-text="按钮" left-arrow @click-left="onClickLeft"
|
||||
@click-right="onClickRight"></van-nav-bar>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Pagination 分页</div>
|
||||
<van-pagination lc-mark v-model="currentPage13" :total-items="24" :items-per-page="5"></van-pagination>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Sidebar 侧边导航</div>
|
||||
<van-sidebar v-model="activeKey" lc-mark>
|
||||
<van-sidebar-item title="标签名称"></van-sidebar-item>
|
||||
<van-sidebar-item title="标签名称"></van-sidebar-item>
|
||||
<van-sidebar-item title="标签名称"></van-sidebar-item>
|
||||
</van-sidebar>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Tab 标签页</div>
|
||||
<van-tabs v-model="active14" lc-mark>
|
||||
<van-tab title="标签 1">内容 1</van-tab>
|
||||
<van-tab title="标签 2">内容 2</van-tab>
|
||||
<van-tab title="标签 3">内容 3</van-tab>
|
||||
<van-tab title="标签 4">内容 4</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">ActionBar 动作栏</div>
|
||||
<div style="position: relative;" lc-mark>
|
||||
<van-action-bar>
|
||||
<van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
|
||||
<van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
|
||||
<van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
|
||||
<van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
|
||||
</van-action-bar>
|
||||
<template lc_id="/QY7monDLp">
|
||||
<div lc_id="/ntrNy7wOc">
|
||||
<div lc_id="ta6EIAh72H">
|
||||
<div class="demonstration-vant" lc_id="ZMbTJO4efl">Grid 宫格</div>
|
||||
<van-grid lc-mark lc_id="X08eZY9vTs">
|
||||
<van-grid-item icon="photo-o" text="文字" lc_id="X7rCKONAIT"></van-grid-item>
|
||||
<van-grid-item icon="photo-o" text="文字" lc_id="LMykLYqUkC"></van-grid-item>
|
||||
<van-grid-item icon="photo-o" text="文字" lc_id="E2Hd160o5Q"></van-grid-item>
|
||||
<van-grid-item icon="photo-o" text="文字" lc_id="d34lSEesuk"></van-grid-item>
|
||||
</van-grid>
|
||||
</div>
|
||||
<div lc_id="dS3rIMgHEa">
|
||||
<div class="demonstration-vant" lc_id="PMja4pIbgj">NavBar 导航栏</div>
|
||||
<van-nav-bar lc-mark title="标题" left-text="返回" right-text="按钮" left-arrow @click-left="onClickLeft" @click-right="onClickRight" lc_id="REnoRWpVUY"></van-nav-bar>
|
||||
</div>
|
||||
<div lc_id="UhV4g9qnPl">
|
||||
<div class="demonstration-vant" lc_id="GEoGgaEQRn">Pagination 分页</div>
|
||||
<van-pagination lc-mark v-model="currentPage13" :total-items="24" :items-per-page="5" lc_id="IOGXwSfLUN"></van-pagination>
|
||||
</div>
|
||||
<div lc_id="DY3MQ06idt">
|
||||
<div class="demonstration-vant" lc_id="Y/UGT4oFUC">Sidebar 侧边导航</div>
|
||||
<van-sidebar v-model="activeKey" lc-mark lc_id="7AlKZZMGtG">
|
||||
<van-sidebar-item title="标签名称" lc_id="YGZitVPi4d"></van-sidebar-item>
|
||||
<van-sidebar-item title="标签名称" lc_id="hWh5LOl2oL"></van-sidebar-item>
|
||||
<van-sidebar-item title="标签名称" lc_id="TshkJd38qC"></van-sidebar-item>
|
||||
</van-sidebar>
|
||||
</div>
|
||||
<div lc_id="6QKkhZ8evV">
|
||||
<div class="demonstration-vant" lc_id="U6vxh2loAk">Tab 标签页</div>
|
||||
<van-tabs v-model="active14" lc-mark lc_id="rohxtUBk/l">
|
||||
<van-tab title="标签 1" lc_id="MSSxMZ2ebB">内容 1</van-tab>
|
||||
<van-tab title="标签 2" lc_id="f+cAezYPuU">内容 2</van-tab>
|
||||
<van-tab title="标签 3" lc_id="N36xJv03F6">内容 3</van-tab>
|
||||
<van-tab title="标签 4" lc_id="iy8oej8ecZ">内容 4</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
<div lc_id="HFSjLBSjr4">
|
||||
<div class="demonstration-vant" lc_id="5zilvW7BTu">ActionBar 动作栏</div>
|
||||
<div style="position: relative;" lc-mark lc_id="LywB4w//P/">
|
||||
<van-action-bar lc_id="44C1zLHqlz">
|
||||
<van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" lc_id="2rUDSvAMip">
|
||||
<van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" lc_id="MAju6gwdil">
|
||||
<van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" lc_id="gSY/APPOCK">
|
||||
<van-action-bar-button type="danger" text="立即购买" @click="onClickButton" lc_id="iHUXW5cxjd"></van-action-bar-button>
|
||||
</van-action-bar-icon>
|
||||
</van-action-bar-icon>
|
||||
</van-action-bar-icon>
|
||||
</van-action-bar>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="kzIjwCrNnO">
|
||||
<div class="demonstration-vant" lc_id="8dbio3vxQH">AddressEdit 地址编辑</div>
|
||||
<van-address-edit :area-list="areaList" show-postal lc-mark show-delete show-set-default show-search-result :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete" @change-detail="onChangeDetail" lc_id="Tn1/r0M9YC"></van-address-edit>
|
||||
</div>
|
||||
<div lc_id="wa8o497uS2">
|
||||
<div class="demonstration-vant" lc_id="eUXBZScEN8">Card 商品卡片</div>
|
||||
<van-card num="2" lc-mark price="2" desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/ipad.jpeg" lc_id="cBHYsOWBw2"></van-card>
|
||||
</div>
|
||||
<div lc_id="8m37ZW49xJ">
|
||||
<div class="demonstration-vant" lc_id="WFfLIn2BMo">ActionBar 行动栏</div>
|
||||
<van-submit-bar style="position: relative;" lc-mark :price="3050" button-text="提交订单" @submit="onSubmit" lc_id="iGAW34dMaI"></van-submit-bar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">AddressEdit 地址编辑</div>
|
||||
<van-address-edit :area-list="areaList" show-postal lc-mark show-delete show-set-default show-search-result
|
||||
:search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"
|
||||
@delete="onDelete" @change-detail="onChangeDetail"></van-address-edit>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Card 商品卡片</div>
|
||||
<van-card num="2" lc-mark price="2" desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/ipad.jpeg">
|
||||
</van-card>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">ActionBar 行动栏</div>
|
||||
<van-submit-bar style="position: relative;" lc-mark :price="3050" button-text="提交订单" @submit="onSubmit" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -140,10 +139,8 @@ export default {
|
||||
onSubmit11() { },
|
||||
onClickEditAddress() { },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
:v-deep(.van-tabbar--fixed) {
|
||||
}; </script>
|
||||
<style scoped>:v-deep(.van-tabbar--fixed) {
|
||||
position: initial;
|
||||
}
|
||||
:v-deep(.van-address-list__bottom) {
|
||||
@ -155,5 +152,4 @@ export default {
|
||||
.van-action-bar {
|
||||
position: relative;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template >
|
||||
<div >
|
||||
<div >
|
||||
<div class="demonstration-vant" >NumberKeyboard 数字键盘</div>
|
||||
<template lc_id="zZtP3Y+Aep">
|
||||
<div lc_id="wkR/YrqIMn">
|
||||
<div lc_id="LUgKBREHsr">
|
||||
<div class="demonstration-vant" lc_id="27vaAkZV0x">NumberKeyboard 数字键盘</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user