优化转译脚本;简化组件定义
宇天
parent
9cb60722db
commit
353355dbf1
|
|
@ -112,7 +112,10 @@ function mkWCFile({ style, html, js }) {
|
|||
)
|
||||
.replace('mounted()', 'connectedCallback()')
|
||||
.replace('unmount()', 'disconnectedCallback()')
|
||||
.replace(/watch\(([\w\s,]*?)\)/, 'attributeChangedCallback($1)')
|
||||
.replace(
|
||||
'watch() {',
|
||||
'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
|
||||
)
|
||||
.replace('adopted()', 'adoptedCallback()')
|
||||
|
||||
return `/**
|
||||
|
|
|
|||
|
|
@ -119,7 +119,10 @@ function mkWCFile({ style, html, js }) {
|
|||
)
|
||||
.replace('mounted()', 'connectedCallback()')
|
||||
.replace('unmount()', 'disconnectedCallback()')
|
||||
.replace(/watch\(([\w\s,]*?)\)/, 'attributeChangedCallback($1)')
|
||||
.replace(
|
||||
'watch() {',
|
||||
'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
|
||||
)
|
||||
.replace('adopted()', 'adoptedCallback()')
|
||||
|
||||
let res = uglify.minify(js)
|
||||
|
|
|
|||
|
|
@ -176,10 +176,7 @@ export default class Avatar {
|
|||
this.textContent = text
|
||||
}
|
||||
|
||||
watch(name, old, val) {
|
||||
if (old === val) {
|
||||
return
|
||||
}
|
||||
watch() {
|
||||
switch (name) {
|
||||
case 'src':
|
||||
this.removeAttribute('hash')
|
||||
|
|
|
|||
|
|
@ -64,10 +64,7 @@ export default class Badge {
|
|||
this.__DOT__ = this.root.lastElementChild
|
||||
}
|
||||
|
||||
watch(name, old, val) {
|
||||
if (old === val) {
|
||||
return
|
||||
}
|
||||
watch() {
|
||||
switch (name) {
|
||||
case 'label':
|
||||
var num = Number(val)
|
||||
|
|
|
|||
|
|
@ -313,10 +313,7 @@ export default class Button {
|
|||
this.__BTN__.removeEventListener('click', this._handleClick)
|
||||
}
|
||||
|
||||
watch(name, old, val) {
|
||||
if (old === val) {
|
||||
return
|
||||
}
|
||||
watch() {
|
||||
switch (name) {
|
||||
case 'icon':
|
||||
this.props.icon = val
|
||||
|
|
@ -342,9 +339,7 @@ export default class Button {
|
|||
|
||||
case 'loading':
|
||||
case 'disabled':
|
||||
if (val === '') {
|
||||
this[name] = true
|
||||
}
|
||||
this[name] = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,380 +0,0 @@
|
|||
<template>
|
||||
<div class="label">
|
||||
<slot class="prepend" name="prepend"></slot>
|
||||
<input readonly />
|
||||
<wc-icon class="arrow" is="left"></wc-icon>
|
||||
<slot class="append" name="append"></slot>
|
||||
|
||||
<div class="opt-box"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
:host {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
color: nth($cd, 2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 64px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
border: 1px solid nth($cp, 3);
|
||||
border-radius: inherit;
|
||||
background: #fff;
|
||||
color: inherit;
|
||||
cursor: text;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
padding: 0 5px;
|
||||
border: 0;
|
||||
border-radius: inherit;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
background: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
cursor: inherit;
|
||||
|
||||
&::placeholder {
|
||||
color: nth($cgr, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.prepend,
|
||||
.append {
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
background: nth($cp, 1);
|
||||
}
|
||||
.prepend {
|
||||
border-right: 1px solid nth($cp, 3);
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.append {
|
||||
border-left: 1px solid nth($cp, 3);
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
&[prepend] .prepend,
|
||||
&[append] .append {
|
||||
display: flex;
|
||||
}
|
||||
/* ----- */
|
||||
.arrow {
|
||||
padding: 0 5px;
|
||||
--size: 14px;
|
||||
color: #ddd;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.opt-box {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 10240;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 200px;
|
||||
height: auto;
|
||||
max-height: 200px;
|
||||
min-height: 46px;
|
||||
padding: 8px 0;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #fff;
|
||||
box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.1);
|
||||
transform: rotate(45deg);
|
||||
content: '';
|
||||
}
|
||||
&.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
li {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 8px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&[focus] {
|
||||
background: nth($cp, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --- */
|
||||
:host([disabled]) .label {
|
||||
background: nth($cp, 1);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
:host(:focus-within) {
|
||||
box-shadow: 0 0 3px nth($ct, 1);
|
||||
}
|
||||
:host(:focus-within[readonly]) {
|
||||
box-shadow: 0 0 3px nth($co, 1);
|
||||
}
|
||||
|
||||
/* 额外样式 */
|
||||
:host([round]) {
|
||||
border-radius: 21px;
|
||||
|
||||
.prepend {
|
||||
border-radius: 21px 0 0 21px;
|
||||
}
|
||||
.append {
|
||||
border-radius: 0 21px 21px 0;
|
||||
}
|
||||
}
|
||||
|
||||
:host([size='large']) {
|
||||
.label {
|
||||
height: 42px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.prepend,
|
||||
.append {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
:host([size='medium']) {
|
||||
.label {
|
||||
height: 36px;
|
||||
}
|
||||
.prepend,
|
||||
.append {
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
:host([size='mini']) {
|
||||
.label {
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.icon {
|
||||
--size: 16px;
|
||||
}
|
||||
.prepend,
|
||||
.append {
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import '../scroll/index'
|
||||
import '../icon/index'
|
||||
import { nextTick, ebind, bind, unbind } from '../utils'
|
||||
|
||||
function parseTree(list, key) {
|
||||
var tmp = {}
|
||||
var arr = []
|
||||
|
||||
list.sort(function(a, b) {
|
||||
return a.parent === b.parent ? a.id - b.id : a.parent - b.parent
|
||||
})
|
||||
|
||||
list.forEach(it => {
|
||||
it.id = +it.id
|
||||
it.parent = +it.parent
|
||||
it.children = []
|
||||
|
||||
tmp[it.id] = it
|
||||
let _p = tmp[it.parent]
|
||||
|
||||
if (_p) {
|
||||
_p.children.push(it)
|
||||
} else {
|
||||
arr.push(it)
|
||||
}
|
||||
})
|
||||
// key && (store.project[key] = tmp)
|
||||
return arr
|
||||
}
|
||||
|
||||
function parseOptions(list) {
|
||||
// 最多只允许4级联动
|
||||
var arr = Array(4)
|
||||
.fill(null)
|
||||
.map(_ => [])
|
||||
var path = {}
|
||||
|
||||
for (let it of list) {
|
||||
path[value] = value
|
||||
arr[0].push({ label: it.label, value: it.value })
|
||||
|
||||
if (it.children && it.children.length) {
|
||||
for (let s of it.children) {
|
||||
path[s.value] = it.value
|
||||
}
|
||||
}
|
||||
arr[1] = arr[1].concat(it.children || [])
|
||||
}
|
||||
for (let it of arr[1]) {
|
||||
}
|
||||
}
|
||||
|
||||
export default class Select {
|
||||
props = {
|
||||
label: '',
|
||||
placeholder: '',
|
||||
multi: '',
|
||||
options: [],
|
||||
mvidx: null, //下拉列表光标的索引ID
|
||||
disabled: false
|
||||
}
|
||||
|
||||
__init__() {
|
||||
/* render */
|
||||
|
||||
this.__OUTER__ = this.root.children[1]
|
||||
this.__PREPEND__ = this.__OUTER__.children[0]
|
||||
this.__INPUT__ = this.__OUTER__.children[1]
|
||||
this.__ICO__ = this.__OUTER__.children[2]
|
||||
this.__APPEND__ = this.__OUTER__.children[3]
|
||||
this.__OPTG__ = this.__OUTER__.children[4]
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this.props.disabled
|
||||
}
|
||||
|
||||
set disabled(val) {
|
||||
var type = typeof val
|
||||
|
||||
if (val === this.props.disabled) {
|
||||
return
|
||||
}
|
||||
if ((type === 'boolean' && val) || type !== 'boolean') {
|
||||
this.props.disabled = true
|
||||
this.setAttribute('disabled', '')
|
||||
this.__INPUT__.setAttribute('disabled', '')
|
||||
} else {
|
||||
this.props.disabled = false
|
||||
this.removeAttribute('disabled')
|
||||
this.__INPUT__.removeAttribute('disabled')
|
||||
}
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.__INPUT__.value
|
||||
}
|
||||
|
||||
set value(val) {
|
||||
this.__INPUT__.value = val
|
||||
}
|
||||
|
||||
_mkOpt(list) {
|
||||
var html = list
|
||||
.map((it, i) => `<li data-idx="${i}">${it.value}</li>`)
|
||||
.join('')
|
||||
}
|
||||
|
||||
mounted() {
|
||||
var prepend = this.__PREPEND__.assignedNodes()
|
||||
var append = this.__APPEND__.assignedNodes()
|
||||
|
||||
// 相同插槽, 只允许1个
|
||||
while (prepend.length > 1) {
|
||||
this.removeChild(prepend.pop())
|
||||
}
|
||||
while (append.length > 1) {
|
||||
this.removeChild(append.pop())
|
||||
}
|
||||
|
||||
if (prepend.length && this.props.type !== 'textarea') {
|
||||
this.__OUTER__.setAttribute('prepend', '')
|
||||
}
|
||||
if (append.length && this.props.type !== 'textarea') {
|
||||
this.__OUTER__.setAttribute('append', '')
|
||||
}
|
||||
|
||||
// 渲染建议列表
|
||||
this._parseOptGroup = bind(this.__INPUT__, 'click', ev => {
|
||||
var { options: list } = this.props
|
||||
let { x, y, width } = this.getBoundingClientRect()
|
||||
log(list, this.props)
|
||||
if (list && list.length) {
|
||||
var html = list
|
||||
.map((it, i) => `<li data-idx="${i}">${it.value}</li>`)
|
||||
.join('')
|
||||
this.__OPTG__.innerHTML = html
|
||||
this.__OPTG__.classList.toggle('show', true)
|
||||
this.__OPTG__.style.cssText = `left:${x}px;top:${y +
|
||||
50}px;width:${width}px;`
|
||||
} else {
|
||||
this.__OPTG__.classList.toggle('show', false)
|
||||
}
|
||||
})
|
||||
|
||||
this._bubbleFn = ebind(this, 'click')
|
||||
}
|
||||
|
||||
watch(name, old, val) {
|
||||
if (old === val) {
|
||||
return
|
||||
}
|
||||
switch (name) {
|
||||
// label和placeholder 功能相同
|
||||
case 'label':
|
||||
case 'placeholder':
|
||||
this.__INPUT__.setAttribute('placeholder', val)
|
||||
break
|
||||
|
||||
case 'options':
|
||||
if (val) {
|
||||
try {
|
||||
this.props.options = JSON.parse(val)
|
||||
} catch (err) {}
|
||||
}
|
||||
break
|
||||
|
||||
case 'value':
|
||||
this.value = val
|
||||
break
|
||||
|
||||
case 'readonly':
|
||||
case 'disabled':
|
||||
if (val === '') {
|
||||
this[name] = true
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -220,10 +220,7 @@ export default class Checkbox {
|
|||
)
|
||||
}
|
||||
|
||||
watch(name, old, val) {
|
||||
if (old === val) {
|
||||
return
|
||||
}
|
||||
watch() {
|
||||
switch (name) {
|
||||
case 'label':
|
||||
case 'color':
|
||||
|
|
@ -232,9 +229,7 @@ export default class Checkbox {
|
|||
|
||||
case 'checked':
|
||||
case 'disabled':
|
||||
if (val === '') {
|
||||
this[name] = true
|
||||
}
|
||||
this[name] = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -480,10 +480,7 @@ export default class Input {
|
|||
unbind(this.__LIST__, 'click', this._handleSelect)
|
||||
}
|
||||
|
||||
watch(name, old, val) {
|
||||
if (old === val) {
|
||||
return
|
||||
}
|
||||
watch() {
|
||||
switch (name) {
|
||||
case 'icon':
|
||||
this.props.icon = val
|
||||
|
|
@ -525,9 +522,7 @@ export default class Input {
|
|||
|
||||
case 'readonly':
|
||||
case 'disabled':
|
||||
if (val === '') {
|
||||
this[name] = true
|
||||
}
|
||||
this[name] = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,11 +90,7 @@ export default class Progress {
|
|||
this.calculate()
|
||||
}
|
||||
|
||||
watch(name, old, val) {
|
||||
if (old === val) {
|
||||
return
|
||||
}
|
||||
|
||||
watch() {
|
||||
switch (name) {
|
||||
case max:
|
||||
var max = +val
|
||||
|
|
|
|||
|
|
@ -153,6 +153,8 @@
|
|||
</style>
|
||||
|
||||
<script>
|
||||
import { bind, unbind } from '../utils'
|
||||
|
||||
export default class Radio {
|
||||
props = {
|
||||
label: '',
|
||||
|
|
@ -202,22 +204,19 @@ export default class Radio {
|
|||
}
|
||||
|
||||
mounted() {
|
||||
this.addEventListener(
|
||||
'click',
|
||||
ev => {
|
||||
if (!this.disabled && !this.checked) {
|
||||
this.checked = true
|
||||
this.dispatchEvent(new CustomEvent('input'))
|
||||
}
|
||||
},
|
||||
false
|
||||
)
|
||||
this._handleClick = bind(this, 'click', ev => {
|
||||
if (!this.disabled && !this.checked) {
|
||||
this.checked = true
|
||||
this.dispatchEvent(new CustomEvent('input'))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(name, old, val) {
|
||||
if (old === val) {
|
||||
return
|
||||
}
|
||||
unmount() {
|
||||
unbind(this, 'click', this._handleClick)
|
||||
}
|
||||
|
||||
watch() {
|
||||
switch (name) {
|
||||
case 'label':
|
||||
this.props.label = val
|
||||
|
|
@ -225,9 +224,7 @@ export default class Radio {
|
|||
|
||||
case 'checked':
|
||||
case 'disabled':
|
||||
if (val === '') {
|
||||
this[name] = true
|
||||
}
|
||||
this[name] = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -465,10 +465,7 @@ export default class Select {
|
|||
})
|
||||
}
|
||||
|
||||
watch(name, old, val) {
|
||||
if (old === val) {
|
||||
return
|
||||
}
|
||||
watch() {
|
||||
switch (name) {
|
||||
// label和placeholder 功能相同
|
||||
case 'label':
|
||||
|
|
@ -491,9 +488,7 @@ export default class Select {
|
|||
|
||||
case 'readonly':
|
||||
case 'disabled':
|
||||
if (val === '') {
|
||||
this[name] = true
|
||||
}
|
||||
this[name] = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@
|
|||
</style>
|
||||
|
||||
<script>
|
||||
import { bind, unbind } from '../utils'
|
||||
export default class Switch {
|
||||
props = {
|
||||
checked: false,
|
||||
|
|
@ -146,31 +147,24 @@ export default class Switch {
|
|||
}
|
||||
|
||||
mounted() {
|
||||
this.addEventListener(
|
||||
'click',
|
||||
ev => {
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
if (!this.disabled) {
|
||||
this.checked = !this.checked
|
||||
this.dispatchEvent(new CustomEvent('input'))
|
||||
}
|
||||
},
|
||||
false
|
||||
)
|
||||
this._handleClick = bind(this, 'click', ev => {
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
this.checked = !this.checked
|
||||
this.dispatchEvent(new CustomEvent('input'))
|
||||
})
|
||||
}
|
||||
|
||||
watch(name, old, val) {
|
||||
if (old === val) {
|
||||
return
|
||||
}
|
||||
unmount() {
|
||||
unbind(this, 'click', this._handleClick)
|
||||
}
|
||||
|
||||
watch() {
|
||||
switch (name) {
|
||||
case 'checked':
|
||||
case 'disabled':
|
||||
if (val === '') {
|
||||
this[name] = true
|
||||
}
|
||||
this[name] = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
|
|
|||
34
src/icon.js
34
src/icon.js
File diff suppressed because one or more lines are too long
|
|
@ -130,7 +130,7 @@ export default class Icon {
|
|||
this.drawPath()
|
||||
}
|
||||
|
||||
watch(name, old, val) {
|
||||
watch() {
|
||||
switch (name) {
|
||||
case 'is':
|
||||
this.is = val
|
||||
|
|
|
|||
|
|
@ -1057,11 +1057,7 @@ export default class Layer {
|
|||
|
||||
unmount() {}
|
||||
|
||||
watch(name, old, val) {
|
||||
if (old === val) {
|
||||
return
|
||||
}
|
||||
|
||||
watch() {
|
||||
switch (name) {
|
||||
case 'title':
|
||||
case 'type':
|
||||
|
|
|
|||
|
|
@ -1,254 +0,0 @@
|
|||
'use strict'
|
||||
|
||||
import 'css/pager.scss'
|
||||
|
||||
Anot.ui.pager = '1.0.0'
|
||||
//计算页码列表
|
||||
function calculate({ currPage, maxPageShow, totalPage }) {
|
||||
let arr = []
|
||||
let fixNum = 0
|
||||
let halfPage =
|
||||
currPage < maxPageShow / 2
|
||||
? maxPageShow - currPage
|
||||
: Math.floor(maxPageShow / 2)
|
||||
|
||||
if (totalPage < 2) {
|
||||
arr.push(1)
|
||||
return arr
|
||||
}
|
||||
if (currPage - halfPage > 1) {
|
||||
arr.push('...')
|
||||
}
|
||||
if (totalPage - currPage < halfPage) {
|
||||
fixNum = halfPage - totalPage + currPage
|
||||
}
|
||||
for (
|
||||
let i = currPage - halfPage - fixNum;
|
||||
i < currPage + halfPage + 1 && i <= totalPage;
|
||||
i++
|
||||
) {
|
||||
if (i > 0) {
|
||||
arr.push(i)
|
||||
}
|
||||
}
|
||||
if (currPage + halfPage < totalPage) {
|
||||
arr.push('...')
|
||||
}
|
||||
return arr
|
||||
}
|
||||
// 更新组件
|
||||
function update(currPage, vm) {
|
||||
const {
|
||||
totalPage,
|
||||
props: { maxPageShow }
|
||||
} = vm
|
||||
if (vm.currPage !== currPage) {
|
||||
vm.currPage = vm.inputPage = currPage
|
||||
if (typeof vm.props.pageChanged === 'function') {
|
||||
vm.props.pageChanged(currPage)
|
||||
}
|
||||
}
|
||||
|
||||
vm.pageList.clear()
|
||||
if (totalPage > 1) {
|
||||
vm.pageList.pushArray(calculate({ currPage, totalPage, maxPageShow }))
|
||||
} else {
|
||||
vm.pageList.pushArray([1])
|
||||
}
|
||||
}
|
||||
|
||||
const tmpls = {
|
||||
home: `<button class="do-icon-dbl-left button"
|
||||
:css="{'border-radius': props.radius}"
|
||||
:attr="{disabled: currPage === 1}"
|
||||
:data="{to: parseUrl(1)}"
|
||||
:click="go(1, $event)"></button>`,
|
||||
end: `<button class="do-icon-dbl-right button"
|
||||
:css="{'border-radius': props.radius}"
|
||||
:attr="{disabled: currPage === totalPage}"
|
||||
:data="{to: parseUrl(totalPage)}"
|
||||
:click="go(totalPage, $event)"></button>`,
|
||||
prev: `<button class="do-icon-left button"
|
||||
:css="{'border-radius': props.radius}"
|
||||
:attr="{disabled: currPage < 2}"
|
||||
:data="{to: parseUrl(currPage - 1)}"
|
||||
:click="go(currPage - 1, $event)"></button>`,
|
||||
next: `<button class="do-icon-right button"
|
||||
:css="{'border-radius': props.radius}"
|
||||
:attr="{disabled: currPage >= totalPage}"
|
||||
:data="{to: parseUrl(currPage + 1)}"
|
||||
:click="go(currPage + 1, $event)"></button>`,
|
||||
pager: `<button class="page"
|
||||
:for="pageList"
|
||||
:css="{'border-radius': props.radius}"
|
||||
:attr="{disabled: '...' === el || currPage === el}"
|
||||
:data="{to: parseUrl(el)}"
|
||||
:class="{disabled: '...' === el, curr: currPage === el}"
|
||||
:text="el"
|
||||
:click="go(el, $event)"></button>`,
|
||||
curr: `<button class="page curr" :text="currPage"></button>`,
|
||||
total: `<span class="total-box">共 {{totalPage}} 页 {{totalItem}} 条</span>`,
|
||||
jumper: `<div class="input-box">前往
|
||||
<input type="text" :duplex="inputPage" :keyup="go(null, $event)"> 页
|
||||
</div>`,
|
||||
slot: ''
|
||||
}
|
||||
|
||||
export default Anot.component('pager', {
|
||||
__init__: function(props, state, next) {
|
||||
this.classList.add('do-pager')
|
||||
this.classList.add('do-fn-noselect')
|
||||
this.setAttribute(':class', "{{classList.join(' ')}}")
|
||||
props.theme = +props.theme || 1
|
||||
if (props.simpleMode) {
|
||||
props.theme = 1
|
||||
}
|
||||
|
||||
state.classList = state.classList.concat(
|
||||
'skin-' + props.theme,
|
||||
props.color || 'plain',
|
||||
props.size || 'mini'
|
||||
)
|
||||
|
||||
if (props.total) {
|
||||
state.totalItem = +props.total
|
||||
}
|
||||
if (props.pageSize) {
|
||||
state.pageSize = +props.pageSize
|
||||
}
|
||||
|
||||
if (!props.layout) {
|
||||
props.layout = 'total,home,prev,pager,next,end,jumper'
|
||||
}
|
||||
|
||||
if (props.theme === 2) {
|
||||
props.radius = null
|
||||
}
|
||||
|
||||
delete props.total
|
||||
delete props.pageSize
|
||||
delete props.color
|
||||
delete props.size
|
||||
next()
|
||||
},
|
||||
render: function(slots) {
|
||||
let { layout, theme, simpleMode } = this.props
|
||||
if (simpleMode) {
|
||||
layout = ['prev', 'curr', 'next']
|
||||
} else {
|
||||
layout = layout.replace(/\s/g, '')
|
||||
if (theme === 2) {
|
||||
layout = layout.replace(/total|jumper/g, '')
|
||||
}
|
||||
layout = layout.split(',')
|
||||
}
|
||||
layout = layout.map(it => {
|
||||
if (it === 'slot') {
|
||||
if (slots && slots.extra) {
|
||||
return slots.extra.join('')
|
||||
}
|
||||
} else {
|
||||
return tmpls[it] || ''
|
||||
}
|
||||
})
|
||||
return layout.join('\n')
|
||||
},
|
||||
componentWillMount: function() {
|
||||
const { currPage, totalPage, props } = this
|
||||
this.pageList.clear()
|
||||
this.pageList.pushArray(
|
||||
calculate({ currPage, totalPage, maxPageShow: props.maxPageShow })
|
||||
)
|
||||
},
|
||||
componentDidMount: function() {
|
||||
if (typeof this.props.created === 'function') {
|
||||
this.props.created(this)
|
||||
}
|
||||
},
|
||||
state: {
|
||||
classList: [],
|
||||
currPage: 1,
|
||||
totalItem: 1,
|
||||
pageSize: 20,
|
||||
inputPage: 1,
|
||||
pageList: []
|
||||
},
|
||||
computed: {
|
||||
totalPage: function() {
|
||||
return Math.ceil(this.totalItem / this.pageSize)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
url: null,
|
||||
maxPageShow: 5,
|
||||
simpleMode: !1,
|
||||
radius: 3,
|
||||
pageChanged: Anot.PropsTypes.isFunction(),
|
||||
created: Anot.PropsTypes.isFunction()
|
||||
},
|
||||
skip: ['classList'],
|
||||
methods: {
|
||||
// 格式化页码的URL
|
||||
parseUrl(val) {
|
||||
val = val >>> 0
|
||||
if (val < 1 || !this.props.url || this.currPage === val) {
|
||||
return ''
|
||||
}
|
||||
return this.props.url.replace('{id}', val)
|
||||
},
|
||||
// 设置页码
|
||||
go(val, ev) {
|
||||
let { inputPage, totalPage, currPage } = this
|
||||
let elem = (ev && ev.target) || null
|
||||
if ((elem && elem.disabled) || currPage === val) {
|
||||
return
|
||||
}
|
||||
if (val && elem) {
|
||||
if (val !== '...') {
|
||||
let link = elem.dataset.to
|
||||
|
||||
if (link) {
|
||||
location.href = link
|
||||
} else {
|
||||
val = val >>> 0
|
||||
}
|
||||
update(val, this)
|
||||
}
|
||||
} else {
|
||||
if (val === null) {
|
||||
inputPage = inputPage >>> 0
|
||||
|
||||
if (ev && ev.keyCode === 13) {
|
||||
if (inputPage < 1 || currPage === inputPage) {
|
||||
return (this.inputPage = currPage)
|
||||
}
|
||||
if (inputPage > totalPage) {
|
||||
inputPage = totalPage
|
||||
}
|
||||
this.inputPage = inputPage
|
||||
update(inputPage, this)
|
||||
}
|
||||
} else {
|
||||
val = val >>> 0
|
||||
update(val, this)
|
||||
}
|
||||
}
|
||||
},
|
||||
setSize(num) {
|
||||
num = +num
|
||||
if (this.pageSize === num) {
|
||||
return
|
||||
}
|
||||
this.pageSize = +num
|
||||
update(1, this)
|
||||
},
|
||||
setTotal(num) {
|
||||
num = +num
|
||||
if (this.totalItem === num) {
|
||||
return
|
||||
}
|
||||
this.totalItem = +num
|
||||
update(1, this)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -213,11 +213,7 @@ export default class Pager {
|
|||
)
|
||||
}
|
||||
|
||||
watch(name, old, val) {
|
||||
if (old === val) {
|
||||
return
|
||||
}
|
||||
|
||||
watch() {
|
||||
switch (name) {
|
||||
case 'total':
|
||||
case 'pagesize':
|
||||
|
|
|
|||
|
|
@ -587,10 +587,7 @@ export default class DatePicker {
|
|||
unbind(this.__DAYS__, 'click', this._pickFn)
|
||||
}
|
||||
|
||||
watch(name, old, val) {
|
||||
if (old === val) {
|
||||
return
|
||||
}
|
||||
watch() {
|
||||
switch (name) {
|
||||
// label和placeholder 功能相同
|
||||
case 'label':
|
||||
|
|
@ -630,9 +627,7 @@ export default class DatePicker {
|
|||
|
||||
case 'readonly':
|
||||
case 'disabled':
|
||||
if (val === '') {
|
||||
this[name] = true
|
||||
}
|
||||
this[name] = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue