Skip to content

Commit

Permalink
feat: add components doc
Browse files Browse the repository at this point in the history
  • Loading branch information
@JimmyVV
JimmyVV committed Dec 23, 2019
1 parent 86dd4e3 commit d15bd0d
Show file tree
Hide file tree
Showing 25 changed files with 413 additions and 2 deletions.
5 changes: 5 additions & 0 deletions kbone/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@
"build": "vuepress build src"
},
"devDependencies": {
"less": "^3.10.3",
"less-loader": "^5.0.0",
"vuepress": "^1.2.0"
},
"dependencies": {
"kbone-ui": "^0.5.4"
}
}
53 changes: 53 additions & 0 deletions kbone/src/.vuepress/components/KActionSheetDemo.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<template>
<KView class="page actionsheet js_show">
<KView class="page__hd">
<h1 class="page__title">Button</h1>
<p class="page__desc">按钮，WeUI采用小程序原生的按钮为主体，加入一些间距的样式。</p>
</KView>
<KView class="page__hd">
<KButton @click="openSheet">Show ActionSheet</KButton>
<KButton @click="openTitleSheet">带 title</KButton>
</KView>
<KActionSheet
:actions="['微信','微信读书','微信小程序']"
v-model="isShow"
:actionClick='actionChoose'
/>
<KActionSheet
:actions="['零度的田','淮仁']"
label="选择你的名字"
v-model="isShowTitle"
:actionClick='actionChoose'
/>
</KView>
</template>

<script>
export default {
data(){
return {
isShow: false,
isShowTitle: false
}
},
methods:{
openSheet(){
this.isShow = true
},
openTitleSheet(){
this.isShowTitle = true
},
actionChoose(value){
console.log(value)
this.isShow = false
this.isShowTitle = false
}
}
}
</script>

<style lang="less">
@import "./base.less";
</style>
39 changes: 39 additions & 0 deletions kbone/src/.vuepress/components/KButtonDemo.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<template>
<KView class="page button js_show">
<KView class="page__hd">
<h1 class="page__title">Button</h1>
<p class="page__desc">按钮，WeUI采用小程序原生的按钮为主体，加入一些间距的样式。</p>
</KView>
<KButtonArea>
<KButton type="primary" >页面主要操作</KButton>
<KButton type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo" > getUserInfo </KButton>
<KButton type="primary" :loading="true">Loading</KButton>
<KButton type="primary" :disabled="true">禁止点击</KButton>
<KButton >页面次要操作</KButton>
<KButton type="warn">警告类操作</KButton>
<KButton type="warn" :loading="true">警告类操作</KButton>
<KButton type="warn" :disabled="true">警告类操作</KButton>
</KButtonArea>
<KButtonArea direction="horizontal">
<KButton size="mini" type="primary">btn</KButton>
<KButton size="mini" >btn</KButton>
<KButton size="mini" type="warn">btn</KButton>
</KButtonArea>
</KView>
</template>

<script>
export default {
name:"KButtonDemo",
methods:{
getUserInfo(e){
console.log(e)
}
}
}
</script>
<style lang="less">
@import "./base.less";
</style>
53 changes: 53 additions & 0 deletions kbone/src/.vuepress/components/KFlexDemo.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<template>
<KView class="page flex js_show">
<KView class="page__hd">
<h1 class="page__title">Flex</h1>
<p class="page__desc">Flex布局</p>
</KView>
<KView class="page__bd page__bd_spacing">
<KFlex>
<KFlexItem><KView class="placeholder">weui</KView></KFlexItem>
</KFlex>
<KFlex>
<KFlexItem><KView class="placeholder">weui</KView></KFlexItem>
<KFlexItem><KView class="placeholder">weui</KView></KFlexItem>
</KFlex>
<KFlex>
<KFlexItem><KView class="placeholder">weui</KView></KFlexItem>
<KFlexItem><KView class="placeholder">weui</KView></KFlexItem>
<KFlexItem><KView class="placeholder">weui</KView></KFlexItem>
</KFlex>
<KFlex>
<KFlexItem><KView class="placeholder">weui</KView></KFlexItem>
<KFlexItem><KView class="placeholder">weui</KView></KFlexItem>
<KFlexItem><KView class="placeholder">weui</KView></KFlexItem>
<KFlexItem><KView class="placeholder">weui</KView></KFlexItem>
</KFlex>
</KView>
</KView>
</template>


<script>
export default {
name:"KFlexDemo"
}
</script>

<style lang="less">
@import "./base.less";
.page.flex {
.placeholder {
margin: 5px;
padding: 0 10px;
background-color: #F7F7F7;
height: 2.3em;
line-height: 2.3em;
text-align: center;
color: rgba(0,0,0,.3);
}
}
</style>
67 changes: 67 additions & 0 deletions kbone/src/.vuepress/components/KFormDemo.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<template>
<KView class="page form js_show">
<KView class="page__hd">
<h1 class="page__title">Form</h1>
<p class="page__desc">form 表单内容</p>
</KView>
<KCells checkbox title="Checkbox">
<KCheckboxGroup @change="handleChange" v-model="checkboxGrpValues">
<KCheckbox value="零度的田">零度的田</KCheckbox>
<KCheckbox value="小程序开发">小程序开发</KCheckbox>
</KCheckboxGroup>
</KCells>
<KCells title="Switch">
<KSwitch v-model="switchItem" label="Switch文本" />
</KCells>
<KCells title="Radio">
<KRadioGroup @change="raidoChange" v-model="radioValue">
<KRadio :value="1">微信</KRadio>
<KRadio :value="2">微信支付</KRadio>
<KRadio :value="3">小程序</KRadio>
</KRadioGroup>
</KCells>

<KCells title="表单输入">
<KInput label="卡号" @change="inputChange" v-model="inputCardValue" placeholder="填写本人卡号" clearable/>
<KInput label="昵称" @change="inputChange" v-model="inputNickName" placeholder="填写本人微信号的昵称" clearable/>
</KCells>


</KView>
</template>

<script>
export default {
name:"KFormDemo",
data(){
return {
singleCheckbox:false,
checkboxGrpValues:[],
inputCardValue:"",
inputNickName:"",
switchItem:false,
radioValue: 1
}
},
methods:{
handleChange(){
console.log(this.checkboxGrpValues)
},
singleCheckboxHandler(){
console.log(this.singleCheckbox)
},
raidoChange(){
console.log(this.radioValue)
},
inputChange(){
console.log(this.inputValue)
}
}
}
</script>

<style lang="less">
@import "./base.less";
</style>
45 changes: 45 additions & 0 deletions kbone/src/.vuepress/components/KPickerDemo.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<template>
<KView class="page picker js_show">
<KView class="page__hd">
<h1 class="page__title">Picker</h1>
<p class="page__desc">PickerView 和 PickerViewGroup 组件</p>
</KView>
<KView class="page__bd picker_page page__bd_spacing">
<KPickerView indicator-style="height: 50px;" style="width: 100%; height: 300px;" @change="changeIndex">
<KPickerViewColumn>
<KView v-for="(item,index) in singleData" style="line-height: 50px;" :key="index" >
{{item}}
</KView>
</KPickerViewColumn>
</KPickerView>
</KView>
</KView>
</template>

<script>
export default {
data(){
return {
singleData:[
'小程序',
"微信",
"开发六组",
'零度的田'
],
}
},
methods:{
changeIndex(index){
console.log(index)
}
}
}
</script>

<style lang="less">
@import "./base.less";
</style>
55 changes: 55 additions & 0 deletions kbone/src/.vuepress/components/KToastDemo.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<template>
<KView class="page toast js_show">
<KView class="page__hd">
<h1 class="page__title">Toast</h1>
<p class="page__desc">弹出式提示</p>
</KView>
<KView class="page__bd page__bd_spacing">
<KButton @click="successShow">
成功提示
</KButton>
<KButton @click="loadingShow">
加载中提示
</KButton>
</KView>
<KToast
type="success"
:duration="1000"
v-model="successTips"
>已完成</KToast>
<KToast
type="loading"
v-model="loadingToast"
>加载中提示</KToast>
</KView>
</template>

<script>
export default {
data(){
return {
successTips: false,
loadingToast: false,
}
},
methods:{
successShow(){
this.successTips = true
},
loadingShow(){
this.loadingToast = true
clearTimeout(this.timeout)
this.timeout = setTimeout(()=>{
this.loadingToast = false
},1000)
}
}
}
</script>
<style lang="less">
@import "./base.less";
</style>
50 changes: 50 additions & 0 deletions kbone/src/.vuepress/components/KToptipsDemo.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<template>
<KView class="page progress js_show">
<KView class="page__hd">
<h1 class="page__title">Toptips</h1>
<p class="page__desc">Toptips 布局</p>
</KView>
<KView class="page__bd page__bd_spacing">
<KButton @click="openSuccess" >Success</KButton>
<KButton @click="openinfo" >Info</KButton>
<KButton @click="openerror" >Error</KButton>
</KView>
<KToptips v-model="successShow" :duration="1000">
成功
</KToptips>
<KToptips v-model="infoShow" type="info" :duration="1000">
提示
</KToptips>
<KToptips v-model="errorShow" type="error" :duration="1000">
错误
</KToptips>
</KView>
</template>

<script>
export default {
data(){
return {
successShow:false,
infoShow:false,
errorShow:false
}
},
methods:{
openSuccess(){
this.successShow = true
},
openinfo(){
this.infoShow = true
},
openerror(){
this.errorShow = true
},
}
}
</script>
<style lang="less">
@import "./base.less";
</style>
6 changes: 6 additions & 0 deletions kbone/src/.vuepress/components/base.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.page.js_show{
padding: 2em;
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
border: 1px solid #ebebeb;
transition: .2s;
}
Loading

0 comments on commit d15bd0d

Please sign in to comment.