Skip to content

H
hls-easy-ui
Commit 0200b55a authored by Nature's avatar Nature
Browse files
Options

添加单选框，checkBox等组建

parent 9cd01910
Hide whitespace changes
Inline Side-by-side
Showing with 520 additions and 130 deletions
README.md
View file @ 0200b55a
...@@ -532,6 +532,14 @@ showActionSheetButton() { ...@@ -532,6 +532,14 @@ showActionSheetButton() {
``` ```
### Note ### Note
hls-easy-ui#0.0.4
[添加单选框组建 h-radio](/packages/components/Radio/README.md)
[添加checkBox组建](/packages/components/CheckBox/README.md)
[修改原有的check-box组建名为h-switch](/packages/components/Switch/README.md)
hls-easy-ui#0.0.3 hls-easy-ui#0.0.3
添加ios下content的has-footer样式用于content高度在100%是滑动不到底部的问题 添加ios下content的has-footer样式用于content高度在100%是滑动不到底部的问题
......
package.json
View file @ 0200b55a
{ {
"name": "hls-easy-ui", "name": "hls-easy-ui",
"version": "0.0.3", "version": "0.0.4",
"description": "A Vue components project", "description": "A Vue components project",
"author": "JingChao <jingchao.wu@hand-china.com>", "author": "JingChao <jingchao.wu@hand-china.com>",
"private": false, "private": false,
......
packages/common/styles/variables.less
View file @ 0200b55a
...@@ -19,7 +19,9 @@ ...@@ -19,7 +19,9 @@
@background-color-gray: #fafafa; @background-color-gray: #fafafa;
@activated-color: #5D98F6; @activated-color: #5D98F6;
@divider-color:#fafafa; @divider-color:#fafafa;
@check-box-bg:#48D2A0; @switch-box-bg:#48D2A0;
@check-box-bg:@theme-color;
@radio-box-bg:@theme-color;
/** /**
......
packages/components/CheckBox/README.md
View file @ 0200b55a
checkBox 配合 ListItem组件调用 h-check checkBox
```html ```html
<list-item> <list-item>
<item :show-arrow="true"> <item :show-arrow="true">
<img slot="left-icon" src="../assets/myInfo/version@2x.png" class="left-icon"> <h-check slot="left-icon" v-model="radioValue" @checkClick="checkClick"/>
<div slot="name">检查更新</div> <section slot="content">CheckBox</section>
<check-box slot="content" v-model="savePhoto" @checkClick="savePhotoFun"></check-box>
</item> </item>
</list-item> </list-item>
<h-check slot="left-icon" v-model="checkValue" :disable="true" @checkClick="checkClick"/>
export default { export default {
data() { data() {
return { return {
savePhoto: new Boolean(window.localStorage.savePhoto) || false, radioValue: false,
} }
}, },
methods: { methods: {
savePhotoFun(value) { checkClick(value) {
this.savePhoto = value; this.checkValue = value;
window.localStorage.setItem('savePhoto', value);
} }
} }
} }
``` ```
style
@check-box-bg checkbox选中是的背景颜色
v-model 绑定value值 true/false
disable 是否只读 true/false
@checkClick 点击checkBox返回当前value值
packages/components/CheckBox/index.vue 100755 → 100644
View file @ 0200b55a
/**
* @Author think
* @Date 2019-07-10 09:39
*/
<template> <template>
<label <label class="h-checkbox" @click="checked">
:class="cusClass" class="toggle toggle-positive toggle-check" <label class="checkbox">
@click="checked"> <input :checked="value" :disabled="disable" type="checkbox">
<input :checked="value" type="checkbox"> </label>
<div class="track">
<div class="handle"/>
</div>
</label> </label>
</template> </template>
...@@ -17,20 +19,17 @@ export default { ...@@ -17,20 +19,17 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
cusClass: { disable: {
type: String, type: Boolean,
default: '', default: false,
}, },
/* checkedColor: {
type: String,
default: '#5D98F6',
}, */
}, },
data () { data () {
return { return {}
// clickValue: false
}
},
computed: {
/* value() {
return value ? value : false
} */
}, },
watch: { watch: {
value (val) { value (val) {
...@@ -40,45 +39,61 @@ export default { ...@@ -40,45 +39,61 @@ export default {
}, },
methods: { methods: {
checked () { checked () {
this.$emit('checkClick', !this.value) if (!this.disable) {
this.$emit('checkClick', !this.value)
}
}, },
}, },
} }
</script> </script>
<style lang="less" scoped> <style lang="less">
.h-checkbox {
.toggle-check { //width: 42px;
display: -webkit-flex; //height: 42px;
display: flex; display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center; align-items: center;
.track { .checkbox {
width: 40px; padding: 5px 5px;
height: 25px;
margin-right: 2.5px; input {
border-radius: 15px; width: 24px;
.handle { height: 24px;
width: 22.5px; border-radius: 12px;
height: 22.5px;
top: 3.5px; &:after {
left: 2.5px; top: 30%;
left: 22%;
opacity: 1;
border-width: 2px; /*no*/
}
&:checked {
&:before {
background: @check-box-bg;
border-color: @check-box-bg;
}
}
&:disabled {
&:checked {
opacity: .7;
}
}
} }
} }
} }
.toggle.toggle-positive input:checked + .track { .hls-item {
border-color: @check-box-bg; .contents {
background-color: @check-box-bg; .h-checkbox {
.checkbox {
.handle { padding: 0;
width: 22.5px; }
height: 22.5px; }
top: 3.5px;
left: 9px;
} }
} }
</style> </style>
packages/components/Radio/README.md 0 → 100755
View file @ 0200b55a
h-radio 单选框组建
```html
<template>
<h-view>
<h-content>
<list-item>
<item>
<section slot="name">注册国家</section>
<radio-group slot="content" v-model="radioValue">
<h-radio :checked="true" name="China" title="中国"/>
<h-radio :disable="true" name="Japan" title="日本"/>
<h-radio name="Other" title="其他"/>
</radio-group>
</item>
</list-item>
<radio-group v-model="radioValue">
<h-radio name="China" title="中国"/>
<h-radio :checked="true" :disable="true" name="Japan" title="日本"/>
<h-radio name="Other" title="其他"/>
</radio-group>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'RadioTest',
data () {
return {
radioValue: 'Japan',
}
},
watch: {
radioValue (value) {
console.log(value)
},
},
methods: {},
}
</script>
<style scoped lang="less">
.hls-list-item{
.hls-item{
.radio-group{
display: flex;
.h-radio{
margin-right: 5px;
}
}
}
}
</style>
```
单选框组建必须配合radio-group使用表示一组
style
@check-box-bg checkbox选中是的背景颜色
v-model 绑定radio的选中返回的name值
disable 是否只读 true/false
checked 是否默认选中
name radio选中时返回的value
title radio对应的value描述
@radioClick 点击radio的触发函数 返回当前选中的value值
packages/components/Radio/index.vue 0 → 100644
View file @ 0200b55a
/**
* @Author think
* @Date 2019-07-10 13:51
*/
<template>
<section class="radio-group">
<slot/>
</section>
</template>
<script>
import radio from './radio'
export default {
name: 'RadioGroup',
component: { radio },
props: {
disable: {
type: Boolean,
default: false,
},
},
data () {
return {
radioList: [],
}
},
methods: {
click (value) {
this.$emit('input', value)
this.$emit('radioClick', value)
},
},
}
</script>
<style lang="less">
</style>
packages/components/Radio/radio.vue 0 → 100644
View file @ 0200b55a
/**
* @Author think
* @Date 2019-07-10 13:57
*/
<template>
<section class="h-radio" @click="click">
<div :class="{'disable':disable}" class="radio-icon">
<i :class="icon" class="icon"/>
</div>
<span class="radio-title" v-text="title"/>
</section>
</template>
<script>
let CHECKEDCLASS = 'ion-ios-checkmark'
let DEFAULTCLASS = 'ion-ios-circle-outline'
export default {
name: 'Radio',
props: {
disable: {
type: Boolean,
default: false,
},
title: {
type: String,
default: '',
},
name: {
type: String,
default: '',
},
checked: {
type: Boolean,
default: false,
},
},
data () {
return {
icon: DEFAULTCLASS,
}
},
watch: {},
mounted () {
this.$parent && this.$parent.radioList.push(this)
this.icon = this.checked ? CHECKEDCLASS : DEFAULTCLASS
this.disable = this.disable ? this.disable : this.$parent.disable
},
destroyed () {
this.$parent && this.$parent.radioList.splice(this.$parent.radioList.indexOf(this), 1)
},
methods: {
click () {
let vm = this
if (!vm.disable) {
vm.$parent.radioList.forEach(item => {
item.icon = DEFAULTCLASS
})
vm.icon = CHECKEDCLASS
this.$parent.click(this.name)
}
},
},
}
</script>
<style lang="less">
.h-radio {
display: flex;
height: 100%;
align-items: center;
.radio-icon {
width: 26px;
height: 26px;
.icon {
font-size: 26px;
}
.ion-ios-circle-outline{
color: #d9d9d9;
}
.ion-ios-checkmark{
color: @radio-box-bg;
}
}
.disable{
opacity: .7;
}
.radio-title{
line-height: 0.5rem;
font-size: 16px;
color: #333;
margin-left: 6px;
}
}
</style>
packages/components/Switch/README.md 0 → 100755
View file @ 0200b55a
checkBox 配合 ListItem组件调用
```html
<list-item>
<item :show-arrow="true">
<img slot="left-icon" src="../assets/myInfo/version@2x.png" class="left-icon">
<div slot="name">检查更新</div>
<h-switch slot="content" v-model="savePhoto" @switchClick="savePhotoFun"></h-switch>
</item>
</list-item>
export default {
data() {
return {
savePhoto: false,
}
},
methods: {
savePhotoFun(value) {
this.savePhoto = value;
}
}
}
```
style
@switch-box-bg switch选中时的背景颜色
v-model 绑定value值 true/false
disable 是否只读 true/false
@switchClick toggle点击触发函数 返回当前value值
packages/components/Switch/index.vue 0 → 100755
View file @ 0200b55a
<template>
<label
:class="cusClass" class="toggle toggle-positive toggle-check"
@click="checked">
<input :checked="value" :disabled="disable" type="checkbox">
<div class="track">
<div class="handle"/>
</div>
</label>
</template>
<script>
export default {
name: 'Switch',
props: {
value: {
type: Boolean,
default: false,
},
disable: {
type: Boolean,
default: false,
},
cusClass: {
type: String,
default: '',
},
},
data () {
return {
// clickValue: false
}
},
computed: {
/* value() {
return value ? value : false
} */
},
watch: {
value (val) {
this.$emit('input', val)
this.value = val
},
},
methods: {
checked () {
if (!this.disable) {
this.$emit('switchClick', !this.value)
}
},
},
}
</script>
<style lang="less" scoped>
.toggle-check {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
.track {
width: 40px;
height: 25px;
margin-right: 2.5px;
border-radius: 15px;
.handle {
width: 22.5px;
height: 22.5px;
top: 3.5px;
left: 2.5px;
}
}
}
.toggle.toggle-positive input:checked + .track {
border-color: @switch-box-bg;
background-color: @switch-box-bg;
.handle {
width: 22.5px;
height: 22.5px;
top: 3.5px;
left: 9px;
}
}
</style>
packages/components/component.js
View file @ 0200b55a
...@@ -10,12 +10,16 @@ import Swipe from './Swipe/index' ...@@ -10,12 +10,16 @@ import Swipe from './Swipe/index'
import SwipeItem from './Swipe/SwipeItem' import SwipeItem from './Swipe/SwipeItem'
import ListItem from './ListItem/ListItem' import ListItem from './ListItem/ListItem'
import Item from './ListItem/Item' import Item from './ListItem/Item'
import CheckBox from './CheckBox/index' import Switch from './Switch/index'
import Spin from './Spin/index' import Spin from './Spin/index'
import TopTip from './TopTip/index' import TopTip from './TopTip/index'
import Notify from './Dialog/Notify' import Notify from './Dialog/Notify'
import Stab from './STab/index' import Stab from './STab/index'
import TabItem from './STab/tab-item' import TabItem from './STab/tab-item'
import CheckBox from './CheckBox/index'
import RadioGroup from './Radio/index'
import Radio from './Radio/radio'
import BottomTab from './BottomTab/index' import BottomTab from './BottomTab/index'
import TabButton from './BottomTab/tab-button' import TabButton from './BottomTab/tab-button'
...@@ -37,10 +41,13 @@ export default (Vue) => { ...@@ -37,10 +41,13 @@ export default (Vue) => {
Vue.component('spin', Spin) Vue.component('spin', Spin)
Vue.component('top-tip', TopTip) Vue.component('top-tip', TopTip)
Vue.component('notify', Notify) Vue.component('notify', Notify)
Vue.component('check-box', CheckBox) Vue.component('h-switch', Switch)
Vue.component('s-tab', Stab) Vue.component('s-tab', Stab)
Vue.component('tab-item', TabItem) Vue.component('tab-item', TabItem)
Vue.component('bottom-tab', BottomTab) Vue.component('bottom-tab', BottomTab)
Vue.component('tab-button', TabButton) Vue.component('tab-button', TabButton)
Vue.component('h-modal', Modal) Vue.component('h-modal', Modal)
Vue.component('h-check', CheckBox)
Vue.component('radio-group', RadioGroup)
Vue.component('h-radio', Radio)
} }
packages/index.js
View file @ 0200b55a
// components // components
import BottomTab from './components/BottomTab/index' import BottomTab from './components/BottomTab/index'
import Switch from './components/Switch/index'
import CheckBox from './components/CheckBox/index' import CheckBox from './components/CheckBox/index'
import RadioGroup from './components/Radio/index'
import Radio from './components/Radio/radio'
import Notify from './components/Dialog/Notify' import Notify from './components/Dialog/Notify'
import HButton from './components/HButton/index' import HButton from './components/HButton/index'
import HContent from './components/HContent/index' import HContent from './components/HContent/index'
...@@ -48,7 +51,10 @@ export { ...@@ -48,7 +51,10 @@ export {
SwipeItem, SwipeItem,
ListItem, ListItem,
Item, Item,
Switch,
CheckBox, CheckBox,
RadioGroup,
Radio,
Spin, Spin,
TopTip, TopTip,
Notify, Notify,
......
src/pages/hlsPopup.vue
View file @ 0200b55a
...@@ -79,7 +79,9 @@ ...@@ -79,7 +79,9 @@
<h-button class="button-class radius-small" disabled>基础按钮(禁用)</h-button> <h-button class="button-class radius-small" disabled>基础按钮(禁用)</h-button>
<h2 class="item-title">Swip基础使用</h2> <h2 class="item-title">Swip基础使用</h2>
<swipe :interval="5000" @start="start" @move="move" @change="change" :defaultWidth="200"> <swipe
:interval="5000" :defaultWidth="200" @start="start" @move="move"
@change="change">
<swipe-item> <swipe-item>
<div :style="{'background': bgColor[0]}" class="item-bg">0</div> <div :style="{'background': bgColor[0]}" class="item-bg">0</div>
</swipe-item> </swipe-item>
...@@ -92,7 +94,7 @@ ...@@ -92,7 +94,7 @@
</swipe> </swipe>
<h2 class="item-title">纵向滚动</h2> <h2 class="item-title">纵向滚动</h2>
<swipe :vertical="true" style="height: 200px"> <swipe :vertical="true" style="height: 200px">
<swipe-item v-for="key in count" :key="key" :style="{'background': bgColor[key-1]}"> <swipe-item v-for="key in count" :key="key" :style="{'background': bgColor[key-1]}">
<div class="item-bg">{{ key-1 }}</div> <div class="item-bg">{{ key-1 }}</div>
</swipe-item> </swipe-item>
...@@ -180,14 +182,6 @@ ...@@ -180,14 +182,6 @@
</div> </div>
</item-option> </item-option>
</div> </div>
<h2>picker</h2>
<picker
ref="picker1" :data="year7" :columns="3" v-model="year7Value"
style="width: 100%"
@on-change="change"/>
<list-item :item-height="45"> <list-item :item-height="45">
<item> <item>
<img slot="left-icon" src="../assets/image/warning@2x.png" class="left-icon"> <img slot="left-icon" src="../assets/image/warning@2x.png" class="left-icon">
...@@ -214,13 +208,20 @@ ...@@ -214,13 +208,20 @@
<div class="handle"/> <div class="handle"/>
</div> </div>
</label> </label>
<check-box slot="content" v-model="savePhoto" @checkClick="savePhotoFun"/> <h-switch slot="content" :disable="true" v-model="savePhoto" @switchClick="savePhotoFun"/>
</item>
<item>
<h-check slot="left-icon" v-model="radioValue" @checkClick="radioClick"/>
<section slot="content">CheckBox</section>
</item> </item>
</list-item> </list-item>
<h-radio
v-model="radioValue"
@radioClick="radioClick"/>
<h2 class="item-title">s-tab</h2> <h2 class="item-title">s-tab</h2>
<div class="local-region"> <div class="local-region">
<s-tab :show-divider="true" @tabClick="stabClick" :overflowX="true"> <s-tab :show-divider="true" :overflowX="true" @tabClick="stabClick">
<tab-item>测试</tab-item> <tab-item>测试</tab-item>
<tab-item>你好</tab-item> <tab-item>你好</tab-item>
<tab-item>再见</tab-item> <tab-item>再见</tab-item>
...@@ -230,7 +231,9 @@ ...@@ -230,7 +231,9 @@
<tab-item>按钮4</tab-item> <tab-item>按钮4</tab-item>
</s-tab> </s-tab>
<s-tab :default-active="2" :show-divider="true" position="bottom" cusClass="class" @tabClick="stabClick" :overflowX="true"> <s-tab
:default-active="2" :show-divider="true" :overflowX="true" position="bottom"
cusClass="class" @tabClick="stabClick">
<tab-item><img src="../assets/image/warning@2x.png" style="width: 18px"></tab-item> <tab-item><img src="../assets/image/warning@2x.png" style="width: 18px"></tab-item>
<tab-item><img src="../assets/image/warning@2x.png" style="width: 18px"></tab-item> <tab-item><img src="../assets/image/warning@2x.png" style="width: 18px"></tab-item>
<tab-item><img src="../assets/image/warning@2x.png" style="width: 18px"></tab-item> <tab-item><img src="../assets/image/warning@2x.png" style="width: 18px"></tab-item>
...@@ -239,7 +242,6 @@ ...@@ -239,7 +242,6 @@
</div> </div>
<h2 class="item-title">Modal</h2> <h2 class="item-title">Modal</h2>
<h-button class="button-class" type="primary" @click.native="showModal">Modal</h-button> <h-button class="button-class" type="primary" @click.native="showModal">Modal</h-button>
</h-content> </h-content>
<bottom-tab :show-divider="true"> <bottom-tab :show-divider="true">
...@@ -290,66 +292,9 @@ export default { ...@@ -290,66 +292,9 @@ export default {
show2: false, show2: false,
bp_name: '', bp_name: '',
savePhoto: new Boolean(window.localStorage.savePhoto) || false, savePhoto: new Boolean(window.localStorage.savePhoto) || false,
year7Value: [],
year7: [{
name: '中国',
value: 'china',
parent: '0', // 为一级时可以不写 parent，但是此时允许为数字 0、空字符串或者字符串 '0'
}, {
name: '美国',
value: 'USA',
parent: '0',
}, {
name: '广东',
value: 'china001',
parent: 'china',
}, {
name: '广西',
value: 'china002',
parent: 'china',
}, {
name: '美国001',
value: 'usa001',
parent: 'USA',
}, {
name: '美国002',
value: 'usa002',
parent: 'USA',
}, {
name: '广州',
value: 'gz',
parent: 'china001',
}, {
name: '深圳',
value: 'sz',
parent: 'china001',
}, {
name: '广西001',
value: 'gx001',
parent: 'china002',
}, {
name: '广西002',
value: 'gx002',
parent: 'china002',
}, {
name: '美国001_001',
value: '0003',
parent: 'usa001',
}, {
name: '美国001_002',
value: '0004',
parent: 'usa001',
}, {
name: '美国002_001',
value: '0005',
parent: 'usa002',
}, {
name: '美国002_002',
value: '0006',
parent: 'usa002',
}],
modal: '', modal: '',
showModalValue: false, showModalValue: false,
radioValue: true,
} }
}, },
watch: { watch: {
...@@ -662,6 +607,11 @@ export default { ...@@ -662,6 +607,11 @@ export default {
showModal () { showModal () {
this.showModalValue = true this.showModalValue = true
}, },
radioClick (value) {
this.radioValue = value
console.log(value)
},
}, },
} }
</script> </script>
......
src/pages/radioTest.vue 0 → 100644
View file @ 0200b55a
/**
* @Author think
* @Date 2019-07-10 14:04
*/
<template>
<h-view>
<h-content>
<list-item>
<item>
<section slot="name">注册国家</section>
<radio-group slot="content" v-model="radioValue">
<h-radio :checked="true" name="China" title="中国"/>
<h-radio :disable="true" name="Japan" title="日本"/>
<h-radio name="Other" title="其他"/>
</radio-group>
</item>
</list-item>
<radio-group v-model="radioValue">
<h-radio name="China" title="中国"/>
<h-radio :checked="true" :disable="true" name="Japan" title="日本"/>
<h-radio name="Other" title="其他"/>
</radio-group>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'RadioTest',
data () {
return {
radioValue: 'Japan',
}
},
watch: {
radioValue (value) {
console.log(value)
},
},
methods: {},
}
</script>
<style scoped lang="less">
.hls-list-item{
.hls-item{
.radio-group{
display: flex;
.h-radio{
margin-right: 5px;
}
}
}
}
</style>
src/router/index.js
View file @ 0200b55a
...@@ -5,6 +5,7 @@ import Home from '@/pages/home' ...@@ -5,6 +5,7 @@ import Home from '@/pages/home'
// test工具类 // test工具类
import HlsPopup from '@/pages/hlsPopup' import HlsPopup from '@/pages/hlsPopup'
import Radio from '@/pages/radioTest'
Vue.use(Router) Vue.use(Router)
...@@ -17,6 +18,7 @@ export default new Router({ ...@@ -17,6 +18,7 @@ export default new Router({
{path: '/home', component: Home, name: 'Home', meta: {keepAlive: false}}, {path: '/home', component: Home, name: 'Home', meta: {keepAlive: false}},
// test工具类 // test工具类
{path: '/hls-popup', component: HlsPopup, name: 'HlsPopup', meta: {keepAlive: false}}, {path: '/hls-popup', component: HlsPopup, name: 'HlsPopup', meta: {keepAlive: false}},
{path: '/Radio', component: Radio, name: 'Radio', meta: {keepAlive: true}},
], ],
scrollBehavior (to, from, savedPosition) { scrollBehavior (to, from, savedPosition) {
if (to.hash) { if (to.hash) {
......
src/styles/variables.less
View file @ 0200b55a
...@@ -19,7 +19,9 @@ ...@@ -19,7 +19,9 @@
@background-color-gray: #fafafa; @background-color-gray: #fafafa;
@activated-color: #5D98F6; @activated-color: #5D98F6;
@divider-color:#fafafa; @divider-color:#fafafa;
@check-box-bg:#48D2A0; @switch-box-bg:#48D2A0;
@check-box-bg:@theme-color;
@radio-box-bg:@theme-color;
/** /**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment