mirror of
https://github.com/sahadev/vue-component-creater-ui.git
synced 2025-07-01 14:02:46 +08:00
update: vant组件确认完
This commit is contained in:
shangbin
parent
e8db3e31b4
commit
4829c39f42
@ -45,7 +45,8 @@
|
||||
<van-cell title="单元格" value="内容" />
|
||||
<van-cell title="单元格" value="内容" label="描述信息" />
|
||||
</van-cell-group>
|
||||
<van-cell-group inset>
|
||||
<br>
|
||||
<van-cell-group inset lc-mark>
|
||||
<van-cell title="单元格" value="内容" />
|
||||
<van-cell title="单元格" value="内容" label="描述信息" />
|
||||
</van-cell-group>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template >
|
||||
<div>
|
||||
<div>
|
||||
<div class="demonstration-vant" >Collapse 折叠面板:</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>
|
||||
@ -9,7 +9,7 @@
|
||||
</van-collapse>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant" >CountDown 倒计时:</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>
|
||||
@ -23,7 +23,7 @@
|
||||
</van-count-down>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant" >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>
|
||||
@ -31,36 +31,37 @@
|
||||
<van-divider lc-mark :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">文字</van-divider>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant" >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>
|
||||
<div class="demonstration-vant" >List 列表:</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>
|
||||
<div class="demonstration-vant" >NoticeBar 通知栏:</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>
|
||||
<div class="demonstration-vant" >Progress 进度条:</div>
|
||||
<div class="demonstration-vant">Progress 进度条</div>
|
||||
<div style="margin: 20px 0">
|
||||
<van-progress :percentage="50" lc-mark></van-progress>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant" >Skeleton 骨架屏:</div>
|
||||
<div class="demonstration-vant">Skeleton 骨架屏</div>
|
||||
<van-skeleton title :row="3" lc-mark></van-skeleton>
|
||||
<br>
|
||||
<van-skeleton title avatar :row="3" lc-mark></van-skeleton>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant" >Steps 步骤条:</div>
|
||||
<div class="demonstration-vant">Steps 步骤条</div>
|
||||
<van-steps :active="active" lc-mark>
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
@ -83,7 +84,15 @@
|
||||
</van-steps>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant" >Swipe 轮播:</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>
|
||||
</van-swipe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -108,7 +117,8 @@ export default {
|
||||
onLoad() { },
|
||||
},
|
||||
}; </script>
|
||||
<style scoped>.colon {
|
||||
<style scoped>
|
||||
.colon {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
color: #ee0a24;
|
||||
@ -127,4 +137,5 @@ export default {
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
background-color: #39a9ed;
|
||||
}</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,47 +1,50 @@
|
||||
<template >
|
||||
<div>
|
||||
<div>
|
||||
<div class="demonstration-vant" >Form 表单:</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>
|
||||
<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>
|
||||
<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 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>
|
||||
<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 class="demonstration-vant">Search 搜索</div>
|
||||
<div style="padding: 10px 0">
|
||||
<van-search v-model="search" lc-mark placeholder="请输入搜索关键词"></van-search>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant" >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>
|
||||
<div class="demonstration-vant" >Stepper 步进器:</div>
|
||||
<div class="demonstration-vant">Stepper 步进器</div>
|
||||
<van-stepper lc-mark v-model="stepValue"></van-stepper>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant" >Switch 开关:</div>
|
||||
<div class="demonstration-vant">Switch 开关</div>
|
||||
<van-switch v-model="checked" lc-mark></van-switch>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant" >Uploader 文件上传:</div>
|
||||
<div class="demonstration-vant">Uploader 文件上传</div>
|
||||
<van-uploader :after-read="afterRead" lc-mark></van-uploader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template >
|
||||
<div >
|
||||
<div >
|
||||
<div class="demonstration-vant" >Icon 图标:</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>
|
||||
@ -13,7 +13,7 @@
|
||||
<van-icon lc-mark class="icon-c" name="chat-o" size="3rem" ></van-icon>
|
||||
</div>
|
||||
<div >
|
||||
<div class="demonstration-vant" >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>
|
||||
|
||||
@ -54,7 +54,7 @@ export default {
|
||||
|
||||
.demonstration-vant::before {
|
||||
content: "";
|
||||
background-color: #b700ff;
|
||||
background-color: #0004ff;
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
margin-right: 4px;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template >
|
||||
<div>
|
||||
<div>
|
||||
<div class="demonstration-vant" >Field 输入框:</div>
|
||||
<div lc-mark >
|
||||
<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>
|
||||
@ -11,33 +11,38 @@
|
||||
</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 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>
|
||||
<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 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-group v-model="result" ref="checkboxGroup">
|
||||
<van-checkbox name="a">复选框 a</van-checkbox>
|
||||
<van-checkbox name="b">复选框 b</van-checkbox>
|
||||
<van-checkbox name="c" >复选框 c</van-checkbox>
|
||||
<van-checkbox lc-mark name="c">复选框 c</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
<van-button type="primary" @click="checkAll" >全选</van-button>
|
||||
<van-button type="info" @click="toggleAll" >反选</van-button>
|
||||
<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>
|
||||
@ -54,6 +59,7 @@
|
||||
</van-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="demonstration-vant" >Grid 宫格:</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>
|
||||
@ -10,15 +10,16 @@
|
||||
</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 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>
|
||||
<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>
|
||||
<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>
|
||||
@ -26,7 +27,7 @@
|
||||
</van-sidebar>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demonstration-vant" >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>
|
||||
@ -35,25 +36,30 @@
|
||||
</van-tabs>
|
||||
</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 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>
|
||||
</div>
|
||||
</div>
|
||||
<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 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 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-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 class="demonstration-vant">ActionBar 行动栏</div>
|
||||
<van-submit-bar style="position: relative;" lc-mark :price="3050" button-text="提交订单" @submit="onSubmit" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -132,18 +138,22 @@ export default {
|
||||
}
|
||||
},
|
||||
onSubmit11() { },
|
||||
onClickEditAddress(){}
|
||||
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) {
|
||||
position: initial;
|
||||
}
|
||||
:v-deep(.van-goods-action) {
|
||||
position: initial;
|
||||
position: relative;
|
||||
}
|
||||
:v-deep(.van-submit-bar) {
|
||||
position: initial;
|
||||
}</style>
|
||||
}
|
||||
.van-action-bar {
|
||||
position: relative;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template >
|
||||
<div >
|
||||
<div >
|
||||
<div class="demonstration-vant" >NumberKeyboard 数字键盘:</div>
|
||||
<div class="demonstration-vant" >NumberKeyboard 数字键盘</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user