├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── SECURITY.md ├── babel.config.js ├── build ├── build-entry.js └── build-file.js ├── components.json ├── examples ├── App.vue └── main.js ├── package.json ├── packages └── Wdatepicker │ ├── index.js │ └── src │ ├── Wdatepicker.vue │ ├── font │ ├── demo.css │ ├── demo_index.html │ ├── iconfont.css │ ├── iconfont.eot │ ├── iconfont.js │ ├── iconfont.json │ ├── iconfont.svg │ ├── iconfont.ttf │ ├── iconfont.woff │ └── iconfont.woff2 │ ├── js │ └── Wdatepicker.js │ └── style │ └── theme.scss ├── src ├── index.js ├── locale │ ├── index.js │ └── lang │ │ ├── en.js │ │ ├── ja.js │ │ ├── ko.js │ │ ├── zh_CN.js │ │ └── zh_TW.js └── mixins │ └── locale.js └── vue.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # 忽略目录 2 | examples/ 3 | packages/ 4 | public/ 5 | src/ 6 | build/ 7 | node_modules/ 8 | 9 | # 忽略指定文件 10 | vue.config.js 11 | package-lock.json 12 | babel.config.js 13 | *.map 14 | *.html -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 10 4 | addons: 5 | chrome: stable 6 | before_install: 7 | - export TRAVIS_COMMIT_MSG="[deploy] $(git log --format='%h - %B' --no-merges -n 1)" 8 | - export TRAVIS_COMMIT_USER="$(git log --no-merges -n 1 --format=%an)" 9 | - export TRAVIS_COMMIT_EMAIL="$(git log --no-merges -n 1 --format=%ae)" 10 | after_success: 11 | # - sh build/deploy-ci.sh -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 吴佳 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Wdatepicker 2 | 3 | [![Build Status](https://travis-ci.org/wujiabk/datepicker.svg?branch=master)](https://travis-ci.org/wujiabk/datepicker) 4 | [![npm](https://img.shields.io/npm/v/@wujiaxian/datepicker)](https://www.npmjs.com/package/@wujiaxian/datepicker) 5 | [![npm bundle size](https://img.shields.io/bundlephobia/min/@wujiaxian/datepicker)](https://www.npmjs.com/package/@wujiaxian/datepicker) 6 | [![npm](https://img.shields.io/npm/dm/@wujiaxian/datepicker)](https://www.npmjs.com/package/@wujiaxian/datepicker) 7 | [![GitHub issues](https://img.shields.io/github/issues/wujiabk/datepicker)](https://github.com/wujiabk/datepicker/issues) 8 | [![npm](https://img.shields.io/npm/l/@wujiaxian/datepicker)](https://www.npmjs.com/package/@wujiaxian/datepicker) 9 | 10 | A C-End Date Selector Component Based on Vue Development. 11 | 12 | - [Demo](#demo) 13 | - [Install](#install) 14 | - [Usage](#usage) 15 | - [Date Formatting](#date-formatting) 16 | - [Props](#available-props) 17 | - [Events](#events) 18 | - [Slots](#Slots) 19 | - [Disabled dates](#disabled-dates) 20 | - [Internationalization](#Internationalization) 21 | 22 | ## Demo 23 | 24 | To view a demo online: 25 | https://codesandbox.io/embed/staging-darkness-k7ymp 26 | 27 | To view demo examples locally clone the repo and run `npm install && npm run dev` 28 | 29 | ## Install 30 | 31 | ``` bash 32 | npm install @wujiaxian/datepicker --save 33 | ``` 34 | 35 | 36 | ``` javascript 37 | import Vue from 'vue' 38 | import Wdatepicker from '@wujiaxian/datepicker' 39 | import "@wujiaxian/datepicker/dist/Wdatepicker.css" 40 | 41 | Vue.use(Wdatepicker) 42 | ``` 43 | 44 | Or use directly from a CDN 45 | ``` html 46 | 47 | 48 | 49 |
50 | 51 |
52 | 53 | 54 | 59 | ``` 60 | 61 | ## Usage 62 | 63 | ``` html 64 | 65 | ``` 66 | *value* prop if passed should be a Date object or String Date Formatting or Number time stamp 67 | 68 | ``` html 69 | 78 | 79 | ``` 80 | 81 | Using `v-model` 82 | ``` html 83 | 84 | ``` 85 | 86 | Using 'v-model and defaultValue' 87 | ``` html 88 | 97 | 98 | ``` 99 | 100 | Emits events 101 | ``` html 102 | 126 | 127 | ``` 128 | 129 | 130 | ## Date Formatting 131 | 132 | String Formatting 133 | 134 | | Token | Desc | Example | 135 | |-------|------------------------|-------------| 136 | | YYYY | year | 2019 | 137 | | MM | month | 01 | 138 | | DD | date | 30 | 139 | | hh | hour | 12 | 140 | | mm | minute | 30 | 141 | | ss | second | 30 | 142 | 143 | 144 | Number time stamp 145 | 146 | 1569572985 // second 147 | 148 | 1569572985000 // Millisecond 149 | 150 | Date Object 151 | 152 | new Date('2019/09/30') 153 | 154 | ## Available props 155 | 156 | | Prop | Type | Default | Description | 157 | |-------------------------------|-------------------------|-------------------------|------------------------------------------| 158 | | value / v-model | Date\|String\|Number | | Date value of the datepicker | 159 | | defaultValue | Date\|String\|Number | | Date selector default date value | 160 | | editable | Boolean | false | Whether the input box can be entered | 161 | | formatDate | String | YYYY-MM-DD | The format displayed in the input box | 162 | | minDate | Date\|String\|Number | Ten years ago | Minimum time | 163 | | maxDate | Date\|String\|Number | Ten Years From Now | Maximum time | 164 | | clickDisabledDate | String | | Click on the non-current month date, select the month date when the value is empty, switch to that month when the value is switch, and the other values do not operate.| 165 | | placeholder | String | Selection date | Input box prompt information | 166 | | selectState | String | circle | Time Selected State, Value: Square or Round or Empty| 167 | | clearBtn | Boolean | true | Whether the Clear button is displayed or not| 168 | | disabled | Boolean | false | Prohibition of use | 169 | | disabledDate | Array\|Function | [] | Disabled date | 170 | | closeIconClass | String | | Close the button class, you can set icon class to replace the current one| String | | Time icon class, you can set icon class to replace the current 171 | 172 | ## Events 173 | 174 | | Event | Output | Description | 175 | |-------------------------------|---------------------------|------------------------------------------| 176 | | change | String | Triggered after the time has been changed to receive the changed value| 177 | | focus | Object | Input box gets focus trigger and receives component instance | 178 | | blur | Object | Input box lost focus trigger, receive component instance | 179 | | disabledDate | Object | To receive the current date information, click on a callback from a non-current month date or a banned date | 180 | 181 | ## Slots 182 | 183 | | Name | params | Description | 184 | |-------------------------------|---------------------------|------------------------------------------| 185 | | header | component instance, {self}| Date Selection Box Header Insert Content | 186 | | footer | component instance, {self}| Insert content at the bottom of the date selection box | 187 | | date-icon | | Custom Date Icon | 188 | | close-icon | | Custom Close Icon | 189 | 190 | 191 | #### Use of slots 192 | ``` html 193 | 221 | 222 | 223 | 226 | 227 | 232 | 233 | ``` 234 | 235 | ## Disabled Dates 236 | 237 | Dates can be disabled in a number of ways. 238 | 239 | Array mode 240 | ``` html 241 | 250 | 251 | 252 | ``` 253 | 254 | Function mode 255 | ``` html 256 | 271 | 272 | 273 | ``` 274 | 275 | 276 | ## Internationalization 277 | 278 | The default use of Chinese in components is required. If you want to use other languages, you need to have multiple language settings. Take English as an example, in main.js: 279 | 280 | ``` html 281 | 304 | ``` 305 | 306 | #### compatible vue-i18n@6.x 307 | 308 | Vue-i18n of 6.x is not supported by default. You need to process it manually. 309 | 310 | ``` html 311 | 337 | ``` 338 | 339 | or 340 | 341 | ``` html 342 | 366 | ``` 367 | 368 | #### Loading Language Files by CDN 369 | 370 | ```html 371 | 372 | 373 | 374 | 375 | 385 | ``` 386 | 387 | Matching vue-i18n usage 388 | 389 | ```html 390 | 391 | 392 | 393 | 394 | 395 | 412 | ``` 413 | 414 | #### At present, the following languages are built-in: 415 | 416 | - 简体中文（zh_CN） 417 | - 繁体中文（zh_TW） 418 | - English（en） 419 | - Japanese（ja） 420 | - Korean（ko） 421 | 422 | #### If you need to add a language, please submit it it to me in the following file format. 423 | [Languges](https://unpkg.com/@wujiaxian/datepicker/dist/lib/locale/lang/) 424 | 425 | # License 426 | [MIT](https://opensource.org/licenses/MIT) 427 | 428 | Copyright (c) 2019-present, Jia Wu 429 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Use this section to tell people about which versions of your project are 6 | currently being supported with security updates. 7 | 8 | | Version | Supported | 9 | | ------- | ------------------ | 10 | | 5.1.x | :white_check_mark: | 11 | | 5.0.x | :x: | 12 | | 4.0.x | :white_check_mark: | 13 | | < 4.0 | :x: | 14 | 15 | ## Reporting a Vulnerability 16 | 17 | Use this section to tell people how to report a vulnerability. 18 | 19 | Tell them where to go, how often they can expect to get an update on a 20 | reported vulnerability, what to expect if the vulnerability is accepted or 21 | declined, etc. 22 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /build/build-entry.js: -------------------------------------------------------------------------------- 1 | var Components = require('../components.json') 2 | var fs = require('fs'); 3 | var render = require('json-templater/string') 4 | var uppercamelcase = require('uppercamelcase') 5 | var path = require('path') 6 | var endOfLine = require('os').EOL 7 | 8 | var OUTPUT_PATH = path.join(__dirname, '../src/index.js') 9 | var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\'' 10 | var MAIN_TEMPLATE = `/* Automatically generated by './build/build-entry.js' */ 11 | {{include}} 12 | import localeIndex from './locale' 13 | const components = [ 14 | {{name}} 15 | ] 16 | 17 | const install = function(Vue, opts = {}) { 18 | localeIndex.use(opts.locale) 19 | localeIndex.i18n(opts.i18n) 20 | 21 | components.forEach(function(component) { 22 | Vue.component(component.name, component); 23 | }) 24 | } 25 | 26 | if (typeof window !== 'undefined' && window.Vue) { 27 | install(window.Vue) 28 | } 29 | 30 | const version = '{{version}}', 31 | locale = localeIndex.use, 32 | i18n = localeIndex.i18n 33 | 34 | export { 35 | version, 36 | locale, 37 | i18n, 38 | install, 39 | {{name}}, 40 | {{list}} 41 | } 42 | 43 | export default { 44 | version: '{{version}}', 45 | locale: localeIndex.use, 46 | i18n: localeIndex.i18n, 47 | install, 48 | {{name}}, 49 | {{list}} 50 | } 51 | ` 52 | 53 | var ComponentNames = Object.keys(Components) 54 | 55 | var includeComponentTemplate = [] 56 | var installTemplate = [] 57 | var listTemplate = [] 58 | var componentNames = [] 59 | 60 | ComponentNames.forEach(name => { 61 | var componentName = uppercamelcase(name) 62 | componentNames.push(componentName) 63 | includeComponentTemplate.push(render(IMPORT_TEMPLATE, { 64 | name: componentName, 65 | package: name 66 | })) 67 | }) 68 | 69 | var template = render(MAIN_TEMPLATE, { 70 | include: includeComponentTemplate.join(endOfLine), 71 | install: installTemplate.join(',' + endOfLine), 72 | version: require('../package.json').version, 73 | list: listTemplate.join(',' + endOfLine), 74 | name: componentNames.join(',' + endOfLine) 75 | }) 76 | 77 | fs.writeFileSync(OUTPUT_PATH, template) -------------------------------------------------------------------------------- /build/build-file.js: -------------------------------------------------------------------------------- 1 | 2 | let fs = require('fs'); 3 | let save = require('file-save'); 4 | let resolve = require('path').resolve; 5 | let basename = require('path').basename; 6 | let localePath = resolve(__dirname, '../src/') 7 | let fileList = fs.readdirSync(localePath) 8 | 9 | let transform = (filename, name) => { 10 | return require('babel-core').transformFileSync(filename, { 11 | presets: ['es2015'], 12 | plugins: [ 13 | 'add-module-exports', 14 | [ 15 | 'transform-es2015-modules-umd', 16 | { 17 | loose: true 18 | } 19 | ] 20 | ], 21 | moduleId: name 22 | }) 23 | } 24 | 25 | let dir = [] 26 | let trans = (arr, n) => { 27 | n = n || '' 28 | arr.filter(file => { 29 | return file !== '.DS_Store' 30 | }).forEach(file => { 31 | if (!/[a-z]+(?=\.)/i.test(file)) { 32 | n = n && n + '/' 33 | dir.push({ 34 | dir: localePath + '/' + n + file, 35 | outPath: '/' + n + file 36 | }) 37 | 38 | trans(fs.readdirSync(localePath + '/' + n + file), file) 39 | } 40 | }) 41 | } 42 | 43 | trans(fileList) 44 | 45 | dir.forEach(item => { 46 | let dir = item.dir 47 | let outPath = '../dist/lib/' + item.outPath 48 | fs.readdirSync(dir).filter(file => { 49 | return /\.js$/.test(file) 50 | }).forEach(file => { 51 | let name = basename(file, '.js') 52 | let result = transform(dir+'/'+file, name) 53 | let m = dir.split('/') 54 | m = m[m.length-1] 55 | let f = file.replace(/\.js/,'') 56 | let n = f 57 | if (f == 'index') n = m 58 | n = 'global.W.' + m 59 | result.code = result.code.replace(`var mod = { 60 | exports: {} 61 | };`,`var mod = { 62 | exports: {} 63 | };\n global = global || window;\n global.W = global.W || {};\n global.W.${m} = global.W.${m} || {};\n`).replace(new RegExp('global.' + f),n) 64 | // console.log(result.code) 65 | // 'global.W.'+file+'=global.W' 66 | save(resolve(__dirname, outPath, file)).write(result.code) 67 | }) 68 | }) -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "Wdatepicker": "./packages/Wdatepicker/index.js" 3 | } -------------------------------------------------------------------------------- /examples/App.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 77 | 78 | -------------------------------------------------------------------------------- /examples/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wujiaxian/datepicker", 3 | "description": "A C-End Date Selector Component Based on Vue Development", 4 | "version": "1.0.7", 5 | "author": "wujia ", 6 | "main": "dist/Wdatepicker.umd.min.js", 7 | "style": "dist/Wdatepicker.css", 8 | "license": "MIT", 9 | "bugs": { 10 | "url": "https://github.com/wujiabk/datepicker/issues" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/wujiabk/datepicker" 15 | }, 16 | "keywords": [ 17 | "vue-datepicler", 18 | "datepicker", 19 | "w-datepicker", 20 | "Wdatepicker", 21 | "@wujiaxian/datepicker" 22 | ], 23 | "private": false, 24 | "scripts": { 25 | "dev": "vue-cli-service serve", 26 | "build:entry": "node build/build-entry.js", 27 | "build:file": "node build/build-file.js", 28 | "build": "vue-cli-service build --target lib --name Wdatepicker --dest dist src/index.js && npm run build:file", 29 | "pub": "npm publish --access=public", 30 | "lint": "vue-cli-service lint" 31 | }, 32 | "dependencies": { 33 | "core-js": "^2.6.5", 34 | "vue": "^2.6.10" 35 | }, 36 | "devDependencies": { 37 | "@vue/cli-plugin-babel": "^3.8.0", 38 | "@vue/cli-plugin-eslint": "^3.8.0", 39 | "@vue/cli-service": "^3.8.0", 40 | "babel-core": "^6.26.3", 41 | "babel-eslint": "^10.0.1", 42 | "babel-plugin-add-module-exports": "^1.0.2", 43 | "babel-plugin-transform-es2015-modules-umd": "^6.24.1", 44 | "babel-preset-es2015": "^6.24.1", 45 | "copy-webpack-plugin": "^5.0.4", 46 | "css-loader": "^3.2.0", 47 | "eslint": "^5.16.0", 48 | "eslint-plugin-vue": "^5.0.0", 49 | "file-save": "^0.2.0", 50 | "fs": "0.0.1-security", 51 | "json-templater": "^1.2.0", 52 | "node-sass": "^4.12.0", 53 | "sass-loader": "^8.0.0", 54 | "terser-webpack-plugin": "^2.1.2", 55 | "uppercamelcase": "^3.0.0", 56 | "vue-template-compiler": "^2.6.10", 57 | "webpack-cli": "^3.3.9", 58 | "webpack-node-externals": "^1.7.2" 59 | }, 60 | "eslintConfig": { 61 | "root": true, 62 | "env": { 63 | "node": true 64 | }, 65 | "extends": [ 66 | "plugin:vue/essential", 67 | "eslint:recommended" 68 | ], 69 | "rules": {}, 70 | "parserOptions": { 71 | "parser": "babel-eslint" 72 | } 73 | }, 74 | "postcss": { 75 | "plugins": { 76 | "autoprefixer": {} 77 | } 78 | }, 79 | "browserslist": [ 80 | "> 1%", 81 | "last 2 versions" 82 | ] 83 | } 84 | -------------------------------------------------------------------------------- /packages/Wdatepicker/index.js: -------------------------------------------------------------------------------- 1 | import Wdatepicker from './src/Wdatepicker.vue' 2 | 3 | Wdatepicker.install = Vue => Vue.component(Wdatepicker.name, Wdatepicker) 4 | 5 | export default Wdatepicker -------------------------------------------------------------------------------- /packages/Wdatepicker/src/Wdatepicker.vue: -------------------------------------------------------------------------------- 1 | 98 | 99 | 400 | 401 | 599 | -------------------------------------------------------------------------------- /packages/Wdatepicker/src/font/demo.css: -------------------------------------------------------------------------------- 1 | /* Logo 字体 */ 2 | @font-face { 3 | font-family: "iconfont logo"; 4 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); 5 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), 6 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), 7 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), 8 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); 9 | } 10 | 11 | .logo { 12 | font-family: "iconfont logo"; 13 | font-size: 160px; 14 | font-style: normal; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | /* tabs */ 20 | .nav-tabs { 21 | position: relative; 22 | } 23 | 24 | .nav-tabs .nav-more { 25 | position: absolute; 26 | right: 0; 27 | bottom: 0; 28 | height: 42px; 29 | line-height: 42px; 30 | color: #666; 31 | } 32 | 33 | #tabs { 34 | border-bottom: 1px solid #eee; 35 | } 36 | 37 | #tabs li { 38 | cursor: pointer; 39 | width: 100px; 40 | height: 40px; 41 | line-height: 40px; 42 | text-align: center; 43 | font-size: 16px; 44 | border-bottom: 2px solid transparent; 45 | position: relative; 46 | z-index: 1; 47 | margin-bottom: -1px; 48 | color: #666; 49 | } 50 | 51 | 52 | #tabs .active { 53 | border-bottom-color: #f00; 54 | color: #222; 55 | } 56 | 57 | .tab-container .content { 58 | display: none; 59 | } 60 | 61 | /* 页面布局 */ 62 | .main { 63 | padding: 30px 100px; 64 | width: 960px; 65 | margin: 0 auto; 66 | } 67 | 68 | .main .logo { 69 | color: #333; 70 | text-align: left; 71 | margin-bottom: 30px; 72 | line-height: 1; 73 | height: 110px; 74 | margin-top: -50px; 75 | overflow: hidden; 76 | *zoom: 1; 77 | } 78 | 79 | .main .logo a { 80 | font-size: 160px; 81 | color: #333; 82 | } 83 | 84 | .helps { 85 | margin-top: 40px; 86 | } 87 | 88 | .helps pre { 89 | padding: 20px; 90 | margin: 10px 0; 91 | border: solid 1px #e7e1cd; 92 | background-color: #fffdef; 93 | overflow: auto; 94 | } 95 | 96 | .icon_lists { 97 | width: 100% !important; 98 | overflow: hidden; 99 | *zoom: 1; 100 | } 101 | 102 | .icon_lists li { 103 | width: 100px; 104 | margin-bottom: 10px; 105 | margin-right: 20px; 106 | text-align: center; 107 | list-style: none !important; 108 | cursor: default; 109 | } 110 | 111 | .icon_lists li .code-name { 112 | line-height: 1.2; 113 | } 114 | 115 | .icon_lists .icon { 116 | display: block; 117 | height: 100px; 118 | line-height: 100px; 119 | font-size: 42px; 120 | margin: 10px auto; 121 | color: #333; 122 | -webkit-transition: font-size 0.25s linear, width 0.25s linear; 123 | -moz-transition: font-size 0.25s linear, width 0.25s linear; 124 | transition: font-size 0.25s linear, width 0.25s linear; 125 | } 126 | 127 | .icon_lists .icon:hover { 128 | font-size: 100px; 129 | } 130 | 131 | .icon_lists .svg-icon { 132 | /* 通过设置 font-size 来改变图标大小 */ 133 | width: 1em; 134 | /* 图标和文字相邻时，垂直对齐 */ 135 | vertical-align: -0.15em; 136 | /* 通过设置 color 来改变 SVG 的颜色/fill */ 137 | fill: currentColor; 138 | /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 139 | normalize.css 中也包含这行 */ 140 | overflow: hidden; 141 | } 142 | 143 | .icon_lists li .name, 144 | .icon_lists li .code-name { 145 | color: #666; 146 | } 147 | 148 | /* markdown 样式 */ 149 | .markdown { 150 | color: #666; 151 | font-size: 14px; 152 | line-height: 1.8; 153 | } 154 | 155 | .highlight { 156 | line-height: 1.5; 157 | } 158 | 159 | .markdown img { 160 | vertical-align: middle; 161 | max-width: 100%; 162 | } 163 | 164 | .markdown h1 { 165 | color: #404040; 166 | font-weight: 500; 167 | line-height: 40px; 168 | margin-bottom: 24px; 169 | } 170 | 171 | .markdown h2, 172 | .markdown h3, 173 | .markdown h4, 174 | .markdown h5, 175 | .markdown h6 { 176 | color: #404040; 177 | margin: 1.6em 0 0.6em 0; 178 | font-weight: 500; 179 | clear: both; 180 | } 181 | 182 | .markdown h1 { 183 | font-size: 28px; 184 | } 185 | 186 | .markdown h2 { 187 | font-size: 22px; 188 | } 189 | 190 | .markdown h3 { 191 | font-size: 16px; 192 | } 193 | 194 | .markdown h4 { 195 | font-size: 14px; 196 | } 197 | 198 | .markdown h5 { 199 | font-size: 12px; 200 | } 201 | 202 | .markdown h6 { 203 | font-size: 12px; 204 | } 205 | 206 | .markdown hr { 207 | height: 1px; 208 | border: 0; 209 | background: #e9e9e9; 210 | margin: 16px 0; 211 | clear: both; 212 | } 213 | 214 | .markdown p { 215 | margin: 1em 0; 216 | } 217 | 218 | .markdown>p, 219 | .markdown>blockquote, 220 | .markdown>.highlight, 221 | .markdown>ol, 222 | .markdown>ul { 223 | width: 80%; 224 | } 225 | 226 | .markdown ul>li { 227 | list-style: circle; 228 | } 229 | 230 | .markdown>ul li, 231 | .markdown blockquote ul>li { 232 | margin-left: 20px; 233 | padding-left: 4px; 234 | } 235 | 236 | .markdown>ul li p, 237 | .markdown>ol li p { 238 | margin: 0.6em 0; 239 | } 240 | 241 | .markdown ol>li { 242 | list-style: decimal; 243 | } 244 | 245 | .markdown>ol li, 246 | .markdown blockquote ol>li { 247 | margin-left: 20px; 248 | padding-left: 4px; 249 | } 250 | 251 | .markdown code { 252 | margin: 0 3px; 253 | padding: 0 5px; 254 | background: #eee; 255 | border-radius: 3px; 256 | } 257 | 258 | .markdown strong, 259 | .markdown b { 260 | font-weight: 600; 261 | } 262 | 263 | .markdown>table { 264 | border-collapse: collapse; 265 | border-spacing: 0px; 266 | empty-cells: show; 267 | border: 1px solid #e9e9e9; 268 | width: 95%; 269 | margin-bottom: 24px; 270 | } 271 | 272 | .markdown>table th { 273 | white-space: nowrap; 274 | color: #333; 275 | font-weight: 600; 276 | } 277 | 278 | .markdown>table th, 279 | .markdown>table td { 280 | border: 1px solid #e9e9e9; 281 | padding: 8px 16px; 282 | text-align: left; 283 | } 284 | 285 | .markdown>table th { 286 | background: #F7F7F7; 287 | } 288 | 289 | .markdown blockquote { 290 | font-size: 90%; 291 | color: #999; 292 | border-left: 4px solid #e9e9e9; 293 | padding-left: 0.8em; 294 | margin: 1em 0; 295 | } 296 | 297 | .markdown blockquote p { 298 | margin: 0; 299 | } 300 | 301 | .markdown .anchor { 302 | opacity: 0; 303 | transition: opacity 0.3s ease; 304 | margin-left: 8px; 305 | } 306 | 307 | .markdown .waiting { 308 | color: #ccc; 309 | } 310 | 311 | .markdown h1:hover .anchor, 312 | .markdown h2:hover .anchor, 313 | .markdown h3:hover .anchor, 314 | .markdown h4:hover .anchor, 315 | .markdown h5:hover .anchor, 316 | .markdown h6:hover .anchor { 317 | opacity: 1; 318 | display: inline-block; 319 | } 320 | 321 | .markdown>br, 322 | .markdown>p>br { 323 | clear: both; 324 | } 325 | 326 | 327 | .hljs { 328 | display: block; 329 | background: white; 330 | padding: 0.5em; 331 | color: #333333; 332 | overflow-x: auto; 333 | } 334 | 335 | .hljs-comment, 336 | .hljs-meta { 337 | color: #969896; 338 | } 339 | 340 | .hljs-string, 341 | .hljs-variable, 342 | .hljs-template-variable, 343 | .hljs-strong, 344 | .hljs-emphasis, 345 | .hljs-quote { 346 | color: #df5000; 347 | } 348 | 349 | .hljs-keyword, 350 | .hljs-selector-tag, 351 | .hljs-type { 352 | color: #a71d5d; 353 | } 354 | 355 | .hljs-literal, 356 | .hljs-symbol, 357 | .hljs-bullet, 358 | .hljs-attribute { 359 | color: #0086b3; 360 | } 361 | 362 | .hljs-section, 363 | .hljs-name { 364 | color: #63a35c; 365 | } 366 | 367 | .hljs-tag { 368 | color: #333333; 369 | } 370 | 371 | .hljs-title, 372 | .hljs-attr, 373 | .hljs-selector-id, 374 | .hljs-selector-class, 375 | .hljs-selector-attr, 376 | .hljs-selector-pseudo { 377 | color: #795da3; 378 | } 379 | 380 | .hljs-addition { 381 | color: #55a532; 382 | background-color: #eaffea; 383 | } 384 | 385 | .hljs-deletion { 386 | color: #bd2c00; 387 | background-color: #ffecec; 388 | } 389 | 390 | .hljs-link { 391 | text-decoration: underline; 392 | } 393 | 394 | /* 代码高亮 */ 395 | /* PrismJS 1.15.0 396 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ 397 | /** 398 | * prism.js default theme for JavaScript, CSS and HTML 399 | * Based on dabblet (http://dabblet.com) 400 | * @author Lea Verou 401 | */ 402 | code[class*="language-"], 403 | pre[class*="language-"] { 404 | color: black; 405 | background: none; 406 | text-shadow: 0 1px white; 407 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 408 | text-align: left; 409 | white-space: pre; 410 | word-spacing: normal; 411 | word-break: normal; 412 | word-wrap: normal; 413 | line-height: 1.5; 414 | 415 | -moz-tab-size: 4; 416 | -o-tab-size: 4; 417 | tab-size: 4; 418 | 419 | -webkit-hyphens: none; 420 | -moz-hyphens: none; 421 | -ms-hyphens: none; 422 | hyphens: none; 423 | } 424 | 425 | pre[class*="language-"]::-moz-selection, 426 | pre[class*="language-"] ::-moz-selection, 427 | code[class*="language-"]::-moz-selection, 428 | code[class*="language-"] ::-moz-selection { 429 | text-shadow: none; 430 | background: #b3d4fc; 431 | } 432 | 433 | pre[class*="language-"]::selection, 434 | pre[class*="language-"] ::selection, 435 | code[class*="language-"]::selection, 436 | code[class*="language-"] ::selection { 437 | text-shadow: none; 438 | background: #b3d4fc; 439 | } 440 | 441 | @media print { 442 | 443 | code[class*="language-"], 444 | pre[class*="language-"] { 445 | text-shadow: none; 446 | } 447 | } 448 | 449 | /* Code blocks */ 450 | pre[class*="language-"] { 451 | padding: 1em; 452 | margin: .5em 0; 453 | overflow: auto; 454 | } 455 | 456 | :not(pre)>code[class*="language-"], 457 | pre[class*="language-"] { 458 | background: #f5f2f0; 459 | } 460 | 461 | /* Inline code */ 462 | :not(pre)>code[class*="language-"] { 463 | padding: .1em; 464 | border-radius: .3em; 465 | white-space: normal; 466 | } 467 | 468 | .token.comment, 469 | .token.prolog, 470 | .token.doctype, 471 | .token.cdata { 472 | color: slategray; 473 | } 474 | 475 | .token.punctuation { 476 | color: #999; 477 | } 478 | 479 | .namespace { 480 | opacity: .7; 481 | } 482 | 483 | .token.property, 484 | .token.tag, 485 | .token.boolean, 486 | .token.number, 487 | .token.constant, 488 | .token.symbol, 489 | .token.deleted { 490 | color: #905; 491 | } 492 | 493 | .token.selector, 494 | .token.attr-name, 495 | .token.string, 496 | .token.char, 497 | .token.builtin, 498 | .token.inserted { 499 | color: #690; 500 | } 501 | 502 | .token.operator, 503 | .token.entity, 504 | .token.url, 505 | .language-css .token.string, 506 | .style .token.string { 507 | color: #9a6e3a; 508 | background: hsla(0, 0%, 100%, .5); 509 | } 510 | 511 | .token.atrule, 512 | .token.attr-value, 513 | .token.keyword { 514 | color: #07a; 515 | } 516 | 517 | .token.function, 518 | .token.class-name { 519 | color: #DD4A68; 520 | } 521 | 522 | .token.regex, 523 | .token.important, 524 | .token.variable { 525 | color: #e90; 526 | } 527 | 528 | .token.important, 529 | .token.bold { 530 | font-weight: bold; 531 | } 532 | 533 | .token.italic { 534 | font-style: italic; 535 | } 536 | 537 | .token.entity { 538 | cursor: help; 539 | } 540 | -------------------------------------------------------------------------------- /packages/Wdatepicker/src/font/demo_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IconFont Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

19 |
20 |
    21 |
  • Unicode
    • 22 |
  • Font class
    • 23 |
  • Symbol
    • 24 |
25 | 26 | 查看项目 27 | 28 |
29 |
30 |
31 |
    32 | 33 |
  • 34 | 35 |
    关闭
    36 |
    &#xe605;
    37 |
    • 38 | 39 |
  • 40 | 41 |
    箭头_列表向右_o
    42 |
    &#xeb8a;
    43 |
    • 44 | 45 |
  • 46 | 47 |
    箭头_列表向左_o
    48 |
    &#xeb8e;
    49 |
    • 50 | 51 |
  • 52 | 53 |
    箭头_页面_向右_o
    54 |
    &#xeb93;
    55 |
    • 56 | 57 |
  • 58 | 59 |
    箭头_页面_向左_o
    60 |
    &#xeb94;
    61 |
    • 62 | 63 |
  • 64 | 65 |
    日期
    66 |
    &#xe616;
    67 |
    • 68 | 69 |
70 |
71 |

Unicode 引用

72 |
73 | 74 |

Unicode 是字体在网页端最原始的应用方式，特点是：

75 |
    76 |
  • 兼容性最好，支持 IE6+，及所有现代浏览器。
    • 77 |
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 78 |
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • 79 |
80 |
81 |

注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

82 |
83 |

Unicode 使用步骤如下：

84 |

第一步：拷贝项目下面生成的 @font-face

85 | 
@font-face {
 87 |   font-family: 'iconfont';
 88 |   src: url('iconfont.eot');
 89 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
 90 |       url('iconfont.woff2') format('woff2'),
 91 |       url('iconfont.woff') format('woff'),
 92 |       url('iconfont.ttf') format('truetype'),
 93 |       url('iconfont.svg#iconfont') format('svg');
 94 | }
 95 |
96 |

第二步：定义使用 iconfont 的样式

97 | 
.iconfont {
 99 |   font-family: "iconfont" !important;
100 |   font-size: 16px;
101 |   font-style: normal;
102 |   -webkit-font-smoothing: antialiased;
103 |   -moz-osx-font-smoothing: grayscale;
104 | }
105 |
106 |

第三步：挑选相应图标并获取字体编码，应用于页面

107 | 
108 | <span class="iconfont">&#x33;</span>
110 |
111 |
112 |

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

113 |
114 |
115 |
116 |
117 |
    118 | 119 |
  • 120 | 121 |
    122 | 关闭 123 |
    124 |
    .icon-guanbi 125 |
    126 |
    • 127 | 128 |
  • 129 | 130 |
    131 | 箭头_列表向右_o 132 |
    133 |
    .icon-jiantou_liebiaoxiangyou_o 134 |
    135 |
    • 136 | 137 |
  • 138 | 139 |
    140 | 箭头_列表向左_o 141 |
    142 |
    .icon-jiantou_liebiaoxiangzuo_o 143 |
    144 |
    • 145 | 146 |
  • 147 | 148 |
    149 | 箭头_页面_向右_o 150 |
    151 |
    .icon-jiantou_yemian_xiangyou_o 152 |
    153 |
    • 154 | 155 |
  • 156 | 157 |
    158 | 箭头_页面_向左_o 159 |
    160 |
    .icon-jiantou_yemian_xiangzuo_o 161 |
    162 |
    • 163 | 164 |
  • 165 | 166 |
    167 | 日期 168 |
    169 |
    .icon-riqi 170 |
    171 |
    • 172 | 173 |
174 |
175 |

font-class 引用

176 |
177 | 178 |

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

179 |

与 Unicode 使用方式相比，具有如下特点：

180 |
    181 |
  • 兼容性良好，支持 IE8+，及所有现代浏览器。
    • 182 |
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • 183 |
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • 184 |
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
    • 185 |
186 |

使用步骤如下：

187 |

第一步：引入项目下面生成的 fontclass 代码：

188 | 
<link rel="stylesheet" href="./iconfont.css">
189 |
190 |

第二步：挑选相应图标并获取类名，应用于页面：

191 | 
<span class="iconfont icon-xxx"></span>
192 |
193 |
194 |

" 195 | iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

196 |
197 |
198 |
199 |
200 |
    201 | 202 |
  • 203 | 206 |
    关闭
    207 |
    #icon-guanbi
    208 |
    • 209 | 210 |
  • 211 | 214 |
    箭头_列表向右_o
    215 |
    #icon-jiantou_liebiaoxiangyou_o
    216 |
    • 217 | 218 |
  • 219 | 222 |
    箭头_列表向左_o
    223 |
    #icon-jiantou_liebiaoxiangzuo_o
    224 |
    • 225 | 226 |
  • 227 | 230 |
    箭头_页面_向右_o
    231 |
    #icon-jiantou_yemian_xiangyou_o
    232 |
    • 233 | 234 |
  • 235 | 238 |
    箭头_页面_向左_o
    239 |
    #icon-jiantou_yemian_xiangzuo_o
    240 |
    • 241 | 242 |
  • 243 | 246 |
    日期
    247 |
    #icon-riqi
    248 |
    • 249 | 250 |
251 |
252 |

Symbol 引用

253 |
254 | 255 |

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 256 | 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

257 |
    258 |
  • 支持多色图标了，不再受单色限制。
    • 259 |
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • 260 |
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • 261 |
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • 262 |
263 |

使用步骤如下：

264 |

第一步：引入项目下面生成的 symbol 代码：

265 | 
<script src="./iconfont.js"></script>
266 |
267 |

第二步：加入通用 CSS 代码（引入一次就行）：

268 | 
<style>
269 | .icon {
270 |   width: 1em;
271 |   height: 1em;
272 |   vertical-align: -0.15em;
273 |   fill: currentColor;
274 |   overflow: hidden;
275 | }
276 | </style>
277 |
278 |

第三步：挑选相应图标并获取类名，应用于页面：

279 | 
<svg class="icon" aria-hidden="true">
280 |   <use xlink:href="#icon-xxx"></use>
281 | </svg>
282 |
283 |
284 |
285 | 286 |
287 |
288 | 307 | 308 | 309 | -------------------------------------------------------------------------------- /packages/Wdatepicker/src/font/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('iconfont.eot?t=1569483081100'); /* IE9 */ 3 | src: url('iconfont.eot?t=1569483081100#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 | url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQoAAsAAAAACdAAAAPYAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDVgqFYIUcATYCJAMcCxAABCAFhG0HgScbswjIHge5SfOaGTMlH1fwfOnM97UrWWaFmQ4AfQkfhaBjrqhoAEGTMhV5cc4cULi76APJqRMptMO04wy4hqv//lA10wM4n30LaM5juOegUDCX81zAks7Nk6wFqaBXQzqbm1ThoVmvQwAfTemMjB77+sIQDT9PAEmKlzoMczp0S7FgI1g1t2pkGya2scW4DWx1vy8uPcUGA1PB3zQ95mzB7qvp7lKRaITFKkJkfxZgeBcooDOgQUpqbXl0QqwzCt/8PV0mAwSwMdBfza913XK32t0VjUIOt1PEXUJAyLiOf3kGCo0JYkGyAIjz4xZ8NRWCwNe6CBa45QgGuNUICtydCBrcXTpM4D1nh4CmgAvShRF7Z2oEwRA5tYPBQMDiGx1HArgstbxuzJ6yvRV11uyO7AqUR3W92BEbl9ZevWvB06dznz2b9+TJnMePC6Rktudk2RWnZs6ezps7i50zmztvupStWOIzZcvN5cuOnKiv95/016g43cg8cKptir/iATpyv7dz7aGYZY9m156IRHxOuUjZHL8/g/MxF1zC8i6kBL9gIEg7Dux67Ivp0mVuzTu1bEVMzTf9fHdqzg3WWm9qFsqqnBv67x99Q7ANW6uup3L/o0mn1IeP+mSP3XOdUiepjHXbbt16c+gged5QWjqVHORsqFSN8dat4KTNtjZeBY8OU3rKyZU5kleTmnmuPNeJdqBVjVZzlK05zVHR43GdSJ061DWxutQpPZWT18F8TPXRk+vyeqvVhTSnSjV7wJYa6kD+ZMAvvowSAIhSN9QoAIwNxkxXv9QYDoAyl3wURKunqtPf7W9Y3y7xjxoe/Nv2awBeXCqfAF+UZn9xGwPW5v+5+GuO6YWQ6z161ludigAedlMbvqBd+PABfypXTd7uT1Fn7UIQbOokMPDQBBQ2rbGa2BlM/PQGC5th4KMT4+72U4sMOoj2Ah3ZwEBwOA8GIW6BwuEOVhPfgEldfoGFIwp8zJVaj/TTVuJ9ozJIz8jClfkYv4pDIY3Z2Be/Sea+nmSFjvynJHWC2KNr92LySiEl+7giM0dus7IExmRwgGPZ28j3GdMy2CUzW8ZlZZHSrVtM3TctV6UGMGYUCYROBmGBrKQGiceECRFmfca49PNvCEmOj07S0nXO+IdISHH2R3rQle5rYK+ycK2u53I4kwLJliwyRO+sGBKYAGQsLIQvYgySVn+SC2GSsSRui0iEQjeaFrOubHl8RfA6bwE++Kd5xBAlWkyxxCM2Vmy2HhrOJCFeDzPOVd8hw9G5ympkPZjNtaxNzpaagjBLXb+DeMjuZsTHDgAAAAA=') format('woff2'), 5 | url('iconfont.woff?t=1569483081100') format('woff'), 6 | url('iconfont.ttf?t=1569483081100') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 7 | url('iconfont.svg?t=1569483081100#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family: "iconfont" !important; 12 | font-size: 16px; 13 | font-style: normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-guanbi:before { 19 | content: "\e605"; 20 | } 21 | 22 | .icon-jiantou_liebiaoxiangyou_o:before { 23 | content: "\eb8a"; 24 | } 25 | 26 | .icon-jiantou_liebiaoxiangzuo_o:before { 27 | content: "\eb8e"; 28 | } 29 | 30 | .icon-jiantou_yemian_xiangyou_o:before { 31 | content: "\eb93"; 32 | } 33 | 34 | .icon-jiantou_yemian_xiangzuo_o:before { 35 | content: "\eb94"; 36 | } 37 | 38 | .icon-riqi:before { 39 | content: "\e616"; 40 | } 41 | 42 | -------------------------------------------------------------------------------- /packages/Wdatepicker/src/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wjaxian/datepicker/f26de3877c71c5be53a0a83b8c75bbf1ce9d1cb1/packages/Wdatepicker/src/font/iconfont.eot -------------------------------------------------------------------------------- /packages/Wdatepicker/src/font/iconfont.js: -------------------------------------------------------------------------------- 1 | !function(d){var t,l='',e=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(e&&!d.__iconfont__svg__cssinject__){d.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}!function(t){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(t,0);else{var e=function(){document.removeEventListener("DOMContentLoaded",e,!1),t()};document.addEventListener("DOMContentLoaded",e,!1)}else document.attachEvent&&(o=t,n=d.document,a=!1,(i=function(){try{n.documentElement.doScroll("left")}catch(t){return void setTimeout(i,50)}l()})(),n.onreadystatechange=function(){"complete"==n.readyState&&(n.onreadystatechange=null,l())});function l(){a||(a=!0,o())}var o,n,a,i}(function(){var t,e;(t=document.createElement("div")).innerHTML=l,l=null,(e=t.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",function(t,e){e.firstChild?function(t,e){e.parentNode.insertBefore(t,e)}(t,e.firstChild):e.appendChild(t)}(e,document.body))})}(window); -------------------------------------------------------------------------------- /packages/Wdatepicker/src/font/iconfont.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "1436905", 3 | "name": "datePicker", 4 | "font_family": "iconfont", 5 | "css_prefix_text": "icon-", 6 | "description": "", 7 | "glyphs": [ 8 | { 9 | "icon_id": "2681687", 10 | "name": "关闭", 11 | "font_class": "guanbi", 12 | "unicode": "e605", 13 | "unicode_decimal": 58885 14 | }, 15 | { 16 | "icon_id": "5387910", 17 | "name": "箭头_列表向右_o", 18 | "font_class": "jiantou_liebiaoxiangyou_o", 19 | "unicode": "eb8a", 20 | "unicode_decimal": 60298 21 | }, 22 | { 23 | "icon_id": "5387920", 24 | "name": "箭头_列表向左_o", 25 | "font_class": "jiantou_liebiaoxiangzuo_o", 26 | "unicode": "eb8e", 27 | "unicode_decimal": 60302 28 | }, 29 | { 30 | "icon_id": "5387932", 31 | "name": "箭头_页面_向右_o", 32 | "font_class": "jiantou_yemian_xiangyou_o", 33 | "unicode": "eb93", 34 | "unicode_decimal": 60307 35 | }, 36 | { 37 | "icon_id": "5387935", 38 | "name": "箭头_页面_向左_o", 39 | "font_class": "jiantou_yemian_xiangzuo_o", 40 | "unicode": "eb94", 41 | "unicode_decimal": 60308 42 | }, 43 | { 44 | "icon_id": "5638799", 45 | "name": "日期", 46 | "font_class": "riqi", 47 | "unicode": "e616", 48 | "unicode_decimal": 58902 49 | } 50 | ] 51 | } 52 | -------------------------------------------------------------------------------- /packages/Wdatepicker/src/font/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /packages/Wdatepicker/src/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wjaxian/datepicker/f26de3877c71c5be53a0a83b8c75bbf1ce9d1cb1/packages/Wdatepicker/src/font/iconfont.ttf -------------------------------------------------------------------------------- /packages/Wdatepicker/src/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wjaxian/datepicker/f26de3877c71c5be53a0a83b8c75bbf1ce9d1cb1/packages/Wdatepicker/src/font/iconfont.woff -------------------------------------------------------------------------------- /packages/Wdatepicker/src/font/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wjaxian/datepicker/f26de3877c71c5be53a0a83b8c75bbf1ce9d1cb1/packages/Wdatepicker/src/font/iconfont.woff2 -------------------------------------------------------------------------------- /packages/Wdatepicker/src/js/Wdatepicker.js: -------------------------------------------------------------------------------- 1 | class Wdatepicker { 2 | constructor({ currentDate = new Date(), formatDate = 'YYYY/MM/DD hh:mm:ss', maxDate = '', minDate = '', disabledDate = []} = {}) { 3 | this.config({ 4 | win: window, 5 | format: formatDate, 6 | maxDate: this.judgeType(maxDate), 7 | minDate: this.judgeType(minDate), 8 | disabledDate, 9 | currentDate 10 | }) 11 | } 12 | 13 | config (options, isUpdateDate = !1) { 14 | Object.assign(this, options) 15 | this.init(options.currentDate, isUpdateDate) 16 | } 17 | 18 | currentMonthAllDate = [] 19 | 20 | // 初始化时间(更新的时间, 是否执行更新) 21 | init (updateDate, isUpdateDate = !1) { 22 | let currentDate = this.judgeType(updateDate), 23 | { YYYY, MM, DD } = this.getCurrentDate(), 24 | nmonth = MM, // 当前月份 25 | ncurrentMonthDate = DD, // 当前月日期 26 | year = currentDate.getFullYear(),// 切换的年份 27 | month = currentDate.getMonth() + 1, // 切换的月份 28 | firstDay = new Date(year, month - 1, 1), // 当月第一天 29 | firstDayWeek = firstDay.getDay() // 当月第一天，周几 30 | if (firstDayWeek === 0) firstDayWeek = 7 // 如果当月第一天是周日把0转成7 31 | this.currentDate = isUpdateDate ? updateDate && currentDate || '' : this.currentDate ? this.judgeType(this.currentDate) : '' 32 | 33 | let lastDayOfLastMonth = new Date(year, month - 1, 0), // 获取上月最后一天 34 | lastDateOfLastMonth = lastDayOfLastMonth.getDate(), // 获取上月最后一天日期，总天数 35 | preMonthDayCount = firstDayWeek - 1, // 保存当月第一天周几的正常数据，因为系统从0开始，上方把0已经转换成7 36 | lastDay = new Date(year, month, 0), // 获取下个月最后一天 37 | lastDate = lastDay.getDate(), // 获取下个月最后一天日期，总天数 38 | selectYear = this.currentDate && this.currentDate.getFullYear(),// 当前选择的年份 39 | selectMonth = this.currentDate && this.currentDate.getMonth() + 1,// 当前选择的月份 40 | selectDate = this.currentDate && this.currentDate.getDate(),// 当前选择的日 41 | currentMonthDateData = [] 42 | 43 | for (let i = 0; i < 42; i++) { 44 | let date = i + 1 - preMonthDayCount, 45 | showDate = date, 46 | thisMonth = month, 47 | otherTime = !1, 48 | disabledDate = !1 49 | if (date <= 0) { 50 | thisMonth = month - 1 51 | showDate = lastDateOfLastMonth + date 52 | otherTime = !0 53 | thisMonth == 0 && (year = currentDate.getFullYear() - 1) 54 | } else if (date > lastDate) { 55 | thisMonth = month + 1 56 | showDate = showDate - lastDate 57 | otherTime = !0 58 | thisMonth == 13 && (year = currentDate.getFullYear() + 1) 59 | } else { 60 | year = currentDate.getFullYear() 61 | } 62 | 63 | if (thisMonth === 0) thisMonth = 12 64 | if (thisMonth === 13) thisMonth = 1 65 | 66 | // 设置可选择的 最小时间 与 最大时间 67 | let cdate = this.judgeType(`${year}/${thisMonth}/${showDate}`), 68 | ctime = cdate.getTime() 69 | if (this.minDate.getTime() > ctime || this.maxDate.getTime() < ctime) { 70 | disabledDate = otherTime = !0 71 | } 72 | 73 | // 设置禁用状态 74 | if (this.disabledDate.constructor === Array) { 75 | this.disabledDate.map(v => { 76 | v = this.judgeType(v) 77 | if (ctime == v.getTime() && !disabledDate) { 78 | disabledDate = otherTime = !0 79 | } 80 | }) 81 | } else if (this.disabledDate.constructor === Function && !disabledDate) { 82 | let state = this.disabledDate(currentDate, cdate, new Date()) 83 | if (state) disabledDate = otherTime = state 84 | } 85 | 86 | currentMonthDateData.push({ 87 | year, 88 | date: showDate, 89 | month: thisMonth, 90 | isCurrentDate: YYYY == year && thisMonth == nmonth && ncurrentMonthDate == showDate, 91 | isSelectDate: !!this.currentDate && year == selectYear && thisMonth == selectMonth && showDate == selectDate, 92 | otherTime, 93 | disabledDate, 94 | thisMonth: month 95 | }) 96 | } 97 | 98 | this.currentMonthDateData = currentMonthDateData 99 | this.dataHandler(currentMonthDateData) 100 | } 101 | 102 | // 获取当前日期 103 | getCurrentDate () { 104 | let date = new Date(), 105 | yare = date.getFullYear(), 106 | month = date.getMonth() + 1, 107 | day = date.getDate(), 108 | h = date.getHours(), 109 | m = date.getMinutes(), 110 | s = date.getSeconds() 111 | 112 | return { 113 | YYYY: yare, 114 | MM: this.addZiller(month), 115 | DD: this.addZiller(day), 116 | hh: this.addZiller(h), 117 | mm: this.addZiller(m), 118 | ss: this.addZiller(s) 119 | } 120 | } 121 | 122 | // 切换日期 123 | switchingDate (selectDate = '') { 124 | selectDate = this.judgeType(selectDate) 125 | let year = selectDate.getFullYear(), 126 | month = selectDate.getMonth() + 1, 127 | date = selectDate.getDate(), 128 | {hh, mm, ss} = this.getCurrentDate() 129 | 130 | this.currentMonthDateData.map(v => { 131 | v.isSelectDate = !1 132 | if (v.year == year && v.month == month && v.date == date) { 133 | v.isSelectDate = !0 134 | this.dataHandler(this.currentMonthDateData) 135 | } 136 | }) 137 | 138 | let time = this.judgeType(`${this.formatDate(selectDate, 'YYYY/MM/DD')} ${hh}:${mm}:${ss}`) 139 | this.selectDate = time 140 | return this.formatDate(time, this.format) 141 | } 142 | 143 | // 判断类型 144 | judgeType (value = '') { 145 | let now = new Date() 146 | switch (value.constructor) { 147 | case String: 148 | value = value.replace(/[^\d:\s]/g, '/').match(/\d{4}\/\d{1,2}\/\d{1,2}/) 149 | value = value && value[0].split('/') || value 150 | return value && new Date(value[0], value[1] - 1, value[2], now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds()) || new Date() 151 | case Number: 152 | value = ''+value 153 | value = value.length == 10 ? 1000 * value : value.length == 13 ? 1 * value : +new Date 154 | return new Date(value) 155 | case Date: 156 | return value 157 | default: 158 | this.throwWrong('Entry can only be a Date object, String, Number') 159 | return new Date() 160 | } 161 | } 162 | 163 | // 数据聚合 164 | dataHandler (arr) { 165 | let index = 0 166 | this.currentMonthAllDate = [[]] 167 | arr.map((item, i) => { 168 | i = i + 1 169 | if (index >= 6) return null 170 | this.currentMonthAllDate[index].push(item) 171 | if (i % 7 == 0) { 172 | index += 1 173 | if (index >= 6) return null 174 | this.currentMonthAllDate.push([]) 175 | } 176 | }) 177 | } 178 | 179 | // 补零 180 | addZiller (n) { 181 | return n < 10 ? '0' + n : n; 182 | } 183 | 184 | // 格式化时间 185 | formatDate (n, rule = 'YYYY-MM-DD hh:mm:ss') { 186 | let type = n.constructor 187 | if ((type == String && /^[0-9]+$/g.test(n)) || type == Number || type == Date) { 188 | n = type == Date ? n : (type == Number && `${n}`.length > 10 ? n : n * 1000) || n; 189 | let date = type == Date ? n : new Date(n), 190 | od = { 191 | 'Y+': date.getFullYear(), 192 | 'M+': date.getMonth() + 1, 193 | 'D+': date.getDate(), 194 | 'h+': date.getHours(), 195 | 'm+': date.getMinutes(), 196 | 's+': date.getSeconds() 197 | } 198 | 199 | for (let d in od) { 200 | if (new RegExp(`(${d})`, 'i').test(rule)) { 201 | rule = rule.replace(new RegExp(d, 'i'), this.addZiller(od[d])); 202 | } 203 | } 204 | 205 | return rule; 206 | } else { 207 | return n; 208 | } 209 | } 210 | 211 | throwWrong (errorMsg = '') { 212 | errorMsg && this.win.console.error(errorMsg) 213 | } 214 | } 215 | 216 | // props validator check 217 | Wdatepicker.validator = v => { 218 | if (v.constructor === String) { 219 | return v === '' || /^[0-9]{4}(.{1}[0-9]{1,2}){2}.?$/.test(v) 220 | } else if (v.constructor === Number) { 221 | v = `${v}` 222 | if (v.length === 13 || v.length == 10) { 223 | return !0 224 | } 225 | return !1 226 | } else if (v.constructor === Date) { 227 | return !0 228 | } 229 | } 230 | 231 | export default Wdatepicker -------------------------------------------------------------------------------- /packages/Wdatepicker/src/style/theme.scss: -------------------------------------------------------------------------------- 1 | $datepicker_bg: #fff !default;//日期框背景 2 | $font_color: #606266 !default;//字体颜色 3 | $date_status: #409eff !default;//当前选中的日期背景与边框颜色 4 | $on_color_status: #fff !default;//当前选中的日期字体颜色 5 | $disabled_date_color: #e8e8e8 !default;//不是当前日期颜色 6 | $date_hover_bg: #e6f7ff !default;//日期鼠标划过颜色 7 | $date_hover_color: #409eff !default; 8 | $border: #dcdfe6 !default;//边框颜色 9 | $week_bg: #fcfcfc !default;//周的编号背景 10 | $week_border: #ebeef5;//周编号下边框颜色 11 | $ipt_focus_border: #409eff !default;//input 获取焦点边框颜色 12 | $ipt_hover_border: #c0c4cc !default;//鼠标移入边框颜色 13 | $ipt_placeholder: #dcdfe6 !default;//input 空提示字体颜色 14 | $disabled_font: #c0c4cc !default;//禁用状态字体颜色 15 | $disabeld_bg: #f5f7fa !default;//禁用状态背景 -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* Automatically generated by './build/build-entry.js' */ 2 | import Wdatepicker from '../packages/Wdatepicker/index.js' 3 | import localeIndex from './locale' 4 | const components = [ 5 | Wdatepicker 6 | ] 7 | 8 | const install = function(Vue, opts = {}) { 9 | localeIndex.use(opts.locale) 10 | localeIndex.i18n(opts.i18n) 11 | 12 | components.forEach(function(component) { 13 | Vue.component(component.name, component); 14 | }) 15 | } 16 | 17 | if (typeof window !== 'undefined' && window.Vue) { 18 | install(window.Vue) 19 | } 20 | 21 | const version = require('../package.json').version, 22 | locale = localeIndex.use, 23 | i18n = localeIndex.i18n 24 | 25 | export { 26 | version, 27 | locale, 28 | i18n, 29 | install, 30 | Wdatepicker, 31 | 32 | } 33 | 34 | export default { 35 | version, 36 | locale: localeIndex.use, 37 | i18n: localeIndex.i18n, 38 | install, 39 | Wdatepicker, 40 | 41 | } 42 | -------------------------------------------------------------------------------- /src/locale/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import deepmerge from 'deepmerge' 3 | import defaultLang from './lang/zh_CN' 4 | let lang = defaultLang 5 | let isOn = false 6 | 7 | let i18n_$t = function () { 8 | let $t = Object.getPrototypeOf(this || Vue).$t 9 | if (typeof $t === 'function' && !!Vue.locale) { 10 | if (!isOn) { 11 | isOn = true 12 | Vue.locale( 13 | Vue.config.lang, 14 | deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { clone: true }) 15 | ) 16 | } 17 | return $t.apply(this, arguments) 18 | } 19 | } 20 | 21 | export let t = function (path = '') { 22 | let value = i18n_$t.apply(this, arguments) 23 | if (value !== null && value !== undefined) return value 24 | 25 | let attributes = path.split('.') 26 | 27 | let get = (arr, obj) => { 28 | if (!arr.length) return obj 29 | let narr = arr.slice(1) 30 | return get(narr, obj[arr[0]]) 31 | } 32 | 33 | return get(attributes, lang) 34 | } 35 | 36 | export let use = nlang => { 37 | lang = nlang || lang 38 | } 39 | 40 | export let i18n = fn => { 41 | i18n_$t = fn || i18n_$t 42 | } 43 | 44 | export default { 45 | use, 46 | t, 47 | i18n 48 | } -------------------------------------------------------------------------------- /src/locale/lang/en.js: -------------------------------------------------------------------------------- 1 | export default { 2 | datepicker: { 3 | now: 'Now', 4 | today: 'Today', 5 | cancel: 'Cancel', 6 | clear: 'Clear', 7 | confirm: 'OK', 8 | selectDate: 'Select date', 9 | selectTime: 'Select time', 10 | startDate: 'Start Date', 11 | startTime: 'Start Time', 12 | endDate: 'End Date', 13 | endTime: 'End Time', 14 | prevYear: 'Previous Year', 15 | nextYear: 'Next Year', 16 | prevMonth: 'Previous Month', 17 | nextMonth: 'Next Month', 18 | year: '', 19 | month1: 'January', 20 | month2: 'February', 21 | month3: 'March', 22 | month4: 'April', 23 | month5: 'May', 24 | month6: 'June', 25 | month7: 'July', 26 | month8: 'August', 27 | month9: 'September', 28 | month10: 'October', 29 | month11: 'November', 30 | month12: 'December', 31 | week: 'week', 32 | weeks: { 33 | sun: 'Sun', 34 | mon: 'Mon', 35 | tue: 'Tue', 36 | wed: 'Wed', 37 | thu: 'Thu', 38 | fri: 'Fri', 39 | sat: 'Sat' 40 | }, 41 | months: { 42 | jan: 'Jan', 43 | feb: 'Feb', 44 | mar: 'Mar', 45 | apr: 'Apr', 46 | may: 'May', 47 | jun: 'Jun', 48 | jul: 'Jul', 49 | aug: 'Aug', 50 | sep: 'Sep', 51 | oct: 'Oct', 52 | nov: 'Nov', 53 | dec: 'Dec' 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/locale/lang/ja.js: -------------------------------------------------------------------------------- 1 | export default { 2 | datepicker: { 3 | now: '現在', 4 | today: '今日', 5 | cancel: 'キャンセル', 6 | clear: 'クリア', 7 | confirm: 'OK', 8 | selectDate: '日付を選択', 9 | selectTime: '時間を選択', 10 | startDate: '開始日', 11 | startTime: '開始時間', 12 | endDate: '終了日', 13 | endTime: '終了時間', 14 | prevYear: '前年', 15 | nextYear: '翌年', 16 | prevMonth: '前月', 17 | nextMonth: '翌月', 18 | year: '年', 19 | month1: '1月', 20 | month2: '2月', 21 | month3: '3月', 22 | month4: '4月', 23 | month5: '5月', 24 | month6: '6月', 25 | month7: '7月', 26 | month8: '8月', 27 | month9: '9月', 28 | month10: '10月', 29 | month11: '11月', 30 | month12: '12月', 31 | // week: '週次', 32 | weeks: { 33 | sun: '日', 34 | mon: '月', 35 | tue: '火', 36 | wed: '水', 37 | thu: '木', 38 | fri: '金', 39 | sat: '土' 40 | }, 41 | months: { 42 | jan: '1月', 43 | feb: '2月', 44 | mar: '3月', 45 | apr: '4月', 46 | may: '5月', 47 | jun: '6月', 48 | jul: '7月', 49 | aug: '8月', 50 | sep: '9月', 51 | oct: '10月', 52 | nov: '11月', 53 | dec: '12月' 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/locale/lang/ko.js: -------------------------------------------------------------------------------- 1 | export default { 2 | datepicker: { 3 | now: '지금', 4 | today: '오늘', 5 | cancel: '취소', 6 | clear: '초기화', 7 | confirm: '확인', 8 | selectDate: '날짜 선택', 9 | selectTime: '시간 선택', 10 | startDate: '시작 날짜', 11 | startTime: '시작 시간', 12 | endDate: '종료 날짜', 13 | endTime: '종료 시간', 14 | prevYear: '지난해', 15 | nextYear: '다음해', 16 | prevMonth: '지난달', 17 | nextMonth: '다음달', 18 | year: '년', 19 | month1: '1월', 20 | month2: '2월', 21 | month3: '3월', 22 | month4: '4월', 23 | month5: '5월', 24 | month6: '6월', 25 | month7: '7월', 26 | month8: '8월', 27 | month9: '9월', 28 | month10: '10월', 29 | month11: '11월', 30 | month12: '12월', 31 | // week: 'week', 32 | weeks: { 33 | sun: '일', 34 | mon: '월', 35 | tue: '화', 36 | wed: '수', 37 | thu: '목', 38 | fri: '금', 39 | sat: '토' 40 | }, 41 | months: { 42 | jan: '1월', 43 | feb: '2월', 44 | mar: '3월', 45 | apr: '4월', 46 | may: '5월', 47 | jun: '6월', 48 | jul: '7월', 49 | aug: '8월', 50 | sep: '9월', 51 | oct: '10월', 52 | nov: '11월', 53 | dec: '12월' 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/locale/lang/zh_CN.js: -------------------------------------------------------------------------------- 1 | export default { 2 | datepicker: { 3 | now: '此刻', 4 | today: '今天', 5 | cancel: '取消', 6 | clear: '清空', 7 | confirm: '确定', 8 | selectDate: '选择日期', 9 | selectTime: '选择时间', 10 | startDate: '开始日期', 11 | startTime: '开始时间', 12 | endDate: '结束日期', 13 | endTime: '结束时间', 14 | prevYear: '前一年', 15 | nextYear: '后一年', 16 | prevMonth: '上个月', 17 | nextMonth: '下个月', 18 | year: '年', 19 | month1: '1 月', 20 | month2: '2 月', 21 | month3: '3 月', 22 | month4: '4 月', 23 | month5: '5 月', 24 | month6: '6 月', 25 | month7: '7 月', 26 | month8: '8 月', 27 | month9: '9 月', 28 | month10: '10 月', 29 | month11: '11 月', 30 | month12: '12 月', 31 | // week: '周次', 32 | weeks: { 33 | sun: '日', 34 | mon: '一', 35 | tue: '二', 36 | wed: '三', 37 | thu: '四', 38 | fri: '五', 39 | sat: '六' 40 | }, 41 | months: { 42 | jan: '一月', 43 | feb: '二月', 44 | mar: '三月', 45 | apr: '四月', 46 | may: '五月', 47 | jun: '六月', 48 | jul: '七月', 49 | aug: '八月', 50 | sep: '九月', 51 | oct: '十月', 52 | nov: '十一月', 53 | dec: '十二月' 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/locale/lang/zh_TW.js: -------------------------------------------------------------------------------- 1 | export default { 2 | datepicker: { 3 | now: '現在', 4 | today: '今天', 5 | cancel: '取消', 6 | clear: '清空', 7 | confirm: '確認', 8 | selectDate: '選擇日期', 9 | selectTime: '選擇時間', 10 | startDate: '開始日期', 11 | startTime: '開始時間', 12 | endDate: '結束日期', 13 | endTime: '結束時間', 14 | prevYear: '前一年', 15 | nextYear: '後一年', 16 | prevMonth: '上個月', 17 | nextMonth: '下個月', 18 | year: '年', 19 | month1: '1 月', 20 | month2: '2 月', 21 | month3: '3 月', 22 | month4: '4 月', 23 | month5: '5 月', 24 | month6: '6 月', 25 | month7: '7 月', 26 | month8: '8 月', 27 | month9: '9 月', 28 | month10: '10 月', 29 | month11: '11 月', 30 | month12: '12 月', 31 | // week: '周次', 32 | weeks: { 33 | sun: '日', 34 | mon: '一', 35 | tue: '二', 36 | wed: '三', 37 | thu: '四', 38 | fri: '五', 39 | sat: '六' 40 | }, 41 | months: { 42 | jan: '一月', 43 | feb: '二月', 44 | mar: '三月', 45 | apr: '四月', 46 | may: '五月', 47 | jun: '六月', 48 | jul: '七月', 49 | aug: '八月', 50 | sep: '九月', 51 | oct: '十月', 52 | nov: '十一月', 53 | dec: '十二月' 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/mixins/locale.js: -------------------------------------------------------------------------------- 1 | import {t} from '../locale' 2 | 3 | export default { 4 | methods: { 5 | t: function (...args) { 6 | return t.apply(this, args) 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | // const CopyWebpackPlugin = require('copy-webpack-plugin') 2 | // const path = require('path') 3 | const isPord = process.env.NODE_ENV === 'production' 4 | module.exports = { 5 | publicPath: '/dist/', 6 | pages: { 7 | index: { 8 | entry: 'examples/main.js', 9 | template: 'public/index.html', 10 | filename: 'index.html' 11 | } 12 | }, 13 | devServer: { 14 | open: true, 15 | host: '127.0.0.1', 16 | port: 8080, 17 | https: false, 18 | hotOnly: false, 19 | proxy: null 20 | }, 21 | configureWebpack: config => { 22 | if (isPord) { 23 | Object.assign(config.output, { 24 | libraryTarget: 'umd', // 指定输出格式 25 | umdNamedDefine: true, // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define 26 | library: 'Wdatepicker', 27 | chunkFilename: '[name].[hash:5].js' 28 | }) 29 | 30 | // config.plugins = config.plugins.concat([ 31 | // new CopyWebpackPlugin([ 32 | // { 33 | // from: path.resolve(__dirname, 'src/'), 34 | // to: 'lib', 35 | // ignore: ['.*'] 36 | // // transform(content, path) { 37 | // // // return optimize(content); 38 | // // } 39 | // } 40 | // ], {copyUnmodified: true}) 41 | // ]) 42 | } 43 | } 44 | } --------------------------------------------------------------------------------