mirror of
https://github.com/sahadev/vue-component-creater-ui.git
synced 2025-07-01 05:52:46 +08:00
update: vant vue3
This commit is contained in:
shangbin
parent
ba575244e1
commit
91d43465cc
27
package-lock.json
generated
27
package-lock.json
generated
@ -1086,6 +1086,7 @@
|
||||
"version": "7.16.3",
|
||||
"resolved": "https://r.cnpmjs.org/@babel/runtime/download/@babel/runtime-7.16.3.tgz",
|
||||
"integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
@ -1549,6 +1550,11 @@
|
||||
"@popperjs/core": "^2.9.2"
|
||||
}
|
||||
},
|
||||
"@vant/use": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://rg.cnpmjs.org/@vant/use/download/@vant/use-1.3.4.tgz",
|
||||
"integrity": "sha512-XvZkPCjcmEBhD+T3vB68thOG6P9jazld6aBTMenhbAQd4FT/x9AiKIWPJx4MvhYoSIWt7fju6K01XTJldWs1hw=="
|
||||
},
|
||||
"@vitejs/plugin-vue": {
|
||||
"version": "1.10.2",
|
||||
"resolved": "https://rg.cnpmjs.org/@vitejs/plugin-vue/download/@vitejs/plugin-vue-1.10.2.tgz",
|
||||
@ -1557,7 +1563,8 @@
|
||||
"@vue/babel-helper-vue-jsx-merge-props": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://r.cnpmjs.org/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
|
||||
"integrity": "sha1-MWJKelBfsU2h1YAjclpMXycOaoE="
|
||||
"integrity": "sha1-MWJKelBfsU2h1YAjclpMXycOaoE=",
|
||||
"dev": true
|
||||
},
|
||||
"@vue/babel-helper-vue-transform-on": {
|
||||
"version": "1.0.2",
|
||||
@ -11237,7 +11244,8 @@
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.9",
|
||||
"resolved": "https://r.cnpmjs.org/regenerator-runtime/download/regenerator-runtime-0.13.9.tgz",
|
||||
"integrity": "sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I="
|
||||
"integrity": "sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I=",
|
||||
"dev": true
|
||||
},
|
||||
"regenerator-transform": {
|
||||
"version": "0.14.5",
|
||||
@ -13334,15 +13342,13 @@
|
||||
}
|
||||
},
|
||||
"vant": {
|
||||
"version": "2.12.36",
|
||||
"resolved": "https://rg.cnpmjs.org/vant/download/vant-2.12.36.tgz",
|
||||
"integrity": "sha512-+/XRx0MC/fHK2gskC7BMI00Ubrh+C46HtlyBzFGYIauzbQy9IotiuBkBZh+ep15ygXxIpozmudsLlGtX1cfexw==",
|
||||
"version": "3.3.7",
|
||||
"resolved": "https://rg.cnpmjs.org/vant/download/vant-3.3.7.tgz",
|
||||
"integrity": "sha512-xDNqdBvBAELwkkC4QqzXvcqQJMCP6l0faYDH0aU1dfkIm7Muc+7gqyHMVhPKPFcDGBP33ilZd0Vg2+JoIQWitw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "7.x",
|
||||
"@vant/icons": "^1.7.1",
|
||||
"@vant/popperjs": "^1.1.0",
|
||||
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
|
||||
"vue-lazyload": "1.2.3"
|
||||
"@vant/use": "^1.3.4"
|
||||
}
|
||||
},
|
||||
"vary": {
|
||||
@ -13461,11 +13467,6 @@
|
||||
"integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
|
||||
"dev": true
|
||||
},
|
||||
"vue-lazyload": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://r.cnpmjs.org/vue-lazyload/download/vue-lazyload-1.2.3.tgz",
|
||||
"integrity": "sha1-kB+ewVx+bKeHgaK65KNDaGve2yw="
|
||||
},
|
||||
"vue-loader": {
|
||||
"version": "15.9.8",
|
||||
"resolved": "https://r.cnpmjs.org/vue-loader/download/vue-loader-15.9.8.tgz",
|
||||
|
||||
10
package.json
10
package.json
@ -30,8 +30,8 @@
|
||||
"copy-to-clipboard": "^3.3.1",
|
||||
"crypto-random-string": "^3.3.1",
|
||||
"css": "^3.0.0",
|
||||
"element-plus": "^1.2.0-beta.3",
|
||||
"css-scoped": "^1.0.0",
|
||||
"element-plus": "^1.2.0-beta.3",
|
||||
"escodegen": "^2.0.0",
|
||||
"espree": "^7.3.0",
|
||||
"eventemitter3": "^4.0.7",
|
||||
@ -43,13 +43,13 @@
|
||||
"nanoid": "^3.1.30",
|
||||
"prettier": "^2.4.0",
|
||||
"split.js": "^1.6.2",
|
||||
"vant": "^2.10.7",
|
||||
"vant": "^3.3.7",
|
||||
"vite": "^2.6.14",
|
||||
"vue": "^3.2.22",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"vuex": "^4.0.2",
|
||||
"vue-github-button": "^1.3.0",
|
||||
"vue-template-compiler": "^2.6.14",
|
||||
"vue-github-button": "^1.3.0"
|
||||
"vuedraggable": "^4.1.0",
|
||||
"vuex": "^4.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/generator": "^7.11.6",
|
||||
|
||||
@ -59,11 +59,10 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import vant from "../rawComponents/vant";
|
||||
// import iview from "../rawComponents/iview";
|
||||
// import quasar from "../rawComponents/quasar";
|
||||
import raw from "../rawComponents/raw/index.vue";
|
||||
import ele from "../rawComponents/element/index.vue";
|
||||
import { defineAsyncComponent } from "vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -87,7 +86,13 @@ export default {
|
||||
titleArray: [],
|
||||
}, {
|
||||
icon: ('https://static.imonkey.xueersi.com/download/vcc-resource/logo/vant-n.png'),
|
||||
enable: false
|
||||
clickCallback: this.onSelectElement,
|
||||
className: "demonstration-vant",
|
||||
selectIndex: 0,
|
||||
componentName: 'vant',
|
||||
enable: true,
|
||||
titleArray: [],
|
||||
enable: true
|
||||
}, {
|
||||
icon: ('https://static.imonkey.xueersi.com/download/vcc-resource/logo/iview-n.png'),
|
||||
enable: false
|
||||
@ -173,21 +178,12 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
surprise() {
|
||||
const that = this;
|
||||
function color() {
|
||||
window.requestAnimationFrame(color);
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(color);
|
||||
}
|
||||
},
|
||||
|
||||
created() { },
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
// this.surprise();
|
||||
},
|
||||
|
||||
computed: {
|
||||
@ -210,10 +206,10 @@ export default {
|
||||
|
||||
components: {
|
||||
raw,
|
||||
// vant,
|
||||
vant: defineAsyncComponent(() => import("../rawComponents/vant")),
|
||||
// iview,
|
||||
// quasar,
|
||||
ele,
|
||||
ele: defineAsyncComponent(() => import("../rawComponents/element/index.vue")),
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
22
src/main.js
22
src/main.js
@ -1,6 +1,13 @@
|
||||
import { createApp } from "vue";
|
||||
import ElementPlus from "element-plus";
|
||||
import { QuestionFilled, CirclePlus, DocumentCopy, Delete, Refresh, Minus } from "@element-plus/icons";
|
||||
import {
|
||||
QuestionFilled,
|
||||
CirclePlus,
|
||||
DocumentCopy,
|
||||
Delete,
|
||||
Refresh,
|
||||
Minus,
|
||||
} from "@element-plus/icons";
|
||||
|
||||
import "element-plus/dist/index.css";
|
||||
import APP from "./App.vue";
|
||||
@ -19,12 +26,21 @@ function createBaseApp(renderComponent = {}) {
|
||||
return app;
|
||||
}
|
||||
|
||||
const globalApp = createBaseApp(APP)
|
||||
const globalApp = createBaseApp(APP);
|
||||
globalApp.mount("#app");
|
||||
|
||||
// 内部需要同样配置的全局Vue
|
||||
self.createBaseApp = createBaseApp;
|
||||
self.globalApp = globalApp; // 内部需要使用Vuex
|
||||
|
||||
import("@/libs/store.js");
|
||||
|
||||
import("@/libs/store.js");
|
||||
function loadVant() {
|
||||
const vantLoadPromise = (() => import("vant"))();
|
||||
(() => import("vant/lib/index.css"))();
|
||||
vantLoadPromise.then((vantModule) => {
|
||||
self.globalApp.use(vantModule);
|
||||
});
|
||||
}
|
||||
|
||||
loadVant();
|
||||
|
||||
@ -1,29 +1,57 @@
|
||||
<template lc_id="7cADZ+9vIL">
|
||||
<div lc_id="paR1gkzb2P">
|
||||
<div lc_id="xpLawHH5Ks">
|
||||
<div class="demonstration" lc_id="LXAb8pRrmp">Button 按钮:</div>
|
||||
<van-button lc-mark type="primary" lc_id="SrEHhpiQFn">Primary</van-button>
|
||||
<van-button lc-mark type="info" lc_id="y5KpXFwN4Y">Info</van-button>
|
||||
<van-button lc-mark type="default" lc_id="lys06/4mtk">Default</van-button>
|
||||
<van-button lc-mark type="danger" lc_id="vYu5fg0ITt">Danger</van-button>
|
||||
<van-button lc-mark type="warning" lc_id="gKMFNxDPu4">Warning</van-button>
|
||||
<van-button lc-mark plain type="primary" lc_id="5ggxtP8mY7">朴素按钮</van-button>
|
||||
<van-button lc-mark plain type="info" lc_id="J2aDU2i24z">朴素按钮</van-button>
|
||||
<van-button lc-mark loading type="primary" lc_id="hrHD1DGPGe"></van-button>
|
||||
<van-button lc-mark loading type="primary" loading-type="spinner" lc_id="fezG6odQJ0"></van-button>
|
||||
<van-button lc-mark loading type="info" loading-text="加载中..." lc_id="xvgVvk/peN"></van-button>
|
||||
</div>
|
||||
<div lc_id="nQa+C7dPYW">
|
||||
<div class="demonstration" lc_id="hvf2MQVJPH">Cell 单元格:</div>
|
||||
<van-cell-group lc-mark lc_id="9r3MUvTPyx">
|
||||
<van-cell title="单元格" value="内容" lc_id="yCbsNk6GF+"></van-cell>
|
||||
<van-cell title="单元格" value="内容" label="描述信息" lc_id="+30wYnfplY"></van-cell>
|
||||
<van-cell title="单元格" icon="location-o" lc_id="hxvJ+bSzIM"></van-cell>
|
||||
<van-cell title="单元格" is-link arrow-direction="down" value="内容" lc_id="vXMVp6xR7q"></van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
<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)">
|
||||
渐变色按钮
|
||||
</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant">Cell 单元格</div>
|
||||
<van-cell-group lc-mark>
|
||||
<van-cell title="单元格" value="内容" />
|
||||
<van-cell title="单元格" value="内容" label="描述信息" />
|
||||
</van-cell-group>
|
||||
<van-cell-group inset>
|
||||
<van-cell title="单元格" value="内容" />
|
||||
<van-cell title="单元格" value="内容" label="描述信息" />
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
@ -31,6 +59,12 @@ export default {
|
||||
},
|
||||
methods: {},
|
||||
}; </script>
|
||||
<style scoped>button + button {
|
||||
<style scoped>
|
||||
button + button {
|
||||
margin-top: 10px;
|
||||
}</style>
|
||||
}
|
||||
|
||||
#vant-button > * {
|
||||
margin: 0 5px 5px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,89 +1,89 @@
|
||||
<template lc_id="FWZlgoIz7k">
|
||||
<div lc_id="CdEbPqzS8u">
|
||||
<div lc_id="al4wtaXOth">
|
||||
<div class="demonstration" lc_id="GAD8lyrh/F">Collapse 折叠面板:</div>
|
||||
<van-collapse v-model="activeNames" lc-mark lc_id="NHP1m713Sm">
|
||||
<van-collapse-item title="标题1" name="1" lc_id="lou8M7Vw0z">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题2" name="2" lc_id="hZfYjF9hBj">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题3" name="3" disabled lc_id="zCEWpIo3xy">内容</van-collapse-item>
|
||||
<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>
|
||||
</van-collapse>
|
||||
</div>
|
||||
<div lc_id="LG+wBn9DxK">
|
||||
<div class="demonstration" lc_id="ends06lq8z">CountDown 倒计时:</div>
|
||||
<van-count-down :time="time" lc-mark lc_id="m67+4YqOi1"></van-count-down>
|
||||
<van-count-down :time="time" lc-mark format="DD 天 HH 时 mm 分 ss 秒" lc_id="cYkyET7swF"></van-count-down>
|
||||
<van-count-down :time="time" lc-mark lc_id="0BocO60ey7">
|
||||
<template #default="timeData" lc_id="MrSEGClpbH">
|
||||
<span class="block" lc_id="lwOgGWZcTq">{{ timeData.hours }}</span>
|
||||
<span class="colon" lc_id="bX09EDadV1">:</span>
|
||||
<span class="block" lc_id="bRg5exh+1A">{{ timeData.minutes }}</span>
|
||||
<span class="colon" lc_id="XZIzdLoV0d">:</span>
|
||||
<span class="block" lc_id="YXN3Eu/Nrh">{{ timeData.seconds }}</span>
|
||||
<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>
|
||||
</template>
|
||||
</van-count-down>
|
||||
</div>
|
||||
<div lc_id="irMWGI+oc0">
|
||||
<div class="demonstration" lc_id="5CKMbNpOOf">Divider 分割线:</div>
|
||||
<van-divider lc-mark lc_id="l6ixnSFszh"></van-divider>
|
||||
<van-divider lc-mark lc_id="KZcfOXu8at">文字</van-divider>
|
||||
<van-divider lc-mark content-position="left" lc_id="FACZ0whera">文字</van-divider>
|
||||
<van-divider lc-mark content-position="right" lc_id="Ulii4eFuq8">文字</van-divider>
|
||||
<van-divider lc-mark :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" lc_id="c95rKKqGx6">文字</van-divider>
|
||||
<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>
|
||||
<div lc_id="VmlWtppk47">
|
||||
<div class="demonstration" lc_id="2d4eERH3DJ">Empty 空状态:</div>
|
||||
<van-empty image="error" lc-mark description="描述文字" lc_id="ik4guY1GkT"></van-empty>
|
||||
<van-empty image="network" lc-mark description="描述文字" lc_id="dr9w9iLyrK"></van-empty>
|
||||
<van-empty image="search" lc-mark description="描述文字" lc_id="JLZXvoxSqX"></van-empty>
|
||||
<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>
|
||||
<div lc_id="PlS2ExVWhS">
|
||||
<div class="demonstration" lc_id="QfAN97i96n">List 列表:</div>
|
||||
<van-list v-model="loading" :finished="finished" lc-mark finished-text="没有更多了" @load="onLoad" lc_id="sU8RIzXdxk">
|
||||
<van-cell v-for="item in list" :key="item" :title="item" lc_id="RirHKyqpY5"></van-cell>
|
||||
<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>
|
||||
</van-list>
|
||||
</div>
|
||||
<div lc_id="/0en3vywfE">
|
||||
<div class="demonstration" lc_id="K/JhhqbxQ4">NoticeBar 通知栏:</div>
|
||||
<van-notice-bar left-icon="volume-o" lc-mark text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" lc_id="gfR1/wu0aO"></van-notice-bar>
|
||||
<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" lc-mark lc_id="4uJf0N5Opt"></van-notice-bar>
|
||||
<van-notice-bar :scrollable="false" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" lc-mark lc_id="RbNhbBFW41"></van-notice-bar>
|
||||
<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>
|
||||
<div lc_id="1ZmJrFMNPB">
|
||||
<div class="demonstration" lc_id="ZOAOy/ZhNz">Progress 进度条:</div>
|
||||
<div style="margin: 20px 0" lc_id="akMoDkcvIw">
|
||||
<van-progress :percentage="50" lc-mark lc_id="WvuO2CojO+"></van-progress>
|
||||
<div >
|
||||
<div class="demonstration-vant" >Progress 进度条:</div>
|
||||
<div style="margin: 20px 0" >
|
||||
<van-progress :percentage="50" lc-mark ></van-progress>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="ww0l2we4Xp">
|
||||
<div class="demonstration" lc_id="i2BQjLfhVO">Skeleton 骨架屏:</div>
|
||||
<van-skeleton title :row="3" lc-mark lc_id="O7DJWipRjy"></van-skeleton>
|
||||
<van-skeleton title avatar :row="3" lc-mark lc_id="y+0+csYfVG"></van-skeleton>
|
||||
<div >
|
||||
<div class="demonstration-vant" >Skeleton 骨架屏:</div>
|
||||
<van-skeleton title :row="3" lc-mark ></van-skeleton>
|
||||
<van-skeleton title avatar :row="3" lc-mark ></van-skeleton>
|
||||
</div>
|
||||
<div lc_id="144C3rfsPt">
|
||||
<div class="demonstration" lc_id="bj/f0lu4Ne">Steps 步骤条:</div>
|
||||
<van-steps :active="active" lc-mark lc_id="wlUGMhnXhW">
|
||||
<van-step lc_id="X5E9gZMxKj">买家下单</van-step>
|
||||
<van-step lc_id="2rf27HL1kB">商家接单</van-step>
|
||||
<van-step lc_id="IFUaIPvVqz">买家提货</van-step>
|
||||
<van-step lc_id="r4je8758eH">交易完成</van-step>
|
||||
<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>
|
||||
</van-steps>
|
||||
<van-steps direction="vertical" :active="0" lc-mark lc_id="GxnmtPTwCF">
|
||||
<van-step lc_id="WDmILFHgLD">
|
||||
<h3 lc_id="r90H33q4wY">【城市】物流状态1</h3>
|
||||
<p lc_id="fvToG/qsgu">2016-07-12 12:40</p>
|
||||
<van-steps direction="vertical" :active="0" lc-mark >
|
||||
<van-step >
|
||||
<h3 >【城市】物流状态1</h3>
|
||||
<p >2016-07-12 12:40</p>
|
||||
</van-step>
|
||||
<van-step lc_id="MJWiQtkmSy">
|
||||
<h3 lc_id="fNLQIlHYv7">【城市】物流状态2</h3>
|
||||
<p lc_id="+c6wEtOUg9">2016-07-11 10:00</p>
|
||||
<van-step >
|
||||
<h3 >【城市】物流状态2</h3>
|
||||
<p >2016-07-11 10:00</p>
|
||||
</van-step>
|
||||
<van-step lc_id="QI9TlJqg4d">
|
||||
<h3 lc_id="SNxEhUtkgJ">快件已发货</h3>
|
||||
<p lc_id="ylgm0GRWef">2016-07-10 09:30</p>
|
||||
<van-step >
|
||||
<h3 >快件已发货</h3>
|
||||
<p >2016-07-10 09:30</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
</div>
|
||||
<div lc_id="x6DAGm8RUd">
|
||||
<div class="demonstration" lc_id="f+IJrjShjq">Swipe 轮播:</div>
|
||||
<div >
|
||||
<div class="demonstration-vant" >Swipe 轮播:</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,48 +1,48 @@
|
||||
<template lc_id="DR/FNHZJqZ">
|
||||
<div lc_id="24bH5rQl2F">
|
||||
<div lc_id="atBtJKLyCm">
|
||||
<div class="demonstration" lc_id="3y9z9Z47GS">Form 表单:</div>
|
||||
<van-form @submit="onSubmit6" lc-mark lc_id="EoPM2ATNpm">
|
||||
<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" lc_id="O6Fgj8w4n+"></van-field>
|
||||
<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" lc_id="Nl0MYM/g3c"></van-field>
|
||||
<div style="margin: 16px" lc_id="vYJ3BRtChR">
|
||||
<van-button round block type="info" native-type="submit" lc_id="12PZA2vD3h">提交</van-button>
|
||||
<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 type="info" native-type="submit" >提交</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</div>
|
||||
<div lc_id="lxVHrXq9mC">
|
||||
<div class="demonstration" lc_id="3OFndHfiK5">Picker 选择器:</div>
|
||||
<van-picker title="标题" show-toolbar lc-mark :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" lc_id="4+c49EB0uo"></van-picker>
|
||||
<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 lc_id="weNmiZPmfp">
|
||||
<div class="demonstration" lc_id="nTCCJPPe/n">Rate 评分:</div>
|
||||
<van-rate v-model="value" lc-mark lc_id="g+Kzy5x4Kr"></van-rate>
|
||||
<van-rate v-model="value" lc-mark icon="like" void-icon="like-o" lc_id="MxdWTpo7dJ"></van-rate>
|
||||
<van-rate v-model="value" :size="25" lc-mark color="#ffd21e" void-icon="star" void-color="#eee" lc_id="eQFS/jI9vN"></van-rate>
|
||||
<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 lc_id="3zFCS7kerR">
|
||||
<div class="demonstration" lc_id="oAwKiWnxZl">Search 搜索:</div>
|
||||
<div style="padding: 10px 0" lc_id="qfsGkTShZq">
|
||||
<van-search v-model="search" lc-mark placeholder="请输入搜索关键词" lc_id="l075Jtm/om"></van-search>
|
||||
<div >
|
||||
<div class="demonstration-vant" >Search 搜索:</div>
|
||||
<div style="padding: 10px 0" >
|
||||
<van-search v-model="search" lc-mark placeholder="请输入搜索关键词" ></van-search>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="ItLEbBM1rI">
|
||||
<div class="demonstration" lc_id="XZBPfFQ+uy">Slider 滑块:</div>
|
||||
<div style="margin: 10px" lc_id="tYe6SFm8Yu">
|
||||
<van-slider v-model="slideValue" @change="onChange" lc-mark lc_id="vk2lGyAeE6"></van-slider>
|
||||
<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 lc_id="EJVe3qzssi">
|
||||
<div class="demonstration" lc_id="LsYGCLb+Ts">Stepper 步进器:</div>
|
||||
<van-stepper lc-mark v-model="stepValue" lc_id="g3HFG/X7Yd"></van-stepper>
|
||||
<div >
|
||||
<div class="demonstration-vant" >Stepper 步进器:</div>
|
||||
<van-stepper lc-mark v-model="stepValue" ></van-stepper>
|
||||
</div>
|
||||
<div lc_id="ixWu59Yzjp">
|
||||
<div class="demonstration" lc_id="k/ISKKGI7j">Switch 开关:</div>
|
||||
<van-switch v-model="checked" lc-mark lc_id="hejXKpBb9D"></van-switch>
|
||||
<div >
|
||||
<div class="demonstration-vant" >Switch 开关:</div>
|
||||
<van-switch v-model="checked" lc-mark ></van-switch>
|
||||
</div>
|
||||
<div lc_id="t7NvJp/fcO">
|
||||
<div class="demonstration" lc_id="jMArnyqQ+6">Uploader 文件上传:</div>
|
||||
<van-uploader :after-read="afterRead" lc-mark lc_id="DO92W3pSnQ"></van-uploader>
|
||||
<div >
|
||||
<div class="demonstration-vant" >Uploader 文件上传:</div>
|
||||
<van-uploader :after-read="afterRead" lc-mark ></van-uploader>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<template lc_id="buCUu1d58b">
|
||||
<div lc_id="uEiQoSrmzg">
|
||||
<div lc_id="QT9WOIWaUJ">
|
||||
<div class="demonstration" lc_id="9711eQE7am">Icon 图标:</div>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" lc_id="Run2VnoLy1"></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" lc_id="3GxS2lBm+/"></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" dot lc_id="3DJBDcXFsp"></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" badge="9" lc_id="SrGdRDY9l1"></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" badge="99+" lc_id="6da9fD+xan"></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" color="#1989fa" lc_id="vGPeeYDFOf"></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" color="#07c160" lc_id="u8bGaIb3Iv"></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" size="40" lc_id="/YhcBBIq2V"></van-icon>
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" size="3rem" lc_id="CQIJhVcxdG"></van-icon>
|
||||
<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>
|
||||
</div>
|
||||
<div lc_id="bTtcnahgWu">
|
||||
<div class="demonstration" lc_id="vU+6SnHqXN">Image 图片:</div>
|
||||
<van-image width="100" lc-mark height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" lc_id="IClLYJBlYl"></van-image>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template lc_id="cLaIuMlOl4">
|
||||
<div lc_id="KWTqwDzB/R">
|
||||
<lc-button lc_id="d+xMguf2UO"></lc-button>
|
||||
<lc-icon lc_id="d+xMguf2UO"></lc-icon>
|
||||
<lc-layout lc_id="d+xMguf2UO"></lc-layout>
|
||||
<lc-form lc_id="d+xMguf2UO"></lc-form>
|
||||
<lc-display lc_id="d+xMguf2UO"></lc-display>
|
||||
<lc-nav lc_id="d+xMguf2UO"></lc-nav>
|
||||
<template>
|
||||
<div class="vant-class">
|
||||
<lc-button></lc-button>
|
||||
<lc-icon></lc-icon>
|
||||
<lc-layout></lc-layout>
|
||||
<lc-form></lc-form>
|
||||
<lc-display></lc-display>
|
||||
<lc-nav></lc-nav>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -16,10 +16,19 @@ import form from "./form";
|
||||
import display from "./display";
|
||||
import nav from "./nav";
|
||||
|
||||
import { deepLCEle } from "@/utils/initRawComponent";
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
this.$emit('mounted');
|
||||
// 对所有拥有lc-mark的元素进行初始化
|
||||
deepLCEle(document.querySelector('.vant-class'), () => {
|
||||
});
|
||||
},
|
||||
methods: {},
|
||||
components: {
|
||||
"lc-button": button,
|
||||
@ -31,4 +40,37 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.demonstration-vant {
|
||||
font-size: 12px;
|
||||
color: #1f2f3d;
|
||||
padding: 10px 0 10px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.demonstration-vant::before {
|
||||
content: "";
|
||||
background-color: #b700ff;
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
margin-right: 4px;
|
||||
width: 3px;
|
||||
border-radius: 2px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.demonstration-vant::after {
|
||||
content: " :";
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.element-class [lc-mark] {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,53 +1,53 @@
|
||||
<template lc_id="9ADKEG1pY1">
|
||||
<div lc_id="5yOg2+GvFT">
|
||||
<div lc_id="oZO8tz/dyX">
|
||||
<div class="demonstration" lc_id="45N942KLtV">Field 输入框:</div>
|
||||
<div lc-mark lc_id="UqYjYx/KBX">
|
||||
<van-field lc-mark v-model="text" label="文本" lc_id="b7MgunEmTq"></van-field>
|
||||
<van-field lc-mark v-model="tel" type="tel" label="手机号" lc_id="Y7LZUxjdlN"></van-field>
|
||||
<van-field lc-mark v-model="digit" type="digit" label="整数" lc_id="5ewPYrE4HK"></van-field>
|
||||
<van-field lc-mark v-model="number" type="number" label="数字" lc_id="n0p/SokGmz"></van-field>
|
||||
<van-field lc-mark v-model="password" type="password" label="密码" lc_id="V9yh+GQKaQ"></van-field>
|
||||
<template >
|
||||
<div >
|
||||
<div >
|
||||
<div class="demonstration-vant" >Field 输入框:</div>
|
||||
<div lc-mark >
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="Ab1jH0X4NI">
|
||||
<div class="demonstration" lc_id="3AJt8tNokQ">DatetimePicker 时间选择:</div>
|
||||
<van-datetime-picker v-model="currentDate" type="date" title="选择年月日" lc-mark :min-date="minDate" :max-date="maxDate" lc_id="rezVLuvlUG"></van-datetime-picker>
|
||||
<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 lc_id="3BePuwECBJ">
|
||||
<div class="demonstration" lc_id="+fzSFTPIQF">Checkbox 复选框:</div>
|
||||
<van-checkbox-group lc-mark v-model="result" lc_id="XThMoK/vZb">
|
||||
<van-checkbox name="a" lc_id="xdXR9sKCbd">复选框 a</van-checkbox>
|
||||
<van-checkbox lc-mark name="b" lc_id="vFKoi6Funy">复选框 b</van-checkbox>
|
||||
<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 lc_id="7R09njyB3T">
|
||||
<div class="demonstration" lc_id="/HvpCxdspK">Checkbox 复选框(全选与反选):</div>
|
||||
<div lc-mark lc_id="YgXXhE7W+9">
|
||||
<van-checkbox-group lc-mark v-model="result" ref="checkboxGroup" lc_id="OiAgei1EXV">
|
||||
<van-checkbox lc-mark name="a" lc_id="sjbFCxxz/p">复选框 a</van-checkbox>
|
||||
<van-checkbox name="b" lc_id="yYVOOb/1RZ">复选框 b</van-checkbox>
|
||||
<van-checkbox name="c" lc_id="Rvj67audAF">复选框 c</van-checkbox>
|
||||
<div >
|
||||
<div class="demonstration-vant" >Checkbox 复选框(全选与反选):</div>
|
||||
<div lc-mark >
|
||||
<van-checkbox-group lc-mark v-model="result" ref="checkboxGroup" >
|
||||
<van-checkbox lc-mark name="a" >复选框 a</van-checkbox>
|
||||
<van-checkbox name="b" >复选框 b</van-checkbox>
|
||||
<van-checkbox name="c" >复选框 c</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
<van-button type="primary" @click="checkAll" lc_id="U9K6s0pyvI">全选</van-button>
|
||||
<van-button type="info" @click="toggleAll" lc_id="eZ3mkc4ICh">反选</van-button>
|
||||
<van-button type="primary" @click="checkAll" >全选</van-button>
|
||||
<van-button type="info" @click="toggleAll" >反选</van-button>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="LBjqkyrXOs">
|
||||
<van-radio-group lc-mark v-model="radio10" lc_id="ovdGBkUOvJ">
|
||||
<van-radio name="1" lc_id="DbM//NurKd">单选框 1</van-radio>
|
||||
<van-radio lc-mark name="2" lc_id="VPyOFHQGBT">单选框 2</van-radio>
|
||||
<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>
|
||||
<van-radio-group lc-mark v-model="radio10" lc_id="J084nRkBWL">
|
||||
<van-cell-group lc_id="WGL/0JlEj5">
|
||||
<van-cell title="单选框 1" clickable @click="radio10 = '1'" lc-mark lc_id="HzMpjZ1KWJ">
|
||||
<template #right-icon lc_id="Z0oAjYoh4X">
|
||||
<van-radio name="1" lc_id="KC5SvVU1VV"></van-radio>
|
||||
<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'" lc_id="8mHXYj/eYJ">
|
||||
<template #right-icon lc_id="qZNXcxntEt">
|
||||
<van-radio name="2" lc_id="qTnex0Yi0c"></van-radio>
|
||||
<van-cell title="单选框 2" clickable @click="radio10 = '2'" >
|
||||
<template #right-icon >
|
||||
<van-radio name="2" ></van-radio>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
@ -1,58 +1,58 @@
|
||||
<template lc_id="cXvT1i980p">
|
||||
<div lc_id="X0BwmaUAxL">
|
||||
<div lc_id="n4yYeTlfY4">
|
||||
<div class="demonstration" lc_id="BOnp97LdtY">Grid 宫格:</div>
|
||||
<van-grid lc-mark lc_id="KIRH5zo4f+">
|
||||
<van-grid-item icon="photo-o" text="文字" lc_id="6YkIklY8ta"></van-grid-item>
|
||||
<van-grid-item icon="photo-o" text="文字" lc_id="gyTy8f9nCD"></van-grid-item>
|
||||
<van-grid-item icon="photo-o" text="文字" lc_id="FFcQt8w+4R"></van-grid-item>
|
||||
<van-grid-item icon="photo-o" text="文字" lc_id="u+YiM7S0jY"></van-grid-item>
|
||||
<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 lc_id="grQOCzxbL5">
|
||||
<div class="demonstration" lc_id="GtLNeycbRR">NavBar 导航栏:</div>
|
||||
<van-nav-bar lc-mark title="标题" left-text="返回" right-text="按钮" left-arrow @click-left="onClickLeft" @click-right="onClickRight" lc_id="o2Bx7VRupj"></van-nav-bar>
|
||||
<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 lc_id="aZfDbteP8j">
|
||||
<div class="demonstration" lc_id="gOwjJFiVHX">Pagination 分页:</div>
|
||||
<van-pagination lc-mark v-model="currentPage13" :total-items="24" :items-per-page="5" lc_id="JPSbzVOqgO"></van-pagination>
|
||||
<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 lc_id="bCbmHKbI4C">
|
||||
<div class="demonstration" lc_id="IDaSkB87oz">Sidebar 侧边导航:</div>
|
||||
<van-sidebar v-model="activeKey" lc-mark lc_id="cd4yhlW7dc">
|
||||
<van-sidebar-item title="标签名称" lc_id="WEtUoMeZRw"></van-sidebar-item>
|
||||
<van-sidebar-item title="标签名称" lc_id="dWgUFMU7QR"></van-sidebar-item>
|
||||
<van-sidebar-item title="标签名称" lc_id="vgc/DSO3og"></van-sidebar-item>
|
||||
<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 lc_id="20kdf/wHf2">
|
||||
<div class="demonstration" lc_id="RhlhJnJlZ/">Tab 标签页:</div>
|
||||
<van-tabs v-model="active14" lc-mark lc_id="x8BVTEVknI">
|
||||
<van-tab title="标签 1" lc_id="Lu3R2bRF6w">内容 1</van-tab>
|
||||
<van-tab title="标签 2" lc_id="SGRrNbkZFH">内容 2</van-tab>
|
||||
<van-tab title="标签 3" lc_id="fiHxwXV8sJ">内容 3</van-tab>
|
||||
<van-tab title="标签 4" lc_id="5jbS7SyIuT">内容 4</van-tab>
|
||||
<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 lc_id="pRxqHtWksq">
|
||||
<div class="demonstration" lc_id="r6Qy4cUMZH">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="JSiWJi2Jzx"></van-address-edit>
|
||||
<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 lc_id="+hc18rAu2j">
|
||||
<div class="demonstration" lc_id="1Afn2SvF1w">AddressList 地址列表:</div>
|
||||
<van-address-list v-model="chosenAddressId" :list="list15" lc-mark :disabled-list="disabledList" disabled-text="以下地址超出配送范围" default-tag-text="默认" @add="onAdd" @edit="onEdit" lc_id="r3IXN9UTnm"></van-address-list>
|
||||
<div >
|
||||
<div class="demonstration-vant" >AddressList 地址列表:</div>
|
||||
<van-address-list v-model="chosenAddressId" :list="list15" lc-mark :disabled-list="disabledList" disabled-text="以下地址超出配送范围" default-tag-text="默认" @add="onAdd" @edit="onEdit" ></van-address-list>
|
||||
</div>
|
||||
<div lc_id="4z0Td0HLQT">
|
||||
<div class="demonstration" lc_id="n4/MdzZ0cQ">Card 商品卡片:</div>
|
||||
<van-card num="2" lc-mark price="2" desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/ipad.jpeg" lc_id="euVRsjNydZ"></van-card>
|
||||
<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 lc_id="OoRJeoqMiv">
|
||||
<div class="demonstration" lc_id="N5I4uAdZ2j">GoodsAction 商品导航:</div>
|
||||
<van-goods-action lc-mark lc_id="So8UtQrmBd">
|
||||
<van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" lc_id="mClYYrSaDz"></van-goods-action-icon>
|
||||
<van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" lc_id="4w4PyCAiMx"></van-goods-action-icon>
|
||||
<van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" lc_id="5lLRWSSG6s"></van-goods-action-icon>
|
||||
<van-goods-action-button type="danger" text="立即购买" @click="onClickButton" lc_id="nNiv7kfP30"></van-goods-action-button>
|
||||
<div >
|
||||
<div class="demonstration-vant" >ActionBar 行动栏:</div>
|
||||
<van-goods-action lc-mark >
|
||||
<van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" ></van-action-bar-icon>
|
||||
<van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" ></van-action-bar-icon>
|
||||
<van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" ></van-action-bar-icon>
|
||||
<van-goods-action-button type="danger" text="立即购买" @click="onClickButton" ></van-goods-action-button>
|
||||
</van-goods-action>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template lc_id="oSWUNmphiV">
|
||||
<div lc_id="h9tOtp339p">
|
||||
<div lc_id="pbritb3+Ki">
|
||||
<div class="demonstration" lc_id="bj+/VKuHNo">NumberKeyboard 数字键盘:</div>
|
||||
<template >
|
||||
<div >
|
||||
<div >
|
||||
<div class="demonstration-vant" >NumberKeyboard 数字键盘:</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user