增加card卡片组件
parent
87fa2397f0
commit
9b7ec3476d
|
@ -0,0 +1,106 @@
|
||||||
|
<template>
|
||||||
|
<div class="card-box">
|
||||||
|
<div class="header"><slot name="header" /></div>
|
||||||
|
<div class="content"><slot /></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
:host {
|
||||||
|
display: flex;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid var(--color-plain-2);
|
||||||
|
border-radius: 3px;
|
||||||
|
background: #fff;
|
||||||
|
color: var(--color-dark-1);
|
||||||
|
transition: box-shadow 0.2s ease-in-out;
|
||||||
|
box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 52px;
|
||||||
|
padding: var(--card-padding, 8px 16px);
|
||||||
|
border-bottom: 1px solid var(--color-plain-2);
|
||||||
|
font-size: 16px;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 64px;
|
||||||
|
padding: var(--card-padding, 8px 16px);
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--color-dark-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([shadow='never']),
|
||||||
|
:host([shadow='hover']) {
|
||||||
|
.card-box {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([shadow='hover']:hover) {
|
||||||
|
.card-box {
|
||||||
|
box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import '../scroll/index'
|
||||||
|
import '../layer/index'
|
||||||
|
import $ from '../utils'
|
||||||
|
import { colorHtml, colorCss, colorJs, colorMd } from './colorful'
|
||||||
|
|
||||||
|
export default class Card {
|
||||||
|
props = {
|
||||||
|
header: '',
|
||||||
|
shadow: 'always' //always | never | hover
|
||||||
|
}
|
||||||
|
|
||||||
|
state = {
|
||||||
|
content: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
__init__() {
|
||||||
|
/* render */
|
||||||
|
|
||||||
|
// .code-box
|
||||||
|
var elem = this.root.children[1]
|
||||||
|
this.__HEADER__ = elem.children[0]
|
||||||
|
this.__CONTENT__ = elem.children[1]
|
||||||
|
}
|
||||||
|
|
||||||
|
get header() {
|
||||||
|
return this.state.header
|
||||||
|
}
|
||||||
|
|
||||||
|
set header(val) {
|
||||||
|
this.state.header = val
|
||||||
|
this.__HEADER__.textContent = val
|
||||||
|
}
|
||||||
|
|
||||||
|
mounted() {}
|
||||||
|
|
||||||
|
unmounted() {}
|
||||||
|
|
||||||
|
watch() {
|
||||||
|
switch (name) {
|
||||||
|
case 'header':
|
||||||
|
this.header = (val || '').toLowerCase()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -375,7 +375,7 @@ export default class Color {
|
||||||
this.__PREVIEW__.style.backgroundColor = this.__INPUT__.value
|
this.__PREVIEW__.style.backgroundColor = this.__INPUT__.value
|
||||||
this.__ALPHA_BAR__.style.background = alphaColor
|
this.__ALPHA_BAR__.style.background = alphaColor
|
||||||
this._moveSceneThumb(x, y)
|
this._moveSceneThumb(x, y)
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
$.fire(this, 'input')
|
||||||
}
|
}
|
||||||
|
|
||||||
get value() {
|
get value() {
|
||||||
|
@ -501,14 +501,14 @@ export default class Color {
|
||||||
this.__PREVIEW__.style = ''
|
this.__PREVIEW__.style = ''
|
||||||
this.props.value = this.__INPUT__.value
|
this.props.value = this.__INPUT__.value
|
||||||
delete this._tmpval
|
delete this._tmpval
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
$.fire(this, 'input')
|
||||||
})
|
})
|
||||||
this._pickedFn = $.bind(this.__PICKED__, 'click', ev => {
|
this._pickedFn = $.bind(this.__PICKED__, 'click', ev => {
|
||||||
this.__PANEL__.style.display = ''
|
this.__PANEL__.style.display = ''
|
||||||
this.__PREVIEW__.style.backgroundColor = this.__INPUT__.value
|
this.__PREVIEW__.style.backgroundColor = this.__INPUT__.value
|
||||||
this.props.value = this.__INPUT__.value
|
this.props.value = this.__INPUT__.value
|
||||||
delete this._tmpval
|
delete this._tmpval
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
$.fire(this, 'input')
|
||||||
})
|
})
|
||||||
|
|
||||||
// 点击外部区别时,还原之前的颜色值
|
// 点击外部区别时,还原之前的颜色值
|
||||||
|
|
|
@ -103,32 +103,25 @@ export default class Drag {
|
||||||
}
|
}
|
||||||
this.pos._x = _x
|
this.pos._x = _x
|
||||||
this.pos._y = _y
|
this.pos._y = _y
|
||||||
this.$elem.dispatchEvent(
|
$.fire(this.$elem, 'dragging', {
|
||||||
new CustomEvent('dragging', {
|
|
||||||
detail: {
|
|
||||||
offset: {
|
offset: {
|
||||||
x: this.pos.x + _x,
|
x: this.pos.x + _x,
|
||||||
y: this.pos.y + _y
|
y: this.pos.y + _y
|
||||||
},
|
},
|
||||||
move: { x: _x, y: _y }
|
moved: { x: _x, y: _y }
|
||||||
}
|
|
||||||
})
|
})
|
||||||
)
|
|
||||||
this.$elem.style.transform = `translate(${_x}px, ${_y}px)`
|
this.$elem.style.transform = `translate(${_x}px, ${_y}px)`
|
||||||
})
|
})
|
||||||
|
|
||||||
let handleUp = $.bind(document, 'mouseup', ev => {
|
let handleUp = $.bind(document, 'mouseup', ev => {
|
||||||
this.$elem.dispatchEvent(
|
$.fire(this.$elem, 'dragged', {
|
||||||
new CustomEvent('dragged', {
|
|
||||||
detail: {
|
|
||||||
offset: {
|
offset: {
|
||||||
x: this.pos.x + this.pos._x,
|
x: this.pos.x + this.pos._x,
|
||||||
y: this.pos.y + this.pos._y
|
y: this.pos.y + this.pos._y
|
||||||
},
|
},
|
||||||
move: { x: this.pos._x, y: this.pos._y }
|
moved: { x: this.pos._x, y: this.pos._y }
|
||||||
}
|
|
||||||
})
|
})
|
||||||
)
|
|
||||||
$.unbind(document, 'mousemove', handleMove)
|
$.unbind(document, 'mousemove', handleMove)
|
||||||
$.unbind(document, 'mouseup', handleUp)
|
$.unbind(document, 'mouseup', handleUp)
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,85 +0,0 @@
|
||||||
# 拖拽插件
|
|
||||||
> 该插件可以让任意一个元素可以被拖拽,而不需要该元素是否具有定位属性。
|
|
||||||
> 使用时,在目标元素上添加`:drag`属性即可以实现拖拽功能。
|
|
||||||
|
|
||||||
## 依赖
|
|
||||||
> 依赖`Anot`框架
|
|
||||||
|
|
||||||
## 浏览器兼容性
|
|
||||||
+ chrome
|
|
||||||
+ firefox
|
|
||||||
+ safari
|
|
||||||
+ IE10+
|
|
||||||
|
|
||||||
|
|
||||||
## 用法
|
|
||||||
> 只需要在要拖拽的元素上添加`:drag`即可;
|
|
||||||
> 如果要拖拽的元素不是当前元素,只需要给该属性增加一个值为想要拖拽元素的类名或ID。
|
|
||||||
> 具体请看示例:
|
|
||||||
> **注意:** `拖拽的元素不是本身时,只会往父级一级一级找相匹配的`
|
|
||||||
|
|
||||||
```html
|
|
||||||
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<style>
|
|
||||||
* {margin:0;padding:0}
|
|
||||||
.box {width:200px;height:100px;background:#aaa;}
|
|
||||||
.box .handle {width:200px;height:30px;background:#f30;}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body :controller="test">
|
|
||||||
|
|
||||||
<div class="box" :drag></div>
|
|
||||||
|
|
||||||
<div class="box">
|
|
||||||
<div class="handle" :drag="box"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Anot from 'lib/drag/index.js'
|
|
||||||
Anot({
|
|
||||||
$id: 'test'
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## 额外参数
|
|
||||||
|
|
||||||
### `data-limit`
|
|
||||||
> 用于限制元素的拖动范围,默认没有限制。 可选值为 "window"和"parent", 分别为 "限制在可视区"和"限制在父级元素的范围"
|
|
||||||
|
|
||||||
### `data-axis`
|
|
||||||
> 用于限制拖动的方向, 默认值为 "xy",即不限制方向。可选值为 "x"和"y", 即只能在"x轴"或"y轴"方向拖动。
|
|
||||||
|
|
||||||
### `data-beforedrag`
|
|
||||||
> 拖动前的回调,如果有设置回调方法, 则该回调的返回值,可决定该元素是否能被拖拽, 可用于在特殊场景下,临时禁用拖拽。
|
|
||||||
> `注:`
|
|
||||||
> 1. 该回调方法,会传入3个参数, 第1个为被拖拽的元素(dom对象), 第2个参数为 该元素的x轴绝对坐标, 第3个元素为y轴绝对坐标;
|
|
||||||
> 2. 该回调方法, 返回false时, 本次拖拽将临时失效, 返回其他值,或没有返回值,则忽略。
|
|
||||||
|
|
||||||
|
|
||||||
### `data-dragging`
|
|
||||||
> 元素被拖动时的回调。
|
|
||||||
> `注:`
|
|
||||||
> 1.该回调方法,会传入3个参数, 第1个为被拖拽的元素(dom对象), 第2个参数为 该元素的x轴绝对坐标, 第3个元素为y轴绝对坐标;
|
|
||||||
|
|
||||||
|
|
||||||
### `data-dragged`
|
|
||||||
> 元素被拖动结束后的回调。
|
|
||||||
> `注:`
|
|
||||||
> 1. 该回调方法,会传入3个参数, 第1个为被拖拽的元素(dom对象), 第2个参数为 该元素的x轴绝对坐标, 第3个元素为y轴绝对坐标;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,64 +0,0 @@
|
||||||
/**
|
|
||||||
* 拖拽指令 :drag
|
|
||||||
* @authors yutent (yutent.io@gmail.com)
|
|
||||||
* @date 2017-03-29 18:39:35
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
import Drag from './core'
|
|
||||||
|
|
||||||
Anot.directive('drag', {
|
|
||||||
priority: 1500,
|
|
||||||
init: function(binding) {
|
|
||||||
binding.expr = '"' + binding.expr + '"'
|
|
||||||
|
|
||||||
//默认允许溢出可视区
|
|
||||||
binding.overflow = true
|
|
||||||
|
|
||||||
//方向,x轴, y轴, xy轴
|
|
||||||
binding.axis = 'xy'
|
|
||||||
if (!!binding.element.dataset.axis) {
|
|
||||||
binding.axis = binding.element.dataset.axis
|
|
||||||
delete binding.element.dataset.axis
|
|
||||||
}
|
|
||||||
|
|
||||||
//默认不限制拖拽区域
|
|
||||||
binding.limit = false
|
|
||||||
if (!!binding.element.dataset.limit) {
|
|
||||||
binding.limit = binding.element.dataset.limit
|
|
||||||
//这里,只要不为空,除parent外,其他值都默认为window, 故"可溢出"为false
|
|
||||||
binding.overflow = false
|
|
||||||
delete binding.element.dataset.limit
|
|
||||||
}
|
|
||||||
},
|
|
||||||
update: function(val) {
|
|
||||||
var target = this.element
|
|
||||||
|
|
||||||
// val值不为空时, 获取真正的拖动元素
|
|
||||||
// 仅从父级上找
|
|
||||||
if (val) {
|
|
||||||
target = this.element.parentNode
|
|
||||||
while (target) {
|
|
||||||
if (!target.classList) {
|
|
||||||
Anot.error(`${this.name}=${this.expr}, 解析异常[元素不存在]`)
|
|
||||||
}
|
|
||||||
if (target.tagName === 'WC-LAYER' && val === 'layer') {
|
|
||||||
target = target.root.children[1]
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
if (target.classList.contains(val) || target.id === val) {
|
|
||||||
break
|
|
||||||
} else {
|
|
||||||
target = target.parentNode
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
new Drag(target).by(this.element, {
|
|
||||||
limit: this.limit,
|
|
||||||
axis: this.axis,
|
|
||||||
overflow: this.overflow
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
|
@ -182,9 +182,7 @@ export default class Pager {
|
||||||
.map(it =>
|
.map(it =>
|
||||||
curr === it.to
|
curr === it.to
|
||||||
? LAYOUT_DICT.curr(curr)
|
? LAYOUT_DICT.curr(curr)
|
||||||
: `<wc-button class="item" data-act="${it.to}">${
|
: `<wc-button class="item" data-act="${it.to}">${it.txt}</wc-button>`
|
||||||
it.txt
|
|
||||||
}</wc-button>`
|
|
||||||
)
|
)
|
||||||
.join('')
|
.join('')
|
||||||
|
|
||||||
|
@ -307,7 +305,7 @@ export default class Pager {
|
||||||
|
|
||||||
this.props.curr = num
|
this.props.curr = num
|
||||||
this.update()
|
this.update()
|
||||||
this.dispatchEvent(new CustomEvent('page-change', { detail: num }))
|
$.fire(this, 'page-change', { page: num })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
:host {
|
:host {
|
||||||
|
overflow: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -38,7 +39,6 @@
|
||||||
|
|
||||||
.is-horizontal,
|
.is-horizontal,
|
||||||
.is-vertical {
|
.is-vertical {
|
||||||
display: none;
|
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -204,7 +204,8 @@ export default class Scroll {
|
||||||
} else if (moveX > width - xBar) {
|
} else if (moveX > width - xBar) {
|
||||||
moveX = width - xBar
|
moveX = width - xBar
|
||||||
}
|
}
|
||||||
this.__WRAPPER__.scrollLeft = (scrollWidth - width) * (moveX / (width - xBar))
|
this.__WRAPPER__.scrollLeft =
|
||||||
|
(scrollWidth - width) * (moveX / (width - xBar))
|
||||||
this.__X__.style.transform = `translateX(${moveX}px)`
|
this.__X__.style.transform = `translateX(${moveX}px)`
|
||||||
|
|
||||||
return moveX
|
return moveX
|
||||||
|
@ -219,7 +220,8 @@ export default class Scroll {
|
||||||
moveY = height - yBar
|
moveY = height - yBar
|
||||||
}
|
}
|
||||||
|
|
||||||
this.__WRAPPER__.scrollTop = (scrollHeight - height) * (moveY / (height - yBar))
|
this.__WRAPPER__.scrollTop =
|
||||||
|
(scrollHeight - height) * (moveY / (height - yBar))
|
||||||
this.__Y__.style.transform = `translateY(${moveY}px)`
|
this.__Y__.style.transform = `translateY(${moveY}px)`
|
||||||
return moveY
|
return moveY
|
||||||
}
|
}
|
||||||
|
@ -242,7 +244,7 @@ export default class Scroll {
|
||||||
}
|
}
|
||||||
|
|
||||||
this.__last__ = now
|
this.__last__ = now
|
||||||
this.dispatchEvent(new CustomEvent(action))
|
$.fire(this, action)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -342,7 +344,16 @@ export default class Scroll {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
var { axis } = this.props
|
var { axis } = this.props
|
||||||
var { xBar, yBar, thumbX, thumbY, scrollHeight, scrollWidth, width, height } = this.state
|
var {
|
||||||
|
xBar,
|
||||||
|
yBar,
|
||||||
|
thumbX,
|
||||||
|
thumbY,
|
||||||
|
scrollHeight,
|
||||||
|
scrollWidth,
|
||||||
|
width,
|
||||||
|
height
|
||||||
|
} = this.state
|
||||||
var currTop = this.__WRAPPER__.scrollTop
|
var currTop = this.__WRAPPER__.scrollTop
|
||||||
var currLeft = this.__WRAPPER__.scrollLeft
|
var currLeft = this.__WRAPPER__.scrollLeft
|
||||||
|
|
||||||
|
@ -386,7 +397,7 @@ export default class Scroll {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.dispatchEvent(new CustomEvent('scroll'))
|
$.fire(this, 'scroll')
|
||||||
})
|
})
|
||||||
|
|
||||||
let startX,
|
let startX,
|
||||||
|
|
Reference in New Issue