Skip to content

H
hls-easy-ui
Commit 8fa33570 authored by JingChao's avatar JingChao
Browse files
Options

field组件

parent 7f91df80
Hide whitespace changes
Inline Side-by-side
Showing with 94 additions and 96 deletions
packages/components/ItemOption/OptionButton.vue
View file @ 8fa33570
<template> <template>
<div :class="type" class="function" @touchstart="itemClick">{{ text }}</div> <div :class="type" class="function" @click="itemClick">{{ text }}</div>
</template> </template>
<script> <script>
...@@ -23,7 +23,6 @@ export default { ...@@ -23,7 +23,6 @@ export default {
}, },
methods: { methods: {
itemClick (e) { itemClick (e) {
e.preventDefault()
this.$parent && this.$parent.reset() this.$parent && this.$parent.reset()
}, },
}, },
......
packages/components/ItemOption/index.vue
View file @ 8fa33570
...@@ -13,107 +13,107 @@ ...@@ -13,107 +13,107 @@
</template> </template>
<script> <script>
import optionButton from './OptionButton' import optionButton from './OptionButton'
export default { export default {
name: 'ItemOption', name: 'ItemOption',
components: {optionButton}, components: {optionButton},
props: { props: {
deleteText: { deleteText: {
type: String, type: String,
default: '删除', default: '删除',
},
editText: {
type: String,
default: '编辑',
},
buttonWidth: {
type: Number,
default: 70,
},
cusClass: {
type: String,
default: '',
},
hasBorder: {
type: Boolean,
default: true,
},
}, },
data () { editText: {
return { type: String,
dis: 0, default: '编辑',
buttons: 0,
startX: 0, // 触摸位置
endX: 0, // 结束位置
optionItem: [],
}
}, },
computed: { buttonWidth: {
bottomBorder () { type: Number,
return this.hasBorder ? 'vux-1px-b' : '' default: 70,
},
}, },
mounted () { cusClass: {
this.init() type: String,
default: '',
}, },
updated () { hasBorder: {
this.init() type: Boolean,
default: true,
}, },
methods: { },
touchStart (ev) { data () {
this.$refs.optionItem.style.transform = 'translate3d(0px,0px,0px)' return {
this.reset() dis: 0,
ev = ev || event buttons: 0,
// tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕 startX: 0, // 触摸位置
if (ev.touches.length === 1) { endX: 0, // 结束位置
// 记录开始位置 optionItem: [],
this.startX = ev.touches[0].clientX }
} },
}, computed: {
touchEnd (e) { bottomBorder () {
let parentElement = e.currentTarget.parentElement return this.hasBorder ? 'vux-1px-b' : ''
this.endX = e.changedTouches[0].clientX },
// console.log(this.endX) },
if (parentElement.dataset.type === '0' && this.startX - this.endX > 30) { mounted () {
parentElement.dataset.type = '1' this.init()
parentElement.style.transform = 'translate3d(-' + this.dis + 'px,0px,0px)' },
} updated () {
if (parentElement.dataset.type === '1' && this.startX - this.endX < -30) { this.init()
parentElement.style.transform = 'translate3d(0px,0px,0px)' },
parentElement.dataset.type = '0' methods: {
} touchStart (ev) {
this.startX = 0 this.$refs.optionItem.style.transform = 'translate3d(0px,0px,0px)'
this.endX = 0 this.reset()
}, ev = ev || event
// 判断当前是否有滑块处于滑动状态 // tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
checkSlide () { if (ev.touches.length === 1) {
let listItems = this.$refs.optionItem // 记录开始位置
for (let i = 0; i < listItems.length; i++) { this.startX = ev.touches[0].clientX
if (listItems[i].dataset.type === '1') { }
return true },
} touchEnd (e) {
} let parentElement = e.currentTarget.parentElement
return false this.endX = e.changedTouches[0].clientX
}, // console.log(this.endX)
// 初始化 if (parentElement.dataset.type === '0' && this.startX - this.endX > 30) {
init () { parentElement.dataset.type = '1'
let vm = this parentElement.style.transform = 'translate3d(-' + this.dis + 'px,0px,0px)'
let childerLength = vm.optionItem.length }
vm.dis = vm.buttonWidth * (childerLength) if (parentElement.dataset.type === '1' && this.startX - this.endX < -30) {
vm.optionItem.forEach((option, index) => { parentElement.style.transform = 'translate3d(0px,0px,0px)'
option.$el.style.right = '-' + (vm.buttonWidth * (index + 1)) + 'px' parentElement.dataset.type = '0'
}) }
}, this.startX = 0
reset () { this.endX = 0
let l = document.getElementsByClassName('option-item').length },
for (let i = 0; i < l; i++) { // 判断当前是否有滑块处于滑动状态
document.getElementsByClassName('option-item')[i].style.transform = 'translate3d(0px,0px,0px)' checkSlide () {
document.getElementsByClassName('option-item')[i].dataset.type = '0' let listItems = this.$refs.optionItem
for (let i = 0; i < listItems.length; i++) {
if (listItems[i].dataset.type === '1') {
return true
} }
}, }
return false
}, },
} // 初始化
init () {
let vm = this
let childerLength = vm.optionItem.length
vm.dis = vm.buttonWidth * (childerLength)
vm.optionItem.forEach((option, index) => {
option.$el.style.right = '-' + (vm.buttonWidth * (index + 1)) + 'px'
})
},
reset () {
let l = document.getElementsByClassName('option-item').length
for (let i = 0; i < l; i++) {
document.getElementsByClassName('option-item')[i].style.transform = 'translate3d(0px,0px,0px)'
document.getElementsByClassName('option-item')[i].dataset.type = '0'
}
},
},
}
</script> </script>
<style lang="less" scoped type="text/less"> <style lang="less" scoped type="text/less">
......
src/pages/ItemOption/demo.vue
View file @ 8fa33570
...@@ -45,7 +45,6 @@ export default { ...@@ -45,7 +45,6 @@ export default {
methods: { methods: {
deleteFun (index) { deleteFun (index) {
this.colors.remove(index) this.colors.remove(index)
// this.$refs.option[index].reset()
this.colors.sort() this.colors.sort()
}, },
}, },
......
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