Skip to content

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

添加单选框，checkBox等组建

parent 9cd01910
Show whitespace changes
Inline Side-by-side
Showing with 520 additions and 130 deletions
README.md
View file @ 0200b55a
......@@ -532,6 +532,14 @@ showActionSheetButton() {
```
### 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
添加ios下content的has-footer样式用于content高度在100%是滑动不到底部的问题
......
package.json
View file @ 0200b55a
{
"name": "hls-easy-ui",
"version": "0.0.3",
"version": "0.0.4",
"description": "A Vue components project",
"author": "JingChao <jingchao.wu@hand-china.com>",
"private": false,
......
packages/common/styles/variables.less
View file @ 0200b55a
......@@ -19,7 +19,9 @@
@background-color-gray: #fafafa;
@activated-color: #5D98F6;
@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
<list-item>
<item :show-arrow="true">
<img slot="left-icon" src="../assets/myInfo/version@2x.png" class="left-icon">
<div slot="name">检查更新</div>
<check-box slot="content" v-model="savePhoto" @checkClick="savePhotoFun"></check-box>
<h-check slot="left-icon" v-model="radioValue" @checkClick="checkClick"/>
<section slot="content">CheckBox</section>
</item>
</list-item>
<h-check slot="left-icon" v-model="checkValue" :disable="true" @checkClick="checkClick"/>
export default {
data() {
return {
savePhoto: new Boolean(window.localStorage.savePhoto) || false,
radioValue: false,
}
},
methods: {
savePhotoFun(value) {
this.savePhoto = value;
window.localStorage.setItem('savePhoto', value);
checkClick(value) {
this.checkValue = 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>
<label
:class="cusClass" class="toggle toggle-positive toggle-check"
@click="checked">
<input :checked="value" type="checkbox">
<div class="track">
<div class="handle"/>
</div>
<label class="h-checkbox" @click="checked">
<label class="checkbox">
<input :checked="value" :disabled="disable" type="checkbox">
</label>
</label>
</template>
......@@ -17,20 +19,17 @@ export default {
type: Boolean,
default: false,
},
cusClass: {
type: String,
default: '',
disable: {
type: Boolean,
default: false,
},
/* checkedColor: {
type: String,
default: '#5D98F6',
}, */
},
data () {
return {
// clickValue: false
}
},
computed: {
/* value() {
return value ? value : false
} */
return {}
},
watch: {
value (val) {
......@@ -40,45 +39,61 @@ export default {
},
methods: {
checked () {
if (!this.disable) {
this.$emit('checkClick', !this.value)
}
},
},
}
</script>
<style lang="less" scoped>
.toggle-check {
display: -webkit-flex;
<style lang="less">
.h-checkbox {
//width: 42px;
//height: 42px;
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;
.checkbox {
padding: 5px 5px;
input {
width: 24px;
height: 24px;
border-radius: 12px;
&:after {
top: 30%;
left: 22%;
opacity: 1;
border-width: 2px; /*no*/
}
&:checked {
&:before {
background: @check-box-bg;
border-color: @check-box-bg;
}
}
.toggle.toggle-positive input:checked + .track {
border-color: @check-box-bg;
background-color: @check-box-bg;
&:disabled {
&:checked {
opacity: .7;
}
}
}
}
}
.handle {
width: 22.5px;
height: 22.5px;
top: 3.5px;
left: 9px;
.hls-item {
.contents {
.h-checkbox {
.checkbox {
padding: 0;
}
}
}
}
</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'
import SwipeItem from './Swipe/SwipeItem'
import ListItem from './ListItem/ListItem'
import Item from './ListItem/Item'
import CheckBox from './CheckBox/index'
import Switch from './Switch/index'
import Spin from './Spin/index'
import TopTip from './TopTip/index'
import Notify from './Dialog/Notify'
import Stab from './STab/index'
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 TabButton from './BottomTab/tab-button'
......@@ -37,10 +41,13 @@ export default (Vue) => {
Vue.component('spin', Spin)
Vue.component('top-tip', TopTip)
Vue.component('notify', Notify)
Vue.component('check-box', CheckBox)
Vue.component('h-switch', Switch)
Vue.component('s-tab', Stab)
Vue.component('tab-item', TabItem)
Vue.component('bottom-tab', BottomTab)
Vue.component('tab-button', TabButton)
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
import BottomTab from './components/BottomTab/index'
import Switch from './components/Switch/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 HButton from './components/HButton/index'
import HContent from './components/HContent/index'
......@@ -48,7 +51,10 @@ export {
SwipeItem,
ListItem,
Item,
Switch,
CheckBox,
RadioGroup,
Radio,
Spin,
TopTip,
Notify,
......
src/pages/hlsPopup.vue
View file @ 0200b55a
......@@ -79,7 +79,9 @@
<h-button class="button-class radius-small" disabled>基础按钮(禁用)</h-button>
<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>
<div :style="{'background': bgColor[0]}" class="item-bg">0</div>
</swipe-item>
......@@ -180,14 +182,6 @@
</div>
</item-option>
</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">
<item>
<img slot="left-icon" src="../assets/image/warning@2x.png" class="left-icon">
......@@ -214,13 +208,20 @@
<div class="handle"/>
</div>
</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>
</list-item>
<h-radio
v-model="radioValue"
@radioClick="radioClick"/>
<h2 class="item-title">s-tab</h2>
<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>
......@@ -230,7 +231,9 @@
<tab-item>按钮4</tab-item>
</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>
......@@ -239,7 +242,6 @@
</div>
<h2 class="item-title">Modal</h2>
<h-button class="button-class" type="primary" @click.native="showModal">Modal</h-button>
</h-content>
<bottom-tab :show-divider="true">
......@@ -290,66 +292,9 @@ export default {
show2: false,
bp_name: '',
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: '',
showModalValue: false,
radioValue: true,
}
},
watch: {
......@@ -662,6 +607,11 @@ export default {
showModal () {
this.showModalValue = true
},
radioClick (value) {
this.radioValue = value
console.log(value)
},
},
}
</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'
// test工具类
import HlsPopup from '@/pages/hlsPopup'
import Radio from '@/pages/radioTest'
Vue.use(Router)
......@@ -17,6 +18,7 @@ export default new Router({
{path: '/home', component: Home, name: 'Home', meta: {keepAlive: false}},
// test工具类
{path: '/hls-popup', component: HlsPopup, name: 'HlsPopup', meta: {keepAlive: false}},
{path: '/Radio', component: Radio, name: 'Radio', meta: {keepAlive: true}},
],
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
......
src/styles/variables.less
View file @ 0200b55a
......@@ -19,7 +19,9 @@
@background-color-gray: #fafafa;
@activated-color: #5D98F6;
@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