完成新一轮的改造
|
@ -7,3 +7,5 @@ dist/
|
|||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
package-lock.json
|
||||
.DS_Store
|
||||
**/.DS_Store
|
13
build.dev.js
|
@ -1,15 +1,22 @@
|
|||
#! /usr/bin/env node
|
||||
|
||||
const log = console.log
|
||||
const fs = require('iofs')
|
||||
const path = require('path')
|
||||
const babel = require('babel-core')
|
||||
const scss = require('node-sass')
|
||||
const chokidar = require('chokidar')
|
||||
const log = console.log
|
||||
const postcss = require('postcss')
|
||||
const autoprefixer = require('autoprefixer')
|
||||
const chalk = require('chalk')
|
||||
|
||||
const sourceDir = path.resolve(__dirname, 'src')
|
||||
const buildDir = path.resolve(__dirname, 'dist')
|
||||
const prefixer = postcss().use(
|
||||
autoprefixer({
|
||||
browsers: ['ie > 9', 'iOS > 8', 'Android >= 4.4', 'ff > 38', 'Chrome > 38']
|
||||
})
|
||||
)
|
||||
const jsOpt = {
|
||||
presets: ['es2015'],
|
||||
plugins: ['transform-es2015-modules-amd']
|
||||
|
@ -42,7 +49,9 @@ const compileCss = (entry, output) => {
|
|||
setTimeout(() => {
|
||||
try {
|
||||
const { css } = scss.renderSync({ ...cssOpt, file: entry })
|
||||
fs.echo(css, output)
|
||||
prefixer.process(css, { from: '', to: '' }).then(result => {
|
||||
fs.echo(result.css, output)
|
||||
})
|
||||
} catch (err) {
|
||||
log(err)
|
||||
}
|
||||
|
|
|
@ -1,14 +1,21 @@
|
|||
#! /usr/bin/env node
|
||||
|
||||
const log = console.log
|
||||
const fs = require('iofs')
|
||||
const path = require('path')
|
||||
const babel = require('babel-core')
|
||||
const scss = require('node-sass')
|
||||
const log = console.log
|
||||
const postcss = require('postcss')
|
||||
const autoprefixer = require('autoprefixer')
|
||||
const chalk = require('chalk')
|
||||
|
||||
const sourceDir = path.resolve(__dirname, 'src')
|
||||
const buildDir = path.resolve(__dirname, 'dist')
|
||||
const prefixer = postcss().use(
|
||||
autoprefixer({
|
||||
browsers: ['ie > 9', 'iOS > 8', 'Android >= 4.4', 'ff > 38', 'Chrome > 38']
|
||||
})
|
||||
)
|
||||
const jsOpt = {
|
||||
presets: ['es2015', 'minify'],
|
||||
plugins: ['transform-es2015-modules-amd']
|
||||
|
@ -39,12 +46,14 @@ const compileJs = (entry, output) => {
|
|||
const compileCss = (entry, output) => {
|
||||
let t1 = Date.now()
|
||||
const { css } = scss.renderSync({ ...cssOpt, file: entry })
|
||||
prefixer.process(css, { from: '', to: '' }).then(result => {
|
||||
log(
|
||||
'编译scss: %s, 耗时 %s ms',
|
||||
chalk.green(entry),
|
||||
chalk.yellow(Date.now() - t1)
|
||||
)
|
||||
fs.echo(css, output)
|
||||
fs.echo(result.css, output)
|
||||
})
|
||||
}
|
||||
|
||||
const compileHtm = (entry, output) => {
|
||||
|
|
|
@ -111,6 +111,20 @@
|
|||
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
|
||||
"dev": true
|
||||
},
|
||||
"autoprefixer": {
|
||||
"version": "7.2.5",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.2.5.tgz",
|
||||
"integrity": "sha512-XqHfo8Ht0VU+T5P+eWEVoXza456KJ4l62BPewu3vpNf3LP9s2+zYXkXBznzYby4XeECXgG3N4i+hGvOhXErZmA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"browserslist": "2.11.3",
|
||||
"caniuse-lite": "1.0.30000792",
|
||||
"normalize-range": "0.1.2",
|
||||
"num2fraction": "1.2.2",
|
||||
"postcss": "6.0.16",
|
||||
"postcss-value-parser": "3.3.0"
|
||||
}
|
||||
},
|
||||
"aws-sign2": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
|
||||
|
@ -971,6 +985,16 @@
|
|||
"repeat-element": "1.1.2"
|
||||
}
|
||||
},
|
||||
"browserslist": {
|
||||
"version": "2.11.3",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
|
||||
"integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"caniuse-lite": "1.0.30000792",
|
||||
"electron-to-chromium": "1.3.31"
|
||||
}
|
||||
},
|
||||
"builtin-modules": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
|
||||
|
@ -993,6 +1017,12 @@
|
|||
"map-obj": "1.0.1"
|
||||
}
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30000792",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000792.tgz",
|
||||
"integrity": "sha1-0M6pgfgRjzlhRxr7tDyaHlu/AzI=",
|
||||
"dev": true
|
||||
},
|
||||
"caseless": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
|
||||
|
@ -1215,6 +1245,12 @@
|
|||
"jsbn": "0.1.1"
|
||||
}
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.3.31",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.31.tgz",
|
||||
"integrity": "sha512-XE4CLbswkZgZFn34cKFy1xaX+F5LHxeDLjY1+rsK9asDzknhbrd9g/n/01/acbU25KTsUSiLKwvlLyA+6XLUOA==",
|
||||
"dev": true
|
||||
},
|
||||
"error-ex": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz",
|
||||
|
@ -3060,6 +3096,12 @@
|
|||
"remove-trailing-separator": "1.1.0"
|
||||
}
|
||||
},
|
||||
"normalize-range": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
|
||||
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
|
||||
"dev": true
|
||||
},
|
||||
"npmlog": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
|
||||
|
@ -3072,6 +3114,12 @@
|
|||
"set-blocking": "2.0.0"
|
||||
}
|
||||
},
|
||||
"num2fraction": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
|
||||
"integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
|
||||
"dev": true
|
||||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
|
||||
|
@ -3208,6 +3256,40 @@
|
|||
"pinkie": "2.0.4"
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"version": "6.0.16",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.16.tgz",
|
||||
"integrity": "sha512-m758RWPmSjFH/2MyyG3UOW1fgYbR9rtdzz5UNJnlm7OLtu4B2h9C6gi+bE4qFKghsBRFfZT8NzoQBs6JhLotoA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "2.3.0",
|
||||
"source-map": "0.6.1",
|
||||
"supports-color": "5.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.1.0.tgz",
|
||||
"integrity": "sha512-Ry0AwkoKjDpVKK4sV4h6o3UJmNRbjYm2uXhwfj3J56lMVdvnUNqzQVRztOOMGQ++w1K/TjNDFvpJk0F/LoeBCQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-value-parser": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
|
||||
"integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
|
||||
"dev": true
|
||||
},
|
||||
"preserve": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
|
||||
|
|
|
@ -11,16 +11,21 @@
|
|||
"type": "git",
|
||||
"url": "git+https://github.com/yutent/doui.git"
|
||||
},
|
||||
"keywords": ["doui", "yua"],
|
||||
"keywords": [
|
||||
"doui",
|
||||
"yua"
|
||||
],
|
||||
"author": "yutent",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.2.5",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-minify": "^0.2.0",
|
||||
"chalk": "^2.3.0",
|
||||
"chokidar": "^1.7.0",
|
||||
"iofs": "^1.0.3",
|
||||
"node-sass": "^4.7.2"
|
||||
"node-sass": "^4.7.2",
|
||||
"postcss": "^6.0.16"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,6 +7,6 @@ $co: #ff9800 #ffa726 #f57c00;
|
|||
$cp: #e7e8eb #ecf0f1 #bdc3c7;
|
||||
$cgr: #546e7a #607d8b #37474f;
|
||||
|
||||
@mixin ts($c: all, $t: .1s, $m: ease-in-out){
|
||||
@mixin ts($c: all, $t: .2s, $m: ease-in-out){
|
||||
transition:$c $t $m;
|
||||
}
|
|
@ -141,7 +141,7 @@
|
|||
}
|
||||
|
||||
if (tickObserver) {
|
||||
var node = document.createTextNode('any')
|
||||
var node = document.createTextNode('anot')
|
||||
new tickObserver(callback).observe(node, { characterData: true }) // jshint ignore:line
|
||||
var bool = false
|
||||
return function(fn) {
|
||||
|
@ -460,7 +460,7 @@
|
|||
value: function() {
|
||||
var thisYear = this.getFullYear(),
|
||||
that = new Date(thisYear, 0, 1),
|
||||
firstDay = that.getDay(),
|
||||
firstDay = that.getDay() || 1,
|
||||
numsOfToday = (this - that) / 86400000
|
||||
return Math.ceil((numsOfToday + firstDay) / 7)
|
||||
},
|
||||
|
@ -4182,7 +4182,7 @@
|
|||
if (!this.init) {
|
||||
for (var i in Anot.vmodels) {
|
||||
var v = Anot.vmodels[i]
|
||||
v.$fire('any-duplex-init', binding)
|
||||
v.$fire('anot-duplex-init', binding)
|
||||
}
|
||||
var cpipe = binding.pipe || (binding.pipe = pipe)
|
||||
cpipe(null, binding, 'init')
|
||||
|
@ -4265,17 +4265,7 @@
|
|||
if (-val === -number) {
|
||||
return number
|
||||
}
|
||||
var arr = /strong|medium|weak/.exec(
|
||||
binding.element.getAttribute('data-duplex-number')
|
||||
) || ['medium']
|
||||
switch (arr[0]) {
|
||||
case 'strong':
|
||||
return 0
|
||||
case 'medium':
|
||||
return val === '' ? '' : 0
|
||||
case 'weak':
|
||||
return val
|
||||
}
|
||||
},
|
||||
set: fixNull
|
||||
}
|
||||
|
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
@ -0,0 +1,365 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent@doui.cc)
|
||||
* @date 2016-02-14 13:58:39
|
||||
*
|
||||
*/
|
||||
'use strict'
|
||||
|
||||
import tpl from './main.htm'
|
||||
import './style.css'
|
||||
|
||||
/**************** 公共函数 *****************/
|
||||
//计算日历数组
|
||||
function getCalendarTable({ year, month, max, min }, last) {
|
||||
let nums = getTotalDays(year, month)
|
||||
let numsFixed = 1 - getFirstDay(year, month)
|
||||
let isLimitYM = isLimited({ max, min }, { year, month })
|
||||
let list = []
|
||||
|
||||
for (let i = numsFixed; i <= nums; i++) {
|
||||
let day = {
|
||||
weeken: !1,
|
||||
day: i < 1 ? '' : i,
|
||||
selected: !1,
|
||||
disabled: !0
|
||||
}
|
||||
if (i > 0) {
|
||||
let week = getFirstDay(year, month, i)
|
||||
day.weeken = week === 0 || week === 6
|
||||
day.selected = isSelected({ year, month, day: i }, last)
|
||||
day.disabled = disabledDay({ max, min }, i, isLimitYM)
|
||||
}
|
||||
list.push(day)
|
||||
}
|
||||
return list
|
||||
}
|
||||
|
||||
//判断当前年/月是否超出限制
|
||||
function isLimited({ max, min }, { year, month }) {
|
||||
let result = ''
|
||||
|
||||
if ((!max.year && !min.year) || (!max.month && !min.month) || !year) {
|
||||
return false
|
||||
}
|
||||
|
||||
if ((min.year && year < min.year) || (max.year && year > max.year)) {
|
||||
return true
|
||||
}
|
||||
|
||||
if (month) {
|
||||
if (year === min.year) {
|
||||
if (min.month && month < min.month) {
|
||||
return true
|
||||
}
|
||||
|
||||
if (month == min.month) {
|
||||
result += '-'
|
||||
}
|
||||
}
|
||||
|
||||
if (year === max.year) {
|
||||
if (max.month && month > max.month) {
|
||||
return true
|
||||
}
|
||||
|
||||
if (month == max.month) {
|
||||
result += '+'
|
||||
}
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
//判断指定天数是否有效
|
||||
function disabledDay({ max, min }, day, limitedYM) {
|
||||
if (limitedYM === '-') {
|
||||
return day < min.day
|
||||
}
|
||||
|
||||
if (limitedYM === '+') {
|
||||
return max.day && day > max.day
|
||||
}
|
||||
|
||||
if (limitedYM === '-+') {
|
||||
return day < min.day || (max.day && day > max.day)
|
||||
}
|
||||
|
||||
return limitedYM
|
||||
}
|
||||
|
||||
//判断指定天数是否被选中
|
||||
function isSelected({ year, month, day }, last) {
|
||||
return !(last.year !== year || last.month !== month || last.day !== day)
|
||||
}
|
||||
|
||||
//修改当前选中日期的样式
|
||||
function changeStyle(calendar, day) {
|
||||
calendar.list.forEach(function(item) {
|
||||
if (item.day != day) {
|
||||
item.selected = !1
|
||||
} else {
|
||||
item.selected = !0
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//获取今年的年份/月份,返回的是数组
|
||||
function getThisYearMonth() {
|
||||
var oDate = new Date()
|
||||
return [oDate.getFullYear(), oDate.getMonth() + 1]
|
||||
}
|
||||
|
||||
//根据年份获取指定月份天数
|
||||
function getTotalDays(year, month) {
|
||||
return new Date(year, month, 0).getDate()
|
||||
}
|
||||
|
||||
//判断指定年月第一天是星期几
|
||||
function getFirstDay(year, month, day) {
|
||||
return new Date(year, month - 1, day || 1).getDay()
|
||||
}
|
||||
|
||||
Anot.ui.datepicker = '1.0.0'
|
||||
|
||||
export default Anot.component('datepicker', {
|
||||
render: function() {
|
||||
return tpl
|
||||
},
|
||||
construct: function(props, state) {
|
||||
if (!props.hasOwnProperty('key')) {
|
||||
return Anot.error('日历组件必须设置key属性')
|
||||
}
|
||||
|
||||
// 日期格式化, 不显示时间时, 默认会调用过滤器的格式'Y-m-d H:i:s'
|
||||
if (!props.showTime && !props.format) {
|
||||
props.format = 'Y-m-d'
|
||||
}
|
||||
|
||||
//获取初始值
|
||||
let defVal = props.value
|
||||
if (!defVal) {
|
||||
if (props.minDate) {
|
||||
defVal = props.minDate
|
||||
} else if (props.maxDate) {
|
||||
defVal = props.maxDate
|
||||
}
|
||||
}
|
||||
// 修正默认值, 如果不是Date对象, 则转为Date对象
|
||||
if (defVal && !Date.isDate(defVal)) {
|
||||
defVal += ' GMT+8000'
|
||||
defVal = new Date(defVal)
|
||||
} else {
|
||||
defVal = new Date()
|
||||
}
|
||||
|
||||
if (props.minDate) {
|
||||
if (!Date.isDate(props.minDate)) {
|
||||
props.minDate += ' GMT+8000'
|
||||
props.minDate = new Date(props.minDate)
|
||||
}
|
||||
if (defVal <= props.minDate) {
|
||||
defVal = props.minDate
|
||||
}
|
||||
state.min.year = props.minDate.getFullYear()
|
||||
state.min.month = props.minDate.getMonth() + 1
|
||||
state.min.day = props.minDate.getDate()
|
||||
}
|
||||
|
||||
if (props.maxDate) {
|
||||
if (!Date.isDate(props.maxDate)) {
|
||||
props.maxDate += ' GMT+8000'
|
||||
props.maxDate = new Date(props.maxDate)
|
||||
}
|
||||
if (defVal >= props.maxDate) {
|
||||
defVal = props.maxDate
|
||||
}
|
||||
state.max.year = props.maxDate.getFullYear()
|
||||
state.max.month = props.maxDate.getMonth() + 1
|
||||
state.max.day = props.maxDate.getDate()
|
||||
}
|
||||
if (props.value) {
|
||||
state.last = {
|
||||
year: defVal.getFullYear(),
|
||||
month: defVal.getMonth() + 1,
|
||||
day: defVal.getDate()
|
||||
}
|
||||
state.value = defVal.format(props.format)
|
||||
}
|
||||
|
||||
state.calendar = {
|
||||
list: [1],
|
||||
year: defVal.getFullYear(),
|
||||
month: defVal.getMonth() + 1,
|
||||
day: defVal.getDate(),
|
||||
hour: defVal.getHours(),
|
||||
minute: defVal.getMinutes(),
|
||||
second: defVal.getSeconds()
|
||||
}
|
||||
state.disabled = !!props.disabled
|
||||
|
||||
//移除部分属性
|
||||
delete props.minDate
|
||||
delete props.maxDate
|
||||
delete props.value
|
||||
delete props.disabled
|
||||
},
|
||||
componentWillMount: function() {
|
||||
this.resetCalendarTable()
|
||||
},
|
||||
componentDidMount: function() {
|
||||
if (typeof this.props.onCreated === 'function') {
|
||||
this.props.onCreated.call(null, this)
|
||||
}
|
||||
document.addEventListener('click', () => {
|
||||
this.close()
|
||||
})
|
||||
},
|
||||
state: {
|
||||
showCalendar: false, //显示日历对话框
|
||||
disabled: false, //是否禁用
|
||||
last: { year: 0, month: 0, day: 1 },
|
||||
tips: '',
|
||||
timer: null,
|
||||
value: '', // 用于显示在输入框里的日期变量
|
||||
max: { year: 0, month: 0, day: 1 },
|
||||
min: { year: 0, month: 0, day: 1 },
|
||||
calendar: {
|
||||
// list: [1],
|
||||
// year: '',
|
||||
// month: '',
|
||||
// day: '',
|
||||
// hour: '',
|
||||
// minute: '',
|
||||
// second: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
showTime: false, //对话框上显示时间
|
||||
color: 'grey',
|
||||
format: '', // 日期显示格式
|
||||
onCreated: Anot.PropsTypes.isFunction(),
|
||||
onDateChange: Anot.PropsTypes.isFunction()
|
||||
},
|
||||
skip: ['max', 'min', 'last', 'timer'],
|
||||
watch: {
|
||||
tips: function(val) {
|
||||
clearTimeout(this.timer)
|
||||
if (!val) {
|
||||
return
|
||||
}
|
||||
this.timer = setTimeout(() => {
|
||||
this.tips = ''
|
||||
}, 1500)
|
||||
},
|
||||
'calendar.hour': function(val) {
|
||||
if (val > 23) {
|
||||
val = 23
|
||||
}
|
||||
this.calendar.hour = val
|
||||
},
|
||||
'calendar.minute': function(val) {
|
||||
if (val > 59) {
|
||||
val = 59
|
||||
}
|
||||
this.calendar.minute = val
|
||||
},
|
||||
'calendar.second': function(val) {
|
||||
if (val > 59) {
|
||||
val = 59
|
||||
}
|
||||
this.calendar.second = val
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 重置日历表格
|
||||
resetCalendarTable: function() {
|
||||
let { max, min, calendar: { year, month }, last } = this
|
||||
|
||||
this.calendar.list.clear()
|
||||
this.calendar.list.pushArray(
|
||||
getCalendarTable({ max, min, year, month }, last)
|
||||
)
|
||||
},
|
||||
// 数字前面加0
|
||||
numberFormat: function(num) {
|
||||
num += ''
|
||||
if (num.length > 1) {
|
||||
return num
|
||||
}
|
||||
while (num.length < 2) {
|
||||
num = '0' + num
|
||||
}
|
||||
return num
|
||||
},
|
||||
// 输入框获取焦点时,显示日历
|
||||
onFocus: function() {
|
||||
this.showCalendar = !0
|
||||
},
|
||||
// 切换上/下 年/月
|
||||
turn: function(isYear, step) {
|
||||
let { calendar: { year, month }, max, min } = this
|
||||
|
||||
if (isYear === 1) {
|
||||
year += step
|
||||
} else {
|
||||
month += step
|
||||
if (month < 1) {
|
||||
month = 12
|
||||
year--
|
||||
}
|
||||
if (month > 12) {
|
||||
month = 1
|
||||
year++
|
||||
}
|
||||
}
|
||||
if (isLimited({ max, min }, { year, month }) === true) {
|
||||
this.tips = '日期超出限制'
|
||||
return
|
||||
}
|
||||
this.calendar.year = year
|
||||
this.calendar.month = month
|
||||
this.resetCalendarTable()
|
||||
},
|
||||
pick: function(item) {
|
||||
if (item.disabled) {
|
||||
return
|
||||
}
|
||||
|
||||
this.calendar.day = item.day
|
||||
changeStyle(this.calendar, item.day)
|
||||
},
|
||||
updateTime: function() {
|
||||
let { year, month, day, hour, minute, second } = this.calendar
|
||||
|
||||
this.last = { year, month, day }
|
||||
|
||||
if (!this.props.showTime) {
|
||||
hour = 0
|
||||
minute = 0
|
||||
second = 0
|
||||
}
|
||||
this.last.pick = new Date(year, month - 1, day, hour, minute, second)
|
||||
this.value = this.last.pick.format(this.props.format)
|
||||
},
|
||||
now: function() {
|
||||
let now = new Date()
|
||||
this.calendar.hour = now.getHours()
|
||||
this.calendar.minute = now.getMinutes()
|
||||
this.calendar.second = now.getSeconds()
|
||||
},
|
||||
cancelBubble: function(ev) {
|
||||
;(ev.stopPropagation && ev.stopPropagation()) || (ev.cancelBubble = true)
|
||||
},
|
||||
close: function() {
|
||||
this.showCalendar = false
|
||||
},
|
||||
onConfirm: function() {
|
||||
this.updateTime()
|
||||
this.close()
|
||||
if (typeof this.props.onDateChange === 'function') {
|
||||
this.props.onDateChange(this.value, this.last.pick)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
|
@ -1,50 +1,57 @@
|
|||
<div class="do-datepicker do-fn-noselect">
|
||||
<input class="date-input"
|
||||
<div class="do-datepicker do-fn-noselect" :click="cancelBubble">
|
||||
<input
|
||||
class="date-input"
|
||||
type="text"
|
||||
:duplex="value"
|
||||
:focus="$focus"
|
||||
:click="$cancelBubble"
|
||||
:focus="onFocus"
|
||||
:attr-placeholder="props.placeholder || '请选择日期'"
|
||||
:attr-disabled="disabled">
|
||||
|
||||
<dl class="calendar-box"
|
||||
:if="showCalendar"
|
||||
:click="$cancelBubble">
|
||||
<dl
|
||||
class="calendar-box"
|
||||
:if="showCalendar">
|
||||
|
||||
<dt class="title">请选择日期</dt>
|
||||
<dd class="contrl">
|
||||
<a href="javascript:;"
|
||||
:click="$turn(1, -1)"
|
||||
:text="$prevYear"></a>
|
||||
<a href="javascript:;" class="prev-month"
|
||||
:click="$turn(0, -1)" :text="$prevMonth"></a>
|
||||
<a href="javascript:;" class="next-month"
|
||||
:click="$turn(0, 1)" :text="$nextMonth"></a>
|
||||
<a href="javascript:;" class="next-year"
|
||||
:click="$turn(1, 1)" :text="$nextYear"></a>
|
||||
<span :text="calendar.year + '-' + calendar.month"></span>
|
||||
</dd>
|
||||
<dd class="calendar">
|
||||
<section class="week"><span class="td">日</span><span class="td">一</span><span class="td">二</span><span class="td">三</span><span class="td">四</span><span class="td">五</span><span class="td">六</span></section>
|
||||
<section class="list do-fn-cl">
|
||||
<dt class="contrl">
|
||||
<a href="javascript:;" class="do-ui-font" :click="turn(1, -1)"></a>
|
||||
<a href="javascript:;" class="do-ui-font prev-month" :click="turn(0, -1)"></a>
|
||||
<a href="javascript:;" class="do-ui-font next-month" :click="turn(0, 1)"></a>
|
||||
<a href="javascript:;" class="do-ui-font next-year" :click="turn(1, 1)"></a>
|
||||
<span title="双击回到今天" :text="calendar.year + '-' + numberFormat(calendar.month)"></span>
|
||||
</dt>
|
||||
<dd class="table">
|
||||
<section class="thead">
|
||||
<span class="td">日</span>
|
||||
<span class="td">一</span>
|
||||
<span class="td">二</span>
|
||||
<span class="td">三</span>
|
||||
<span class="td">四</span>
|
||||
<span class="td">五</span>
|
||||
<span class="td">六</span>
|
||||
</section>
|
||||
<section class="tr do-fn-cl">
|
||||
<span class="td"
|
||||
:class="{weeken:el.weeken, disabled: el.disable, selected: el.selected}"
|
||||
:class="{weeken:el.weeken, disabled: el.disabled, selected: el.selected}"
|
||||
:repeat="calendar.list"
|
||||
:click="$getDate(el.disable, el.day)"
|
||||
:click="pick(el)"
|
||||
:text="el.day"></span>
|
||||
</section>
|
||||
</dd>
|
||||
<dd class="time" :if="showTime">
|
||||
<dd class="time" :if="props.showTime">
|
||||
<label>
|
||||
<input type="text" :duplex-time="calendar.hour" data-format="hour"> 时
|
||||
<input type="text" :duplex-number="calendar.hour"> 时
|
||||
</label>
|
||||
<label>
|
||||
<input type="text" :duplex-time="calendar.minute" data-format="minute"> 分
|
||||
<input type="text" :duplex-number="calendar.minute"> 分
|
||||
</label>
|
||||
<label>
|
||||
<input type="text" :duplex-time="calendar.second" data-format="second"> 秒
|
||||
<input type="text" :duplex-number="calendar.second"> 秒
|
||||
</label>
|
||||
<a href="javascript:;" class="now" :click="$now">现在</a>
|
||||
<a href="javascript:;" class="now" :click="now">现在</a>
|
||||
</dd>
|
||||
<dt class="confirm">
|
||||
<a href="javascript:;" :click="close" class="cancel">取消</a>
|
||||
<a href="javascript:;" :click="onConfirm" class="ok">确定</a>
|
||||
</dt>
|
||||
<dd class="tips" :if="tips" :text="tips"></dd>
|
||||
</dl>
|
||||
</div>
|
|
@ -1,392 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent@doui.cc)
|
||||
* @date 2016-02-14 13:58:39
|
||||
*
|
||||
*/
|
||||
"use strict";
|
||||
|
||||
define([
|
||||
'text!./main.htm',
|
||||
'css!./style.css',
|
||||
], function(tpl){
|
||||
|
||||
yua.ui.datepicker = '1.0.0'
|
||||
yua.component('datepicker', {
|
||||
$template: tpl,
|
||||
$construct: function(sys, option, attr){
|
||||
|
||||
// 先合并config的配置及元素的属性
|
||||
var opts = Object.assign({}, option, attr),
|
||||
defVal;
|
||||
|
||||
if(!opts.value){
|
||||
return yua.error('日历组件必须设置value属性')
|
||||
}
|
||||
|
||||
//获取初始值
|
||||
defVal = sys.$up[opts.value]
|
||||
|
||||
//日期格式化, 默认会调用过滤器的格式'Y-m-d H:i:s'
|
||||
if(!opts.showTime && !opts.format){
|
||||
opts.format = 'Y-m-d';
|
||||
}
|
||||
|
||||
// 修正默认值, 如果不是Date对象, 则转为Date对象
|
||||
if(!defVal){
|
||||
if(opts.minDate){
|
||||
defVal = opts.minDate;
|
||||
}else if(opts.maxDate){
|
||||
defVal = opts.maxDate;
|
||||
}else{
|
||||
defVal = new Date()
|
||||
}
|
||||
}
|
||||
if(!Date.isDate(defVal)){
|
||||
defVal = new Date(defVal)
|
||||
}
|
||||
|
||||
opts.update_value = opts.value
|
||||
opts.value = defVal.format(opts.format)
|
||||
|
||||
opts.calendar = {
|
||||
list: [1],
|
||||
year: defVal.format('Y'),
|
||||
month: defVal.format('m'),
|
||||
day: defVal.format('d'),
|
||||
hour: defVal.format('H'),
|
||||
minute: defVal.format('i'),
|
||||
second: defVal.format('s'),
|
||||
minYear: 0,
|
||||
minMonth: 0,
|
||||
minDay: 0,
|
||||
maxYear: 0,
|
||||
maxMonth: 0,
|
||||
maxDay: 0
|
||||
}
|
||||
|
||||
if(opts.minDate){
|
||||
if(!Date.isDate(opts.minDate)){
|
||||
opts.minDate = new Date(opts.minDate)
|
||||
}
|
||||
opts.calendar.minYear = opts.minDate.format('Y')
|
||||
opts.calendar.minMonth = opts.minDate.format('m')
|
||||
opts.calendar.minDay = opts.minDate.format('d')
|
||||
}
|
||||
|
||||
if(opts.maxDate){
|
||||
if(!Date.isDate(opts.maxDate)){
|
||||
opts.maxDate = new Date(opts.maxDate)
|
||||
}
|
||||
opts.calendar.maxYear = opts.maxDate.format('Y')
|
||||
opts.calendar.maxMonth = opts.maxDate.format('m')
|
||||
opts.calendar.maxDay = opts.maxDate.format('d')
|
||||
}
|
||||
|
||||
//移除部分属性
|
||||
delete opts.minDate;
|
||||
delete opts.maxDate;
|
||||
return yua.mix(sys, opts)
|
||||
},
|
||||
$ready: function(vm, ele){
|
||||
var last = {
|
||||
year: +vm.calendar.year,
|
||||
month: +vm.calendar.month,
|
||||
day: +vm.calendar.day
|
||||
},
|
||||
timer;
|
||||
|
||||
getCalendar(vm, last) //初始化日历显示
|
||||
|
||||
//日历按钮,未超出限制时切换日历
|
||||
vm.$turn = function(type, step){
|
||||
var year = +vm.calendar.year,
|
||||
month = +vm.calendar.month;
|
||||
|
||||
if(type === 1){
|
||||
year += step;
|
||||
}else{
|
||||
month += step;
|
||||
if(month < 1){
|
||||
month = 12;
|
||||
year--
|
||||
}
|
||||
if(month > 12){
|
||||
month = 1;
|
||||
year++
|
||||
}
|
||||
}
|
||||
if(isLimited(vm.calendar, year, month) === true){
|
||||
vm.tips = '日期超出限制';
|
||||
return;
|
||||
}
|
||||
vm.calendar.year = year;
|
||||
vm.calendar.month = numberFormat(month, 2);
|
||||
}
|
||||
|
||||
//选择日期
|
||||
vm.$getDate = function(disabled, day){
|
||||
if(disabled)
|
||||
return;
|
||||
|
||||
vm.calendar.day = day;
|
||||
|
||||
changeStyle(vm.calendar, day);
|
||||
updateTime(vm, last);
|
||||
vm.showCalendar = !1;
|
||||
}
|
||||
|
||||
//输入框获取焦点时,显示日历
|
||||
vm.$focus = function(){
|
||||
vm.showCalendar = !0;
|
||||
}
|
||||
|
||||
//获取当前时间
|
||||
vm.$now = function(){
|
||||
var now = new Date(),
|
||||
year = now.format('Y'),
|
||||
month = now.format('m'),
|
||||
day = now.format('d');
|
||||
|
||||
var isLimitYM = isLimited(year, month),
|
||||
disabled = disabledDay(day, isLimitYM);
|
||||
|
||||
if(disabled){
|
||||
vm.tips = '今天超出了限制日期';
|
||||
return;
|
||||
}
|
||||
|
||||
vm.calendar.year = year;
|
||||
vm.calendar.month = month;
|
||||
vm.calendar.day = day;
|
||||
vm.calendar.hour = now.format('H');
|
||||
vm.calendar.minute = now.format('i');
|
||||
vm.calendar.second = now.format('s');
|
||||
|
||||
changeStyle(vm.calendar, day);
|
||||
updateTime(vm, last);
|
||||
|
||||
vm.showCalendar = !1;
|
||||
}
|
||||
|
||||
|
||||
/************************************************************/
|
||||
|
||||
vm.$watch('calendar.year', function(){
|
||||
getCalendar(vm, last);
|
||||
})
|
||||
|
||||
vm.$watch('calendar.month', function(){
|
||||
getCalendar(vm, last);
|
||||
})
|
||||
vm.$watch('calendar.hour', function(v){
|
||||
vm.calendar.hour = v
|
||||
updateTime(vm, last)
|
||||
})
|
||||
vm.$watch('calendar.minute', function(v){
|
||||
vm.calendar.minute = v
|
||||
updateTime(vm, last)
|
||||
})
|
||||
vm.$watch('calendar.second', function(v){
|
||||
vm.calendar.second = v
|
||||
updateTime(vm, last)
|
||||
})
|
||||
|
||||
vm.$watch('showCalendar', function(v){
|
||||
if(v || !vm.value)
|
||||
return;
|
||||
|
||||
vm.$up[vm.update_value] = vm.value
|
||||
vm.$onUpdate(vm.value);
|
||||
})
|
||||
|
||||
vm.$watch('tips', function(v){
|
||||
if(!v)
|
||||
return;
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function(){
|
||||
vm.tips = '';
|
||||
}, 1500)
|
||||
})
|
||||
|
||||
document.addEventListener('click', function(){
|
||||
vm.showCalendar = !1;
|
||||
})
|
||||
|
||||
},
|
||||
showTime: false, //对话框上显示时间
|
||||
showCalendar: false, //显示日历对话框
|
||||
disabled: false, //是否禁用
|
||||
tips: '',
|
||||
format: '', // 日期显示格式
|
||||
value: '', // 用于显示在输入框里的日期变量
|
||||
$prevYear: '<<',
|
||||
$nextYear: '>>',
|
||||
$prevMonth: '<',
|
||||
$nextMonth: '>',
|
||||
$focus: yua.noop,
|
||||
$turn: yua.noop,
|
||||
$getDate: yua.noop,
|
||||
$now: yua.noop,
|
||||
$cancelBubble: function(event){
|
||||
event.stopPropagation && event.stopPropagation() || (event.cancelBubble = true);
|
||||
},
|
||||
$onUpdate: yua.noop, //日期被修改后的回调
|
||||
})
|
||||
|
||||
/**************** 公共函数 *****************/
|
||||
//计算日历数组
|
||||
function getCalendar(vm, last){
|
||||
var year = +vm.calendar.year,
|
||||
month = +vm.calendar.month,
|
||||
nums = getTotalDays(year, month),
|
||||
numsFixed = -getFirstDay(year, month) + 1,
|
||||
isLimitYM = isLimited(vm.calendar, year, month);
|
||||
|
||||
vm.calendar.list.clear();
|
||||
|
||||
for(var i = numsFixed; i <= nums; i++){
|
||||
|
||||
var day = {
|
||||
weeken: !1,
|
||||
day: '',
|
||||
selected: !1,
|
||||
disable: !0
|
||||
}
|
||||
if(i > 0){
|
||||
var d = getFirstDay(year, month, i)
|
||||
day = {
|
||||
weeken: d == 0 || d == 6,
|
||||
day: i,
|
||||
selected: isSelected(vm.calendar, last, i),
|
||||
disable: disabledDay(vm.calendar, i, isLimitYM)
|
||||
}
|
||||
}
|
||||
vm.calendar.list.push(day)
|
||||
}
|
||||
}
|
||||
|
||||
//判断当前年/月是否超出限制
|
||||
function isLimited(calendar, year, month){
|
||||
var limit = {
|
||||
Y: +calendar.minYear,
|
||||
M: +calendar.minMonth,
|
||||
mY: +calendar.maxYear,
|
||||
mM: +calendar.maxMonth,
|
||||
},
|
||||
res = '';
|
||||
|
||||
if((!limit.Y && !limit.mY) || (!limit.M && !limit.mM) || !year){
|
||||
return false
|
||||
}
|
||||
|
||||
|
||||
if((limit.Y && year < limit.Y) || (limit.mY && year > limit.mY)){
|
||||
return true
|
||||
}
|
||||
|
||||
if(month){
|
||||
if(year === limit.Y){
|
||||
if(limit.M && month < limit.M)
|
||||
return true
|
||||
|
||||
if(month == limit.M)
|
||||
res += '-'
|
||||
}
|
||||
|
||||
if(year === limit.mY){
|
||||
if(limit.mM && month > limit.mM)
|
||||
return true
|
||||
|
||||
if(month == limit.mM)
|
||||
res += '+'
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
//判断指定天数是否有效
|
||||
function disabledDay(calendar, day, limitedYM){
|
||||
var minD = calendar.minDay,
|
||||
maxD = calendar.maxDay;
|
||||
|
||||
if(limitedYM === '-')
|
||||
return day < minD
|
||||
|
||||
if(limitedYM === '+')
|
||||
return maxD && day > maxD
|
||||
|
||||
if(limitedYM === '-+')
|
||||
return day < minD || (maxD && day > maxD)
|
||||
|
||||
return limitedYM
|
||||
}
|
||||
|
||||
//判断指定天数是否被选中
|
||||
function isSelected(calendar, last, day){
|
||||
var year = +calendar.year,
|
||||
month = +calendar.month;
|
||||
|
||||
return !(last.year !== year || last.month !== month || last.day !== day)
|
||||
}
|
||||
|
||||
//修改当前选中日期的样式
|
||||
function changeStyle(calendar, day){
|
||||
calendar.list.forEach(function(item){
|
||||
if(item.day != day){
|
||||
item.selected = !1
|
||||
}else{
|
||||
item.selected = !0
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//更新时间
|
||||
function updateTime(vm, last){
|
||||
var hour = 0,
|
||||
minute = 0,
|
||||
second = 0;
|
||||
|
||||
last = {
|
||||
year: +vm.calendar.year,
|
||||
month: +vm.calendar.month,
|
||||
day: +vm.calendar.day
|
||||
}
|
||||
|
||||
if(vm.showTime){
|
||||
hour = vm.calendar.hour
|
||||
minute = vm.calendar.minute
|
||||
second = vm.calendar.second
|
||||
}
|
||||
vm.value = new Date(last.year, last.month - 1, last.day, hour, minute, second).format(vm.format)
|
||||
}
|
||||
|
||||
|
||||
//获取今年的年份/月份,返回的是数组
|
||||
function getThisYearMonth(){
|
||||
var oDate = new Date()
|
||||
return [oDate.getFullYear(), oDate.getMonth() + 1]
|
||||
}
|
||||
|
||||
//根据年份获取指定月份天数
|
||||
function getTotalDays(year, month){
|
||||
return new Date(year, month, 0).getDate()
|
||||
}
|
||||
|
||||
//判断指定年月第一天是星期几
|
||||
function getFirstDay(year, month, day){
|
||||
return new Date(year, month - 1, day || 1).getDay()
|
||||
}
|
||||
//数字长度补全(前面加0)
|
||||
function numberFormat(num, len){
|
||||
num += ''
|
||||
if(num.length === len)
|
||||
return num
|
||||
|
||||
while(num.length < len)
|
||||
num = '0' + num
|
||||
return num
|
||||
}
|
||||
|
||||
return yua
|
||||
})
|
|
@ -5,52 +5,98 @@
|
|||
* @date 2016-02-14 14:00:06
|
||||
*
|
||||
*/
|
||||
@import "../../../css/var.scss";
|
||||
.do-datepicker {position:relative;z-index:65534;width:100%;height:100%;
|
||||
@import 'var.scss';
|
||||
.do-datepicker { position:relative;width:100%; height:100%;color:nth($cgr, 1);font-size:14px;
|
||||
|
||||
a { text-decoration:none;color:nth($cgr, 1);
|
||||
|
||||
&:hover {color:nth($cgr, 2);}
|
||||
&:active {color:nth($cgr, 3);}
|
||||
}
|
||||
|
||||
a {text-decoration:none;}
|
||||
.date-input { display:block; width:100%; height:100%; padding:0 5px; line-height:18px; border:1px solid nth($cp, 1); @include ts();
|
||||
|
||||
&:focus {border-color:nth($ct, 1)}
|
||||
&:focus { border-color:nth($ct, 1); }
|
||||
}
|
||||
.calendar-box { position:absolute; left:0; top:100%; z-index:65534; width:267px; height:auto; min-height:60px;padding:10px;line-height:35px; border:1px solid #ddd; background:#fff; font-size:14px; color:nth($cgr, 1); text-align:center; box-shadow:0 1px 5px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.calendar-box {position:absolute;left:0;top:100%;width:267px;height:auto;min-height:60px;padding:10px;line-height:35px;border:1px solid #ddd;background:#fff;font-size:14px;color:nth($cgr, 1);text-align:center;box-shadow:0 1px 5px rgba(0,0,0,.1);
|
||||
&::before {position:absolute;left:0;top:0;z-index:-1;width:100%;height:85px;background:nth($ct, 1);content:""}
|
||||
|
||||
dt.title {width:100%;height:35px;background:#e7e8eb;}
|
||||
dd.contrl {position:relative;width:90%;height:35px;margin:0 5%;
|
||||
dt.contrl {position:relative; width:100%; height:35px; margin:5px 0 0;border-radius:3px;color:#fff;
|
||||
|
||||
a {position:absolute;left:0;top:0;width:35px;height:35px;color:nth($cgr, 1);font-weight:bold;}
|
||||
a:hover {color:nth($ct, 1)}
|
||||
a.prev-month {left:35px;}
|
||||
a.next-month {left:auto;right:35px;}
|
||||
a.next-year {left:auto;right:0;}
|
||||
a { position:absolute; left:0; top:0; width:35px; height:35px;color:#fff;
|
||||
|
||||
&::before {position:absolute;left:0;top:0;z-index:-1;display:block;width:35px;height:35px;border-radius:50%;background:nth($ct, 3); content:"";opacity:0;transform: scale(0);}
|
||||
|
||||
&:active {font-weight:bold;
|
||||
&::before {animation:ripple .3s cubic-bezier(0.23, 1, 0.32, 1);}
|
||||
}
|
||||
&::after {content:"\e652";}
|
||||
|
||||
dd.calendar {width:100%;height:auto;
|
||||
|
||||
.week {width:100%;height:35px;margin-bottom:5px;border-bottom:1px solid #eee;}
|
||||
span.td {float:left;width:35px;}
|
||||
.list span.td {height:30px;line-height:30px;cursor:pointer;@include ts();
|
||||
|
||||
&:hover {background:nth($cp, 1);}
|
||||
&.weeken {color:nth($cr, 1)}
|
||||
&.selected {background:nth($ct, 2);color:#fff}
|
||||
&.disabled {color:nth($cp, 3);cursor:default;}
|
||||
&.disabled:hover {background:none;}
|
||||
&.prev-month {left:35px;
|
||||
&::after {content:"\e659"}
|
||||
}
|
||||
&.next-month {left:auto; right:35px;
|
||||
&::after {content:"\e658"}
|
||||
}
|
||||
&.next-year {left:auto; right:0;
|
||||
&::after {content:"\e653"}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
dd.table { width:100%; height:auto;
|
||||
.thead {width:100%; height:35px; margin-bottom:5px;color:#fff;}
|
||||
span.td {position:relative;float:left; width:33px;margin:1px;border-radius:3px;
|
||||
|
||||
}
|
||||
|
||||
.tr span.td { height:30px; line-height:30px;cursor:pointer;
|
||||
|
||||
&::before {position:absolute;left:1px;top:0;z-index:-1;display:block;width:30px;height:30px;border-radius:50%;background:nth($cp, 1); content:"";opacity:0;transform: scale(0); transition:opacity .45s cubic-bezier(0.23, 1, 0.32, 1),transform .45s cubic-bezier(0.23, 1, 0.32, 1);}
|
||||
|
||||
&:hover,&.selected {
|
||||
&::before {opacity:1;transform:scale(1);}
|
||||
}
|
||||
|
||||
&.weeken {color:nth($ct, 3);}
|
||||
&.selected {color:#fff;
|
||||
&::before {background:nth($ct, 2);}
|
||||
}
|
||||
&.disabled { color:nth($cp, 1); cursor:default;
|
||||
|
||||
&::before {display:none;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dd.time { position:relative; width:100%; height:41px; padding:5px 0; margin-top:5px; line-height:30px; border-top:1px solid #eee;
|
||||
|
||||
label { float:left; width:60px; height:30px;
|
||||
input { width:30px; height:30px; border:1px solid nth($cp, 1); text-align:center; }
|
||||
}
|
||||
.now {float:right;width:50px;height:30px;border-radius:3px;background:nth($ct, 1);color:#fff;text-align:center;
|
||||
.now { float:right; width:50px; height:30px; border-radius:3px; background:nth($cp, 1);text-align:center;
|
||||
}
|
||||
}
|
||||
|
||||
dt.confirm { position:relative; width:100%; height:41px; padding:10px 0 0;line-height:30px; border-top:1px solid #eee; text-align:right;
|
||||
|
||||
.ok,.cancel {display:inline-block;width:60px; height:30px;margin:0 0 0 10px;border-radius:3px;text-align:center;}
|
||||
|
||||
.ok { background:nth($ct, 1); color:#fff;
|
||||
&:hover { background:nth($ct, 2); }
|
||||
&:active { background:nth($ct, 3); }
|
||||
}
|
||||
}
|
||||
dd.tips {position:absolute;z-index:65535;left:25%;top:40%;width:50%;height:30px;line-height:30px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;text-align:center;}
|
||||
.cancel {background:nth($cp, 1);}
|
||||
}
|
||||
|
||||
dd.tips { position:absolute; z-index:65535; left:25%; top:40%; width:50%; height:30px; line-height:30px; background:rgba(0, 0, 0, 0.7); color:#fff; font-size:12px; text-align:center; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes ripple {
|
||||
from {transform: scale(0);opacity:0;}
|
||||
30% {opacity:.8;}
|
||||
to {transform: scale(1.2); opacity:0;}
|
||||
}
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 7.6 KiB After Width: | Height: | Size: 7.6 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 8.3 KiB |
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
@ -2,7 +2,7 @@
|
|||
|
||||
import './main.scss'
|
||||
|
||||
Anot.ui.pages = '1.0.0'
|
||||
Anot.ui.pager = '1.0.0'
|
||||
//计算页码列表
|
||||
function calculate({ currPage, maxPageShow, totalPages }) {
|
||||
let arr = []
|
||||
|
@ -46,7 +46,7 @@ function update(currPage, vm) {
|
|||
}
|
||||
}
|
||||
|
||||
export default Anot.component('pages', {
|
||||
export default Anot.component('pager', {
|
||||
construct: function(props, state) {
|
||||
props.className =
|
||||
'skin-' + (props.theme || 1) + ' ' + (props.color || 'plain')
|
||||
|
@ -55,7 +55,7 @@ export default Anot.component('pages', {
|
|||
},
|
||||
render: function() {
|
||||
return `
|
||||
<div class="do-pages do-fn-noselect" :class="{{props.className}}">
|
||||
<div class="do-pager do-fn-noselect" :class="{{props.className}}">
|
||||
<a class="normal"
|
||||
:if="currPage > 1 && !props.simpleMode"
|
||||
:attr="{href: parseUrl(1)}"
|
|
@ -6,9 +6,9 @@
|
|||
* @version $Id$
|
||||
*/
|
||||
|
||||
@import "../css/var.scss";
|
||||
@import "var.scss";
|
||||
|
||||
.do-pages {height:auto;text-align:center;font-size:13px;color: nth($cgr, 1);
|
||||
.do-pager {height:auto;text-align:center;font-size:13px;color: nth($cgr, 1);
|
||||
|
||||
a {display:inline-block;width:auto;min-width:40px;height:40px;line-height:40px;color: nth($cgr, 1);text-decoration:none;cursor:pointer;}
|
||||
a.curr, a.disabled {cursor:default;}
|