提交 5888258e 编写于 作者: Q qiang

Merge branch 'mouse-optimization' into dev

......@@ -131,6 +131,7 @@ export default {
overflow: hidden;
color: #000000;
background-color: #F8F8F8;
cursor: pointer;
}
uni-button[hidden] {
......@@ -192,6 +193,7 @@ export default {
uni-button[disabled] {
color: rgba(255, 255, 255, 0.6);
cursor: not-allowed;
}
uni-button[disabled][type=default],
......@@ -287,6 +289,10 @@ export default {
padding: 0 1.34em;
}
uni-button[loading]:not([disabled]){
cursor: progress;
}
uni-button[loading]:before {
content: " ";
display: inline-block;
......@@ -375,4 +381,4 @@ export default {
border-color: rgba(230, 67, 64, 0.6);
background-color: transparent;
}
</style>
</style>
<template>
<uni-checkbox
v-on="$listeners"
<uni-checkbox
:disabled="disabled"
v-on="$listeners"
@click="_onClick">
<div class="uni-checkbox-wrapper">
<div
:class="[checkboxChecked ? 'uni-checkbox-input-checked' : '']"
:style="{color:color}"
<div
:class="[checkboxChecked ? 'uni-checkbox-input-checked' : '']"
:style="{color:color}"
class="uni-checkbox-input" />
<slot />
</div>
......@@ -97,12 +98,17 @@ export default {
uni-checkbox {
-webkit-tap-highlight-color: transparent;
display: inline-block;
cursor: pointer;
}
uni-checkbox[hidden] {
display: none;
}
uni-checkbox[disabled] {
cursor: not-allowed;
}
uni-checkbox .uni-checkbox-wrapper {
display: -webkit-inline-flex;
display: inline-flex;
......@@ -124,6 +130,10 @@ export default {
position: relative;
}
uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
border-color: #007aff;
}
uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
color: #007aff;
}
......@@ -150,4 +160,4 @@ export default {
uni-checkbox-group {
display: block;
}
</style>
</style>
<template>
<uni-label
:class="{'uni-label-pointer':pointer}"
v-on="$listeners"
@click="_onClick">
<slot />
......@@ -18,6 +19,11 @@ export default {
default: ''
}
},
computed: {
pointer () {
return this.for || (this.$slots.default && this.$slots.default.length)
}
},
methods: {
_onClick ($event) {
let stopPropagation = /^uni-(checkbox|radio|switch)-/.test($event.target.className)
......@@ -38,5 +44,7 @@ export default {
}
</script>
<style>
</style>
.uni-label-pointer {
cursor: pointer;
}
</style>
......@@ -11,8 +11,8 @@ import {
Friction,
STD
} from './utils'
import {
disableScrollBounce
import {
disableScrollBounce
} from 'uni-shared'
var requesting = false
......@@ -658,6 +658,7 @@ uni-movable-view {
top: 0px;
left: 0px;
position: absolute;
cursor: grab;
}
uni-movable-view[hidden] {
......
<template>
<uni-navigator
v-if="hoverClass && hoverClass !== 'none'"
:class="[hovering ? hoverClass : '']"
<uni-navigator
v-if="hoverClass && hoverClass !== 'none'"
:class="[hovering ? hoverClass : '']"
@touchstart="_hoverTouchStart"
@touchend="_hoverTouchEnd"
@touchcancel="_hoverTouchCancel"
@click="_onClick"
@touchend="_hoverTouchEnd"
@touchcancel="_hoverTouchCancel"
@click="_onClick"
v-on="$listeners">
<slot />
</uni-navigator>
<uni-navigator
v-else
@click="_onClick"
<uni-navigator
v-else
@click="_onClick"
v-on="$listeners">
<slot />
</uni-navigator>
......@@ -97,18 +97,19 @@ export default {
}
</script>
<style>
.navigator-hover {
background-color: rgba(0, 0, 0, 0.1);
opacity: 0.7;
}
uni-navigator {
height: auto;
width: auto;
display: block;
cursor: pointer;
}
uni-navigator[hidden] {
display: none;
}
</style>
.navigator-hover {
background-color: rgba(0, 0, 0, 0.1);
opacity: 0.7;
}
</style>
......@@ -13,16 +13,15 @@ import {
function initClick (dom) {
const MAX_MOVE = 20
const hasTouchSupport = navigator.maxTouchPoints
let x = 0
let y = 0
dom.addEventListener(hasTouchSupport ? 'touchstart' : 'mousedown', (event) => {
const info = hasTouchSupport ? event.changedTouches[0] : event
dom.addEventListener('touchstart', (event) => {
const info = event.changedTouches[0]
x = info.clientX
y = info.clientY
})
dom.addEventListener(hasTouchSupport ? 'touchend' : 'mouseup', (event) => {
const info = hasTouchSupport ? event.changedTouches[0] : event
dom.addEventListener('touchend', (event) => {
const info = event.changedTouches[0]
if (Math.abs(info.clientX - x) < MAX_MOVE && Math.abs(info.clientY - y) < MAX_MOVE) {
let customEvent = new CustomEvent('click', {
bubbles: true,
......@@ -301,6 +300,7 @@ export default {
width: 100%;
will-change: transform;
padding: 102px 0;
cursor: pointer;
}
.uni-picker-view-content>* {
......
<template>
<uni-radio
v-on="$listeners"
<uni-radio
:disabled="disabled"
v-on="$listeners"
@click="_onClick">
<div class="uni-radio-wrapper">
<div
:class="radioChecked ? 'uni-radio-input-checked' : ''"
:style="radioChecked ? checkedStyle : ''"
<div
:class="radioChecked ? 'uni-radio-input-checked' : ''"
:style="radioChecked ? checkedStyle : ''"
class="uni-radio-input" />
<slot />
</div>
......@@ -102,12 +103,17 @@ export default {
uni-radio {
-webkit-tap-highlight-color: transparent;
display: inline-block;
cursor: pointer;
}
uni-radio[hidden] {
display: none;
}
uni-radio[disabled] {
cursor: not-allowed;
}
uni-radio .uni-radio-wrapper {
display: -webkit-inline-flex;
display: inline-flex;
......@@ -129,6 +135,10 @@ export default {
position: relative;
}
uni-radio:not([disabled]) .uni-radio-input:hover {
border-color: #007aff;
}
uni-radio .uni-radio-input.uni-radio-input-checked:before {
font: normal normal normal 14px/1 "uni";
content: "\EA08";
......@@ -153,4 +163,4 @@ export default {
uni-radio-group {
display: block;
}
</style>
</style>
<template>
<uni-slider
ref="uni-slider"
v-on="$listeners"
<uni-slider
ref="uni-slider"
v-on="$listeners"
@click="_onClick">
<div class="uni-slider-wrapper">
<div class="uni-slider-tap-area">
<div
:style="setBgColor"
<div
:style="setBgColor"
class="uni-slider-handle-wrapper">
<div
ref="uni-slider-handle"
:style="setBlockBg"
<div
ref="uni-slider-handle"
:style="setBlockBg"
class="uni-slider-handle" />
<div
:style="setBlockStyle"
<div
:style="setBlockStyle"
class="uni-slider-thumb" />
<div
:style="setActiveColor"
<div
:style="setActiveColor"
class="uni-slider-track" />
</div>
</div>
<span
v-show="showValue"
<span
v-show="showValue"
class="uni-slider-value">{{ sliderValue }}</span>
</div>
<slot />
......@@ -259,6 +259,7 @@ export default {
margin-left: -14px;
background-color: transparent;
z-index: 3;
cursor: grab;
}
uni-slider .uni-slider-thumb {
......@@ -288,4 +289,4 @@ export default {
background-color: #FFF;
border-color: #ccc;
}
</style>
</style>
......@@ -34,6 +34,7 @@ uni-swiper-item {
position: absolute;
width: 100%;
height: 100%;
cursor: grab;
}
uni-swiper-item[hidden] {
......
......@@ -596,6 +596,11 @@ export default {
for (let index = 0, length = swiperItems.length; index < length; index++) {
let currentSync = this.currentSync
slidesDots.push(createElement('div', {
on: {
click: () => {
this._animateViewport(this.currentSync = index, this.currentChangeSource = 'click', this.circularEnabled ? 1 : 0)
}
},
class: {
'uni-swiper-dot': true,
'uni-swiper-dot-active': (index < currentSync + this.displayMultipleItemsNumber && index >= currentSync) || (index < currentSync + this.displayMultipleItemsNumber - length)
......
<template>
<uni-switch
v-on="$listeners"
<uni-switch
:disabled="disabled"
v-on="$listeners"
@click="_onClick">
<div class="uni-switch-wrapper">
<div
v-show="type === 'switch'"
:class="[switchChecked ? 'uni-switch-input-checked' : '']"
<div
v-show="type === 'switch'"
:class="[switchChecked ? 'uni-switch-input-checked' : '']"
:style="{backgroundColor: switchChecked ? color : '#DFDFDF',borderColor:switchChecked ? color : '#DFDFDF'}"
class="uni-switch-input" />
<div
v-show="type === 'checkbox'"
:class="[switchChecked ? 'uni-checkbox-input-checked' : '']"
<div
v-show="type === 'checkbox'"
:class="[switchChecked ? 'uni-checkbox-input-checked' : '']"
:style="{color: color}"
class="uni-checkbox-input" />
</div>
......@@ -105,12 +106,17 @@ export default {
uni-switch {
-webkit-tap-highlight-color: transparent;
display: inline-block;
cursor: pointer;
}
uni-switch[hidden] {
display: none;
}
uni-switch[disabled] {
cursor: not-allowed;
}
uni-switch .uni-switch-wrapper {
display: -webkit-inline-flex;
display: inline-flex;
......@@ -134,6 +140,10 @@ export default {
transition: background-color 0.1s, border 0.1s;
}
uni-switch[disabled] .uni-switch-input {
opacity: .7;
}
uni-switch .uni-switch-input:before {
content: " ";
position: absolute;
......@@ -192,6 +202,10 @@ export default {
color: #007aff;
}
uni-switch:not([disabled]) .uni-checkbox-input:hover {
border-color: #007aff;
}
uni-switch .uni-checkbox-input.uni-checkbox-input-checked:before {
font: normal normal normal 14px/1 "uni";
content: "\EA08";
......@@ -211,4 +225,4 @@ export default {
uni-switch .uni-checkbox-input.uni-checkbox-input-disabled:before {
color: #ADADAD;
}
</style>
</style>
var addListenerToElement = function (element, type, callback, r) {
// 暂时忽略capture
const addListenerToElement = function (element, type, callback, capture) {
// 暂时忽略 capture
element.addEventListener(type, $event => {
if (typeof callback === 'function') {
if (callback($event) === false) {
......@@ -13,14 +13,18 @@ var addListenerToElement = function (element, type, callback, r) {
}
export default {
beforeDestroy () {
document.removeEventListener('mousemove', this.__mouseMoveEventListener)
document.removeEventListener('mouseup', this.__mouseUpEventListener)
},
methods: {
touchtrack: function (element, method, useCancel) {
var self = this
var x0 = 0
var y0 = 0
var x1 = 0
var y1 = 0
var fn = function ($event, state, x, y) {
const self = this
let x0 = 0
let y0 = 0
let x1 = 0
let y1 = 0
const fn = function ($event, state, x, y) {
if (self[method]({
target: $event.target,
currentTarget: $event.currentTarget,
......@@ -43,8 +47,11 @@ export default {
}
}
var $eventOld = null
let $eventOld = null
let hasTouchStart
let hasMouseDown
addListenerToElement(element, 'touchstart', function ($event) {
hasTouchStart = true
if ($event.touches.length === 1 && !$eventOld) {
$eventOld = $event
x0 = x1 = $event.touches[0].pageX
......@@ -52,23 +59,54 @@ export default {
return fn($event, 'start', x0, y0)
}
})
addListenerToElement(element, 'mousedown', function ($event) {
hasMouseDown = true
if (!hasTouchStart && !$eventOld) {
// TODO touches changedTouches
$eventOld = $event
x0 = x1 = $event.pageX
y0 = y1 = $event.pageY
return fn($event, 'start', x0, y0)
}
})
addListenerToElement(element, 'touchmove', function ($event) {
if ($event.touches.length === 1 && $eventOld) {
var res = fn($event, 'move', $event.touches[0].pageX, $event.touches[0].pageY)
const res = fn($event, 'move', $event.touches[0].pageX, $event.touches[0].pageY)
x1 = $event.touches[0].pageX
y1 = $event.touches[0].pageY
return res
}
})
const mouseMoveEventListener = this.__mouseMoveEventListener = function ($event) {
if (!hasTouchStart && hasMouseDown && $eventOld) {
// TODO target currentTarget touches changedTouches
const res = fn($event, 'move', $event.pageX, $event.pageY)
x1 = $event.pageX
y1 = $event.pageY
return res
}
}
document.addEventListener('mousemove', mouseMoveEventListener)
addListenerToElement(element, 'touchend', function ($event) {
if ($event.touches.length === 0 && $eventOld) {
hasTouchStart = false
$eventOld = null
return fn($event, 'end', $event.changedTouches[0].pageX, $event.changedTouches[0].pageY)
}
})
const mouseUpEventListener = this.__mouseUpEventListener = function ($event) {
hasMouseDown = false
if (!hasTouchStart && $eventOld) {
// TODO target currentTarget touches changedTouches
$eventOld = null
return fn($event, 'end', $event.pageX, $event.pageY)
}
}
document.addEventListener('mouseup', mouseUpEventListener)
addListenerToElement(element, 'touchcancel', function ($event) {
if ($eventOld) {
var $eventTemp = $eventOld
hasTouchStart = false
const $eventTemp = $eventOld
$eventOld = null
return fn($event, useCancel ? 'cancel' : 'end', $eventTemp.touches[0].pageX, $eventTemp.touches[0].pageY)
}
......
......@@ -100,6 +100,7 @@ uni-tabbar .uni-tabbar__bd {
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
uni-tabbar .uni-tabbar__icon {
......
......@@ -175,6 +175,7 @@ uni-page-head .uni-page-head-bd {
margin: 0 2px;
word-break: keep-all;
white-space: pre;
cursor: pointer;
}
.uni-page-head-transparent .uni-page-head-btn {
......
<template>
<uni-picker
:disabled="disabled"
@click.stop="_show"
v-on="$listeners">
<div
......@@ -438,6 +439,15 @@ export default {
<style>
uni-picker {
display: block;
cursor: pointer;
}
uni-picker[hidden] {
display: none;
}
uni-picker[disabled] {
cursor: not-allowed;
}
.uni-picker-container {
......@@ -526,6 +536,7 @@ uni-picker {
font-size: 17px;
line-height: 45px;
overflow: hidden;
cursor: pointer;
}
.uni-picker-container .uni-picker-action.uni-picker-action-cancel {
......
......@@ -787,6 +787,7 @@ uni-video[hidden] {
background-size: 50%;
background-repeat: no-repeat;
background-position: 50% 50%;
cursor: pointer;
}
.uni-video-cover-duration {
......@@ -831,6 +832,7 @@ uni-video[hidden] {
padding: 14.5px 12.5px 14.5px 12.5px;
margin-left: -8.5px;
box-sizing: content-box;
cursor: pointer;
}
.uni-video-control-button::after {
......@@ -873,6 +875,7 @@ uni-video[hidden] {
margin: 21px 12px;
background-color: rgba(255, 255, 255, 0.4);
position: relative;
cursor: pointer;
}
.uni-video-progress-buffered {
......@@ -912,6 +915,7 @@ uni-video[hidden] {
font-size: 13px;
color: #fff;
margin: 0 8.5px;
cursor: pointer;
}
.uni-video-danmu-button.uni-video-danmu-button-active {
......@@ -928,6 +932,7 @@ uni-video[hidden] {
background-size: 50%;
background-position: 50% 50%;
background-repeat: no-repeat;
cursor: pointer;
}
.uni-video-fullscreen.uni-video-type-fullscreen {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册