first commit
This commit is contained in:
编码猿
1
vue-ydui/example/routers/.pydio
Normal file
1
vue-ydui/example/routers/.pydio
Normal file
@@ -0,0 +1 @@
|
||||
00b86695-ba20-4e92-9c33-f5104e30dd39
|
||||
55
vue-ydui/example/routers/accordion.vue
Normal file
55
vue-ydui/example/routers/accordion.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<yd-layout title="Accordion">
|
||||
|
||||
<yd-accordion class="demo-small-pitch">
|
||||
<yd-accordion-item title="李白《月下独酌》">
|
||||
<div style="padding: .24rem;">
|
||||
<p>花间一壶酒，独酌无相亲。</p>
|
||||
<p>举杯邀明月，对影成三人。</p>
|
||||
<p>月既不解饮，影徒随我身。</p>
|
||||
<p>暂伴月将影，行乐须及春。</p>
|
||||
<p>我歌月徘徊，我舞影零乱。</p>
|
||||
<p>醒时同交欢，醉后各分散。</p>
|
||||
<p>永结无情游，相期邈云汉。</p>
|
||||
</div>
|
||||
</yd-accordion-item>
|
||||
<yd-accordion-item title="杜甫《望岳》">
|
||||
<div style="padding: .24rem;">
|
||||
<p>岱宗夫如何，齐鲁青未了。</p>
|
||||
<p>造化钟神秀，阴阳割昏晓。</p>
|
||||
<p>荡胸生层云，决眦入归鸟。</p>
|
||||
<p>会当凌绝顶，一览众山小。</p>
|
||||
</div>
|
||||
</yd-accordion-item>
|
||||
<yd-accordion-item title="王维《青溪》">
|
||||
<div style="padding: .24rem;">
|
||||
<p>言入黄花川，每逐青溪水。</p>
|
||||
<p>随山将万转，趣途无百里。</p>
|
||||
<p>声喧乱石中，色静深松里。</p>
|
||||
<p>漾漾泛菱荇，澄澄映葭苇。</p>
|
||||
<p>我心素已闲，清川澹如此。</p>
|
||||
<p>请留盘石上，垂钓将已矣。</p>
|
||||
</div>
|
||||
</yd-accordion-item>
|
||||
</yd-accordion>
|
||||
|
||||
<yd-accordion class="demo-small-pitch" accordion>
|
||||
<yd-accordion-item title="李白" open>
|
||||
<div style="padding: .24rem;">
|
||||
李白（701年－762年），字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。其人爽朗大方，爱饮酒作诗，喜交友。
|
||||
</div>
|
||||
</yd-accordion-item>
|
||||
<yd-accordion-item title="杜甫">
|
||||
<div style="padding: .24rem;">
|
||||
杜甫（712年—770年），字子美，汉族，本襄阳人，后徙河南巩县。自号少陵野老，唐代伟大的现实主义诗人，与李白合称“李杜”。为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”，杜甫也常被称为“老杜”。
|
||||
</div>
|
||||
</yd-accordion-item>
|
||||
<yd-accordion-item title="王维">
|
||||
<div style="padding: .24rem;">
|
||||
王维（701年－761年，一说699年—761年），河东蒲州（今山西运城）人，祖籍山西祁县。唐朝著名诗人、画家，字摩诘，号摩诘居士。
|
||||
</div>
|
||||
</yd-accordion-item>
|
||||
</yd-accordion>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
57
vue-ydui/example/routers/actionsheet.vue
Normal file
57
vue-ydui/example/routers/actionsheet.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<yd-layout title="ActionSheet">
|
||||
|
||||
<yd-button-group>
|
||||
<yd-button @click.native="show1 = true" size="large">带取消</yd-button>
|
||||
<yd-button @click.native="show2 = true" size="large" type="warning">不带取消</yd-button>
|
||||
</yd-button-group>
|
||||
|
||||
<yd-actionsheet :items="myItems1" v-model="show1" cancel="取消"></yd-actionsheet>
|
||||
|
||||
<yd-actionsheet :items="myItems2" v-model="show2"></yd-actionsheet>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
myItems1: [
|
||||
{
|
||||
label: '拍照',
|
||||
callback: () => {
|
||||
this.$dialog.toast({mes: '咔擦，此人太帅！', timeout: 1000});
|
||||
//注意： callback: function() {} 和 callback() {} 这样是无法正常使用当前this的
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '从相册中偷取',
|
||||
callback: () => {
|
||||
this.$dialog.toast({mes: '看到了不该看到的东西！', timeout: 1000});
|
||||
}
|
||||
}
|
||||
],
|
||||
myItems2: [
|
||||
{
|
||||
label: '示例菜单一 - 我是不会关闭的',
|
||||
callback: () => {
|
||||
this.$dialog.toast({mes: 'Say: 我是不会关闭的！', timeout: 1000});
|
||||
},
|
||||
stay: true // 不关闭
|
||||
},
|
||||
{
|
||||
label: '示例菜单二 - 自动关闭',
|
||||
callback: () => {
|
||||
this.$dialog.toast({mes: 'Say: 我关闭啦啦啦！', timeout: 1000});
|
||||
}
|
||||
},
|
||||
{label: '示例菜单三 - 自动关闭'},
|
||||
{label: '示例菜单四 - 自动关闭'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
14
vue-ydui/example/routers/asidebar.vue
Normal file
14
vue-ydui/example/routers/asidebar.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<yd-layout title="AsideBar">
|
||||
|
||||
<yd-cell-group class="demo-small-pitch">
|
||||
<yd-cell-item arrow type="link" href="/navbar">
|
||||
<span slot="left">NavBar</span>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item arrow type="link" href="/tabbar">
|
||||
<span slot="left">TabBar</span>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
14
vue-ydui/example/routers/backtop.vue
Normal file
14
vue-ydui/example/routers/backtop.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<yd-layout title="BackTop">
|
||||
<p v-for="n in 150" style="padding: .1rem .24rem;">{{n}} - 啦啦啦啦啦啦啦啦</p>
|
||||
|
||||
<yd-backtop></yd-backtop>
|
||||
|
||||
<yd-backtop right="80px">
|
||||
<div class="demo-backtop">
|
||||
<span>自定义图片</span>
|
||||
<img src="https://storage.360buyimg.com/i.imageUpload/d7a8caf4c9e8bcc631343933373831333530383530_mid.jpg">
|
||||
</div>
|
||||
</yd-backtop>
|
||||
</yd-layout>
|
||||
</template>
|
||||
53
vue-ydui/example/routers/badge.vue
Normal file
53
vue-ydui/example/routers/badge.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<yd-layout title="Badge">
|
||||
<aside class="demo-tip">
|
||||
<p>badge包含默认圆形样式和方形样式</p>
|
||||
<p>五中颜色：default/primary/danger/warning/hollow</p>
|
||||
</aside>
|
||||
|
||||
<div class="demo-badege">
|
||||
<div class="demo-badege-title">圆形角标：</div>
|
||||
<div class="demo-small-pitch">
|
||||
<yd-badge>1</yd-badge>
|
||||
<yd-badge type="primary">2</yd-badge>
|
||||
<yd-badge type="danger">3</yd-badge>
|
||||
<yd-badge type="warning">4</yd-badge>
|
||||
<yd-badge type="hollow">5</yd-badge>
|
||||
</div>
|
||||
|
||||
<div class="demo-small-pitch">
|
||||
<yd-badge>123</yd-badge>
|
||||
<yd-badge type="primary">321</yd-badge>
|
||||
<yd-badge type="danger">333</yd-badge>
|
||||
<yd-badge type="warning">4444</yd-badge>
|
||||
<yd-badge type="hollow">55555</yd-badge>
|
||||
<yd-badge bgcolor="#000" color="#FFF">custom color</yd-badge>
|
||||
</div>
|
||||
|
||||
<div class="demo-badege-title">方形角标：</div>
|
||||
<div class="demo-small-pitch">
|
||||
<yd-badge shape="square">1</yd-badge>
|
||||
<yd-badge shape="square" type="primary">2</yd-badge>
|
||||
<yd-badge shape="square" type="danger">3</yd-badge>
|
||||
<yd-badge shape="square" type="warning">4</yd-badge>
|
||||
<yd-badge shape="square" type="hollow">5</yd-badge>
|
||||
</div>
|
||||
|
||||
<div class="demo-small-pitch">
|
||||
<yd-badge shape="square">123</yd-badge>
|
||||
<yd-badge shape="square" type="primary">321</yd-badge>
|
||||
<yd-badge shape="square" type="danger">333</yd-badge>
|
||||
<yd-badge shape="square" type="warning">4444</yd-badge>
|
||||
<yd-badge shape="square" type="hollow">55555</yd-badge>
|
||||
<yd-badge shape="square" bgcolor="#000" color="#FFF">custom color</yd-badge>
|
||||
</div>
|
||||
|
||||
<div class="demo-badege-title">缩放角标：</div>
|
||||
<div class="demo-small-pitch">
|
||||
<yd-badge scale=".7" type="danger">1</yd-badge>
|
||||
<yd-badge scale="1.2" type="danger">666</yd-badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
34
vue-ydui/example/routers/button.vue
Normal file
34
vue-ydui/example/routers/button.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<yd-layout title="Button">
|
||||
<yd-button-group class="demo-pitch">
|
||||
|
||||
<yd-button type="primary" size="mini">mini</yd-button>
|
||||
<yd-button type="primary" size="mini" loading>mini</yd-button>
|
||||
<yd-button type="danger" size="mini">mini</yd-button>
|
||||
<yd-button type="warning" size="mini">mini</yd-button>
|
||||
<yd-button type="hollow" size="mini">mini</yd-button>
|
||||
|
||||
<div style="height: .5rem;"></div>
|
||||
|
||||
<yd-button type="primary">primary</yd-button>
|
||||
<yd-button type="primary" loading>loading</yd-button>
|
||||
<yd-button type="danger">danger</yd-button>
|
||||
<yd-button type="warning">warning</yd-button>
|
||||
<yd-button type="hollow">hollow</yd-button>
|
||||
|
||||
<yd-button size="large" type="primary">primary</yd-button>
|
||||
<yd-button size="large" type="primary" loading loading-txt="缓慢提交中...">loading</yd-button>
|
||||
<yd-button size="large" type="danger">danger</yd-button>
|
||||
<yd-button size="large" type="warning">warning</yd-button>
|
||||
<yd-button size="large" type="disabled" disabled>disabled</yd-button>
|
||||
<yd-button size="large" type="hollow">hollow</yd-button>
|
||||
|
||||
<yd-button size="large" type="primary" shape="circle">shape="circle"</yd-button>
|
||||
<yd-button size="large" type="primary" shape="angle">shape="angle"</yd-button>
|
||||
<yd-button size="large" type="hollow" shape="circle">shape="circle"</yd-button>
|
||||
<yd-button size="large" type="hollow" shape="angle">shape="angle"</yd-button>
|
||||
|
||||
</yd-button-group>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
144
vue-ydui/example/routers/cell.vue
Normal file
144
vue-ydui/example/routers/cell.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
|
||||
<yd-layout title="Cell">
|
||||
|
||||
<yd-cell-group class="demo-small-pitch">
|
||||
<yd-cell-item>
|
||||
<span slot="left">姓名：</span>
|
||||
<input slot="right" type="text" placeholder="请输入您的姓名">
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item arrow>
|
||||
<input slot="right" type="text" placeholder="请输入您的姓名">
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item>
|
||||
<span slot="left">配送方式</span>
|
||||
<span slot="right">顺丰快递</span>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="带图标的">
|
||||
<yd-cell-item>
|
||||
<i slot="icon" class="demo-icons-phone"></i>
|
||||
<input slot="right" type="number" pattern="[0-9]*" placeholder="请输入手机号码" autocomplete="off">
|
||||
<yd-button slot="right" type="warning">获取短信验证码</yd-button>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item href="#" type="link">
|
||||
<i slot="icon" class="demo-icons-like"></i>
|
||||
<span slot="left">我的收藏</span>
|
||||
|
||||
<span slot="right"><yd-badge type="danger" scale=".85">8</yd-badge></span>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item arrow href="tel:400-888-8888" type="a">
|
||||
<i slot="icon" class="demo-icons-tel"></i>
|
||||
<span slot="left">联系客服</span>
|
||||
|
||||
<span slot="right">400-888-8888</span>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item href="#" arrow>
|
||||
<i slot="icon" class="demo-icons-order"></i>
|
||||
<span slot="left">我的订单</span>
|
||||
|
||||
<span slot="right">查看全部订单</span>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item href="#" arrow type="link">
|
||||
<img slot="icon" src="http://static.ydcss.com/ydui/img/logo.png">
|
||||
<span slot="left">图标</span>
|
||||
|
||||
<span slot="right">图标是image</span>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="下拉框">
|
||||
<yd-cell-item arrow type="label">
|
||||
<select slot="right">
|
||||
<option value="">支付方式</option>
|
||||
<option value="1">支付宝</option>
|
||||
<option value="2">微信</option>
|
||||
<option value="3">财付通</option>
|
||||
</select>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item arrow>
|
||||
<span slot="left">性别：</span>
|
||||
<select slot="right">
|
||||
<option value="">请选择性别</option>
|
||||
<option value="1">男</option>
|
||||
<option value="2">女</option>
|
||||
<option value="3">未知</option>
|
||||
</select>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="多选">
|
||||
<yd-cell-item type="checkbox">
|
||||
<span slot="left">多选一</span>
|
||||
<input slot="right" type="checkbox" value="Han MeiMei" v-model="checkedNames"/>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item type="checkbox">
|
||||
<span slot="left">多选二</span>
|
||||
<input slot="right" type="checkbox" value="Li Lei" v-model="checkedNames"/>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item type="checkbox">
|
||||
<span slot="left">多选三</span>
|
||||
<input slot="right" type="checkbox" value="Jim Green" v-model="checkedNames"/>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item>
|
||||
<span slot="left">选中的值：</span>
|
||||
<span slot="right">{{checkedNames}}</span>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="单选">
|
||||
<yd-cell-item type="radio">
|
||||
<span slot="left">单选一</span>
|
||||
<input slot="right" type="radio" value="Lili" v-model="picked"/>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item type="radio">
|
||||
<span slot="left">单选二</span>
|
||||
<input slot="right" type="radio" value="Lucy" v-model="picked"/>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item>
|
||||
<span slot="left">选中的值：</span>
|
||||
<span slot="right">{{picked}}</span>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="复选框">
|
||||
<yd-cell-item type="label">
|
||||
<div slot="left">设为默认地址 - {{ydswitch}}</div>
|
||||
<yd-switch slot="right" v-model="ydswitch"></yd-switch>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="文本域">
|
||||
<yd-cell-item>
|
||||
<yd-textarea slot="right" placeholder="请输入您的银行卡卡号和密码" maxlength="100"></yd-textarea>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
</yd-layout>
|
||||
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkedNames: ['Han MeiMei'],
|
||||
picked: 'Lucy',
|
||||
ydswitch: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
107
vue-ydui/example/routers/checkbox.vue
Normal file
107
vue-ydui/example/routers/checkbox.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<yd-layout>
|
||||
<yd-navbar slot="navbar" title="CheckBox">
|
||||
<router-link to="/cr" slot="left">
|
||||
<yd-navbar-back-icon></yd-navbar-back-icon>
|
||||
</router-link>
|
||||
</yd-navbar>
|
||||
|
||||
<div class="yd-cell-title demo-small-pitch">单独使用 - {{checkbox1}}</div>
|
||||
<yd-cell-group>
|
||||
<yd-cell-item>
|
||||
<yd-checkbox v-model="checkbox1" slot="left">啦啦啦啦</yd-checkbox>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<div class="yd-cell-title">true-value & false-value - {{checkbox2}}</div>
|
||||
<yd-cell-group>
|
||||
<yd-cell-item>
|
||||
<yd-checkbox v-model="checkbox2" slot="left" true-value="aaa" false-value="bbb">啦啦啦啦</yd-checkbox>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<div class="yd-cell-title">值和标签一致 -> {{checkbox3}}</div>
|
||||
<yd-cell-group>
|
||||
<yd-cell-item>
|
||||
<yd-checkbox-group v-model="checkbox3" slot="left" :callback="fn">
|
||||
<yd-checkbox val="啦啦啦"></yd-checkbox>
|
||||
<yd-checkbox val="啊啊啊"></yd-checkbox>
|
||||
<yd-checkbox val="喔喔喔"></yd-checkbox>
|
||||
</yd-checkbox-group>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<div class="yd-cell-title">值和标签不同 -> {{checkbox4}}</div>
|
||||
<yd-cell-group>
|
||||
<yd-cell-item>
|
||||
<yd-checkbox-group v-model="checkbox4" slot="left">
|
||||
<yd-checkbox val="1">啦啦啦</yd-checkbox>
|
||||
<yd-checkbox val="2">啊啊啊</yd-checkbox>
|
||||
<yd-checkbox val="3">喔喔喔</yd-checkbox>
|
||||
</yd-checkbox-group>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="禁用">
|
||||
<yd-cell-item>
|
||||
<yd-checkbox-group v-model="checkbox5" slot="left">
|
||||
<yd-checkbox val="1">啦啦啦</yd-checkbox>
|
||||
<yd-checkbox val="2" disabled>啊啊啊</yd-checkbox>
|
||||
<yd-checkbox val="3" disabled>喔喔喔</yd-checkbox>
|
||||
</yd-checkbox-group>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="自定义图标颜色">
|
||||
<yd-cell-item>
|
||||
<yd-checkbox-group v-model="checkbox6" slot="left" color="#F00">
|
||||
<yd-checkbox val="1">啦啦啦</yd-checkbox>
|
||||
<yd-checkbox val="2">啊啊啊</yd-checkbox>
|
||||
<yd-checkbox val="3">喔喔喔</yd-checkbox>
|
||||
</yd-checkbox-group>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="圆形图标">
|
||||
<yd-cell-item>
|
||||
<yd-checkbox-group v-model="checkbox7" slot="left">
|
||||
<yd-checkbox val="1" shape="circle">啦啦啦</yd-checkbox>
|
||||
<yd-checkbox val="2" shape="circle">啊啊啊</yd-checkbox>
|
||||
<yd-checkbox val="3" shape="circle">喔喔喔</yd-checkbox>
|
||||
</yd-checkbox-group>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="自定义图标大小">
|
||||
<yd-cell-item>
|
||||
<yd-checkbox-group v-model="checkbox8" slot="left" size="30">
|
||||
<yd-checkbox val="1"><span style="font-size: 24px;">男</span></yd-checkbox>
|
||||
<yd-checkbox val="2"><span style="font-size: 24px;">女</span></yd-checkbox>
|
||||
<yd-checkbox val="3"><span style="font-size: 24px;">未知</span></yd-checkbox>
|
||||
</yd-checkbox-group>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true,
|
||||
checkbox2: 'aaa',
|
||||
checkbox3: [],
|
||||
checkbox4: ["2"],
|
||||
checkbox5: ["1"],
|
||||
checkbox6: ["1"],
|
||||
checkbox7: ["3"],
|
||||
checkbox8: ["3"],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
76
vue-ydui/example/routers/checklist.vue
Normal file
76
vue-ydui/example/routers/checklist.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<yd-layout title="CheckList">
|
||||
|
||||
<div style="padding-left:12px;margin-bottom: 10px;" class="demo-small-pitch">
|
||||
<yd-checkbox v-model="isCheckAll" shape="circle" :change="checkAll">全选 {{isCheckAll}} - <span style="font-size: 12px;">结合yd-checkbox组件实现全选</span></yd-checkbox>
|
||||
</div>
|
||||
<yd-checklist v-model="checklist1" ref="checklistDemo" :callback="change">
|
||||
<yd-checklist-item val="1">
|
||||
<div style="height: 50px;line-height: 50px;">1 -- 值：{{checklist1}}</div>
|
||||
</yd-checklist-item>
|
||||
<yd-checklist-item val="2">
|
||||
<div style="height: 50px;line-height: 50px;">2</div>
|
||||
</yd-checklist-item>
|
||||
<yd-checklist-item val="3">
|
||||
<div style="height: 50px;line-height: 50px;">3</div>
|
||||
</yd-checklist-item>
|
||||
</yd-checklist>
|
||||
|
||||
<yd-checklist v-model="checklist2" class="demo-small-pitch" :label="false" :callback="fn">
|
||||
<yd-checklist-item val="aaa" :change="handleChange">
|
||||
<yd-flexbox style="padding: 15px 0;">
|
||||
<img src="//img12.360buyimg.com/n1/jfs/t2122/170/1006550413/171711/de099a6f/56399d01N67907749.jpg" class="demo-checklist-img">
|
||||
<yd-flexbox-item align="top">
|
||||
[aaa] 类似购物车 / 类似购物车<br/>
|
||||
<span style="color: blue;">点击这边的内容是禁止选中的</span><br/>
|
||||
<p style="color:#F00;">选中值：{{checklist2}}</p>
|
||||
</yd-flexbox-item>
|
||||
</yd-flexbox>
|
||||
</yd-checklist-item>
|
||||
<yd-checklist-item val="bbb" :change="handleChange">
|
||||
<yd-flexbox style="padding: 15px 0;">
|
||||
<img src="//img10.360buyimg.com/n1/jfs/t6925/75/2382158459/437865/f3931d24/598be5b1N24d949fe.jpg" class="demo-checklist-img">
|
||||
<yd-flexbox-item align="top">
|
||||
[bbb] 南非进口红西柚 6个 单果重约300-330g 新鲜水果
|
||||
</yd-flexbox-item>
|
||||
</yd-flexbox>
|
||||
</yd-checklist-item>
|
||||
<yd-checklist-item val="ccc" :change="handleChange">
|
||||
<yd-flexbox style="padding: 15px 0;">
|
||||
<img src="//img14.360buyimg.com/n1/jfs/t3232/69/539717695/176729/cf1ff3d8/57baa5d1N901ffea5.jpg" class="demo-checklist-img">
|
||||
<yd-flexbox-item align="top">
|
||||
[ccc] 展卉 越南进口红心火龙果 3个装中果 单果约300~350g 新鲜水果
|
||||
</yd-flexbox-item>
|
||||
</yd-flexbox>
|
||||
</yd-checklist-item>
|
||||
</yd-checklist>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checklist1: [1],
|
||||
checklist2: [],
|
||||
isCheckAll: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn(val, isCheckAll) {
|
||||
console.log('来自 yd-checklist 的回调：是否全选：' + isCheckAll, '当前所选值是：' + JSON.stringify(val));
|
||||
},
|
||||
handleChange(val, isCheck) {
|
||||
console.log('来自 yd-checklist-item 的回调：是否选中：' + isCheck, '值是：' + JSON.stringify(val));
|
||||
},
|
||||
change(value, isCheckAll) {
|
||||
this.isCheckAll = isCheckAll;
|
||||
},
|
||||
checkAll() {
|
||||
this.isCheckAll = !this.isCheckAll;
|
||||
this.$refs.checklistDemo.$emit('ydui.checklist.checkall', this.isCheckAll);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
49
vue-ydui/example/routers/cityselect.vue
Normal file
49
vue-ydui/example/routers/cityselect.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<yd-layout title="CitySelect">
|
||||
|
||||
<yd-cell-group title="默认调用" class="demo-small-pitch">
|
||||
<yd-cell-item arrow>
|
||||
<span slot="left">所在地区：</span>
|
||||
<input slot="right" type="text" @click.stop="show1 = true" v-model="model1" readonly placeholder="请选择收货地址">
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="设置默认值">
|
||||
<yd-cell-item arrow>
|
||||
<span slot="left">所在地区：</span>
|
||||
<input slot="right" type="text" @click.stop="show2 = true" v-model="model2" readonly placeholder="请选择收货地址">
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cityselect v-model="show1" :callback="result1" :items="district"></yd-cityselect>
|
||||
|
||||
<yd-cityselect v-model="show2" :callback="result2" :items="district" provance="新疆" city="乌鲁木齐市" area="天山区"></yd-cityselect>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
import District from 'ydui-district/dist/jd_province_city_area_id';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
model1: '',
|
||||
model2: '新疆 乌鲁木齐市 天山区',
|
||||
district: District
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
result1(ret) {
|
||||
console.log(ret);
|
||||
this.model1 = ret.itemName1 + ' ' + ret.itemName2 + ' ' + ret.itemName3;
|
||||
},
|
||||
result2(ret) {
|
||||
console.log(ret);
|
||||
this.model2 = ret.itemName1 + ' ' + ret.itemName2 + ' ' + ret.itemName3;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
45
vue-ydui/example/routers/countdown.vue
Normal file
45
vue-ydui/example/routers/countdown.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<yd-layout title="CountDown">
|
||||
|
||||
<yd-cell-group title="普通调用" class="demo-small-pitch">
|
||||
<yd-cell-item>
|
||||
<span slot="left">默认模板：</span>
|
||||
<yd-countdown slot="right" time="2019/06/06 06:06:06"></yd-countdown>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item>
|
||||
<span slot="left">自定义参数模板：</span>
|
||||
<yd-countdown slot="right" time="2019/06/06 06:06:06" format="{%s}秒】{%m}分】{%h}时】{%d}天】"></yd-countdown>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item>
|
||||
<span slot="left">传入时间为（秒）：</span>
|
||||
<yd-countdown slot="right" :time="666666" timetype="second"></yd-countdown>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item>
|
||||
<span slot="left">传入时间为（时间戳）：</span>
|
||||
<yd-countdown slot="right" :time="1559772366" timetype="timestamp"></yd-countdown>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="通过Slot自定义HTML模板">
|
||||
<yd-cell-item>
|
||||
<span slot="left">个位十位一体：</span>
|
||||
<yd-countdown slot="right" time="2019/08/08 08:08:08" class="demo-countdown">
|
||||
<span style="color:red;">{%d}<i>天</i></span>
|
||||
<span style="color:gray;">{%h}<i>时</i></span>
|
||||
<span style="color:blue;">{%m}<i>分</i></span>
|
||||
<span style="color:orange;">{%s}<i>秒</i></span>
|
||||
</yd-countdown>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item>
|
||||
<span slot="left">个位十位分开：</span>
|
||||
<yd-countdown slot="right" time="2019/08/08 08:08:08" class="demo-countdown">
|
||||
<em>{%d0}</em><em>{%d1}</em><em>{%d2}</em>天
|
||||
<em>{%h1}</em><em>{%h2}</em>小时
|
||||
<em>{%m1}</em><em>{%m2}</em>时
|
||||
<em>{%s1}</em><em>{%s2}</em>秒
|
||||
</yd-countdown>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
97
vue-ydui/example/routers/countup.vue
Normal file
97
vue-ydui/example/routers/countup.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<yd-layout title="CountUp">
|
||||
|
||||
<yd-cell-group class="demo-small-pitch">
|
||||
|
||||
<yd-cell-item>
|
||||
<yd-countup
|
||||
slot="left"
|
||||
endnum="1200"
|
||||
></yd-countup>
|
||||
<span slot="right">普通调用</span>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item>
|
||||
<yd-countup
|
||||
slot="left"
|
||||
endnum="100"
|
||||
decimals="2"
|
||||
></yd-countup>
|
||||
<span slot="right">添加小数</span>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item>
|
||||
<yd-countup
|
||||
slot="left"
|
||||
endnum="100"
|
||||
decimals="2"
|
||||
prefix="$"
|
||||
suffix="&"
|
||||
></yd-countup>
|
||||
<span slot="right">添加前后符号</span>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item>
|
||||
<yd-countup
|
||||
slot="left"
|
||||
endnum="9998"
|
||||
decimals="2"
|
||||
separator=","
|
||||
></yd-countup>
|
||||
<span slot="right">添加分割符</span>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item>
|
||||
<yd-countup
|
||||
slot="left"
|
||||
endnum="998.658"
|
||||
decimals="3"
|
||||
:useEasing="true"
|
||||
></yd-countup>
|
||||
<span slot="right">使用Easy动画效果</span>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item>
|
||||
<yd-countup
|
||||
slot="left"
|
||||
endnum="9998"
|
||||
duration="5"
|
||||
decimals="2"
|
||||
></yd-countup>
|
||||
<span slot="right">设置动画时长</span>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item>
|
||||
<yd-countup
|
||||
slot="left"
|
||||
:endnum="initnum"
|
||||
separator=","
|
||||
decimal="."
|
||||
></yd-countup>
|
||||
<span slot="right"><yd-button @click.native="initnum = 100" type="warning">改变结束值至100</yd-button></span>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item>
|
||||
<yd-countup
|
||||
slot="left"
|
||||
endnum="100"
|
||||
suffix="%"
|
||||
:start="start"
|
||||
></yd-countup>
|
||||
<span slot="right"><yd-button @click.native="start = true">开始</yd-button></span>
|
||||
</yd-cell-item>
|
||||
|
||||
</yd-cell-group>
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
initnum: 50,
|
||||
start: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
16
vue-ydui/example/routers/cr.vue
Normal file
16
vue-ydui/example/routers/cr.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<yd-layout title="C&R">
|
||||
<yd-cell-group class="demo-small-pitch">
|
||||
<yd-cell-item arrow type="link" href="/switch">
|
||||
<span slot="left">Switch</span>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item arrow type="link" href="/radio">
|
||||
<span slot="left">Radio</span>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item arrow type="link" href="/checkbox">
|
||||
<span slot="left">CheckBox</span>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
80
vue-ydui/example/routers/datetime.vue
Normal file
80
vue-ydui/example/routers/datetime.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<yd-layout title="DateTime">
|
||||
|
||||
<yd-cell-group title="常规" class="demo-small-pitch">
|
||||
<yd-cell-item arrow>
|
||||
<span slot="left">Time：</span>
|
||||
<yd-datetime type="time" v-model="datetime1" slot="right"></yd-datetime>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item arrow>
|
||||
<span slot="left">Day：</span>
|
||||
<yd-datetime type="day" v-model="datetime2" slot="right"></yd-datetime>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item arrow>
|
||||
<span slot="left">Month：</span>
|
||||
<yd-datetime type="month" v-model="datetime3" slot="right"></yd-datetime>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item arrow>
|
||||
<span slot="left">Date：</span>
|
||||
<yd-datetime type="date" v-model="datetime4" slot="right"></yd-datetime>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item arrow>
|
||||
<span slot="left">DateTime：</span>
|
||||
<yd-datetime type="datetime" v-model="datetime5" slot="right"></yd-datetime>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item arrow>
|
||||
<span slot="left">自定义模板：</span>
|
||||
<yd-datetime type="date" :yearFormat="yearFormat" :monthFormat="monthFormat" :dayFormat="dayFormat" v-model="datetime6" slot="right"></yd-datetime>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="可选时间" class="demo-small-pitch">
|
||||
<yd-cell-item arrow>
|
||||
<span slot="left">开始/结束年份：</span>
|
||||
<yd-datetime startYear="1990" endYear="2020" type="date" v-model="datetime7" slot="right"></yd-datetime>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item arrow>
|
||||
<span slot="left">开始/结束小时：</span>
|
||||
<yd-datetime startHour="9" endHour="18" type="time" v-model="datetime8" slot="right"></yd-datetime>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="限制时间" class="demo-small-pitch">
|
||||
<yd-cell-item arrow>
|
||||
<span slot="left">时间段范围：</span>
|
||||
<yd-datetime ref="datetime" startDate="2012-03-16 15:13" endDate="2019-10-21 22:21" v-model="datetime9" slot="right"></yd-datetime>
|
||||
</yd-cell-item>
|
||||
<p slot="bottom" class="demo-cell-bottom-tip">( 2012-03-16 15:13 ~ 2019-10-21 22:21 )</p>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-button-group>
|
||||
<yd-button size="large" @click.native="open">手动打开</yd-button>
|
||||
</yd-button-group>
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
datetime1: '12:18',
|
||||
datetime2: '2018-03-29',
|
||||
datetime3: '2018-03-29',
|
||||
datetime4: '2018-03-29',
|
||||
datetime5: '2016-06-06 06:06',
|
||||
datetime6: '2017-05-11',
|
||||
datetime7: '',
|
||||
datetime8: '10:20',
|
||||
datetime9: '',
|
||||
yearFormat: '<span style="color:#F00;">{value}<i style="font-size: 12px;margin-left: 1px;">年</i></span>',
|
||||
monthFormat: '<span style="color:#0BB20C;">{value}<i style="font-size: 12px;margin-left: 1px;">月</i></span>',
|
||||
dayFormat: '<span style="color:#FFB400;">{value}<i style="font-size: 12px;margin-left: 1px;">日</i></span>'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.$refs.datetime.open();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
113
vue-ydui/example/routers/dialog.vue
Normal file
113
vue-ydui/example/routers/dialog.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<yd-layout title="Dialog">
|
||||
|
||||
<yd-button-group>
|
||||
|
||||
<yd-button @click.native="openConfrim" size="large">Confirm</yd-button>
|
||||
|
||||
<yd-button @click.native="openCustomConfrim" size="large">Confirm->Custom</yd-button>
|
||||
|
||||
<yd-button @click.native="openAlert" size="large" type="hollow">Alert</yd-button>
|
||||
|
||||
<yd-button @click.native="toastSuccess" size="large" type="danger">Toast->Success</yd-button>
|
||||
|
||||
<yd-button @click.native="toastError" size="large" type="danger">Toast->Error</yd-button>
|
||||
|
||||
<yd-button @click.native="toastNone" size="large" type="danger">Toast->None</yd-button>
|
||||
|
||||
<yd-button @click.native="openLoading" size="large" type="hollow">Loading</yd-button>
|
||||
|
||||
<yd-button @click.native="openNotify" size="large" type="hollow">Notify</yd-button>
|
||||
|
||||
</yd-button-group>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
methods: {
|
||||
openConfrim() {
|
||||
this.$dialog.confirm({
|
||||
title: '选填标题',
|
||||
mes: '我有一个小毛驴我从来也不骑！',
|
||||
opts: () => {
|
||||
this.$dialog.toast({mes: '你点了确定', timeout: 1000});
|
||||
}
|
||||
});
|
||||
},
|
||||
openCustomConfrim() {
|
||||
this.$dialog.confirm({
|
||||
title: '选填标题',
|
||||
mes: '我有一个小毛驴我从来也不骑！',
|
||||
opts: [
|
||||
{
|
||||
txt: '取消',
|
||||
color: false,
|
||||
callback: () => {
|
||||
this.$dialog.toast({mes: '你点了取消', timeout: 1000});
|
||||
}
|
||||
},
|
||||
{
|
||||
txt: '犹豫一下',
|
||||
stay: true,
|
||||
color: '#CCC',
|
||||
callback: () => {
|
||||
this.$dialog.toast({mes: '别犹豫了', timeout: 1000});
|
||||
}
|
||||
},
|
||||
{
|
||||
txt: '确定',
|
||||
color: true,
|
||||
callback: () => {
|
||||
this.$dialog.toast({mes: '你点了确定', timeout: 1000});
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
openAlert() {
|
||||
this.$dialog.alert({mes: '消息一出，休想滚动屏幕[移动终端]！'});
|
||||
},
|
||||
toastSuccess() {
|
||||
this.$dialog.toast({
|
||||
mes: '保存成功',
|
||||
timeout: 1500,
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
toastError() {
|
||||
this.$dialog.toast({
|
||||
mes: '保存失败',
|
||||
timeout: 1500,
|
||||
icon: 'error',
|
||||
callback: () => {
|
||||
this.$dialog.alert({mes: '给你一次重来的机会！'});
|
||||
}
|
||||
});
|
||||
},
|
||||
toastNone() {
|
||||
this.$dialog.toast({
|
||||
mes: '一个没有任何图标的提示！',
|
||||
timeout: 1500
|
||||
});
|
||||
},
|
||||
openLoading() {
|
||||
this.$dialog.loading.open('很快加载好了');
|
||||
|
||||
setTimeout(() => {
|
||||
this.$dialog.loading.close();
|
||||
}, 2000);
|
||||
},
|
||||
openNotify() {
|
||||
this.$dialog.notify({
|
||||
mes: '5秒后自动消失，点我也可以消失！',
|
||||
timeout: 5000,
|
||||
callback: () => {
|
||||
console.log('我走咯！');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
62
vue-ydui/example/routers/flexbox.vue
Normal file
62
vue-ydui/example/routers/flexbox.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<yd-layout title="FlexBox">
|
||||
<div style="padding: 0 .12rem;">
|
||||
<h2 class="demo-flexbox-title">Horizontal</h2>
|
||||
<yd-flexbox class="demo-flexbox">
|
||||
<yd-flexbox-item>
|
||||
<div class="demo-flexbox-text"><yd-flexbox-item></div>
|
||||
</yd-flexbox-item>
|
||||
<yd-flexbox-item>
|
||||
<div class="demo-flexbox-text"><yd-flexbox-item></div>
|
||||
</yd-flexbox-item>
|
||||
</yd-flexbox>
|
||||
<yd-flexbox class="demo-flexbox">
|
||||
<yd-flexbox-item>
|
||||
<div class="demo-flexbox-text"><yd-flexbox-item></div>
|
||||
</yd-flexbox-item>
|
||||
<yd-flexbox-item>
|
||||
<div class="demo-flexbox-text"><yd-flexbox-item></div>
|
||||
</yd-flexbox-item>
|
||||
<yd-flexbox-item>
|
||||
<div class="demo-flexbox-text"><yd-flexbox-item></div>
|
||||
</yd-flexbox-item>
|
||||
</yd-flexbox>
|
||||
<yd-flexbox class="demo-flexbox">
|
||||
<div class="demo-flexbox-text" style="background-color:#BBB;"><div></div>
|
||||
<yd-flexbox-item>
|
||||
<div class="demo-flexbox-text"><yd-flexbox-item></div>
|
||||
</yd-flexbox-item>
|
||||
</yd-flexbox>
|
||||
<yd-flexbox class="demo-flexbox">
|
||||
<div class="demo-flexbox-text" style="background-color:#BBB;"><div></div>
|
||||
<yd-flexbox-item>
|
||||
<div class="demo-flexbox-text"><yd-flexbox-item></div>
|
||||
</yd-flexbox-item>
|
||||
<div class="demo-flexbox-text" style="background-color:#BBB;"><div></div>
|
||||
</yd-flexbox>
|
||||
|
||||
<h2 class="demo-flexbox-title">Vertical</h2>
|
||||
<yd-flexbox direction="vertical" class="demo-flexbox">
|
||||
<yd-flexbox-item style="margin-bottom: 8px;">
|
||||
<div class="demo-flexbox-text"><yd-flexbox-item></div>
|
||||
</yd-flexbox-item>
|
||||
<yd-flexbox-item style="margin-bottom: 8px;">
|
||||
<div class="demo-flexbox-text"><yd-flexbox-item></div>
|
||||
</yd-flexbox-item>
|
||||
<yd-flexbox-item>
|
||||
<div class="demo-flexbox-text"><yd-flexbox-item></div>
|
||||
</yd-flexbox-item>
|
||||
</yd-flexbox>
|
||||
|
||||
<div style="height: 300px;">
|
||||
<yd-flexbox direction="vertical" class="demo-flexbox">
|
||||
<div class="demo-flexbox-text" style="width: 100%;background-color:#BBB;margin-bottom: 8px;"><div></div>
|
||||
<yd-flexbox-item style="margin-bottom: 8px;background-color:#DCDCDC;">
|
||||
<div class="demo-flexbox-text"><yd-flexbox-item></div>
|
||||
</yd-flexbox-item>
|
||||
<div class="demo-flexbox-text" style="width: 100%;background-color:#BBB;"><div></div>
|
||||
</yd-flexbox>
|
||||
</div>
|
||||
</div>
|
||||
</yd-layout>
|
||||
</template>
|
||||
67
vue-ydui/example/routers/grids.vue
Normal file
67
vue-ydui/example/routers/grids.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<yd-layout title="Grids">
|
||||
|
||||
<yd-grids-group :rows="2" title="等分2列(带图标)">
|
||||
<yd-grids-item>
|
||||
<img slot="icon" src="http://static.ydcss.com/ydui/img/logo.png">
|
||||
<span slot="text">image</span>
|
||||
</yd-grids-item>
|
||||
<yd-grids-item>
|
||||
<i slot="icon" class="demo-icons-cell"></i>
|
||||
<span slot="text">iconfont</span>
|
||||
</yd-grids-item>
|
||||
</yd-grids-group>
|
||||
|
||||
<yd-grids-group :rows="3" title="等分3列">
|
||||
<yd-grids-item v-for="n in 6">
|
||||
<span slot="text">grids-3</span>
|
||||
</yd-grids-item>
|
||||
</yd-grids-group>
|
||||
|
||||
<yd-grids-group rows="4" title="等分4列">
|
||||
<yd-grids-item v-for="n in 8">
|
||||
<span slot="text">grids-4</span>
|
||||
</yd-grids-item>
|
||||
</yd-grids-group>
|
||||
|
||||
<yd-grids-group :rows="5" title="等分5列">
|
||||
<yd-grids-item v-for="n in 5">
|
||||
<span slot="text">grids-5</span>
|
||||
</yd-grids-item>
|
||||
</yd-grids-group>
|
||||
|
||||
<yd-grids-group :rows="3" title="设置 yd-grids-item 的高度" itemHeight="2.6rem" class="demo-small-pitch">
|
||||
<yd-grids-item>
|
||||
<div slot="else" style="text-align: center;">
|
||||
<img src="http://img1.shikee.com/try/2017/09/30/16303520934640655826.jpg_295x295.jpg" style="height: 1rem;">
|
||||
</div>
|
||||
</yd-grids-item>
|
||||
<yd-grids-item>
|
||||
<div slot="else" style="text-align: center;">
|
||||
<p style="padding: 5px;color:#F00;">当页面内容高度不一致时，设置item的高度就不会导致页面错乱</p>
|
||||
</div>
|
||||
</yd-grids-item>
|
||||
<yd-grids-item>
|
||||
<div slot="else" style="text-align: center;">
|
||||
<img src="http://img1.shikee.com/try/2017/09/30/16303520934640655826.jpg_295x295.jpg" style="height: .6rem;">
|
||||
</div>
|
||||
</yd-grids-item>
|
||||
<yd-grids-item>
|
||||
<div slot="else" style="text-align: center;">
|
||||
<img src="http://img1.shikee.com/try/2017/09/30/16303520934640655826.jpg_295x295.jpg" style="height: .3rem;">
|
||||
</div>
|
||||
</yd-grids-item>
|
||||
<yd-grids-item>
|
||||
<div slot="else" style="text-align: center;">
|
||||
<img src="http://img1.shikee.com/try/2017/09/30/16303520934640655826.jpg_295x295.jpg" style="height: .6rem;">
|
||||
</div>
|
||||
</yd-grids-item>
|
||||
<yd-grids-item>
|
||||
<div slot="else" style="text-align: center;">
|
||||
<img src="http://img1.shikee.com/try/2017/09/30/16303520934640655826.jpg_295x295.jpg" style="height: 1rem;">
|
||||
</div>
|
||||
</yd-grids-item>
|
||||
</yd-grids-group>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
31
vue-ydui/example/routers/icons.vue
Normal file
31
vue-ydui/example/routers/icons.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<yd-layout title="Icons">
|
||||
|
||||
<yd-grids-group class="demo-small-pitch">
|
||||
<yd-grids-item v-for="item in list">
|
||||
<yd-icon slot="icon" :name="item" color="#FF685D" size=".6rem"></yd-icon>
|
||||
<span slot="text">{{item}}</span>
|
||||
</yd-grids-item>
|
||||
</yd-grids-group>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
'home', 'home-outline', 'shopcart', 'shopcart-outline', 'ucenter',
|
||||
'ucenter-outline', 'star', 'star-outline', 'error', 'error-outline', 'warn',
|
||||
'warn-outline', 'shield', 'shield-outline', 'like', 'like-outline', 'weibo', 'weixin',
|
||||
'tencent-weibo', 'qq', 'phone1', 'phone2', 'phone3', 'share1', 'share2',
|
||||
'share3', 'order', 'prev', 'play', 'next', 'good', 'bad', 'feedback', 'compose',
|
||||
'discount', 'verifycode', 'download', 'footmark', 'refresh', 'search', 'time',
|
||||
'setting', 'delete', 'more', 'checkoff', 'video', 'clock', 'type', 'discover',
|
||||
'qrscan', 'location', 'question'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
59
vue-ydui/example/routers/index.vue
Normal file
59
vue-ydui/example/routers/index.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<yd-layout>
|
||||
<h1 class="demo-logo"><img src="http://static.ydcss.com/ydui/img/logo.png"></h1>
|
||||
<h2 class="demo-detail-title">一只基于Vue2.x的移动端&微信UI。 -YDUI Touch</h2>
|
||||
|
||||
<yd-grids-group rows="4">
|
||||
<yd-grids-item v-for="item in list" :link="item.link">
|
||||
<i slot="icon" :class="item.icon"></i>
|
||||
<span slot="text">{{item.name}}</span>
|
||||
</yd-grids-item>
|
||||
</yd-grids-group>
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{icon: 'demo-icons-button', name: 'Button', link: '/button'},
|
||||
{icon: 'demo-icons-dialog', name: 'Dialog', link: '/dialog'},
|
||||
{icon: 'demo-icons-cell', name: 'Cell', link: '/cell'},
|
||||
{icon: 'demo-icons-icons', name: 'Icons', link: '/icons'},
|
||||
{icon: 'demo-icons-grids', name: 'Grids', link: '/grids'},
|
||||
{icon: 'demo-icons-list', name: 'List', link: '/list'},
|
||||
{icon: 'demo-icons-badge', name: 'Badge', link: '/badge'},
|
||||
{icon: 'demo-icons-tabbar', name: 'AsideBar', link: '/asidebar'},
|
||||
{icon: 'demo-icons-tabs', name: 'Tab', link: '/tab'},
|
||||
{icon: 'demo-icons-actionsheet', name: 'ActionSheet', link: '/actionsheet'},
|
||||
{icon: 'demo-icons-sendcode', name: 'SendCode', link: '/sendcode'},
|
||||
{icon: 'demo-icons-progressbar', name: 'ProgressBar', link: '/progressbar'},
|
||||
{icon: 'demo-icons-keyboard', name: 'KeyBoard', link: '/keyboard'},
|
||||
{icon: 'demo-icons-slider', name: 'Slider', link: '/slider'},
|
||||
{icon: 'demo-icons-spinner', name: 'Spinner', link: '/spinner'},
|
||||
{icon: 'demo-icons-cityselect', name: 'CitySelect', link: '/cityselect'},
|
||||
{icon: 'demo-icons-countup', name: 'CountUp', link: '/countup'},
|
||||
{icon: 'demo-icons-rate', name: 'Rate', link: '/rate'},
|
||||
{icon: 'demo-icons-countdown', name: 'CountDown', link: '/countdown'},
|
||||
{icon: 'demo-icons-popup', name: 'Popup', link: '/popup'},
|
||||
{icon: 'demo-icons-rollnotice', name: 'RollNotice', link: '/rollnotice'},
|
||||
{icon: 'demo-icons-input', name: 'Input', link: '/input'},
|
||||
{icon: 'demo-icons-flexbox', name: 'FlexBox', link: '/flexbox'},
|
||||
{icon: 'demo-icons-cr', name: 'C&R', link: '/cr'},
|
||||
{icon: 'demo-icons-backtop', name: 'BackTop', link: '/backtop'},
|
||||
{icon: 'demo-icons-accordion', name: 'Accordion', link: '/accordion'},
|
||||
{icon: 'demo-icons-datetime', name: 'DateTime', link: '/datetime'},
|
||||
{icon: 'demo-icons-lightbox', name: 'LightBox', link: '/lightbox'},
|
||||
{icon: 'demo-icons-timeline', name: 'TimeLine', link: '/timeline'},
|
||||
{icon: 'demo-icons-step', name: 'Step', link: '/step'},
|
||||
{icon: 'demo-icons-checklist', name: 'CheckList', link: '/checklist'},
|
||||
{icon: 'demo-icons-search', name: 'Search', link: '/search'},
|
||||
{icon: 'demo-icons-scrollnav', name: 'ScrollNav', link: '/scrollnav'},
|
||||
{icon: 'demo-icons-scrolltab', name: 'ScrollTab', link: '/scrolltab'},
|
||||
{icon: 'demo-icons-preview', name: 'Preview', link: '/preview'},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
91
vue-ydui/example/routers/input.vue
Normal file
91
vue-ydui/example/routers/input.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<yd-layout title="Input">
|
||||
|
||||
<yd-cell-group class="demo-small-pitch">
|
||||
<yd-cell-item>
|
||||
<span slot="left">用户名：</span>
|
||||
<yd-input slot="right" required v-model="input1" max="20" placeholder="请输入用户名"></yd-input>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item>
|
||||
<span slot="left">密码：</span>
|
||||
<yd-input slot="right" type="password" v-model="input2" placeholder="请输入密码"></yd-input>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="验证 - 内置正则">
|
||||
<yd-cell-item>
|
||||
<span slot="left">邮箱：</span>
|
||||
<yd-input slot="right" v-model="input3" regex="email" placeholder="请输入邮箱地址"></yd-input>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item>
|
||||
<span slot="left">手机号：</span>
|
||||
<yd-input slot="right" v-model="input4" regex="mobile" placeholder="请输入手机号码"></yd-input>
|
||||
</yd-cell-item>
|
||||
|
||||
<yd-cell-item>
|
||||
<span slot="left">银行卡号：</span>
|
||||
<yd-input slot="right" v-model="input5" regex="bankcard" placeholder="请输入银行卡号"></yd-input>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="验证 - 自定义正则">
|
||||
<yd-cell-item>
|
||||
<span slot="left">QQ：</span>
|
||||
<yd-input slot="right" v-model="input6" regex="^\d{5,12}$" placeholder="请输入您的QQ号码"></yd-input>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="不显示清空图标">
|
||||
<yd-cell-item>
|
||||
<span slot="left">姓名：</span>
|
||||
<yd-input slot="right" v-model="input7" required :show-clear-icon="false" placeholder="请输入您的姓名"></yd-input>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="不显示正确或错误图标">
|
||||
<yd-cell-item>
|
||||
<span slot="left">手机号：</span>
|
||||
<yd-input slot="right" v-model="input8" required :show-success-icon="false" :show-error-icon="false" regex="mobile" placeholder="请输入手机号码"></yd-input>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="获取验证结果">
|
||||
<yd-cell-item>
|
||||
<span slot="left">手机号：</span>
|
||||
<yd-input slot="right" v-model="input9" ref="input9" required regex="mobile" placeholder="请输入手机号码"></yd-input>
|
||||
</yd-cell-item>
|
||||
<p slot="bottom" style="color:#F00;padding: 0 .3rem;" v-html="result"></p>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-button-group>
|
||||
<yd-button size="large" @click.native="clickHander">显示上方手机号验证结果</yd-button>
|
||||
</yd-button-group>
|
||||
</yd-layout>
|
||||
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: '',
|
||||
input2: '',
|
||||
input3: 'ydui@qq.com',
|
||||
input4: '',
|
||||
input5: '',
|
||||
input6: '',
|
||||
input7: '',
|
||||
input8: '',
|
||||
input9: '',
|
||||
result: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickHander() {
|
||||
const input = this.$refs.input9;
|
||||
this.result = `{<br /> valid：${input.valid}，<br /> errorMes：'${input.errorMsg}'，<br /> errorCode：'${input.errorCode}'<br />}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
44
vue-ydui/example/routers/keyboard.vue
Normal file
44
vue-ydui/example/routers/keyboard.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<yd-layout title="KeyBoard">
|
||||
|
||||
<yd-button-group>
|
||||
<yd-button size="large" type="primary" @click.native="show1 = true">打开</yd-button>
|
||||
<yd-button size="large" type="primary" @click.native="show2 = true">打开 - 打乱键盘顺序</yd-button>
|
||||
</yd-button-group>
|
||||
|
||||
<yd-keyboard v-model="show1" :callback="done1" ref="kbdemo1"></yd-keyboard>
|
||||
|
||||
<yd-keyboard v-model="show2" :callback="done2" disorder ref="kbdemo2"></yd-keyboard>
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
done1(val) {
|
||||
console.log('输入的密码是：' + val);
|
||||
this.$dialog.loading.open('验证支付密码');
|
||||
|
||||
setTimeout(() => {
|
||||
this.$refs.kbdemo1.$emit('ydui.keyboard.error', '对不起，您的支付密码不正确，请重新输入。');
|
||||
this.$dialog.loading.close();
|
||||
}, 2000);
|
||||
},
|
||||
done2(val) {
|
||||
console.log('输入的密码是：' + val + ' - 无序');
|
||||
this.$dialog.loading.open('验证支付密码');
|
||||
|
||||
setTimeout(() => {
|
||||
this.$refs.kbdemo2.$emit('ydui.keyboard.error', '对不起，您的支付密码不正确，请重新输入。');
|
||||
this.$dialog.loading.close();
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
44
vue-ydui/example/routers/lightbox.vue
Normal file
44
vue-ydui/example/routers/lightbox.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<yd-layout title="LightBox">
|
||||
<p style="color: #00c3f5;padding-bottom: 5px;padding-left: 5px;font-size: 15px;" class="demo-small-pitch">
|
||||
参照 京东APP 和 <a href="http://photoswipe.com/" style="text-decoration: underline;">Photoswipe</a> 功能实现。
|
||||
</p>
|
||||
<yd-lightbox>
|
||||
<div class="demo-lightbox">
|
||||
<div>
|
||||
<yd-lightbox-img :src="baseurl + 'scenery_s01.jpg'" :original="baseurl + 'scenery_01.jpg'"></yd-lightbox-img>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div><yd-lightbox-img :src="baseurl + 'scenery_s02.jpg'" :original="baseurl + 'scenery_02.jpg'"></yd-lightbox-img></div>
|
||||
<div><yd-lightbox-img :src="baseurl + 'scenery_s03.jpg'" :original="baseurl + 'scenery_03.jpg'"></yd-lightbox-img></div>
|
||||
</div>
|
||||
<div>
|
||||
<div><yd-lightbox-img :src="baseurl + 'scenery_s04.jpg'" :original="baseurl + 'scenery_04.jpg'"></yd-lightbox-img></div>
|
||||
<div><yd-lightbox-img :src="baseurl + 'scenery_s05.jpg'" :original="baseurl + 'scenery_05.jpg'"></yd-lightbox-img></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<yd-lightbox-txt>
|
||||
<h1 style="font-size: 15px;margin-bottom: 8px;color: #00c3f5;text-align: right;" slot="top">美丽风景</h1>
|
||||
<div slot="content" style="text-align: right;">
|
||||
<p>风景指的是供观赏的自然风光、景物，包括自然景观和人文景观</p>
|
||||
<p>风景是由光对物的反映所显露出来的一种景象</p>
|
||||
<p>犹言风光或景物、景色等，含义广泛</p>
|
||||
<p>而且还有一大部分作品是借景抒情，寓情于景</p>
|
||||
</div>
|
||||
</yd-lightbox-txt>
|
||||
</yd-lightbox>
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseurl: 'http://static.ydcss.com/uploads/lightbox/'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
141
vue-ydui/example/routers/list.combination.vue
Normal file
141
vue-ydui/example/routers/list.combination.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<yd-layout>
|
||||
|
||||
<yd-navbar slot="navbar" title="Combination">
|
||||
<router-link to="/list" slot="left">
|
||||
<yd-navbar-back-icon></yd-navbar-back-icon>
|
||||
</router-link>
|
||||
</yd-navbar>
|
||||
|
||||
<yd-pullrefresh :callback="loadList1" ref="prdemo">
|
||||
|
||||
<yd-infinitescroll :callback="loadList2" ref="lsdemo">
|
||||
<yd-list theme="1" slot="list">
|
||||
<yd-list-item v-for="item in list">
|
||||
<img slot="img" :src="item.img">
|
||||
<span slot="title">{{item.title}}</span>
|
||||
<yd-list-other slot="other">
|
||||
<div>
|
||||
<span class="list-price"><em>¥</em>{{item.marketprice}}</span>
|
||||
<span class="list-del-price">¥{{item.productprice}}</span>
|
||||
</div>
|
||||
<div>content</div>
|
||||
</yd-list-other>
|
||||
</yd-list-item>
|
||||
</yd-list>
|
||||
<span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>
|
||||
|
||||
</yd-infinitescroll>
|
||||
</yd-pullrefresh>
|
||||
|
||||
<yd-backtop></yd-backtop>
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
page1: 1,
|
||||
page2: 1,
|
||||
pageSize: 10,
|
||||
list: [
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg",
|
||||
title: "标题标题标题标题标题",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/21/10172020923917672923.jpg",
|
||||
title: "骆驼男装2016夏装男士短袖T恤 圆领衣服 印花男装体恤 半袖打底衫",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/23/15395220917905380014.jpg",
|
||||
title: "条纹短袖T恤男士韩版衣服大码潮流男装夏季圆领体恤2016新款半袖",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/25/14244120933639105658.jpg",
|
||||
title: "夏季青少年衣服男生潮牌t恤 男士 夏秋学生 日系棉短袖半袖男小衫",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/26/12365720933909085511.jpg",
|
||||
title: "2016夏装新款时尚潮流短袖T恤男纯棉V领日系青少年韩版夏季上衣服",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",
|
||||
title: "男装衣服男夏t恤 男士短袖t恤圆领夏季潮牌宽松原宿风半截袖男",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/03/12173920932544716516.jpg",
|
||||
title: "superman短袖t恤日潮牌男士日韩夏装水洗做旧修身个性短袖t恤衣服",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/09/28/14575020926479478831.jpg",
|
||||
title: "买一送二新款青少年潮男大码T恤 学生字半袖修身款衣服半截袖青年",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadList1() {
|
||||
const url = 'http://list.ydui.org/getdata.php';
|
||||
|
||||
this.$http.jsonp(url, {params: {type: 'pulldown', page: this.page1}}).then((response) => {
|
||||
setTimeout(() => {
|
||||
const _list = response.body;
|
||||
|
||||
this.list = [..._list, ...this.list];
|
||||
|
||||
this.$dialog.toast({
|
||||
mes: _list.length > 0 ? '为您更新了' + _list.length + '条内容' : '已是最新内容'
|
||||
});
|
||||
|
||||
this.$refs.prdemo.$emit('ydui.pullrefresh.finishLoad');
|
||||
|
||||
this.page1++;
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
loadList2() {
|
||||
this.$http.jsonp('http://list.ydui.org/getdata.php?type=backposition', {
|
||||
params: {
|
||||
page: this.page2,
|
||||
pagesize: this.pageSize
|
||||
}
|
||||
}).then(function (response) {
|
||||
setTimeout(() => { // 请求太快了，延迟一下方便看效果！
|
||||
const _list = response.body;
|
||||
|
||||
this.list = [...this.list, ..._list];
|
||||
|
||||
if (_list.length < this.pageSize || this.page2 >= 4) {
|
||||
// 所有数据加载完毕
|
||||
this.$refs.lsdemo.$emit('ydui.infinitescroll.loadedDone');
|
||||
return;
|
||||
}
|
||||
|
||||
// 单次请求数据完毕
|
||||
this.$refs.lsdemo.$emit('ydui.infinitescroll.finishLoad');
|
||||
|
||||
this.page2++;
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
121
vue-ydui/example/routers/list.infinitescroll.vue
Normal file
121
vue-ydui/example/routers/list.infinitescroll.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<yd-layout>
|
||||
|
||||
<yd-navbar slot="navbar" title="InfiniteScroll">
|
||||
<router-link to="/list" slot="left">
|
||||
<yd-navbar-back-icon></yd-navbar-back-icon>
|
||||
</router-link>
|
||||
</yd-navbar>
|
||||
|
||||
<yd-infinitescroll :callback="loadList" ref="lsdemo">
|
||||
|
||||
<yd-list theme="1" slot="list">
|
||||
<yd-list-item v-for="item in list">
|
||||
<img slot="img" :src="item.img">
|
||||
<span slot="title">{{item.title}}</span>
|
||||
<yd-list-other slot="other">
|
||||
<div>
|
||||
<span class="list-price"><em>¥</em>{{item.marketprice}}</span>
|
||||
<span class="list-del-price">¥{{item.productprice}}</span>
|
||||
</div>
|
||||
<div>content</div>
|
||||
</yd-list-other>
|
||||
</yd-list-item>
|
||||
</yd-list>
|
||||
|
||||
<!-- 数据全部加载完毕显示 -->
|
||||
<span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>
|
||||
|
||||
</yd-infinitescroll>
|
||||
|
||||
<yd-backtop></yd-backtop>
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
list: [
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg",
|
||||
title: "标题标题标题标题标题",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/21/10172020923917672923.jpg",
|
||||
title: "骆驼男装2016夏装男士短袖T恤 圆领衣服 印花男装体恤 半袖打底衫",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/23/15395220917905380014.jpg",
|
||||
title: "条纹短袖T恤男士韩版衣服大码潮流男装夏季圆领体恤2016新款半袖",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/25/14244120933639105658.jpg",
|
||||
title: "夏季青少年衣服男生潮牌t恤 男士 夏秋学生 日系棉短袖半袖男小衫",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/26/12365720933909085511.jpg",
|
||||
title: "2016夏装新款时尚潮流短袖T恤男纯棉V领日系青少年韩版夏季上衣服",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",
|
||||
title: "男装衣服男夏t恤 男士短袖t恤圆领夏季潮牌宽松原宿风半截袖男",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/03/12173920932544716516.jpg",
|
||||
title: "superman短袖t恤日潮牌男士日韩夏装水洗做旧修身个性短袖t恤衣服",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/09/28/14575020926479478831.jpg",
|
||||
title: "买一送二新款青少年潮男大码T恤 学生字半袖修身款衣服半截袖青年",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadList() {
|
||||
this.$http.jsonp('http://list.ydui.org/getdata.php?type=backposition', {
|
||||
params: {
|
||||
page: this.page,
|
||||
pagesize: this.pageSize
|
||||
}
|
||||
}).then(function (response) {
|
||||
setTimeout(() => { // 请求太快了，延迟一下方便看效果！
|
||||
const _list = response.body;
|
||||
|
||||
this.list = [...this.list, ..._list];
|
||||
|
||||
if (_list.length < this.pageSize || this.page >= 4) {
|
||||
// 所有数据加载完毕
|
||||
this.$refs.lsdemo.$emit('ydui.infinitescroll.loadedDone');
|
||||
return;
|
||||
}
|
||||
|
||||
// 单次请求数据完毕
|
||||
this.$refs.lsdemo.$emit('ydui.infinitescroll.finishLoad');
|
||||
|
||||
this.page++;
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
98
vue-ydui/example/routers/list.pullrefresh.vue
Normal file
98
vue-ydui/example/routers/list.pullrefresh.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<yd-layout>
|
||||
<yd-navbar slot="navbar" title="PullRefresh">
|
||||
<router-link to="/list" slot="left">
|
||||
<yd-navbar-back-icon></yd-navbar-back-icon>
|
||||
</router-link>
|
||||
</yd-navbar>
|
||||
|
||||
<yd-pullrefresh :callback="loadList" ref="prdemo">
|
||||
|
||||
<yd-list theme="4">
|
||||
<yd-list-item v-for="item in list">
|
||||
<img slot="img" :src="item.img">
|
||||
<span slot="title">{{item.title}}</span>
|
||||
<yd-list-other slot="other">
|
||||
<div>
|
||||
<span class="list-price"><em>¥</em>{{item.marketprice}}</span>
|
||||
<span class="list-del-price">¥{{item.productprice}}</span>
|
||||
</div>
|
||||
<div>content</div>
|
||||
</yd-list-other>
|
||||
</yd-list-item>
|
||||
</yd-list>
|
||||
|
||||
</yd-pullrefresh>
|
||||
|
||||
<yd-backtop></yd-backtop>
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
page: 1,
|
||||
list: [
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg",
|
||||
title: "标题标题标题标题标题",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/21/10172020923917672923.jpg",
|
||||
title: "骆驼男装2016夏装男士短袖T恤 圆领衣服 印花男装体恤 半袖打底衫",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/23/15395220917905380014.jpg",
|
||||
title: "条纹短袖T恤男士韩版衣服大码潮流男装夏季圆领体恤2016新款半袖",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/25/14244120933639105658.jpg",
|
||||
title: "夏季青少年衣服男生潮牌t恤 男士 夏秋学生 日系棉短袖半袖男小衫",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/26/12365720933909085511.jpg",
|
||||
title: "2016夏装新款时尚潮流短袖T恤男纯棉V领日系青少年韩版夏季上衣服",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
},
|
||||
{
|
||||
img: "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",
|
||||
title: "男装衣服男夏t恤 男士短袖t恤圆领夏季潮牌宽松原宿风半截袖男",
|
||||
marketprice: 56.23,
|
||||
productprice: 89.36
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadList() {
|
||||
const url = 'http://list.ydui.org/getdata.php';
|
||||
|
||||
this.$http.jsonp(url, {params: {type: 'pulldown', page: this.page}}).then((response) => {
|
||||
setTimeout(() => {
|
||||
const _list = response.body;
|
||||
|
||||
this.list = [..._list, ...this.list];
|
||||
|
||||
this.$dialog.toast({
|
||||
mes: _list.length > 0 ? '为您更新了' + _list.length + '条内容' : '已是最新内容'
|
||||
});
|
||||
|
||||
this.$refs.prdemo.$emit('ydui.pullrefresh.finishLoad');
|
||||
|
||||
this.page++;
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
63
vue-ydui/example/routers/list.theme.vue
Normal file
63
vue-ydui/example/routers/list.theme.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<yd-layout>
|
||||
<yd-navbar slot="navbar" :title="title">
|
||||
<router-link to="/list" slot="left">
|
||||
<yd-navbar-back-icon></yd-navbar-back-icon>
|
||||
</router-link>
|
||||
</yd-navbar>
|
||||
|
||||
<yd-list :theme="theme">
|
||||
<yd-list-item v-for="item in list">
|
||||
<img slot="img" :src="theme != 5 ? item.img + '_220x220.jpg' : item.img">
|
||||
<span slot="title">{{item.title}}</span>
|
||||
<yd-list-other slot="other">
|
||||
<div>
|
||||
<span class="list-price"><em>¥</em>{{item.price}}</span>
|
||||
<span class="list-del-price">¥{{item.w_price}}</span>
|
||||
</div>
|
||||
<div>content</div>
|
||||
</yd-list-other>
|
||||
</yd-list-item>
|
||||
</yd-list>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$route.params.id;
|
||||
},
|
||||
title() {
|
||||
return 'Theme' + this.$route.params.id;
|
||||
},
|
||||
list() {
|
||||
const arr = [
|
||||
{img: "http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg", title: "标题标题标题标题标题", price: 56.23, w_price: 89.36},
|
||||
{img: "http://img1.shikee.com/try/2016/06/21/10172020923917672923.jpg", title: "骆驼男装2016夏装男士短袖T恤 圆领衣服 印花男装体恤 半袖打底衫", price: 56.23, w_price: 89.36},
|
||||
{img: "http://img1.shikee.com/try/2016/06/23/15395220917905380014.jpg", title: "条纹短袖T恤男士韩版衣服大码潮流男装夏季圆领体恤2016新款半袖", price: 56.23, w_price: 89.36},
|
||||
{img: "http://img1.shikee.com/try/2016/06/25/14244120933639105658.jpg", title: "夏季青少年衣服男生潮牌t恤 男士 夏秋学生 日系棉短袖半袖男小衫", price: 56.23, w_price: 89.36},
|
||||
{img: "http://img1.shikee.com/try/2016/06/26/12365720933909085511.jpg", title: "2016夏装新款时尚潮流短袖T恤男纯棉V领日系青少年韩版夏季上衣服", price: 56.23, w_price: 89.36},
|
||||
{img: "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg", title: "男装衣服男夏t恤 男士短袖t恤圆领夏季潮牌宽松原宿风半截袖男", price: 56.23, w_price: 89.36}
|
||||
];
|
||||
|
||||
if (this.$route.params.id == 3) {
|
||||
const imgs = [
|
||||
"http://img1.shikee.com/lottery/2016/06/24/15421120925701980627.jpg",
|
||||
"http://img1.shikee.com/lottery/2016/06/14/20403320925701986993.jpg",
|
||||
"http://img1.shikee.com/lottery/2016/06/12/13411720925701982313.jpg",
|
||||
"http://img1.shikee.com/lottery/2016/06/12/12460220925701986563.jpg",
|
||||
"http://img1.shikee.com/lottery/2016/06/08/23124920925701986316.jpg",
|
||||
"http://img1.shikee.com/lottery/2016/06/07/23270520925701982715.jpg"
|
||||
];
|
||||
arr.forEach(function (item, key) {
|
||||
item.img = imgs[key];
|
||||
});
|
||||
}
|
||||
|
||||
return arr;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
38
vue-ydui/example/routers/list.vue
Normal file
38
vue-ydui/example/routers/list.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<yd-layout title="List">
|
||||
|
||||
<yd-cell-group title="排版样式" class="demo-small-pitch">
|
||||
<yd-cell-item arrow type="link" href="/list.theme/1">
|
||||
<span slot="left">theme1</span>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item arrow type="link" href="/list.theme/2">
|
||||
<span slot="left">theme2</span>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item arrow type="link" href="/list.theme/3">
|
||||
<span slot="left">theme3</span>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item arrow type="link" href="/list.theme/4">
|
||||
<span slot="left">theme4</span>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item arrow type="link" href="/list.theme/5">
|
||||
<span slot="left">theme5</span>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="异步数据加载">
|
||||
<yd-cell-item arrow type="link" href="/list.infinitescroll">
|
||||
<span slot="left">Infinite Scroll</span>
|
||||
<span slot="right">滚动加载</span>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item arrow type="link" href="/list.pullrefresh">
|
||||
<span slot="left">Pull Refresh</span>
|
||||
<span slot="right">下拉刷新</span>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item arrow type="link" href="/list.combination">
|
||||
<span slot="left">Combination</span>
|
||||
<span slot="right">下拉刷新 + 滚动加载</span>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
51
vue-ydui/example/routers/navbar.vue
Normal file
51
vue-ydui/example/routers/navbar.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<yd-layout>
|
||||
|
||||
<yd-navbar slot="navbar" title="NavBar">
|
||||
<router-link to="/asidebar" slot="left">
|
||||
<yd-navbar-back-icon></yd-navbar-back-icon>
|
||||
</router-link>
|
||||
</yd-navbar>
|
||||
|
||||
<yd-navbar title="NavBar1" class="demo-small-pitch"></yd-navbar>
|
||||
|
||||
<yd-navbar title="NavBar2" class="demo-small-pitch">
|
||||
<router-link to="/asidebar" slot="left">
|
||||
<yd-navbar-back-icon></yd-navbar-back-icon>
|
||||
</router-link>
|
||||
|
||||
<router-link to="/asidebar" slot="right">
|
||||
<yd-navbar-next-icon></yd-navbar-next-icon>
|
||||
</router-link>
|
||||
</yd-navbar>
|
||||
|
||||
<yd-navbar class="demo-small-pitch">
|
||||
<router-link to="/asidebar" slot="left">
|
||||
<yd-navbar-back-icon>返回</yd-navbar-back-icon>
|
||||
</router-link>
|
||||
|
||||
<img slot="center" src="http://static.ydcss.com/www/img/logo.png">
|
||||
|
||||
<router-link to="/asidebar" slot="right">
|
||||
<yd-navbar-next-icon>前进</yd-navbar-next-icon>
|
||||
</router-link>
|
||||
</yd-navbar>
|
||||
|
||||
<yd-navbar title="什么鬼，这个标题怎么那么长啊" class="demo-small-pitch">
|
||||
<router-link to="/asidebar" slot="left">
|
||||
<yd-icon name="home-outline" size=".36rem" color="#666"></yd-icon>
|
||||
</router-link>
|
||||
<router-link to="/asidebar" slot="right">
|
||||
<yd-icon name="share1" size=".36rem" color="#666"></yd-icon>
|
||||
</router-link>
|
||||
<router-link to="/asidebar" slot="right">
|
||||
<yd-icon name="share1" size=".36rem" color="#666"></yd-icon>
|
||||
</router-link>
|
||||
<router-link to="/asidebar" slot="right">
|
||||
<yd-icon name="share1" size=".36rem" color="#666"></yd-icon>
|
||||
</router-link>
|
||||
</yd-navbar>
|
||||
|
||||
<yd-navbar title="Props可修改边框颜色啦~" class="demo-small-pitch" border-color="#337EF6" bgcolor="#FCCECD"></yd-navbar>
|
||||
</yd-layout>
|
||||
</template>
|
||||
59
vue-ydui/example/routers/popup.vue
Normal file
59
vue-ydui/example/routers/popup.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<yd-layout title="Popup">
|
||||
|
||||
<yd-button-group>
|
||||
<yd-button size="large" type="primary" @click.native="show1 = true">中间弹出</yd-button>
|
||||
<yd-button size="large" type="warning" @click.native="show2 = true">下部弹出</yd-button>
|
||||
<yd-button size="large" type="danger" @click.native="show3 = true">左侧弹出</yd-button>
|
||||
<yd-button size="large" type="danger" @click.native="show4 = true">右侧弹出</yd-button>
|
||||
</yd-button-group>
|
||||
|
||||
<yd-popup v-model="show1" position="center" width="90%">
|
||||
<div style="background-color:#fff;">
|
||||
<p>
|
||||
我为什么喜欢在京东买东西，因为今天买明天就可以送到。我为什么每个商品的评价都一样，因为在京东买的东西太多太多了，
|
||||
导致积累了很多未评价的订单，所以我统一用段话作为评价内容。京东购物这么久，有买到很好的产品，也有买到比较坑的产品，
|
||||
如果我用这段话来评价，说明这款产品没问题，至少85分以上，而比较垃圾的产品，我绝对不会偷懒到复制粘贴评价，我绝对会用心的差评，
|
||||
这样其他消费者在购买的时候会作为参考，会影响该商品销量，而商家也会因此改进商品质牌质量非常好，与卖家描述的完全一致，
|
||||
非常满意，真的很喜欢。
|
||||
</p>
|
||||
<p style="color:#F00;margin-top: 10px;">
|
||||
呐~你也看到了，这只是一个普通弹窗，未设置内外边距。
|
||||
</p>
|
||||
<p style="text-align: center;">
|
||||
<yd-button @click.native="show1 = false">Close Center Popup</yd-button>
|
||||
</p>
|
||||
</div>
|
||||
</yd-popup>
|
||||
|
||||
<yd-popup v-model="show2" position="bottom" height="60%">
|
||||
<div slot="top" style="height: 30px;line-height: 30px;background-color:#E8E8E8;">top</div>
|
||||
<div>
|
||||
<p v-for="n in 30" style="height: 30px;line-height: 30px;">该容器超出内容出现滚动条，IOS上禁止滚动底层容器{{n}}</p>
|
||||
</div>
|
||||
<div slot="bottom" style="height: 30px;line-height: 30px;background-color:#E8E8E8;">bottom</div>
|
||||
</yd-popup>
|
||||
|
||||
<yd-popup v-model="show3" position="left" width="60%">
|
||||
<yd-button type="danger" style="margin: 20px;" @click.native="show3 = false">Close Left Popup</yd-button>
|
||||
</yd-popup>
|
||||
|
||||
<yd-popup v-model="show4" position="right" width="50%">
|
||||
<yd-button type="danger" style="margin: 20px;" @click.native="show4 = false">Close Right Popup</yd-button>
|
||||
</yd-popup>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
47
vue-ydui/example/routers/preview.vue
Normal file
47
vue-ydui/example/routers/preview.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<yd-layout title="Preview">
|
||||
|
||||
<yd-preview class="demo-small-pitch" :buttons="btns">
|
||||
<yd-preview-header>
|
||||
<div slot="left">付款金额</div>
|
||||
<div slot="right">¥2400.00</div>
|
||||
</yd-preview-header>
|
||||
|
||||
<yd-preview-item>
|
||||
<div slot="left">商品</div>
|
||||
<div slot="right">啦啦啦啦啦啦啦</div>
|
||||
</yd-preview-item>
|
||||
<yd-preview-item>
|
||||
<div slot="left">商品</div>
|
||||
<div slot="right">啦啦啦啦啦啦啦</div>
|
||||
</yd-preview-item>
|
||||
<yd-preview-item>
|
||||
<div slot="left">商品商品</div>
|
||||
<div slot="right">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>
|
||||
</yd-preview-item>
|
||||
</yd-preview>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
btns: [
|
||||
{
|
||||
text: '辅助操作',
|
||||
click: () => {
|
||||
alert('辅助操作');
|
||||
}
|
||||
},
|
||||
{
|
||||
color: '#F00',
|
||||
text: '跳转首页',
|
||||
link: {path: '/'}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
58
vue-ydui/example/routers/progressbar.vue
Normal file
58
vue-ydui/example/routers/progressbar.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<yd-layout title="ProgressBar">
|
||||
<div class="demo-progressbar demo-pitch">
|
||||
<div class="demo-progress-cricle">
|
||||
<!-- 代码部分start -->
|
||||
<yd-progressbar :progress="progress1" trailWidth="4">
|
||||
<yd-countup
|
||||
:endnum="progress1 * 100"
|
||||
duration="1"
|
||||
suffix="%"
|
||||
></yd-countup>
|
||||
</yd-progressbar>
|
||||
<!-- 代码部分end -->
|
||||
</div>
|
||||
<div class="demo-progress-cricle">
|
||||
<!-- 代码部分start -->
|
||||
<yd-progressbar
|
||||
:progress="progress2"
|
||||
trailWidth="2"
|
||||
strokeWidth="4"
|
||||
strokeColor="#B2B2B2"
|
||||
trailColor="#FE5D51"
|
||||
fillColor="#FFF"
|
||||
>
|
||||
<yd-countup
|
||||
:endnum="progress2 * 100"
|
||||
:duration="1"
|
||||
suffix="%"
|
||||
></yd-countup>
|
||||
</yd-progressbar>
|
||||
<!-- 代码部分end -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-progressbar demo-pitch">
|
||||
<div class="demo-progress-line">
|
||||
<!-- 代码部分start -->
|
||||
<yd-progressbar type="line" :progress="progress3" trailWidth="4" trailColor="#FE5D51"></yd-progressbar>
|
||||
<!-- 代码部分end -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<yd-button-group>
|
||||
<yd-button size="large" type="hollow" @click.native="progress2 = 0.8">手动设置右圈为80%</yd-button>
|
||||
</yd-button-group>
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
progress1: 0.1,
|
||||
progress2: 0.4,
|
||||
progress3: 0.6
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
80
vue-ydui/example/routers/radio.vue
Normal file
80
vue-ydui/example/routers/radio.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<yd-layout>
|
||||
<yd-navbar slot="navbar" title="Radio">
|
||||
<router-link to="/cr" slot="left">
|
||||
<yd-navbar-back-icon></yd-navbar-back-icon>
|
||||
</router-link>
|
||||
</yd-navbar>
|
||||
|
||||
<div class="yd-cell-title demo-small-pitch">值和标签一致 - 【值：{{radio1}}】</div>
|
||||
<yd-cell-group>
|
||||
<yd-cell-item>
|
||||
<yd-radio-group v-model="radio1" slot="left" :callback="fn">
|
||||
<yd-radio val="啦啦啦"></yd-radio>
|
||||
<yd-radio val="啊啊啊"></yd-radio>
|
||||
<yd-radio val="喔喔喔"></yd-radio>
|
||||
</yd-radio-group>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<div class="yd-cell-title">值和标签不同 - 【值：{{radio2}}】</div>
|
||||
<yd-cell-group>
|
||||
<yd-cell-item>
|
||||
<yd-radio-group v-model="radio2" slot="left">
|
||||
<yd-radio val="1">啦啦啦</yd-radio>
|
||||
<yd-radio val="2">啊啊啊</yd-radio>
|
||||
<yd-radio val="3">喔喔喔</yd-radio>
|
||||
</yd-radio-group>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="禁用">
|
||||
<yd-cell-item>
|
||||
<yd-radio-group v-model="radio3" slot="left">
|
||||
<yd-radio val="啦啦啦"></yd-radio>
|
||||
<yd-radio val="啊啊啊"></yd-radio>
|
||||
<yd-radio val="喔喔喔" disabled></yd-radio>
|
||||
</yd-radio-group>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="自定义图标颜色">
|
||||
<yd-cell-item>
|
||||
<yd-radio-group v-model="radio4" color="#F00" slot="left">
|
||||
<yd-radio val="啦啦啦"></yd-radio>
|
||||
<yd-radio val="啊啊啊"></yd-radio>
|
||||
<yd-radio val="喔喔喔"></yd-radio>
|
||||
</yd-radio-group>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="自定义图标大小">
|
||||
<yd-cell-item>
|
||||
<yd-radio-group v-model="radio5" size="30" slot="left">
|
||||
<yd-radio val="1"><span style="font-size: 24px;">男</span></yd-radio>
|
||||
<yd-radio val="2"><span style="font-size: 24px;">女</span></yd-radio>
|
||||
<yd-radio val="3"><span style="font-size: 24px;">未知</span></yd-radio>
|
||||
</yd-radio-group>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio1: '啦啦啦',
|
||||
radio2: 2,
|
||||
radio3: '喔喔喔',
|
||||
radio4: '啊啊啊',
|
||||
radio5: 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
65
vue-ydui/example/routers/rate.vue
Normal file
65
vue-ydui/example/routers/rate.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<yd-layout title="Rate">
|
||||
<yd-cell-group title="普通使用" class="demo-small-pitch">
|
||||
<yd-cell-item>
|
||||
<yd-rate slot="left" v-model="rate1"></yd-rate>
|
||||
<span slot="right">值是: {{rate1}}</span>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item>
|
||||
<yd-rate slot="left" v-model="rate2"></yd-rate>
|
||||
<span slot="right">设置默认值</span>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item>
|
||||
<yd-rate slot="left" count="7" v-model="rate3"></yd-rate>
|
||||
<span slot="right">设置多个</span>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item>
|
||||
<yd-rate slot="left" v-model="rate4" color="#00FF16" activeColor="#0078D7"></yd-rate>
|
||||
<span slot="right">自定义颜色</span>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item>
|
||||
<yd-rate slot="left" v-model="rate5" size="18px"></yd-rate>
|
||||
<span slot="right">自定义大小</span>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item>
|
||||
<yd-rate slot="left" v-model="rate6" :readonly="true"></yd-rate>
|
||||
<span slot="right">只读</span>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-cell-group title="带提示文字">
|
||||
<yd-cell-item>
|
||||
<yd-rate slot="left" v-model="rate7" :showText="['很差','还行','一般','挺好','非常好']"></yd-rate>
|
||||
<span slot="right">提示文字</span>
|
||||
</yd-cell-item>
|
||||
<yd-cell-item>
|
||||
<yd-rate slot="left" v-model="rate8" :showText="tipText"></yd-rate>
|
||||
<span slot="right">HTML提示模板</span>
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
rate1: 0,
|
||||
rate2: 3,
|
||||
rate3: 2,
|
||||
rate4: 1,
|
||||
rate5: 4,
|
||||
rate6: 3,
|
||||
rate7: 2,
|
||||
rate8: 1,
|
||||
tipText: [
|
||||
'<span style="color:red;">$ 分 - 很差</span>',
|
||||
'<span style="color:blue;">$ 分 - 勉强</span>',
|
||||
'<span style="color:green;">$ 分 - 一般</span>',
|
||||
'<span style="color:black;">$ 分 - 挺好</span>',
|
||||
'<span style="color:chartreuse;">$ 分 - 非常好</span>'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
48
vue-ydui/example/routers/rollnotice.vue
Normal file
48
vue-ydui/example/routers/rollnotice.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<yd-layout title="RollNotice">
|
||||
|
||||
<div class="demo-small-pitch">
|
||||
|
||||
<div class="demo-rollnotice">
|
||||
<img src="//st.360buyimg.com/m/images/index/jd-news-tit.png">
|
||||
<yd-rollnotice autoplay="2000">
|
||||
<yd-rollnotice-item><span style="color:#F00;"> 荐 </span>荣耀V9 3月超级钜惠！</yd-rollnotice-item>
|
||||
<yd-rollnotice-item><span style="color:#F00;"> 荐 </span>3.23京东超级品牌日格力盛典</yd-rollnotice-item>
|
||||
<yd-rollnotice-item><span style="color:#F00;"> 荐 </span>京东服饰 早春新品低至7折</yd-rollnotice-item>
|
||||
</yd-rollnotice>
|
||||
</div>
|
||||
|
||||
<yd-rollnotice align="center" height="50" autoplay="2000" class="demo-small-pitch">
|
||||
<yd-rollnotice-item>
|
||||
设置高度！设置高度！<br/>
|
||||
内容居中！内容居中！<br/>
|
||||
</yd-rollnotice-item>
|
||||
<yd-rollnotice-item>
|
||||
2.5秒自动切换！<br>
|
||||
2.5秒自动切换！<br>
|
||||
</yd-rollnotice-item>
|
||||
<yd-rollnotice-item>
|
||||
京东服饰 早春新品低至7折 <br>
|
||||
京东服饰 早春新品低至7折 <br>
|
||||
</yd-rollnotice-item>
|
||||
</yd-rollnotice>
|
||||
|
||||
<yd-rollnotice direction="down" align="right" height="50" autoplay="2000" class="demo-small-pitch">
|
||||
<yd-rollnotice-item>
|
||||
向下滚动！向下滚动！<br/>
|
||||
向下滚动！向下滚动！<br/>
|
||||
</yd-rollnotice-item>
|
||||
<yd-rollnotice-item>
|
||||
内容居右！内容居右！<br>
|
||||
内容居右！内容居右！<br>
|
||||
</yd-rollnotice-item>
|
||||
<yd-rollnotice-item>
|
||||
京东服饰 早春新品低至7折 <br>
|
||||
京东服饰 早春新品低至7折 <br>
|
||||
</yd-rollnotice-item>
|
||||
</yd-rollnotice>
|
||||
|
||||
</div>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
52
vue-ydui/example/routers/scrollnav.vue
Normal file
52
vue-ydui/example/routers/scrollnav.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<yd-layout title="ScrollNav">
|
||||
|
||||
<yd-scrollnav>
|
||||
<yd-scrollnav-panel :label="item.label" v-for="item, key in list" :key="key">
|
||||
|
||||
<p class="demo-scrollnav-title">{{item.label}}</p>
|
||||
<yd-list :theme="1">
|
||||
<yd-list-item v-for="i in 10">
|
||||
<img slot="img" src="http://static.shikee.com/common/img/blank.gif" style="background-color:#e6e6e6;">
|
||||
<span slot="title"><span style="color:#909090;">{{item.label}} - {{item.label}}</span></span>
|
||||
</yd-list-item>
|
||||
</yd-list>
|
||||
|
||||
</yd-scrollnav-panel>
|
||||
</yd-scrollnav>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{label: '今日特惠'},
|
||||
{label: '烟灶推荐'},
|
||||
{label: '净水饮水推荐'},
|
||||
{label: '洗碗机推荐'},
|
||||
{label: '电热推荐'},
|
||||
{label: '燃热推荐'},
|
||||
{label: '消毒柜推荐'},
|
||||
{label: '嵌入式推荐'},
|
||||
{label: '商用电器'},
|
||||
{label: '活动说明'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-scrollnav-title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 16px;
|
||||
color: #4242ff;
|
||||
text-align: center;
|
||||
background-color: #e4e4e4;
|
||||
padding-left: 4px;
|
||||
}
|
||||
</style>
|
||||
35
vue-ydui/example/routers/scrolltab.vue
Normal file
35
vue-ydui/example/routers/scrolltab.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<yd-layout title="ScrollTab">
|
||||
|
||||
<yd-scrolltab :callback="change">
|
||||
<yd-scrolltab-panel v-for="item in list" :label="item.label" :icon="item.icon">
|
||||
<div style="height: 350px;" :style="{backgroundColor: item.color}">{{item.label}}</div>
|
||||
</yd-scrolltab-panel>
|
||||
</yd-scrolltab>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{label: '空调', icon: 'demo-icons-category1', color: 'gray'},
|
||||
{label: '冰箱', icon: 'demo-icons-category2', color: 'blue'},
|
||||
{label: '洗衣机', icon: 'demo-icons-category3', color: 'yellow'},
|
||||
{label: '热水器', icon: 'demo-icons-category4', color: 'green'},
|
||||
{label: '厨房大家电', icon: 'demo-icons-category5', color: 'saddlebrown'},
|
||||
{label: '厨房小家电', icon: 'demo-icons-category6', color: 'darkgoldenrod'},
|
||||
{label: '生活家电', icon: 'demo-icons-category7', color: 'indianred'},
|
||||
{label: '风扇', icon: 'demo-icons-category8', color: 'aqua'}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(index) {
|
||||
console.log('ScrollTab：---> index：' + index);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
51
vue-ydui/example/routers/search.vue
Normal file
51
vue-ydui/example/routers/search.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<yd-layout title="Search">
|
||||
<p class="demo-search-title">行内模式：</p>
|
||||
<yd-search v-model="value1" :on-submit="submitHandler" :on-cancel="cancelHandler"></yd-search>
|
||||
|
||||
<p class="demo-search-title">全屏模式（带匹配结果）：</p>
|
||||
<yd-search :result="result" fullpage v-model="value2" :itemClick="clickHandler" :on-submit="submitHandler" :on-cancel="cancelHandler"></yd-search>
|
||||
|
||||
<p class="demo-search-title">全屏模式（带匹配结果）：</p>
|
||||
<yd-search fullpage v-model="value3" :itemClick="clickHandler" :on-submit="submitHandler" :on-cancel="cancelHandler">
|
||||
<div>自定义内容{{value3}}</div>
|
||||
</yd-search>
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
result: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getResult(val) {
|
||||
if (!val) return [];
|
||||
return [
|
||||
'Apple', 'Banana', 'Orange', 'Durian', 'Lemon', 'Peach', 'Cherry', 'Berry',
|
||||
'Core', 'Fig', 'Haw', 'Melon', 'Plum', 'Pear', 'Peanut', 'Other'
|
||||
].filter(value => new RegExp(val, 'i').test(value));
|
||||
},
|
||||
clickHandler(item) {
|
||||
this.$dialog.toast({mes: `搜索：${item}`});
|
||||
},
|
||||
submitHandler(value) {
|
||||
this.$dialog.toast({mes: `搜索：${value}`});
|
||||
},
|
||||
cancelHandler() {
|
||||
this.$dialog.toast({mes: '取消搜索回调'});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value2(val) {
|
||||
this.result = this.getResult(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
67
vue-ydui/example/routers/sendcode.vue
Normal file
67
vue-ydui/example/routers/sendcode.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<yd-layout title="SendCode">
|
||||
<yd-cell-group class="demo-small-pitch">
|
||||
<yd-cell-item>
|
||||
<i slot="icon" class="demo-icons-phone"></i>
|
||||
<input type="text" slot="right" placeholder="请输入手机号码">
|
||||
|
||||
<!-- ↓↓关键代码是这里↓↓ -->
|
||||
<yd-sendcode slot="right" v-model="start1" @click.native="sendCode" type="warning"></yd-sendcode>
|
||||
<!-- ↑↑关键代码是这里↑↑ -->
|
||||
|
||||
</yd-cell-item>
|
||||
</yd-cell-group>
|
||||
|
||||
<yd-button-group>
|
||||
<yd-sendcode
|
||||
v-model="start2"
|
||||
@click.native="start2 = true"
|
||||
second="15"
|
||||
runStr="在{%s}秒后你就可以重新获取啦"
|
||||
resetStr="你可以重新获取验证码啦"
|
||||
size="large"
|
||||
type="primary"
|
||||
></yd-sendcode>
|
||||
</yd-button-group>
|
||||
|
||||
<yd-button-group>
|
||||
<yd-sendcode
|
||||
v-model="start3"
|
||||
storageKey="dashuaibi"
|
||||
@click.native="start3 = true"
|
||||
size="large"
|
||||
type="danger"
|
||||
initStr="刷新页面倒计时还会继续"
|
||||
></yd-sendcode>
|
||||
</yd-button-group>
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
start1: false,
|
||||
start2: false,
|
||||
start3: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sendCode() {
|
||||
this.$dialog.loading.open('发送中...');
|
||||
setTimeout(() => {
|
||||
|
||||
this.start1 = true;
|
||||
this.$dialog.loading.close();
|
||||
|
||||
this.$dialog.toast({
|
||||
mes: '已发送',
|
||||
icon: 'success',
|
||||
timeout: 1500
|
||||
});
|
||||
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
25
vue-ydui/example/routers/slider.vue
Normal file
25
vue-ydui/example/routers/slider.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<yd-layout title="Slider">
|
||||
<div class="demo-small-pitch">
|
||||
|
||||
<yd-slider autoplay="3000">
|
||||
<yd-slider-item>
|
||||
<a href="http://www.ydcss.com">
|
||||
<img src="http://static.ydcss.com/uploads/ydui/1.jpg">
|
||||
</a>
|
||||
</yd-slider-item>
|
||||
<yd-slider-item>
|
||||
<a href="http://www.ydcss.com">
|
||||
<img src="http://static.ydcss.com/uploads/ydui/2.jpg">
|
||||
</a>
|
||||
</yd-slider-item>
|
||||
<yd-slider-item>
|
||||
<a href="http://www.ydcss.com">
|
||||
<img src="http://static.ydcss.com/uploads/ydui/3.jpg">
|
||||
</a>
|
||||
</yd-slider-item>
|
||||
</yd-slider>
|
||||
|
||||
</div>
|
||||
</yd-layout>
|
||||
</template>
|
||||
82
vue-ydui/example/routers/spinner.vue
Normal file
82
vue-ydui/example/routers/spinner.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<yd-layout title="Spinner">
|
||||
<aside class="demo-tip">
|
||||
<p>Spinner 支持长按快速加减，不支持小数加减；</p>
|
||||
</aside>
|
||||
|
||||
<div class="demo-spinner">
|
||||
<span class="demo-spinner-title">最大值为75，累计值为3（若不设置最小值，则默认为累计值3）</span>
|
||||
<yd-spinner max="75" unit="3" v-model="spinner1"></yd-spinner>
|
||||
<span class="demo-spinner-tip">[model: spinner1 = <strong>{{spinner1}}</strong>]</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-spinner demo-small-pitch">
|
||||
<span class="demo-spinner-title">设置最小值为12，累计值为3</span>
|
||||
<yd-spinner min="12" unit="3" v-model="spinner2"></yd-spinner>
|
||||
<span class="demo-spinner-tip">[model: spinner2 = <strong>{{spinner2}}</strong>]</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-spinner demo-small-pitch">
|
||||
<span class="demo-spinner-title">不设置最大值/最小值/累计值，则累计值和最小值默认为1</span>
|
||||
<yd-spinner v-model="spinner3"></yd-spinner>
|
||||
<span class="demo-spinner-tip">[model: spinner3 = <strong>{{spinner3}}</strong>]</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-spinner demo-small-pitch">
|
||||
<span class="demo-spinner-title">设置默认值为150，累计值为5</span>
|
||||
<yd-spinner unit="5" v-model="spinner4"></yd-spinner>
|
||||
<span class="demo-spinner-tip">[model: spinner4 = <strong>{{spinner4}}</strong>]</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-spinner demo-small-pitch">
|
||||
<span class="demo-spinner-title">禁止修改（设置readonly参数为false即可）</span>
|
||||
<yd-spinner readonly v-model="spinner5"></yd-spinner>
|
||||
<span class="demo-spinner-tip">[model: spinner5 = <strong>{{spinner5}}</strong>]</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-spinner demo-small-pitch">
|
||||
<span class="demo-spinner-title">禁用长按快速加减（设置参数longpress为false即可）</span>
|
||||
<yd-spinner :longpress="false" v-model="spinner6"></yd-spinner>
|
||||
<span class="demo-spinner-tip">[model: spinner6 = <strong>{{spinner6}}</strong>]</span>
|
||||
</div>
|
||||
<div class="demo-spinner demo-small-pitch">
|
||||
<span class="demo-spinner-title">自定义宽高</span>
|
||||
<yd-spinner v-model="spinner7" width="180px" height="50px"></yd-spinner>
|
||||
<span class="demo-spinner-tip">[model: spinner7 = <strong>{{spinner7}}</strong>]</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-spinner demo-small-pitch">
|
||||
<span class="demo-spinner-title">设置圆形按钮样式</span>
|
||||
<yd-spinner :callback="fn" val="9567" v-model="spinner8" height="30px" width="80px" button-style="circle"></yd-spinner>
|
||||
<span class="demo-spinner-tip">[model: spinner8 = <strong>{{spinner8}}</strong>]</span>
|
||||
</div>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
spinner1: 0,
|
||||
spinner2: 0,
|
||||
spinner3: 0,
|
||||
spinner4: 150,
|
||||
spinner5: 0,
|
||||
spinner6: 0,
|
||||
spinner7: 0,
|
||||
spinner8: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
spinner1(val) {
|
||||
console.log('spinner1: ' + val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn(val, num) {
|
||||
console.log('啦啦啦', `值是：${val}`, `数量是：${num}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
37
vue-ydui/example/routers/step.vue
Normal file
37
vue-ydui/example/routers/step.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<yd-layout title="Step">
|
||||
|
||||
<yd-step current="2" class="demo-pitch">
|
||||
<yd-step-item>
|
||||
<span slot="bottom">步骤一</span>
|
||||
</yd-step-item>
|
||||
<yd-step-item>
|
||||
<span slot="bottom">步骤二</span>
|
||||
</yd-step-item>
|
||||
<yd-step-item>
|
||||
<span slot="bottom">步骤三</span>
|
||||
</yd-step-item>
|
||||
<yd-step-item>
|
||||
<span slot="bottom">步骤四</span>
|
||||
</yd-step-item>
|
||||
</yd-step>
|
||||
|
||||
<yd-step theme="2" current="3" class="demo-pitch">
|
||||
<yd-step-item>
|
||||
<span slot="top">已发货</span>
|
||||
<span slot="bottom">扬州市</span>
|
||||
</yd-step-item>
|
||||
<yd-step-item>
|
||||
<span slot="top">运输中</span>
|
||||
</yd-step-item>
|
||||
<yd-step-item>
|
||||
<span slot="top">派件中</span>
|
||||
</yd-step-item>
|
||||
<yd-step-item>
|
||||
<span slot="top">已签收</span>
|
||||
<span slot="bottom">南宁市</span>
|
||||
</yd-step-item>
|
||||
</yd-step>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
65
vue-ydui/example/routers/switch.vue
Normal file
65
vue-ydui/example/routers/switch.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<yd-layout>
|
||||
<yd-navbar slot="navbar" title="Switch">
|
||||
<router-link to="/cr" slot="left">
|
||||
<yd-navbar-back-icon></yd-navbar-back-icon>
|
||||
</router-link>
|
||||
</yd-navbar>
|
||||
|
||||
<div class="demo-cr demo-small-pitch">
|
||||
<span><yd-switch v-model="switch1"></yd-switch></span>
|
||||
<span>值为：{{switch1}}</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-cr demo-small-pitch">
|
||||
<span><yd-switch v-model="switch2" disabled></yd-switch></span>
|
||||
<span>禁用：{{switch2}}</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-cr demo-small-pitch">
|
||||
<span><yd-switch v-model="switch3" color="#F00"></yd-switch></span>
|
||||
<span>自定义颜色：{{switch3}}</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-cr demo-small-pitch">
|
||||
<span><yd-switch size="small" v-model="switch4"></yd-switch></span>
|
||||
<span><yd-switch size="normal" v-model="switch4"></yd-switch></span>
|
||||
<span><yd-switch size="large" v-model="switch4"></yd-switch></span>
|
||||
<span>三种大小 (small/normal/large)</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-cr demo-small-pitch">
|
||||
<span><yd-switch v-model="switch5" true-value="aaaaa" false-value="bbbbb" val="1111"></yd-switch></span>
|
||||
<span>true-value & false-value：{{switch5}}</span>
|
||||
</div>
|
||||
|
||||
<yd-cell-group title="结合Cell组件" class="demo-small-pitch">
|
||||
<yd-cell-item type="label">
|
||||
<span slot="left">值为：{{switch6}}</span>
|
||||
<yd-switch slot="right" v-model="switch6" val="2222" :callback="fn"></yd-switch>
|
||||
</yd-cell-item>
|
||||
<p slot="bottom" style="text-align:right;padding: .05rem .24rem;color:#555;">设置属性type为label即可点击整行控制switch组件</p>
|
||||
</yd-cell-group>
|
||||
</yd-layout>
|
||||
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switch1: false,
|
||||
switch2: true,
|
||||
switch3: true,
|
||||
switch4: true,
|
||||
switch5: 'aaaaa',
|
||||
switch6: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn(currentValue, val) {
|
||||
console.log(`是否选中：${currentValue}`, `值是：${val} (列表数据可能会用到)`);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
85
vue-ydui/example/routers/tab.vue
Normal file
85
vue-ydui/example/routers/tab.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<yd-layout title="Tab">
|
||||
<div class="demo-tab-title">普通使用</div>
|
||||
<yd-tab>
|
||||
<yd-tab-panel label="选项一">土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。</yd-tab-panel>
|
||||
<yd-tab-panel label="选项二">我需要三件东西：爱情友谊和图书。然而这三者之间何其相通！炽热的爱情可以充实图书的内容，图书又是人们最忠实的朋友。</yd-tab-panel>
|
||||
<yd-tab-panel label="选项三">时间是一切财富中最宝贵的财富。</yd-tab-panel>
|
||||
<yd-tab-panel label="选项四">真理惟一可靠的标准就是永远自相符合。</yd-tab-panel>
|
||||
</yd-tab>
|
||||
|
||||
<div class="demo-tab-title">设置初始，手动切换</div>
|
||||
<yd-tab v-model="tab1">
|
||||
<yd-tab-panel label="选项一">111111</yd-tab-panel>
|
||||
<yd-tab-panel label="选项二">222222 - 【设置初始激活项】</yd-tab-panel>
|
||||
<yd-tab-panel label="选项三">333333</yd-tab-panel>
|
||||
<yd-tab-panel label="选项四">444444</yd-tab-panel>
|
||||
</yd-tab>
|
||||
|
||||
<yd-button-group>
|
||||
<yd-button size="large" @click.native="tab1 = 3" type="warning" style="height: 40px;font-size: 15px;">go to 3</yd-button>
|
||||
</yd-button-group>
|
||||
|
||||
<div class="demo-tab-title">多个选项卡，左右滑动</div>
|
||||
<yd-tab horizontal-scroll>
|
||||
<yd-tab-panel label="选项一">111111</yd-tab-panel>
|
||||
<yd-tab-panel label="选项二">222222</yd-tab-panel>
|
||||
<yd-tab-panel label="选项三">333333</yd-tab-panel>
|
||||
<yd-tab-panel label="选项四">444444</yd-tab-panel>
|
||||
<yd-tab-panel label="选项五">555555</yd-tab-panel>
|
||||
<yd-tab-panel label="选项六">666666</yd-tab-panel>
|
||||
<yd-tab-panel label="选项七">777777</yd-tab-panel>
|
||||
<yd-tab-panel label="选项八">888888</yd-tab-panel>
|
||||
</yd-tab>
|
||||
|
||||
<div class="demo-tab-title">异步获取数据</div>
|
||||
<yd-tab v-model="tab2" :callback="fn" :prevent-default="false" :item-click="itemClick">
|
||||
<yd-tab-panel v-for="item in items" :label="item.label">{{item.content}}</yd-tab-panel>
|
||||
</yd-tab>
|
||||
|
||||
<div class="demo-tab-title">添加标识</div>
|
||||
<yd-tab>
|
||||
<yd-tab-panel label="选项一">aaaaa</yd-tab-panel>
|
||||
<yd-tab-panel label="选项二" badge="2">bbbbb</yd-tab-panel>
|
||||
<yd-tab-panel label="选项三" dot>cccc</yd-tab-panel>
|
||||
<yd-tab-panel label="选项四">dddd</yd-tab-panel>
|
||||
</yd-tab>
|
||||
|
||||
<div class="demo-tab-title">自定义外观</div>
|
||||
<yd-tab bg-color="#F00" color="#FFF" border-color="#000" active-color="#000" height="1.2rem" font-size=".36rem">
|
||||
<yd-tab-panel label="选项一">aaaaa</yd-tab-panel>
|
||||
<yd-tab-panel label="选项二">bbbbb</yd-tab-panel>
|
||||
<yd-tab-panel label="选项三">cccc</yd-tab-panel>
|
||||
</yd-tab>
|
||||
</yd-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tab1: 1,
|
||||
tab2: 0,
|
||||
items: [
|
||||
{label: '1111', content: 'aaaaaaaaaaa'},
|
||||
{label: '2222', content: 'bbbbbbbbbbb'},
|
||||
{label: '3333', content: 'ccccccccccc'},
|
||||
{label: '4444', content: 'ddddddddddd'}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn(label, key) {
|
||||
console.log(label, key);
|
||||
},
|
||||
itemClick(key) {
|
||||
this.$dialog.loading.open('数据加载中');
|
||||
setTimeout(() => {
|
||||
this.tab2 = key;
|
||||
this.$dialog.loading.close();
|
||||
this.items[key].content = '新内容【key:' + key + '】新内容_' + new Date().getTime();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
86
vue-ydui/example/routers/tabbar.vue
Normal file
86
vue-ydui/example/routers/tabbar.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<yd-layout>
|
||||
<yd-navbar slot="navbar" title="TabBar">
|
||||
<router-link to="/asidebar" slot="left">
|
||||
<yd-navbar-back-icon></yd-navbar-back-icon>
|
||||
</router-link>
|
||||
</yd-navbar>
|
||||
|
||||
<yd-tabbar class="demo-small-pitch">
|
||||
<yd-tabbar-item title="微信" link="tabbar" active>
|
||||
<i slot="icon" class="demo-icons-weixin"></i>
|
||||
</yd-tabbar-item>
|
||||
<yd-tabbar-item title="通讯录" link="/asidebar">
|
||||
<i slot="icon" class="demo-icons-contact"></i>
|
||||
</yd-tabbar-item>
|
||||
<yd-tabbar-item title="发现" link="/asidebar">
|
||||
<i slot="icon" class="demo-icons-discover"></i>
|
||||
</yd-tabbar-item>
|
||||
<yd-tabbar-item title="我" link="/asidebar">
|
||||
<i slot="icon" class="demo-icons-me"></i>
|
||||
</yd-tabbar-item>
|
||||
</yd-tabbar>
|
||||
|
||||
<yd-tabbar class="demo-small-pitch" padding="4px" active-color="#EE651C">
|
||||
<yd-tabbar-item title="" link="/asidebar">
|
||||
<img slot="icon" style="height: .7rem;" src="http://static.ydcss.com/ydui/img/taobao.png"/>
|
||||
</yd-tabbar-item>
|
||||
<yd-tabbar-item title="微淘" link="/asidebar" active>
|
||||
<yd-icon name="discount" slot="icon" size=".36rem"></yd-icon>
|
||||
</yd-tabbar-item>
|
||||
<yd-tabbar-item title="消息" link="/asidebar" dot>
|
||||
<yd-icon name="time" slot="icon" size=".36rem"></yd-icon>
|
||||
</yd-tabbar-item>
|
||||
<yd-tabbar-item title="购物车" link="/asidebar">
|
||||
<yd-icon name="shopcart-outline" slot="icon" size=".36rem"></yd-icon>
|
||||
</yd-tabbar-item>
|
||||
<yd-tabbar-item title="我的淘宝" link="/asidebar">
|
||||
<yd-icon name="ucenter-outline" slot="icon" size=".36rem"></yd-icon>
|
||||
</yd-tabbar-item>
|
||||
</yd-tabbar>
|
||||
|
||||
<yd-tabbar class="demo-small-pitch" padding="0">
|
||||
<yd-tabbar-other>
|
||||
<img style="height: .86rem;" src="http://static.ydcss.com/ydui/img/ydcss.jpg"/>
|
||||
</yd-tabbar-other>
|
||||
<yd-tabbar-item title="购物车" link="/asidebar">
|
||||
<yd-icon name="shopcart-outline" slot="icon" size=".36rem"></yd-icon>
|
||||
</yd-tabbar-item>
|
||||
<yd-tabbar-item title="收藏" link="/asidebar">
|
||||
<yd-icon name="star-outline" slot="icon" size=".36rem"></yd-icon>
|
||||
</yd-tabbar-item>
|
||||
<yd-tabbar-item title="我的" link="/asidebar">
|
||||
<yd-icon name="ucenter-outline" slot="icon" size=".36rem"></yd-icon>
|
||||
</yd-tabbar-item>
|
||||
</yd-tabbar>
|
||||
|
||||
<yd-tabbar class="demo-small-pitch" border-color="#337EF6" bgcolor="#FCCECD">
|
||||
<yd-tabbar-item title="Props" link="/asidebar">
|
||||
<yd-icon name="time" slot="icon" size=".36rem"></yd-icon>
|
||||
</yd-tabbar-item>
|
||||
<yd-tabbar-item title="轻松修改" link="/asidebar">
|
||||
<yd-icon name="star-outline" slot="icon" size=".36rem"></yd-icon>
|
||||
</yd-tabbar-item>
|
||||
<yd-tabbar-item title="边框颜色" link="/asidebar">
|
||||
<yd-icon name="ucenter-outline" slot="icon" size=".36rem"></yd-icon>
|
||||
</yd-tabbar-item>
|
||||
</yd-tabbar>
|
||||
|
||||
<yd-tabbar slot="tabbar">
|
||||
<yd-tabbar-item title="首页" link="/tabbar" active>
|
||||
<yd-icon name="home" slot="icon" size=".36rem"></yd-icon>
|
||||
<yd-badge slot="badge" type="danger" scale=".6">2</yd-badge>
|
||||
</yd-tabbar-item>
|
||||
<yd-tabbar-item title="购物车" link="/asidebar">
|
||||
<yd-icon name="shopcart-outline" slot="icon" size=".36rem"></yd-icon>
|
||||
</yd-tabbar-item>
|
||||
<yd-tabbar-item title="收藏" link="/asidebar">
|
||||
<yd-icon name="star-outline" slot="icon" size=".36rem"></yd-icon>
|
||||
</yd-tabbar-item>
|
||||
<yd-tabbar-item title="我的" link="/asidebar" dot>
|
||||
<yd-icon name="ucenter-outline" slot="icon" size=".36rem"></yd-icon>
|
||||
</yd-tabbar-item>
|
||||
</yd-tabbar>
|
||||
|
||||
</yd-layout>
|
||||
</template>
|
||||
30
vue-ydui/example/routers/timeline.vue
Normal file
30
vue-ydui/example/routers/timeline.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<yd-layout title="TimeLine">
|
||||
<yd-timeline class="demo-small-pitch">
|
||||
<yd-timeline-item>
|
||||
<p>【南宁市】您的订单正在配送途中，请您准备签收，感谢您的耐心等待。京东扫码付，单单享立减。</p>
|
||||
<p style="margin-top: 10px;">2017-08-18 08:24:18</p>
|
||||
</yd-timeline-item>
|
||||
<yd-timeline-item>
|
||||
<p>【南宁市】您的订单已到达【南宁安吉站】</p>
|
||||
<p style="margin-top: 10px;">2017-08-18 07:25:08</p>
|
||||
</yd-timeline-item>
|
||||
<yd-timeline-item>
|
||||
<p>【南宁市】您的订单在京东【南宁分拨中心】发货完成，准备送往京东【南宁安吉站】</p>
|
||||
<p style="margin-top: 10px;">2017-08-17 21:44:08</p>
|
||||
</yd-timeline-item>
|
||||
<yd-timeline-item>
|
||||
<p>【南宁市】您的订单在京东【南宁分拨中心】分拣完成</p>
|
||||
<p style="margin-top: 10px;">2017-08-17 21:43:38</p>
|
||||
</yd-timeline-item>
|
||||
<yd-timeline-item>
|
||||
<p>您的订单已经进入京东2号库准备出库</p>
|
||||
<p style="margin-top: 10px;">2017-08-17 19:40:42</p>
|
||||
</yd-timeline-item>
|
||||
<yd-timeline-item>
|
||||
<p>您提交了订单，请等待系统确认</p>
|
||||
<p style="margin-top: 10px;">2017-08-17 19:40:07</p>
|
||||
</yd-timeline-item>
|
||||
</yd-timeline>
|
||||
</yd-layout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user