1
0
mirror of https://github.com/sahadev/vue-component-creater-ui.git synced 2025-06-06 21:14:03 +08:00

update: vant vue3

This commit is contained in:
shangbin 2021-12-13 18:59:42 +08:00
parent ba575244e1
commit 91d43465cc
12 changed files with 364 additions and 275 deletions

27
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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")),
},
};

View File

@ -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();

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>