Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
X
xgdlapp
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
李苏
xgdlapp
Commits
16d3b58f
Commit
16d3b58f
authored
Mar 23, 2023
by
李苏
💬
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
组件
parent
7e886c95
Changes
63
Hide whitespace changes
Inline
Side-by-side
Showing
63 changed files
with
10993 additions
and
68 deletions
+10993
-68
.gitignore
.gitignore
+2
-3
workspace.xml
.idea/workspace.xml
+109
-65
changelog.md
uni_modules/uni-collapse/changelog.md
+36
-0
uni-collapse-item.vue
...llapse/components/uni-collapse-item/uni-collapse-item.vue
+402
-0
uni-collapse.vue
...les/uni-collapse/components/uni-collapse/uni-collapse.vue
+147
-0
package.json
uni_modules/uni-collapse/package.json
+89
-0
readme.md
uni_modules/uni-collapse/readme.md
+12
-0
changelog.md
uni_modules/uni-datetime-picker/changelog.md
+65
-0
calendar-item.vue
...e-picker/components/uni-datetime-picker/calendar-item.vue
+183
-0
calendar.js
...atetime-picker/components/uni-datetime-picker/calendar.js
+546
-0
calendar.vue
...tetime-picker/components/uni-datetime-picker/calendar.vue
+801
-0
en.json
...tetime-picker/components/uni-datetime-picker/i18n/en.json
+19
-0
index.js
...etime-picker/components/uni-datetime-picker/i18n/index.js
+8
-0
zh-Hans.json
...e-picker/components/uni-datetime-picker/i18n/zh-Hans.json
+19
-0
zh-Hant.json
...e-picker/components/uni-datetime-picker/i18n/zh-Hant.json
+19
-0
keypress.js
...atetime-picker/components/uni-datetime-picker/keypress.js
+45
-0
time-picker.vue
...ime-picker/components/uni-datetime-picker/time-picker.vue
+924
-0
uni-datetime-picker.vue
...er/components/uni-datetime-picker/uni-datetime-picker.vue
+951
-0
util.js
...ni-datetime-picker/components/uni-datetime-picker/util.js
+408
-0
package.json
uni_modules/uni-datetime-picker/package.json
+89
-0
readme.md
uni_modules/uni-datetime-picker/readme.md
+155
-0
changelog.md
uni_modules/uni-icons/changelog.md
+22
-0
icons.js
uni_modules/uni-icons/components/uni-icons/icons.js
+1169
-0
uni-icons.vue
uni_modules/uni-icons/components/uni-icons/uni-icons.vue
+96
-0
uni.ttf
uni_modules/uni-icons/components/uni-icons/uni.ttf
+0
-0
uniicons.css
uni_modules/uni-icons/components/uni-icons/uniicons.css
+663
-0
uniicons.ttf
uni_modules/uni-icons/components/uni-icons/uniicons.ttf
+0
-0
package.json
uni_modules/uni-icons/package.json
+86
-0
readme.md
uni_modules/uni-icons/readme.md
+8
-0
changelog.md
uni_modules/uni-number-box/changelog.md
+25
-0
uni-number-box.vue
...i-number-box/components/uni-number-box/uni-number-box.vue
+220
-0
package.json
uni_modules/uni-number-box/package.json
+85
-0
readme.md
uni_modules/uni-number-box/readme.md
+13
-0
changelog.md
uni_modules/uni-scss/changelog.md
+8
-0
index.scss
uni_modules/uni-scss/index.scss
+1
-0
package.json
uni_modules/uni-scss/package.json
+82
-0
readme.md
uni_modules/uni-scss/readme.md
+4
-0
index.scss
uni_modules/uni-scss/styles/index.scss
+7
-0
_border.scss
uni_modules/uni-scss/styles/setting/_border.scss
+3
-0
_color.scss
uni_modules/uni-scss/styles/setting/_color.scss
+66
-0
_radius.scss
uni_modules/uni-scss/styles/setting/_radius.scss
+55
-0
_space.scss
uni_modules/uni-scss/styles/setting/_space.scss
+56
-0
_styles.scss
uni_modules/uni-scss/styles/setting/_styles.scss
+167
-0
_text.scss
uni_modules/uni-scss/styles/setting/_text.scss
+24
-0
_variables.scss
uni_modules/uni-scss/styles/setting/_variables.scss
+146
-0
functions.scss
uni_modules/uni-scss/styles/tools/functions.scss
+19
-0
theme.scss
uni_modules/uni-scss/theme.scss
+31
-0
variables.scss
uni_modules/uni-scss/variables.scss
+62
-0
changelog.md
uni_modules/uni-table/changelog.md
+18
-0
uni-table.vue
uni_modules/uni-table/components/uni-table/uni-table.vue
+455
-0
uni-tbody.vue
uni_modules/uni-table/components/uni-tbody/uni-tbody.vue
+29
-0
uni-td.vue
uni_modules/uni-table/components/uni-td/uni-td.vue
+90
-0
filter-dropdown.vue
uni_modules/uni-table/components/uni-th/filter-dropdown.vue
+503
-0
uni-th.vue
uni_modules/uni-table/components/uni-th/uni-th.vue
+251
-0
uni-thead.vue
uni_modules/uni-table/components/uni-thead/uni-thead.vue
+129
-0
table-checkbox.vue
uni_modules/uni-table/components/uni-tr/table-checkbox.vue
+179
-0
uni-tr.vue
uni_modules/uni-table/components/uni-tr/uni-tr.vue
+162
-0
package.json
uni_modules/uni-table/package.json
+82
-0
readme.md
uni_modules/uni-table/readme.md
+148
-0
changelog.md
uni_modules/v-tabs/changelog.md
+125
-0
v-tabs.vue
uni_modules/v-tabs/components/v-tabs/v-tabs.vue
+352
-0
package.json
uni_modules/v-tabs/package.json
+83
-0
readme.md
uni_modules/v-tabs/readme.md
+240
-0
No files found.
.gitignore
View file @
16d3b58f
/package-lock.json
/package-lock.json
node_modules/
node_modules/
.project unpackage/
.project unpackage/
.DS_Store
.DS_Store
unpackage/
unpackage/
uni_modules
/.idea/
/.idea/
.idea/workspace.xml
View file @
16d3b58f
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<project
version=
"4"
>
<project
version=
"4"
>
<component
name=
"ChangeListManager"
>
<component
name=
"ChangeListManager"
>
<list
default=
"true"
id=
"cad3b532-20c9-45b5-a856-e17039c7e45a"
name=
"Default Changelist"
comment=
""
>
<list
default=
"true"
id=
"cad3b532-20c9-45b5-a856-e17039c7e45a"
name=
"Default Changelist"
comment=
"xgdlapp补充接口"
>
<change
beforePath=
"$PROJECT_DIR$/.gitignore"
beforeDir=
"false"
afterPath=
"$PROJECT_DIR$/.gitignore"
afterDir=
"false"
/>
<change
beforePath=
"$PROJECT_DIR$/.idea/workspace.xml"
beforeDir=
"false"
afterPath=
"$PROJECT_DIR$/.idea/workspace.xml"
afterDir=
"false"
/>
<change
beforePath=
"$PROJECT_DIR$/.idea/workspace.xml"
beforeDir=
"false"
afterPath=
"$PROJECT_DIR$/.idea/workspace.xml"
afterDir=
"false"
/>
</list>
</list>
<option
name=
"EXCLUDED_CONVERTED_TO_IGNORED"
value=
"true"
/>
<option
name=
"EXCLUDED_CONVERTED_TO_IGNORED"
value=
"true"
/>
...
@@ -13,40 +14,38 @@
...
@@ -13,40 +14,38 @@
<component
name=
"FileEditorManager"
>
<component
name=
"FileEditorManager"
>
<leaf
SIDE_TABS_SIZE_LIMIT_KEY=
"300"
>
<leaf
SIDE_TABS_SIZE_LIMIT_KEY=
"300"
>
<file
pinned=
"false"
current-in-tab=
"false"
>
<file
pinned=
"false"
current-in-tab=
"false"
>
<entry
file=
"file://$PROJECT_DIR$/
pages/dl_putin_storage/putin_register.vue
"
>
<entry
file=
"file://$PROJECT_DIR$/
common/util/appUpdate.js
"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<state
relative-caret-position=
"3
575
"
>
<state
relative-caret-position=
"3
61
"
>
<caret
line=
"1
45"
column=
"25"
selection-start-line=
"145"
selection-start-column=
"25"
selection-end-line=
"145"
selection-end-column=
"25
"
/>
<caret
line=
"1
9"
column=
"30"
selection-start-line=
"19"
selection-start-column=
"30"
selection-end-line=
"19"
selection-end-column=
"30
"
/>
</state>
</state>
</provider>
</provider>
</entry>
</entry>
</file>
</file>
<file
pinned=
"false"
current-in-tab=
"false"
>
<file
pinned=
"false"
current-in-tab=
"false"
>
<entry
file=
"file://$PROJECT_DIR$/pages/dl_cmaterial/index.vue"
>
<entry
file=
"file://$PROJECT_DIR$/.idea/workspace.xml"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
/>
<state
relative-caret-position=
"1325"
>
<caret
line=
"53"
column=
"21"
selection-start-line=
"53"
selection-start-column=
"8"
selection-end-line=
"53"
selection-end-column=
"21"
/>
</state>
</provider>
</entry>
</entry>
</file>
</file>
<file
pinned=
"false"
current-in-tab=
"
tru
e"
>
<file
pinned=
"false"
current-in-tab=
"
fals
e"
>
<entry
file=
"file://$PROJECT_DIR$/
api/dlapi.js
"
>
<entry
file=
"file://$PROJECT_DIR$/
pages/dl_cmaterial/index.vue
"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<state
relative-caret-position=
"423"
>
<state
relative-caret-position=
"38"
>
<caret
line=
"197"
column=
"36"
selection-start-line=
"197"
selection-start-column=
"36"
selection-end-line=
"197"
selection-end-column=
"36"
/>
<caret
line=
"2"
column=
"60"
selection-start-line=
"2"
selection-start-column=
"60"
selection-end-line=
"2"
selection-end-column=
"60"
/>
<folding>
<element
signature=
"e#0#51#0"
expanded=
"true"
/>
</folding>
</state>
</state>
</provider>
</provider>
</entry>
</entry>
</file>
</file>
<file
pinned=
"false"
current-in-tab=
"false"
>
<file
pinned=
"false"
current-in-tab=
"false"
>
<entry
file=
"file://$APPLICATION_HOME_DIR$/plugins/JavaScriptLanguage/jsLanguageServicesImpl/external/lib.dom.d.ts"
>
<entry
file=
"file://$PROJECT_DIR$/pages/dl_putin_storage/putin_register.vue"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
/>
</entry>
</file>
<file
pinned=
"false"
current-in-tab=
"true"
>
<entry
file=
"file://$PROJECT_DIR$/.gitignore"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<state
relative-caret-position=
"
14982
5"
>
<state
relative-caret-position=
"
9
5"
>
<caret
line=
"
6006"
column=
"4"
selection-start-line=
"6006"
selection-start-column=
"4"
selection-end-line=
"6006"
selection-end-column=
"4
"
/>
<caret
line=
"
5"
column=
"7"
lean-forward=
"true"
selection-start-line=
"5"
selection-start-column=
"7"
selection-end-line=
"5"
selection-end-column=
"7
"
/>
</state>
</state>
</provider>
</provider>
</entry>
</entry>
...
@@ -67,12 +66,25 @@
...
@@ -67,12 +66,25 @@
<component
name=
"Git.Settings"
>
<component
name=
"Git.Settings"
>
<option
name=
"RECENT_GIT_ROOT_PATH"
value=
"$PROJECT_DIR$"
/>
<option
name=
"RECENT_GIT_ROOT_PATH"
value=
"$PROJECT_DIR$"
/>
</component>
</component>
<component
name=
"IdeDocumentHistory"
>
<option
name=
"CHANGED_PATHS"
>
<list>
<option
value=
"$PROJECT_DIR$/.gitignore"
/>
</list>
</option>
</component>
<component
name=
"JsBuildToolGruntFileManager"
detection-done=
"true"
sorting=
"DEFINITION_ORDER"
/>
<component
name=
"JsBuildToolPackageJson"
detection-done=
"true"
sorting=
"DEFINITION_ORDER"
/>
<component
name=
"JsFlowSettings"
>
<component
name=
"JsFlowSettings"
>
<service-enabled>
true
</service-enabled>
<service-enabled>
true
</service-enabled>
<exe-path
/>
<exe-path
/>
<other-services-enabled>
true
</other-services-enabled>
<other-services-enabled>
true
</other-services-enabled>
<auto-save>
true
</auto-save>
<auto-save>
true
</auto-save>
</component>
</component>
<component
name=
"JsGulpfileManager"
>
<detection-done>
true
</detection-done>
<sorting>
DEFINITION_ORDER
</sorting>
</component>
<component
name=
"MavenImportPreferences"
>
<component
name=
"MavenImportPreferences"
>
<option
name=
"generalSettings"
>
<option
name=
"generalSettings"
>
<MavenGeneralSettings>
<MavenGeneralSettings>
...
@@ -81,11 +93,23 @@
...
@@ -81,11 +93,23 @@
</MavenGeneralSettings>
</MavenGeneralSettings>
</option>
</option>
</component>
</component>
<component
name=
"NodePackageJsonFileManager"
>
<packageJsonPaths>
<path
value=
"$PROJECT_DIR$/plugin/uni-simple-router/package.json"
/>
<path
value=
"$PROJECT_DIR$/uni_modules/uni-collapse/package.json"
/>
<path
value=
"$PROJECT_DIR$/uni_modules/uni-datetime-picker/package.json"
/>
<path
value=
"$PROJECT_DIR$/uni_modules/uni-icons/package.json"
/>
<path
value=
"$PROJECT_DIR$/uni_modules/uni-number-box/package.json"
/>
<path
value=
"$PROJECT_DIR$/uni_modules/uni-scss/package.json"
/>
<path
value=
"$PROJECT_DIR$/uni_modules/uni-table/package.json"
/>
<path
value=
"$PROJECT_DIR$/uni_modules/v-tabs/package.json"
/>
</packageJsonPaths>
</component>
<component
name=
"ProjectFrameBounds"
extendedState=
"6"
>
<component
name=
"ProjectFrameBounds"
extendedState=
"6"
>
<option
name=
"x"
value=
"-
7
"
/>
<option
name=
"x"
value=
"-
10
"
/>
<option
name=
"y"
value=
"
2
"
/>
<option
name=
"y"
value=
"
-10
"
/>
<option
name=
"width"
value=
"1
932
"
/>
<option
name=
"width"
value=
"1
555
"
/>
<option
name=
"height"
value=
"
1045
"
/>
<option
name=
"height"
value=
"
840
"
/>
</component>
</component>
<component
name=
"ProjectView"
>
<component
name=
"ProjectView"
>
<navigator
proportions=
""
version=
"1"
>
<navigator
proportions=
""
version=
"1"
>
...
@@ -101,6 +125,22 @@
...
@@ -101,6 +125,22 @@
<item
name=
"xgdlapp"
type=
"b2602c69:ProjectViewProjectNode"
/>
<item
name=
"xgdlapp"
type=
"b2602c69:ProjectViewProjectNode"
/>
<item
name=
"xgdlapp"
type=
"462c0819:PsiDirectoryNode"
/>
<item
name=
"xgdlapp"
type=
"462c0819:PsiDirectoryNode"
/>
</path>
</path>
<path>
<item
name=
"xgdlapp"
type=
"b2602c69:ProjectViewProjectNode"
/>
<item
name=
"xgdlapp"
type=
"462c0819:PsiDirectoryNode"
/>
<item
name=
"common"
type=
"462c0819:PsiDirectoryNode"
/>
</path>
<path>
<item
name=
"xgdlapp"
type=
"b2602c69:ProjectViewProjectNode"
/>
<item
name=
"xgdlapp"
type=
"462c0819:PsiDirectoryNode"
/>
<item
name=
"common"
type=
"462c0819:PsiDirectoryNode"
/>
<item
name=
"util"
type=
"462c0819:PsiDirectoryNode"
/>
</path>
<path>
<item
name=
"xgdlapp"
type=
"b2602c69:ProjectViewProjectNode"
/>
<item
name=
"xgdlapp"
type=
"462c0819:PsiDirectoryNode"
/>
<item
name=
"uni_modules"
type=
"462c0819:PsiDirectoryNode"
/>
</path>
</expand>
</expand>
<select
/>
<select
/>
</subPane>
</subPane>
...
@@ -157,6 +197,7 @@
...
@@ -157,6 +197,7 @@
<workItem
from=
"1675127156851"
duration=
"1210000"
/>
<workItem
from=
"1675127156851"
duration=
"1210000"
/>
<workItem
from=
"1675238189379"
duration=
"1820000"
/>
<workItem
from=
"1675238189379"
duration=
"1820000"
/>
<workItem
from=
"1679363550222"
duration=
"33000"
/>
<workItem
from=
"1679363550222"
duration=
"33000"
/>
<workItem
from=
"1679560760023"
duration=
"47000"
/>
</task>
</task>
<task
id=
"LOCAL-00001"
summary=
"徐工道路app初始化"
>
<task
id=
"LOCAL-00001"
summary=
"徐工道路app初始化"
>
<created>
1652260852330
</created>
<created>
1652260852330
</created>
...
@@ -249,24 +290,30 @@
...
@@ -249,24 +290,30 @@
<option
name=
"project"
value=
"LOCAL"
/>
<option
name=
"project"
value=
"LOCAL"
/>
<updated>
1675238701480
</updated>
<updated>
1675238701480
</updated>
</task>
</task>
<option
name=
"localTasksCounter"
value=
"14"
/>
<task
id=
"LOCAL-00014"
summary=
"补充功能"
>
<created>
1679558424158
</created>
<option
name=
"number"
value=
"00014"
/>
<option
name=
"presentableId"
value=
"LOCAL-00014"
/>
<option
name=
"project"
value=
"LOCAL"
/>
<updated>
1679558424159
</updated>
</task>
<option
name=
"localTasksCounter"
value=
"15"
/>
<servers
/>
<servers
/>
</component>
</component>
<component
name=
"TimeTrackingManager"
>
<component
name=
"TimeTrackingManager"
>
<option
name=
"totallyTimeSpent"
value=
"
19721
000"
/>
<option
name=
"totallyTimeSpent"
value=
"
20658
000"
/>
</component>
</component>
<component
name=
"ToolWindowManager"
>
<component
name=
"ToolWindowManager"
>
<frame
x=
"-
8"
y=
"-8"
width=
"1936"
height=
"1056
"
extended-state=
"6"
/>
<frame
x=
"-
7"
y=
"-7"
width=
"1550"
height=
"830
"
extended-state=
"6"
/>
<editor
active=
"true"
/>
<editor
active=
"true"
/>
<layout>
<layout>
<window_info
content_ui=
"combo"
id=
"Project"
order=
"0"
visible=
"true"
weight=
"0.25266525
"
/>
<window_info
active=
"true"
content_ui=
"combo"
id=
"Project"
order=
"0"
visible=
"true"
weight=
"0.20174263
"
/>
<window_info
id=
"Structure"
order=
"1"
side_tool=
"true"
weight=
"0.25"
/>
<window_info
id=
"Structure"
order=
"1"
side_tool=
"true"
weight=
"0.25"
/>
<window_info
id=
"Image Layers"
order=
"2"
/>
<window_info
id=
"Image Layers"
order=
"2"
/>
<window_info
id=
"Designer"
order=
"3"
/>
<window_info
id=
"Designer"
order=
"3"
/>
<window_info
id=
"UI Designer"
order=
"4"
/>
<window_info
id=
"UI Designer"
order=
"4"
/>
<window_info
id=
"Capture Tool"
order=
"5"
/>
<window_info
id=
"Capture Tool"
order=
"5"
/>
<window_info
id=
"Favorites"
order=
"6"
side_tool=
"true"
/>
<window_info
id=
"Favorites"
order=
"6"
side_tool=
"true"
/>
<window_info
anchor=
"bottom"
id=
"Docker"
show_stripe_button=
"false"
/>
<window_info
anchor=
"bottom"
id=
"Message"
order=
"0"
/>
<window_info
anchor=
"bottom"
id=
"Message"
order=
"0"
/>
<window_info
anchor=
"bottom"
id=
"Find"
order=
"1"
/>
<window_info
anchor=
"bottom"
id=
"Find"
order=
"1"
/>
<window_info
anchor=
"bottom"
id=
"Run"
order=
"2"
/>
<window_info
anchor=
"bottom"
id=
"Run"
order=
"2"
/>
...
@@ -274,13 +321,12 @@
...
@@ -274,13 +321,12 @@
<window_info
anchor=
"bottom"
id=
"Cvs"
order=
"4"
weight=
"0.25"
/>
<window_info
anchor=
"bottom"
id=
"Cvs"
order=
"4"
weight=
"0.25"
/>
<window_info
anchor=
"bottom"
id=
"Inspection"
order=
"5"
weight=
"0.4"
/>
<window_info
anchor=
"bottom"
id=
"Inspection"
order=
"5"
weight=
"0.4"
/>
<window_info
anchor=
"bottom"
id=
"TODO"
order=
"6"
/>
<window_info
anchor=
"bottom"
id=
"TODO"
order=
"6"
/>
<window_info
anchor=
"bottom"
id=
"Version Control"
order=
"7"
weight=
"0.8204748
"
/>
<window_info
anchor=
"bottom"
id=
"Version Control"
order=
"7"
visible=
"true"
weight=
"0.37537092
"
/>
<window_info
anchor=
"bottom"
id=
"Database Changes"
order=
"8"
show_stripe_button=
"false"
/>
<window_info
anchor=
"bottom"
id=
"Database Changes"
order=
"8"
show_stripe_button=
"false"
/>
<window_info
anchor=
"bottom"
id=
"TypeScript"
order=
"9"
/>
<window_info
anchor=
"bottom"
id=
"TypeScript"
order=
"9"
/>
<window_info
anchor=
"bottom"
id=
"Terminal"
order=
"10"
weight=
"0.3837037"
/>
<window_info
anchor=
"bottom"
id=
"Terminal"
order=
"10"
weight=
"0.3837037"
/>
<window_info
anchor=
"bottom"
id=
"Event Log"
order=
"11"
side_tool=
"true"
/>
<window_info
anchor=
"bottom"
id=
"Event Log"
order=
"11"
side_tool=
"true"
/>
<window_info
anchor=
"right"
id=
"Maven"
/>
<window_info
anchor=
"bottom"
id=
"Docker"
order=
"12"
show_stripe_button=
"false"
/>
<window_info
anchor=
"right"
id=
"Word Book"
side_tool=
"true"
/>
<window_info
anchor=
"right"
id=
"Commander"
internal_type=
"SLIDING"
order=
"0"
type=
"SLIDING"
weight=
"0.4"
/>
<window_info
anchor=
"right"
id=
"Commander"
internal_type=
"SLIDING"
order=
"0"
type=
"SLIDING"
weight=
"0.4"
/>
<window_info
anchor=
"right"
id=
"Ant Build"
order=
"1"
weight=
"0.25"
/>
<window_info
anchor=
"right"
id=
"Ant Build"
order=
"1"
weight=
"0.25"
/>
<window_info
anchor=
"right"
content_ui=
"combo"
id=
"Hierarchy"
order=
"2"
weight=
"0.25"
/>
<window_info
anchor=
"right"
content_ui=
"combo"
id=
"Hierarchy"
order=
"2"
weight=
"0.25"
/>
...
@@ -290,6 +336,8 @@
...
@@ -290,6 +336,8 @@
<window_info
anchor=
"right"
id=
"Palette	"
order=
"6"
/>
<window_info
anchor=
"right"
id=
"Palette	"
order=
"6"
/>
<window_info
anchor=
"right"
id=
"Database"
order=
"7"
/>
<window_info
anchor=
"right"
id=
"Database"
order=
"7"
/>
<window_info
anchor=
"right"
id=
"Maven Projects"
order=
"8"
/>
<window_info
anchor=
"right"
id=
"Maven Projects"
order=
"8"
/>
<window_info
anchor=
"right"
id=
"Maven"
order=
"9"
/>
<window_info
anchor=
"right"
id=
"Word Book"
order=
"10"
side_tool=
"true"
/>
</layout>
</layout>
</component>
</component>
<component
name=
"TypeScriptGeneratedFilesManager"
>
<component
name=
"TypeScriptGeneratedFilesManager"
>
...
@@ -320,20 +368,9 @@
...
@@ -320,20 +368,9 @@
</entry>
</entry>
</map>
</map>
</option>
</option>
<option
name=
"RECENT_FILTERS"
>
</component>
<map>
<component
name=
"VcsContentAnnotationSettings"
>
<entry
key=
"Branch"
>
<option
name=
"myLimit"
value=
"2678400000"
/>
<value>
<list
/>
</value>
</entry>
<entry
key=
"User"
>
<value>
<list
/>
</value>
</entry>
</map>
</option>
</component>
</component>
<component
name=
"VcsManagerConfiguration"
>
<component
name=
"VcsManagerConfiguration"
>
<MESSAGE
value=
"徐工道路app初始化"
/>
<MESSAGE
value=
"徐工道路app初始化"
/>
...
@@ -349,7 +386,8 @@
...
@@ -349,7 +386,8 @@
<MESSAGE
value=
"Gtoken"
/>
<MESSAGE
value=
"Gtoken"
/>
<MESSAGE
value=
"修改个人组件,修改密码+base64"
/>
<MESSAGE
value=
"修改个人组件,修改密码+base64"
/>
<MESSAGE
value=
"超级用户特殊处理"
/>
<MESSAGE
value=
"超级用户特殊处理"
/>
<option
name=
"LAST_COMMIT_MESSAGE"
value=
"超级用户特殊处理"
/>
<MESSAGE
value=
"补充功能"
/>
<option
name=
"LAST_COMMIT_MESSAGE"
value=
"补充功能"
/>
</component>
</component>
<component
name=
"editorHistoryManager"
>
<component
name=
"editorHistoryManager"
>
<entry
file=
"file://$PROJECT_DIR$/common/util/date.js"
>
<entry
file=
"file://$PROJECT_DIR$/common/util/date.js"
>
...
@@ -359,41 +397,47 @@
...
@@ -359,41 +397,47 @@
</state>
</state>
</provider>
</provider>
</entry>
</entry>
<entry
file=
"file://$
PROJECT_DIR$/common/util/appUpdate.j
s"
>
<entry
file=
"file://$
APPLICATION_HOME_DIR$/plugins/JavaScriptLanguage/jsLanguageServicesImpl/external/lib.dom.d.t
s"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<state
relative-caret-position=
"
27
"
>
<state
relative-caret-position=
"
149825
"
>
<caret
line=
"
19"
column=
"30"
selection-start-line=
"19"
selection-start-column=
"30"
selection-end-line=
"19"
selection-end-column=
"30
"
/>
<caret
line=
"
6006"
column=
"4"
selection-start-line=
"6006"
selection-start-column=
"4"
selection-end-line=
"6006"
selection-end-column=
"4
"
/>
</state>
</state>
</provider>
</provider>
</entry>
</entry>
<entry
file=
"file://$PROJECT_DIR$/
pages/dl_putin_storage/putin_register.vue
"
>
<entry
file=
"file://$PROJECT_DIR$/
api/dlapi.js
"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<state
relative-caret-position=
"3575"
>
<state
relative-caret-position=
"423"
>
<caret
line=
"145"
column=
"25"
selection-start-line=
"145"
selection-start-column=
"25"
selection-end-line=
"145"
selection-end-column=
"25"
/>
<caret
line=
"197"
column=
"36"
selection-start-line=
"197"
selection-start-column=
"36"
selection-end-line=
"197"
selection-end-column=
"36"
/>
<folding>
<element
signature=
"e#0#51#0"
expanded=
"true"
/>
</folding>
</state>
</state>
</provider>
</provider>
</entry>
</entry>
<entry
file=
"file://$PROJECT_DIR$/
pages/dl_cmaterial/index.vue
"
>
<entry
file=
"file://$PROJECT_DIR$/
common/util/appUpdate.js
"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<state
relative-caret-position=
"
1325
"
>
<state
relative-caret-position=
"
361
"
>
<caret
line=
"
53"
column=
"21"
selection-start-line=
"53"
selection-start-column=
"8"
selection-end-line=
"53"
selection-end-column=
"21
"
/>
<caret
line=
"
19"
column=
"30"
selection-start-line=
"19"
selection-start-column=
"30"
selection-end-line=
"19"
selection-end-column=
"30
"
/>
</state>
</state>
</provider>
</provider>
</entry>
</entry>
<entry
file=
"file://$APPLICATION_HOME_DIR$/plugins/JavaScriptLanguage/jsLanguageServicesImpl/external/lib.dom.d.ts"
>
<entry
file=
"file://$PROJECT_DIR$/.idea/workspace.xml"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
/>
</entry>
<entry
file=
"file://$PROJECT_DIR$/pages/dl_cmaterial/index.vue"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<state
relative-caret-position=
"
149825
"
>
<state
relative-caret-position=
"
38
"
>
<caret
line=
"
6006"
column=
"4"
selection-start-line=
"6006"
selection-start-column=
"4"
selection-end-line=
"6006"
selection-end-column=
"4
"
/>
<caret
line=
"
2"
column=
"60"
selection-start-line=
"2"
selection-start-column=
"60"
selection-end-line=
"2"
selection-end-column=
"60
"
/>
</state>
</state>
</provider>
</provider>
</entry>
</entry>
<entry
file=
"file://$PROJECT_DIR$/api/dlapi.js"
>
<entry
file=
"file://$PROJECT_DIR$/pages/dl_putin_storage/putin_register.vue"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
/>
</entry>
<entry
file=
"file://$PROJECT_DIR$/.gitignore"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<provider
selected=
"true"
editor-type-id=
"text-editor"
>
<state
relative-caret-position=
"423"
>
<state
relative-caret-position=
"95"
>
<caret
line=
"197"
column=
"36"
selection-start-line=
"197"
selection-start-column=
"36"
selection-end-line=
"197"
selection-end-column=
"36"
/>
<caret
line=
"5"
column=
"7"
lean-forward=
"true"
selection-start-line=
"5"
selection-start-column=
"7"
selection-end-line=
"5"
selection-end-column=
"7"
/>
<folding>
<element
signature=
"e#0#51#0"
expanded=
"true"
/>
</folding>
</state>
</state>
</provider>
</provider>
</entry>
</entry>
...
...
uni_modules/uni-collapse/changelog.md
0 → 100644
View file @
16d3b58f
## 1.4.3(2022-01-25)
-
修复 初始化的时候 ,open 属性失效的bug
## 1.4.2(2022-01-21)
-
修复 微信小程序resize后组件收起的bug
## 1.4.1(2021-11-22)
-
修复 vue3中个别scss变量无法找到的问题
## 1.4.0(2021-11-19)
-
优化 组件UI,并提供设计资源,详见:
[
https://uniapp.dcloud.io/component/uniui/resource
](
https://uniapp.dcloud.io/component/uniui/resource
)
-
文档迁移,详见:
[
https://uniapp.dcloud.io/component/uniui/uni-collapse
](
https://uniapp.dcloud.io/component/uniui/uni-collapse
)
## 1.3.3(2021-08-17)
-
优化 show-arrow 属性默认为true
## 1.3.2(2021-08-17)
-
新增 show-arrow 属性,控制是否显示右侧箭头
## 1.3.1(2021-07-30)
-
优化 vue3下小程序事件警告的问题
## 1.3.0(2021-07-30)
-
组件兼容 vue3,如何创建vue3项目,详见
[
uni-app 项目支持 vue3 介绍
](
https://ask.dcloud.net.cn/article/37834
)
## 1.2.2(2021-07-21)
-
修复 由1.2.0版本引起的 change 事件返回 undefined 的Bug
## 1.2.1(2021-07-21)
-
优化 组件示例
## 1.2.0(2021-07-21)
-
新增 组件折叠动画
-
新增 value
\v
-model 属性 ,动态修改面板折叠状态
-
新增 title 插槽 ,可定义面板标题
-
新增 border 属性 ,显示隐藏面板内容分隔线
-
新增 title-border 属性 ,显示隐藏面板标题分隔线
-
修复 resize 方法失效的Bug
-
修复 change 事件返回参数不正确的Bug
-
优化 H5、App 平台自动更具内容更新高度,无需调用 reszie() 方法
## 1.1.7(2021-05-12)
-
新增 组件示例地址
## 1.1.6(2021-02-05)
-
优化 组件引用关系,通过uni_modules引用组件
## 1.1.5(2021-02-05)
-
调整为uni_modules目录规范
\ No newline at end of file
uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue
0 → 100644
View file @
16d3b58f
<
template
>
<view
class=
"uni-collapse-item"
>
<!-- onClick(!isOpen) -->
<view
@
click=
"onClick(!isOpen)"
class=
"uni-collapse-item__title"
:class=
"
{'is-open':isOpen
&&
titleBorder === 'auto' ,'uni-collapse-item-border':titleBorder !== 'none'}">
<view
class=
"uni-collapse-item__title-wrap"
>
<slot
name=
"title"
>
<view
class=
"uni-collapse-item__title-box"
:class=
"
{'is-disabled':disabled}">
<image
v-if=
"thumb"
:src=
"thumb"
class=
"uni-collapse-item__title-img"
/>
<text
class=
"uni-collapse-item__title-text"
>
{{
title
}}
</text>
</view>
</slot>
</view>
<view
v-if=
"showArrow"
:class=
"
{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }"
class="uni-collapse-item__title-arrow">
<uni-icons
:color=
"disabled?'#ddd':'#bbb'"
size=
"14"
type=
"bottom"
/>
</view>
</view>
<view
class=
"uni-collapse-item__wrap"
:class=
"
{'is--transition':showAnimation}"
:style="{height: (isOpen?height:0) +'px'}">
<view
:id=
"elId"
ref=
"collapse--hook"
class=
"uni-collapse-item__wrap-content"
:class=
"
{open:isheight,'uni-collapse-item--border':border
&&
isOpen}">
<slot></slot>
</view>
</view>
</view>
</
template
>
<
script
>
// #ifdef APP-NVUE
const
dom
=
weex
.
requireModule
(
'dom'
)
// #endif
/**
* CollapseItem 折叠面板子组件
* @description 折叠面板子组件
* @property {String} title 标题文字
* @property {String} thumb 标题左侧缩略图
* @property {String} name 唯一标志符
* @property {Boolean} open = [true|false] 是否展开组件
* @property {Boolean} titleBorder = [true|false] 是否显示标题分隔线
* @property {Boolean} border = [true|false] 是否显示分隔线
* @property {Boolean} disabled = [true|false] 是否展开面板
* @property {Boolean} showAnimation = [true|false] 开启动画
* @property {Boolean} showArrow = [true|false] 是否显示右侧箭头
*/
export
default
{
name
:
'uniCollapseItem'
,
props
:
{
// 列表标题
title
:
{
type
:
String
,
default
:
''
},
name
:
{
type
:
[
Number
,
String
],
default
:
''
},
// 是否禁用
disabled
:
{
type
:
Boolean
,
default
:
false
},
// #ifdef APP-PLUS
// 是否显示动画,app 端默认不开启动画,卡顿严重
showAnimation
:
{
type
:
Boolean
,
default
:
false
},
// #endif
// #ifndef APP-PLUS
// 是否显示动画
showAnimation
:
{
type
:
Boolean
,
default
:
true
},
// #endif
// 是否展开
open
:
{
type
:
Boolean
,
default
:
false
},
// 缩略图
thumb
:
{
type
:
String
,
default
:
''
},
// 标题分隔线显示类型
titleBorder
:
{
type
:
String
,
default
:
'auto'
},
border
:
{
type
:
Boolean
,
default
:
true
},
showArrow
:
{
type
:
Boolean
,
default
:
true
}
},
data
()
{
// TODO 随机生生元素ID,解决百度小程序获取同一个元素位置信息的bug
const
elId
=
`Uni_
${
Math
.
ceil
(
Math
.
random
()
*
10
e5
).
toString
(
36
)}
`
return
{
isOpen
:
false
,
isheight
:
null
,
height
:
0
,
elId
,
nameSync
:
0
}
},
watch
:
{
open
(
val
)
{
this
.
isOpen
=
val
this
.
onClick
(
val
,
'init'
)
}
},
updated
(
e
)
{
this
.
$nextTick
(()
=>
{
this
.
init
(
true
)
})
},
created
()
{
this
.
collapse
=
this
.
getCollapse
()
this
.
oldHeight
=
0
this
.
onClick
(
this
.
open
,
'init'
)
},
// #ifndef VUE3
// TODO vue2
destroyed
()
{
if
(
this
.
__isUnmounted
)
return
this
.
uninstall
()
},
// #endif
// #ifdef VUE3
// TODO vue3
unmounted
()
{
this
.
__isUnmounted
=
true
this
.
uninstall
()
},
// #endif
mounted
()
{
if
(
!
this
.
collapse
)
return
if
(
this
.
name
!==
''
)
{
this
.
nameSync
=
this
.
name
}
else
{
this
.
nameSync
=
this
.
collapse
.
childrens
.
length
+
''
}
if
(
this
.
collapse
.
names
.
indexOf
(
this
.
nameSync
)
===
-
1
)
{
this
.
collapse
.
names
.
push
(
this
.
nameSync
)
}
else
{
console
.
warn
(
`name 值
${
this
.
nameSync
}
重复`
);
}
if
(
this
.
collapse
.
childrens
.
indexOf
(
this
)
===
-
1
)
{
this
.
collapse
.
childrens
.
push
(
this
)
}
this
.
init
()
},
methods
:
{
init
(
type
)
{
// #ifndef APP-NVUE
this
.
getCollapseHeight
(
type
)
// #endif
// #ifdef APP-NVUE
this
.
getNvueHwight
(
type
)
// #endif
},
uninstall
()
{
if
(
this
.
collapse
)
{
this
.
collapse
.
childrens
.
forEach
((
item
,
index
)
=>
{
if
(
item
===
this
)
{
this
.
collapse
.
childrens
.
splice
(
index
,
1
)
}
})
this
.
collapse
.
names
.
forEach
((
item
,
index
)
=>
{
if
(
item
===
this
.
nameSync
)
{
this
.
collapse
.
names
.
splice
(
index
,
1
)
}
})
}
},
onClick
(
isOpen
,
type
)
{
if
(
this
.
disabled
)
return
this
.
isOpen
=
isOpen
if
(
this
.
isOpen
&&
this
.
collapse
)
{
this
.
collapse
.
setAccordion
(
this
)
}
if
(
type
!==
'init'
)
{
this
.
collapse
.
onChange
(
isOpen
,
this
)
}
},
getCollapseHeight
(
type
,
index
=
0
)
{
const
views
=
uni
.
createSelectorQuery
().
in
(
this
)
views
.
select
(
`#
${
this
.
elId
}
`
)
.
fields
({
size
:
true
},
data
=>
{
// TODO 百度中可能获取不到节点信息 ,需要循环获取
if
(
index
>=
10
)
return
if
(
!
data
)
{
index
++
this
.
getCollapseHeight
(
false
,
index
)
return
}
// #ifdef APP-NVUE
this
.
height
=
data
.
height
+
1
// #endif
// #ifndef APP-NVUE
this
.
height
=
data
.
height
// #endif
this
.
isheight
=
true
if
(
type
)
return
this
.
onClick
(
this
.
isOpen
,
'init'
)
})
.
exec
()
},
getNvueHwight
(
type
)
{
const
result
=
dom
.
getComponentRect
(
this
.
$refs
[
'collapse--hook'
],
option
=>
{
if
(
option
&&
option
.
result
&&
option
.
size
)
{
// #ifdef APP-NVUE
this
.
height
=
option
.
size
.
height
+
1
// #endif
// #ifndef APP-NVUE
this
.
height
=
option
.
size
.
height
// #endif
this
.
isheight
=
true
if
(
type
)
return
this
.
onClick
(
this
.
open
,
'init'
)
}
})
},
/**
* 获取父元素实例
*/
getCollapse
(
name
=
'uniCollapse'
)
{
let
parent
=
this
.
$parent
;
let
parentName
=
parent
.
$options
.
name
;
while
(
parentName
!==
name
)
{
parent
=
parent
.
$parent
;
if
(
!
parent
)
return
false
;
parentName
=
parent
.
$options
.
name
;
}
return
parent
;
}
}
}
</
script
>
<
style
lang=
"scss"
>
.uni-collapse-item
{
/* #ifndef APP-NVUE */
box-sizing
:
border-box
;
/* #endif */
&
__title
{
/* #ifndef APP-NVUE */
display
:
flex
;
width
:
100%
;
box-sizing
:
border-box
;
/* #endif */
flex-direction
:
row
;
align-items
:
center
;
transition
:
border-bottom-color
.3s
;
// transition-property: border-bottom-color;
// transition-duration: 5s;
&
-wrap
{
width
:
100%
;
flex
:
1
;
}
&
-box
{
padding
:
0
15px
;
/* #ifndef APP-NVUE */
display
:
flex
;
width
:
100%
;
box-sizing
:
border-box
;
/* #endif */
flex-direction
:
row
;
justify-content
:
space-between
;
align-items
:
center
;
height
:
48px
;
line-height
:
48px
;
background-color
:
#fff
;
color
:
#303133
;
font-size
:
13px
;
font-weight
:
500
;
/* #ifdef H5 */
cursor
:
pointer
;
outline
:
none
;
/* #endif */
&
.is-disabled
{
.uni-collapse-item__title-text
{
color
:
#999
;
}
}
}
&
.uni-collapse-item-border
{
border-bottom
:
1px
solid
#ebeef5
;
}
&
.is-open
{
border-bottom-color
:
transparent
;
}
&
-img
{
height
:
22px
;
width
:
22px
;
margin-right
:
10px
;
}
&
-text
{
flex
:
1
;
font-size
:
14px
;
/* #ifndef APP-NVUE */
white-space
:
nowrap
;
color
:
inherit
;
/* #endif */
/* #ifdef APP-NVUE */
lines
:
1
;
/* #endif */
overflow
:
hidden
;
text-overflow
:
ellipsis
;
}
&
-arrow
{
/* #ifndef APP-NVUE */
display
:
flex
;
box-sizing
:
border-box
;
/* #endif */
align-items
:
center
;
justify-content
:
center
;
width
:
20px
;
height
:
20px
;
margin-right
:
10px
;
transform
:
rotate
(
0deg
);
&
-active
{
transform
:
rotate
(
-180deg
);
}
}
}
&
__wrap
{
/* #ifndef APP-NVUE */
will-change
:
height
;
box-sizing
:
border-box
;
/* #endif */
background-color
:
#fff
;
overflow
:
hidden
;
position
:
relative
;
height
:
0
;
&
.is--transition
{
// transition: all 0.3s;
transition-property
:
height
,
border-bottom-width
;
transition-duration
:
0
.3s
;
/* #ifndef APP-NVUE */
will-change
:
height
;
/* #endif */
}
&
-content
{
position
:
absolute
;
font-size
:
13px
;
color
:
#303133
;
// transition: height 0.3s;
border-bottom-color
:
transparent
;
border-bottom-style
:
solid
;
border-bottom-width
:
0
;
&
.uni-collapse-item--border
{
border-bottom-width
:
1px
;
border-bottom-color
:
red
;
border-bottom-color
:
#ebeef5
;
}
&
.open
{
position
:
relative
;
}
}
}
&
--animation
{
transition-property
:
transform
;
transition-duration
:
0
.3s
;
transition-timing-function
:
ease
;
}
}
</
style
>
uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue
0 → 100644
View file @
16d3b58f
<
template
>
<view
class=
"uni-collapse"
>
<slot
/>
</view>
</
template
>
<
script
>
/**
* Collapse 折叠面板
* @description 展示可以折叠 / 展开的内容区域
* @tutorial https://ext.dcloud.net.cn/plugin?id=23
* @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式,参数类型为string,否则为array)
* @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
* @event {Function} change 切换面板时触发,如果是手风琴模式,返回类型为string,否则为array
*/
export
default
{
name
:
'uniCollapse'
,
emits
:[
'change'
,
'activeItem'
,
'input'
,
'update:modelValue'
],
props
:
{
value
:
{
type
:
[
String
,
Array
,
Number
],
default
:
''
},
modelValue
:
{
type
:
[
String
,
Array
],
default
:
''
},
accordion
:
{
// 是否开启手风琴效果
type
:
[
Boolean
,
String
],
default
:
false
},
},
data
()
{
return
{}
},
computed
:
{
// TODO 兼容 vue2 和 vue3
dataValue
()
{
let
value
=
(
typeof
this
.
value
===
'string'
&&
this
.
value
===
''
)
||
(
Array
.
isArray
(
this
.
value
)
&&
this
.
value
.
length
===
0
)
let
modelValue
=
(
typeof
this
.
modelValue
===
'string'
&&
this
.
modelValue
===
''
)
||
(
Array
.
isArray
(
this
.
modelValue
)
&&
this
.
modelValue
.
length
===
0
)
if
(
value
)
{
return
this
.
modelValue
}
if
(
modelValue
)
{
return
this
.
value
}
return
this
.
value
}
},
watch
:
{
dataValue
(
val
)
{
this
.
setOpen
(
val
)
}
},
created
()
{
this
.
childrens
=
[]
this
.
names
=
[]
},
mounted
()
{
this
.
$nextTick
(()
=>
{
this
.
setOpen
(
this
.
dataValue
)
})
},
methods
:
{
setOpen
(
val
)
{
let
str
=
typeof
val
===
'string'
let
arr
=
Array
.
isArray
(
val
)
this
.
childrens
.
forEach
((
vm
,
index
)
=>
{
if
(
str
)
{
if
(
val
===
vm
.
nameSync
)
{
if
(
!
this
.
accordion
)
{
console
.
warn
(
'accordion 属性为 false ,v-model 类型应该为 array'
)
return
}
vm
.
isOpen
=
true
}
}
if
(
arr
)
{
val
.
forEach
(
v
=>
{
if
(
v
===
vm
.
nameSync
)
{
if
(
this
.
accordion
)
{
console
.
warn
(
'accordion 属性为 true ,v-model 类型应该为 string'
)
return
}
vm
.
isOpen
=
true
}
})
}
})
this
.
emit
(
val
)
},
setAccordion
(
self
)
{
if
(
!
this
.
accordion
)
return
this
.
childrens
.
forEach
((
vm
,
index
)
=>
{
if
(
self
!==
vm
)
{
vm
.
isOpen
=
false
}
})
},
resize
()
{
this
.
childrens
.
forEach
((
vm
,
index
)
=>
{
// #ifndef APP-NVUE
vm
.
getCollapseHeight
()
// #endif
// #ifdef APP-NVUE
vm
.
getNvueHwight
()
// #endif
})
},
onChange
(
isOpen
,
self
)
{
let
activeItem
=
[]
if
(
this
.
accordion
)
{
activeItem
=
isOpen
?
self
.
nameSync
:
''
}
else
{
this
.
childrens
.
forEach
((
vm
,
index
)
=>
{
if
(
vm
.
isOpen
)
{
activeItem
.
push
(
vm
.
nameSync
)
}
})
}
this
.
$emit
(
'change'
,
activeItem
)
this
.
emit
(
activeItem
)
},
emit
(
val
){
this
.
$emit
(
'input'
,
val
)
this
.
$emit
(
'update:modelValue'
,
val
)
}
}
}
</
script
>
<
style
lang=
"scss"
>
.uni-collapse
{
/* #ifndef APP-NVUE */
width
:
100%
;
display
:
flex
;
/* #endif */
/* #ifdef APP-NVUE */
flex
:
1
;
/* #endif */
flex-direction
:
column
;
background-color
:
#fff
;
}
</
style
>
uni_modules/uni-collapse/package.json
0 → 100644
View file @
16d3b58f
{
"id"
:
"uni-collapse"
,
"displayName"
:
"uni-collapse 折叠面板"
,
"version"
:
"1.4.3"
,
"description"
:
"Collapse 组件,可以折叠 / 展开的内容区域。"
,
"keywords"
:
[
"uni-ui"
,
"折叠"
,
"折叠面板"
,
"手风琴"
],
"repository"
:
"https://github.com/dcloudio/uni-ui"
,
"engines"
:
{
"HBuilderX"
:
""
},
"directories"
:
{
"example"
:
"../../temps/example_temps"
},
"dcloudext"
:
{
"category"
:
[
"前端组件"
,
"通用组件"
],
"sale"
:
{
"regular"
:
{
"price"
:
"0.00"
},
"sourcecode"
:
{
"price"
:
"0.00"
}
},
"contact"
:
{
"qq"
:
""
},
"declaration"
:
{
"ads"
:
"无"
,
"data"
:
"无"
,
"permissions"
:
"无"
},
"npmurl"
:
"https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules"
:
{
"dependencies"
:
[
"uni-scss"
,
"uni-icons"
],
"encrypt"
:
[],
"platforms"
:
{
"cloud"
:
{
"tcb"
:
"y"
,
"aliyun"
:
"y"
},
"client"
:
{
"App"
:
{
"app-vue"
:
"y"
,
"app-nvue"
:
"y"
},
"H5-mobile"
:
{
"Safari"
:
"y"
,
"Android Browser"
:
"y"
,
"微信浏览器(Android)"
:
"y"
,
"QQ浏览器(Android)"
:
"y"
},
"H5-pc"
:
{
"Chrome"
:
"y"
,
"IE"
:
"y"
,
"Edge"
:
"y"
,
"Firefox"
:
"y"
,
"Safari"
:
"y"
},
"小程序"
:
{
"微信"
:
"y"
,
"阿里"
:
"y"
,
"百度"
:
"y"
,
"字节跳动"
:
"y"
,
"QQ"
:
"y"
},
"快应用"
:
{
"华为"
:
"u"
,
"联盟"
:
"u"
},
"Vue"
:
{
"vue2"
:
"y"
,
"vue3"
:
"y"
}
}
}
}
}
uni_modules/uni-collapse/readme.md
0 → 100644
View file @
16d3b58f
## Collapse 折叠面板
> **组件名:uni-collapse**
> 代码块: `uCollapse`
> 关联组件:`uni-collapse-item`、`uni-icons`。
折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用,折叠不重要的内容,显示重要内容。点击可以展开折叠部分。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-collapse)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
uni_modules/uni-datetime-picker/changelog.md
0 → 100644
View file @
16d3b58f
## 2.1.1(2021-08-24)
-
新增 支持国际化
-
优化 范围选择器在 pc 端过宽的问题
## 2.1.0(2021-08-09)
-
新增 适配 vue3
## 2.0.19(2021-08-09)
-
新增 支持作为 uni-forms 子组件相关功能
-
修复 在 uni-forms 中使用时,选择时间报 NAN 错误的 bug
## 2.0.18(2021-08-05)
-
修复 type 属性动态赋值无效的 bug
-
修复 ‘确认’按钮被 tabbar 遮盖 bug
-
修复 组件未赋值时范围选左、右日历相同的 bug
## 2.0.17(2021-08-04)
-
修复 范围选未正确显示当前值的 bug
-
修复 h5 平台(移动端)报错 'cale' of undefined 的 bug
## 2.0.16(2021-07-21)
-
新增 return-type 属性支持返回 date 日期对象
## 2.0.15(2021-07-14)
-
修复 单选日期类型,初始赋值后不在当前日历的 bug
-
新增 clearIcon 属性,显示框的清空按钮可配置显示隐藏(仅 pc 有效)
-
优化 移动端移除显示框的清空按钮,无实际用途
## 2.0.14(2021-07-14)
-
修复 组件赋值为空,界面未更新的 bug
-
修复 start 和 end 不能动态赋值的 bug
-
修复 范围选类型,用户选择后再次选择右侧日历(结束日期)显示不正确的 bug
## 2.0.13(2021-07-08)
-
修复 范围选择不能动态赋值的 bug
## 2.0.12(2021-07-08)
-
修复 范围选择的初始时间在一个月内时,造成无法选择的bug
## 2.0.11(2021-07-08)
-
优化 弹出层在超出视窗边缘定位不准确的问题
## 2.0.10(2021-07-08)
-
修复 范围起始点样式的背景色与今日样式的字体前景色融合,导致日期字体看不清的 bug
-
优化 弹出层在超出视窗边缘被遮盖的问题
## 2.0.9(2021-07-07)
-
新增 maskClick 事件
-
修复 特殊情况日历 rpx 布局错误的 bug,rpx -> px
-
修复 范围选择时清空返回值不合理的bug,
[
'', ''
]
->
[]
## 2.0.8(2021-07-07)
-
新增 日期时间显示框支持插槽
## 2.0.7(2021-07-01)
-
优化 添加 uni-icons 依赖
## 2.0.6(2021-05-22)
-
修复 图标在小程序上不显示的 bug
-
优化 重命名引用组件,避免潜在组件命名冲突
## 2.0.5(2021-05-20)
-
优化 代码目录扁平化
## 2.0.4(2021-05-12)
-
新增 组件示例地址
## 2.0.3(2021-05-10)
-
修复 ios 下不识别 '-' 日期格式的 bug
-
优化 pc 下弹出层添加边框和阴影
## 2.0.2(2021-05-08)
-
修复 在 admin 中获取弹出层定位错误的bug
## 2.0.1(2021-05-08)
-
修复 type 属性向下兼容,默认值从 date 变更为 datetime
## 2.0.0(2021-04-30)
-
支持日历形式的日期+时间的范围选择
> 注意:此版本不向后兼容,不再支持单独时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker)
## 1.0.6(2021-03-18)
-
新增 hide-second 属性,时间支持仅选择时、分
-
修复 选择跟显示的日期不一样的 bug
-
修复 chang事件触发2次的 bug
-
修复 分、秒 end 范围错误的 bug
-
优化 更好的 nvue 适配
uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
0 → 100644
View file @
16d3b58f
<
template
>
<view
class=
"uni-calendar-item__weeks-box"
:class=
"
{
'uni-calendar-item--disable':weeks.disable,
'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked-x':weeks.afterMultiple,
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
<view
class=
"uni-calendar-item__weeks-box-item"
:class=
"
{
'uni-calendar-item--isDay-text': weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate
&&
!weeks.isDay,
'uni-calendar-item--checked-range-text': checkHover,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">
<text
v-if=
"selected&&weeks.extraInfo"
class=
"uni-calendar-item__weeks-box-circle"
></text>
<text
class=
"uni-calendar-item__weeks-box-text"
>
{{
weeks
.
date
}}
</text>
<!--
<text
v-if=
"!lunar&&!weeks.extraInfo && weeks.isDay"
class=
"uni-calendar-item__weeks-lunar-text"
>
今天
</text>
<text
v-if=
"lunar&&!weeks.extraInfo"
class=
"uni-calendar-item__weeks-lunar-text"
>
{{
weeks
.
isDay
?
'今天'
:
(
weeks
.
lunar
.
IDayCn
===
'初一'
?
weeks
.
lunar
.
IMonthCn
:
weeks
.
lunar
.
IDayCn
)
}}
</text>
-->
<!--
<text
v-if=
"weeks.extraInfo&&weeks.extraInfo.info"
class=
"uni-calendar-item__weeks-lunar-text"
>
{{
weeks
.
extraInfo
.
info
}}
</text>
-->
</view>
</view>
</
template
>
<
script
>
export
default
{
props
:
{
weeks
:
{
type
:
Object
,
default
()
{
return
{}
}
},
calendar
:
{
type
:
Object
,
default
:
()
=>
{
return
{}
}
},
selected
:
{
type
:
Array
,
default
:
()
=>
{
return
[]
}
},
lunar
:
{
type
:
Boolean
,
default
:
false
},
checkHover
:
{
type
:
Boolean
,
default
:
false
}
},
methods
:
{
choiceDate
(
weeks
)
{
this
.
$emit
(
'change'
,
weeks
)
},
handleMousemove
(
weeks
)
{
this
.
$emit
(
'handleMouse'
,
weeks
)
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.uni-calendar-item__weeks-box
{
flex
:
1
;
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
column
;
justify-content
:
center
;
align-items
:
center
;
margin
:
3px
0
;
}
.uni-calendar-item__weeks-box-text
{
font-size
:
$uni-font-size-base
;
// color: $uni-text-color;
}
.uni-calendar-item__weeks-lunar-text
{
font-size
:
$uni-font-size-sm
;
color
:
$uni-text-color
;
}
.uni-calendar-item__weeks-box-item
{
position
:
relative
;
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
column
;
justify-content
:
center
;
align-items
:
center
;
width
:
43px
;
height
:
43px
;
/* #ifdef H5 */
cursor
:
pointer
;
/* #endif */
}
.uni-calendar-item__weeks-box-circle
{
position
:
absolute
;
top
:
5px
;
right
:
5px
;
width
:
8px
;
height
:
8px
;
border-radius
:
8px
;
background-color
:
$uni-color-error
;
}
.uni-calendar-item__weeks-box
.uni-calendar-item--disable
{
// background-color: rgba(249, 249, 249, $uni-opacity-disabled);
color
:
$uni-text-color-disable
;
cursor
:
default
;
}
.uni-calendar-item--isDay-text
{
color
:
$uni-color-primary
!
important
;
}
.uni-calendar-item--isDay
{
background-color
:
$uni-color-primary
;
opacity
:
0
.8
;
color
:
#fff
;
}
.uni-calendar-item--extra
{
color
:
$uni-color-error
;
opacity
:
0
.8
;
}
.uni-calendar-item--checked
{
background-color
:
$uni-color-primary
;
// border-radius: 50%;
box-sizing
:
border-box
;
border
:
6px
solid
#f2f6fc
;
color
:
#fff
;
opacity
:
0
.8
;
}
.uni-calendar-item--multiple
.uni-calendar-item--checked-range-text
{
color
:
#333
;
}
.uni-calendar-item--multiple
{
background-color
:
#f2f6fc
;
// color: #fff;
opacity
:
0
.8
;
}
.uni-calendar-item--multiple
.uni-calendar-item--before-checked
{
background-color
:
#409eff
;
color
:
#fff
!
important
;
// border-radius: 50%;
box-sizing
:
border-box
;
border
:
6px
solid
#f2f6fc
;
}
.uni-calendar-item--multiple
.uni-calendar-item--after-checked
{
background-color
:
#409eff
;;
color
:
#fff
!
important
;
// border-radius: 50%;
box-sizing
:
border-box
;
border
:
6px
solid
#f2f6fc
;
}
.uni-calendar-item--before-checked-x
{
// border-top-left-radius: 25px;
// border-bottom-left-radius: 25px;
background-color
:
#f2f6fc
;
}
.uni-calendar-item--after-checked-x
{
// border-top-right-radius: 25px;
// border-bottom-right-radius: 25px;
background-color
:
#f2f6fc
;
}
</
style
>
uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.js
0 → 100644
View file @
16d3b58f
/**
* @1900-2100区间内的公历、农历互转
* @charset UTF-8
* @github https://github.com/jjonline/calendar.js
* @Author Jea杨(JJonline@JJonline.Cn)
* @Time 2014-7-21
* @Time 2016-8-13 Fixed 2033hex、Attribution Annals
* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
* @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
* @Version 1.0.3
* @公历转农历:calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
* @农历转公历:calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
*/
/* eslint-disable */
var
calendar
=
{
/**
* 农历1900-2100的润大小信息表
* @Array Of Property
* @return Hex
*/
lunarInfo
:
[
0x04bd8
,
0x04ae0
,
0x0a570
,
0x054d5
,
0x0d260
,
0x0d950
,
0x16554
,
0x056a0
,
0x09ad0
,
0x055d2
,
// 1900-1909
0x04ae0
,
0x0a5b6
,
0x0a4d0
,
0x0d250
,
0x1d255
,
0x0b540
,
0x0d6a0
,
0x0ada2
,
0x095b0
,
0x14977
,
// 1910-1919
0x04970
,
0x0a4b0
,
0x0b4b5
,
0x06a50
,
0x06d40
,
0x1ab54
,
0x02b60
,
0x09570
,
0x052f2
,
0x04970
,
// 1920-1929
0x06566
,
0x0d4a0
,
0x0ea50
,
0x06e95
,
0x05ad0
,
0x02b60
,
0x186e3
,
0x092e0
,
0x1c8d7
,
0x0c950
,
// 1930-1939
0x0d4a0
,
0x1d8a6
,
0x0b550
,
0x056a0
,
0x1a5b4
,
0x025d0
,
0x092d0
,
0x0d2b2
,
0x0a950
,
0x0b557
,
// 1940-1949
0x06ca0
,
0x0b550
,
0x15355
,
0x04da0
,
0x0a5b0
,
0x14573
,
0x052b0
,
0x0a9a8
,
0x0e950
,
0x06aa0
,
// 1950-1959
0x0aea6
,
0x0ab50
,
0x04b60
,
0x0aae4
,
0x0a570
,
0x05260
,
0x0f263
,
0x0d950
,
0x05b57
,
0x056a0
,
// 1960-1969
0x096d0
,
0x04dd5
,
0x04ad0
,
0x0a4d0
,
0x0d4d4
,
0x0d250
,
0x0d558
,
0x0b540
,
0x0b6a0
,
0x195a6
,
// 1970-1979
0x095b0
,
0x049b0
,
0x0a974
,
0x0a4b0
,
0x0b27a
,
0x06a50
,
0x06d40
,
0x0af46
,
0x0ab60
,
0x09570
,
// 1980-1989
0x04af5
,
0x04970
,
0x064b0
,
0x074a3
,
0x0ea50
,
0x06b58
,
0x05ac0
,
0x0ab60
,
0x096d5
,
0x092e0
,
// 1990-1999
0x0c960
,
0x0d954
,
0x0d4a0
,
0x0da50
,
0x07552
,
0x056a0
,
0x0abb7
,
0x025d0
,
0x092d0
,
0x0cab5
,
// 2000-2009
0x0a950
,
0x0b4a0
,
0x0baa4
,
0x0ad50
,
0x055d9
,
0x04ba0
,
0x0a5b0
,
0x15176
,
0x052b0
,
0x0a930
,
// 2010-2019
0x07954
,
0x06aa0
,
0x0ad50
,
0x05b52
,
0x04b60
,
0x0a6e6
,
0x0a4e0
,
0x0d260
,
0x0ea65
,
0x0d530
,
// 2020-2029
0x05aa0
,
0x076a3
,
0x096d0
,
0x04afb
,
0x04ad0
,
0x0a4d0
,
0x1d0b6
,
0x0d250
,
0x0d520
,
0x0dd45
,
// 2030-2039
0x0b5a0
,
0x056d0
,
0x055b2
,
0x049b0
,
0x0a577
,
0x0a4b0
,
0x0aa50
,
0x1b255
,
0x06d20
,
0x0ada0
,
// 2040-2049
/** Add By JJonline@JJonline.Cn**/
0x14b63
,
0x09370
,
0x049f8
,
0x04970
,
0x064b0
,
0x168a6
,
0x0ea50
,
0x06b20
,
0x1a6c4
,
0x0aae0
,
// 2050-2059
0x0a2e0
,
0x0d2e3
,
0x0c960
,
0x0d557
,
0x0d4a0
,
0x0da50
,
0x05d55
,
0x056a0
,
0x0a6d0
,
0x055d4
,
// 2060-2069
0x052d0
,
0x0a9b8
,
0x0a950
,
0x0b4a0
,
0x0b6a6
,
0x0ad50
,
0x055a0
,
0x0aba4
,
0x0a5b0
,
0x052b0
,
// 2070-2079
0x0b273
,
0x06930
,
0x07337
,
0x06aa0
,
0x0ad50
,
0x14b55
,
0x04b60
,
0x0a570
,
0x054e4
,
0x0d160
,
// 2080-2089
0x0e968
,
0x0d520
,
0x0daa0
,
0x16aa6
,
0x056d0
,
0x04ae0
,
0x0a9d4
,
0x0a2d0
,
0x0d150
,
0x0f252
,
// 2090-2099
0x0d520
],
// 2100
/**
* 公历每个月份的天数普通表
* @Array Of Property
* @return Number
*/
solarMonth
:
[
31
,
28
,
31
,
30
,
31
,
30
,
31
,
31
,
30
,
31
,
30
,
31
],
/**
* 天干地支之天干速查表
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
* @return Cn string
*/
Gan
:
[
'
\
u7532'
,
'
\
u4e59'
,
'
\
u4e19'
,
'
\
u4e01'
,
'
\
u620a'
,
'
\
u5df1'
,
'
\
u5e9a'
,
'
\
u8f9b'
,
'
\
u58ec'
,
'
\
u7678'
],
/**
* 天干地支之地支速查表
* @Array Of Property
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
* @return Cn string
*/
Zhi
:
[
'
\
u5b50'
,
'
\
u4e11'
,
'
\
u5bc5'
,
'
\
u536f'
,
'
\
u8fb0'
,
'
\
u5df3'
,
'
\
u5348'
,
'
\
u672a'
,
'
\
u7533'
,
'
\
u9149'
,
'
\
u620c'
,
'
\
u4ea5'
],
/**
* 天干地支之地支速查表<=>生肖
* @Array Of Property
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
* @return Cn string
*/
Animals
:
[
'
\
u9f20'
,
'
\
u725b'
,
'
\
u864e'
,
'
\
u5154'
,
'
\
u9f99'
,
'
\
u86c7'
,
'
\
u9a6c'
,
'
\
u7f8a'
,
'
\
u7334'
,
'
\
u9e21'
,
'
\
u72d7'
,
'
\
u732a'
],
/**
* 24节气速查表
* @Array Of Property
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
* @return Cn string
*/
solarTerm
:
[
'
\
u5c0f
\
u5bd2'
,
'
\
u5927
\
u5bd2'
,
'
\
u7acb
\
u6625'
,
'
\
u96e8
\
u6c34'
,
'
\
u60ca
\
u86f0'
,
'
\
u6625
\
u5206'
,
'
\
u6e05
\
u660e'
,
'
\
u8c37
\
u96e8'
,
'
\
u7acb
\
u590f'
,
'
\
u5c0f
\
u6ee1'
,
'
\
u8292
\
u79cd'
,
'
\
u590f
\
u81f3'
,
'
\
u5c0f
\
u6691'
,
'
\
u5927
\
u6691'
,
'
\
u7acb
\
u79cb'
,
'
\
u5904
\
u6691'
,
'
\
u767d
\
u9732'
,
'
\
u79cb
\
u5206'
,
'
\
u5bd2
\
u9732'
,
'
\
u971c
\
u964d'
,
'
\
u7acb
\
u51ac'
,
'
\
u5c0f
\
u96ea'
,
'
\
u5927
\
u96ea'
,
'
\
u51ac
\
u81f3'
],
/**
* 1900-2100各年的24节气日期速查表
* @Array Of Property
* @return 0x string For splice
*/
sTermInfo
:
[
'9778397bd097c36b0b6fc9274c91aa'
,
'97b6b97bd19801ec9210c965cc920e'
,
'97bcf97c3598082c95f8c965cc920f'
,
'97bd0b06bdb0722c965ce1cfcc920f'
,
'b027097bd097c36b0b6fc9274c91aa'
,
'97b6b97bd19801ec9210c965cc920e'
,
'97bcf97c359801ec95f8c965cc920f'
,
'97bd0b06bdb0722c965ce1cfcc920f'
,
'b027097bd097c36b0b6fc9274c91aa'
,
'97b6b97bd19801ec9210c965cc920e'
,
'97bcf97c359801ec95f8c965cc920f'
,
'97bd0b06bdb0722c965ce1cfcc920f'
,
'b027097bd097c36b0b6fc9274c91aa'
,
'9778397bd19801ec9210c965cc920e'
,
'97b6b97bd19801ec95f8c965cc920f'
,
'97bd09801d98082c95f8e1cfcc920f'
,
'97bd097bd097c36b0b6fc9210c8dc2'
,
'9778397bd197c36c9210c9274c91aa'
,
'97b6b97bd19801ec95f8c965cc920e'
,
'97bd09801d98082c95f8e1cfcc920f'
,
'97bd097bd097c36b0b6fc9210c8dc2'
,
'9778397bd097c36c9210c9274c91aa'
,
'97b6b97bd19801ec95f8c965cc920e'
,
'97bcf97c3598082c95f8e1cfcc920f'
,
'97bd097bd097c36b0b6fc9210c8dc2'
,
'9778397bd097c36c9210c9274c91aa'
,
'97b6b97bd19801ec9210c965cc920e'
,
'97bcf97c3598082c95f8c965cc920f'
,
'97bd097bd097c35b0b6fc920fb0722'
,
'9778397bd097c36b0b6fc9274c91aa'
,
'97b6b97bd19801ec9210c965cc920e'
,
'97bcf97c3598082c95f8c965cc920f'
,
'97bd097bd097c35b0b6fc920fb0722'
,
'9778397bd097c36b0b6fc9274c91aa'
,
'97b6b97bd19801ec9210c965cc920e'
,
'97bcf97c359801ec95f8c965cc920f'
,
'97bd097bd097c35b0b6fc920fb0722'
,
'9778397bd097c36b0b6fc9274c91aa'
,
'97b6b97bd19801ec9210c965cc920e'
,
'97bcf97c359801ec95f8c965cc920f'
,
'97bd097bd097c35b0b6fc920fb0722'
,
'9778397bd097c36b0b6fc9274c91aa'
,
'97b6b97bd19801ec9210c965cc920e'
,
'97bcf97c359801ec95f8c965cc920f'
,
'97bd097bd07f595b0b6fc920fb0722'
,
'9778397bd097c36b0b6fc9210c8dc2'
,
'9778397bd19801ec9210c9274c920e'
,
'97b6b97bd19801ec95f8c965cc920f'
,
'97bd07f5307f595b0b0bc920fb0722'
,
'7f0e397bd097c36b0b6fc9210c8dc2'
,
'9778397bd097c36c9210c9274c920e'
,
'97b6b97bd19801ec95f8c965cc920f'
,
'97bd07f5307f595b0b0bc920fb0722'
,
'7f0e397bd097c36b0b6fc9210c8dc2'
,
'9778397bd097c36c9210c9274c91aa'
,
'97b6b97bd19801ec9210c965cc920e'
,
'97bd07f1487f595b0b0bc920fb0722'
,
'7f0e397bd097c36b0b6fc9210c8dc2'
,
'9778397bd097c36b0b6fc9274c91aa'
,
'97b6b97bd19801ec9210c965cc920e'
,
'97bcf7f1487f595b0b0bb0b6fb0722'
,
'7f0e397bd097c35b0b6fc920fb0722'
,
'9778397bd097c36b0b6fc9274c91aa'
,
'97b6b97bd19801ec9210c965cc920e'
,
'97bcf7f1487f595b0b0bb0b6fb0722'
,
'7f0e397bd097c35b0b6fc920fb0722'
,
'9778397bd097c36b0b6fc9274c91aa'
,
'97b6b97bd19801ec9210c965cc920e'
,
'97bcf7f1487f531b0b0bb0b6fb0722'
,
'7f0e397bd097c35b0b6fc920fb0722'
,
'9778397bd097c36b0b6fc9274c91aa'
,
'97b6b97bd19801ec9210c965cc920e'
,
'97bcf7f1487f531b0b0bb0b6fb0722'
,
'7f0e397bd07f595b0b6fc920fb0722'
,
'9778397bd097c36b0b6fc9274c91aa'
,
'97b6b97bd19801ec9210c9274c920e'
,
'97bcf7f0e47f531b0b0bb0b6fb0722'
,
'7f0e397bd07f595b0b0bc920fb0722'
,
'9778397bd097c36b0b6fc9210c91aa'
,
'97b6b97bd197c36c9210c9274c920e'
,
'97bcf7f0e47f531b0b0bb0b6fb0722'
,
'7f0e397bd07f595b0b0bc920fb0722'
,
'9778397bd097c36b0b6fc9210c8dc2'
,
'9778397bd097c36c9210c9274c920e'
,
'97b6b7f0e47f531b0723b0b6fb0722'
,
'7f0e37f5307f595b0b0bc920fb0722'
,
'7f0e397bd097c36b0b6fc9210c8dc2'
,
'9778397bd097c36b0b70c9274c91aa'
,
'97b6b7f0e47f531b0723b0b6fb0721'
,
'7f0e37f1487f595b0b0bb0b6fb0722'
,
'7f0e397bd097c35b0b6fc9210c8dc2'
,
'9778397bd097c36b0b6fc9274c91aa'
,
'97b6b7f0e47f531b0723b0b6fb0721'
,
'7f0e27f1487f595b0b0bb0b6fb0722'
,
'7f0e397bd097c35b0b6fc920fb0722'
,
'9778397bd097c36b0b6fc9274c91aa'
,
'97b6b7f0e47f531b0723b0b6fb0721'
,
'7f0e27f1487f531b0b0bb0b6fb0722'
,
'7f0e397bd097c35b0b6fc920fb0722'
,
'9778397bd097c36b0b6fc9274c91aa'
,
'97b6b7f0e47f531b0723b0b6fb0721'
,
'7f0e27f1487f531b0b0bb0b6fb0722'
,
'7f0e397bd097c35b0b6fc920fb0722'
,
'9778397bd097c36b0b6fc9274c91aa'
,
'97b6b7f0e47f531b0723b0b6fb0721'
,
'7f0e27f1487f531b0b0bb0b6fb0722'
,
'7f0e397bd07f595b0b0bc920fb0722'
,
'9778397bd097c36b0b6fc9274c91aa'
,
'97b6b7f0e47f531b0723b0787b0721'
,
'7f0e27f0e47f531b0b0bb0b6fb0722'
,
'7f0e397bd07f595b0b0bc920fb0722'
,
'9778397bd097c36b0b6fc9210c91aa'
,
'97b6b7f0e47f149b0723b0787b0721'
,
'7f0e27f0e47f531b0723b0b6fb0722'
,
'7f0e397bd07f595b0b0bc920fb0722'
,
'9778397bd097c36b0b6fc9210c8dc2'
,
'977837f0e37f149b0723b0787b0721'
,
'7f07e7f0e47f531b0723b0b6fb0722'
,
'7f0e37f5307f595b0b0bc920fb0722'
,
'7f0e397bd097c35b0b6fc9210c8dc2'
,
'977837f0e37f14998082b0787b0721'
,
'7f07e7f0e47f531b0723b0b6fb0721'
,
'7f0e37f1487f595b0b0bb0b6fb0722'
,
'7f0e397bd097c35b0b6fc9210c8dc2'
,
'977837f0e37f14998082b0787b06bd'
,
'7f07e7f0e47f531b0723b0b6fb0721'
,
'7f0e27f1487f531b0b0bb0b6fb0722'
,
'7f0e397bd097c35b0b6fc920fb0722'
,
'977837f0e37f14998082b0787b06bd'
,
'7f07e7f0e47f531b0723b0b6fb0721'
,
'7f0e27f1487f531b0b0bb0b6fb0722'
,
'7f0e397bd097c35b0b6fc920fb0722'
,
'977837f0e37f14998082b0787b06bd'
,
'7f07e7f0e47f531b0723b0b6fb0721'
,
'7f0e27f1487f531b0b0bb0b6fb0722'
,
'7f0e397bd07f595b0b0bc920fb0722'
,
'977837f0e37f14998082b0787b06bd'
,
'7f07e7f0e47f531b0723b0b6fb0721'
,
'7f0e27f1487f531b0b0bb0b6fb0722'
,
'7f0e397bd07f595b0b0bc920fb0722'
,
'977837f0e37f14998082b0787b06bd'
,
'7f07e7f0e47f149b0723b0787b0721'
,
'7f0e27f0e47f531b0b0bb0b6fb0722'
,
'7f0e397bd07f595b0b0bc920fb0722'
,
'977837f0e37f14998082b0723b06bd'
,
'7f07e7f0e37f149b0723b0787b0721'
,
'7f0e27f0e47f531b0723b0b6fb0722'
,
'7f0e397bd07f595b0b0bc920fb0722'
,
'977837f0e37f14898082b0723b02d5'
,
'7ec967f0e37f14998082b0787b0721'
,
'7f07e7f0e47f531b0723b0b6fb0722'
,
'7f0e37f1487f595b0b0bb0b6fb0722'
,
'7f0e37f0e37f14898082b0723b02d5'
,
'7ec967f0e37f14998082b0787b0721'
,
'7f07e7f0e47f531b0723b0b6fb0722'
,
'7f0e37f1487f531b0b0bb0b6fb0722'
,
'7f0e37f0e37f14898082b0723b02d5'
,
'7ec967f0e37f14998082b0787b06bd'
,
'7f07e7f0e47f531b0723b0b6fb0721'
,
'7f0e37f1487f531b0b0bb0b6fb0722'
,
'7f0e37f0e37f14898082b072297c35'
,
'7ec967f0e37f14998082b0787b06bd'
,
'7f07e7f0e47f531b0723b0b6fb0721'
,
'7f0e27f1487f531b0b0bb0b6fb0722'
,
'7f0e37f0e37f14898082b072297c35'
,
'7ec967f0e37f14998082b0787b06bd'
,
'7f07e7f0e47f531b0723b0b6fb0721'
,
'7f0e27f1487f531b0b0bb0b6fb0722'
,
'7f0e37f0e366aa89801eb072297c35'
,
'7ec967f0e37f14998082b0787b06bd'
,
'7f07e7f0e47f149b0723b0787b0721'
,
'7f0e27f1487f531b0b0bb0b6fb0722'
,
'7f0e37f0e366aa89801eb072297c35'
,
'7ec967f0e37f14998082b0723b06bd'
,
'7f07e7f0e47f149b0723b0787b0721'
,
'7f0e27f0e47f531b0723b0b6fb0722'
,
'7f0e37f0e366aa89801eb072297c35'
,
'7ec967f0e37f14998082b0723b06bd'
,
'7f07e7f0e37f14998083b0787b0721'
,
'7f0e27f0e47f531b0723b0b6fb0722'
,
'7f0e37f0e366aa89801eb072297c35'
,
'7ec967f0e37f14898082b0723b02d5'
,
'7f07e7f0e37f14998082b0787b0721'
,
'7f07e7f0e47f531b0723b0b6fb0722'
,
'7f0e36665b66aa89801e9808297c35'
,
'665f67f0e37f14898082b0723b02d5'
,
'7ec967f0e37f14998082b0787b0721'
,
'7f07e7f0e47f531b0723b0b6fb0722'
,
'7f0e36665b66a449801e9808297c35'
,
'665f67f0e37f14898082b0723b02d5'
,
'7ec967f0e37f14998082b0787b06bd'
,
'7f07e7f0e47f531b0723b0b6fb0721'
,
'7f0e36665b66a449801e9808297c35'
,
'665f67f0e37f14898082b072297c35'
,
'7ec967f0e37f14998082b0787b06bd'
,
'7f07e7f0e47f531b0723b0b6fb0721'
,
'7f0e26665b66a449801e9808297c35'
,
'665f67f0e37f1489801eb072297c35'
,
'7ec967f0e37f14998082b0787b06bd'
,
'7f07e7f0e47f531b0723b0b6fb0721'
,
'7f0e27f1487f531b0b0bb0b6fb0722'
],
/**
* 数字转中文速查表
* @Array Of Property
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
* @return Cn string
*/
nStr1
:
[
'
\
u65e5'
,
'
\
u4e00'
,
'
\
u4e8c'
,
'
\
u4e09'
,
'
\
u56db'
,
'
\
u4e94'
,
'
\
u516d'
,
'
\
u4e03'
,
'
\
u516b'
,
'
\
u4e5d'
,
'
\
u5341'
],
/**
* 日期转农历称呼速查表
* @Array Of Property
* @trans ['初','十','廿','卅']
* @return Cn string
*/
nStr2
:
[
'
\
u521d'
,
'
\
u5341'
,
'
\
u5eff'
,
'
\
u5345'
],
/**
* 月份转农历称呼速查表
* @Array Of Property
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
* @return Cn string
*/
nStr3
:
[
'
\
u6b63'
,
'
\
u4e8c'
,
'
\
u4e09'
,
'
\
u56db'
,
'
\
u4e94'
,
'
\
u516d'
,
'
\
u4e03'
,
'
\
u516b'
,
'
\
u4e5d'
,
'
\
u5341'
,
'
\
u51ac'
,
'
\
u814a'
],
/**
* 返回农历y年一整年的总天数
* @param lunar Year
* @return Number
* @eg:var count = calendar.lYearDays(1987) ;//count=387
*/
lYearDays
:
function
(
y
)
{
var
i
;
var
sum
=
348
for
(
i
=
0x8000
;
i
>
0x8
;
i
>>=
1
)
{
sum
+=
(
this
.
lunarInfo
[
y
-
1900
]
&
i
)
?
1
:
0
}
return
(
sum
+
this
.
leapDays
(
y
))
},
/**
* 返回农历y年闰月是哪个月;若y年没有闰月 则返回0
* @param lunar Year
* @return Number (0-12)
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
*/
leapMonth
:
function
(
y
)
{
// 闰字编码 \u95f0
return
(
this
.
lunarInfo
[
y
-
1900
]
&
0xf
)
},
/**
* 返回农历y年闰月的天数 若该年没有闰月则返回0
* @param lunar Year
* @return Number (0、29、30)
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
*/
leapDays
:
function
(
y
)
{
if
(
this
.
leapMonth
(
y
))
{
return
((
this
.
lunarInfo
[
y
-
1900
]
&
0x10000
)
?
30
:
29
)
}
return
(
0
)
},
/**
* 返回农历y年m月(非闰月)的总天数,计算m为闰月时的天数请使用leapDays方法
* @param lunar Year
* @return Number (-1、29、30)
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
*/
monthDays
:
function
(
y
,
m
)
{
if
(
m
>
12
||
m
<
1
)
{
return
-
1
}
// 月份参数从1至12,参数错误返回-1
return
((
this
.
lunarInfo
[
y
-
1900
]
&
(
0x10000
>>
m
))
?
30
:
29
)
},
/**
* 返回公历(!)y年m月的天数
* @param solar Year
* @return Number (-1、28、29、30、31)
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
*/
solarDays
:
function
(
y
,
m
)
{
if
(
m
>
12
||
m
<
1
)
{
return
-
1
}
// 若参数错误 返回-1
var
ms
=
m
-
1
if
(
ms
==
1
)
{
// 2月份的闰平规律测算后确认返回28或29
return
(((
y
%
4
==
0
)
&&
(
y
%
100
!=
0
)
||
(
y
%
400
==
0
))
?
29
:
28
)
}
else
{
return
(
this
.
solarMonth
[
ms
])
}
},
/**
* 农历年份转换为干支纪年
* @param lYear 农历年的年份数
* @return Cn string
*/
toGanZhiYear
:
function
(
lYear
)
{
var
ganKey
=
(
lYear
-
3
)
%
10
var
zhiKey
=
(
lYear
-
3
)
%
12
if
(
ganKey
==
0
)
ganKey
=
10
// 如果余数为0则为最后一个天干
if
(
zhiKey
==
0
)
zhiKey
=
12
// 如果余数为0则为最后一个地支
return
this
.
Gan
[
ganKey
-
1
]
+
this
.
Zhi
[
zhiKey
-
1
]
},
/**
* 公历月、日判断所属星座
* @param cMonth [description]
* @param cDay [description]
* @return Cn string
*/
toAstro
:
function
(
cMonth
,
cDay
)
{
var
s
=
'
\
u9b54
\
u7faf
\
u6c34
\
u74f6
\
u53cc
\
u9c7c
\
u767d
\
u7f8a
\
u91d1
\
u725b
\
u53cc
\
u5b50
\
u5de8
\
u87f9
\
u72ee
\
u5b50
\
u5904
\
u5973
\
u5929
\
u79e4
\
u5929
\
u874e
\
u5c04
\
u624b
\
u9b54
\
u7faf'
var
arr
=
[
20
,
19
,
21
,
21
,
21
,
22
,
23
,
23
,
23
,
23
,
22
,
22
]
return
s
.
substr
(
cMonth
*
2
-
(
cDay
<
arr
[
cMonth
-
1
]
?
2
:
0
),
2
)
+
'
\
u5ea7'
// 座
},
/**
* 传入offset偏移量返回干支
* @param offset 相对甲子的偏移量
* @return Cn string
*/
toGanZhi
:
function
(
offset
)
{
return
this
.
Gan
[
offset
%
10
]
+
this
.
Zhi
[
offset
%
12
]
},
/**
* 传入公历(!)y年获得该年第n个节气的公历日期
* @param y公历年(1900-2100);n二十四节气中的第几个节气(1~24);从n=1(小寒)算起
* @return day Number
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
*/
getTerm
:
function
(
y
,
n
)
{
if
(
y
<
1900
||
y
>
2100
)
{
return
-
1
}
if
(
n
<
1
||
n
>
24
)
{
return
-
1
}
var
_table
=
this
.
sTermInfo
[
y
-
1900
]
var
_info
=
[
parseInt
(
'0x'
+
_table
.
substr
(
0
,
5
)).
toString
(),
parseInt
(
'0x'
+
_table
.
substr
(
5
,
5
)).
toString
(),
parseInt
(
'0x'
+
_table
.
substr
(
10
,
5
)).
toString
(),
parseInt
(
'0x'
+
_table
.
substr
(
15
,
5
)).
toString
(),
parseInt
(
'0x'
+
_table
.
substr
(
20
,
5
)).
toString
(),
parseInt
(
'0x'
+
_table
.
substr
(
25
,
5
)).
toString
()
]
var
_calday
=
[
_info
[
0
].
substr
(
0
,
1
),
_info
[
0
].
substr
(
1
,
2
),
_info
[
0
].
substr
(
3
,
1
),
_info
[
0
].
substr
(
4
,
2
),
_info
[
1
].
substr
(
0
,
1
),
_info
[
1
].
substr
(
1
,
2
),
_info
[
1
].
substr
(
3
,
1
),
_info
[
1
].
substr
(
4
,
2
),
_info
[
2
].
substr
(
0
,
1
),
_info
[
2
].
substr
(
1
,
2
),
_info
[
2
].
substr
(
3
,
1
),
_info
[
2
].
substr
(
4
,
2
),
_info
[
3
].
substr
(
0
,
1
),
_info
[
3
].
substr
(
1
,
2
),
_info
[
3
].
substr
(
3
,
1
),
_info
[
3
].
substr
(
4
,
2
),
_info
[
4
].
substr
(
0
,
1
),
_info
[
4
].
substr
(
1
,
2
),
_info
[
4
].
substr
(
3
,
1
),
_info
[
4
].
substr
(
4
,
2
),
_info
[
5
].
substr
(
0
,
1
),
_info
[
5
].
substr
(
1
,
2
),
_info
[
5
].
substr
(
3
,
1
),
_info
[
5
].
substr
(
4
,
2
)
]
return
parseInt
(
_calday
[
n
-
1
])
},
/**
* 传入农历数字月份返回汉语通俗表示法
* @param lunar month
* @return Cn string
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
*/
toChinaMonth
:
function
(
m
)
{
// 月 => \u6708
if
(
m
>
12
||
m
<
1
)
{
return
-
1
}
// 若参数错误 返回-1
var
s
=
this
.
nStr3
[
m
-
1
]
s
+=
'
\
u6708'
// 加上月字
return
s
},
/**
* 传入农历日期数字返回汉字表示法
* @param lunar day
* @return Cn string
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
*/
toChinaDay
:
function
(
d
)
{
// 日 => \u65e5
var
s
switch
(
d
)
{
case
10
:
s
=
'
\
u521d
\
u5341'
;
break
case
20
:
s
=
'
\
u4e8c
\
u5341'
;
break
break
case
30
:
s
=
'
\
u4e09
\
u5341'
;
break
break
default
:
s
=
this
.
nStr2
[
Math
.
floor
(
d
/
10
)]
s
+=
this
.
nStr1
[
d
%
10
]
}
return
(
s
)
},
/**
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
* @param y year
* @return Cn string
* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
*/
getAnimal
:
function
(
y
)
{
return
this
.
Animals
[(
y
-
4
)
%
12
]
},
/**
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
* @param y solar year
* @param m solar month
* @param d solar day
* @return JSON object
* @eg:console.log(calendar.solar2lunar(1987,11,01));
*/
solar2lunar
:
function
(
y
,
m
,
d
)
{
// 参数区间1900.1.31~2100.12.31
// 年份限定、上限
if
(
y
<
1900
||
y
>
2100
)
{
return
-
1
// undefined转换为数字变为NaN
}
// 公历传参最下限
if
(
y
==
1900
&&
m
==
1
&&
d
<
31
)
{
return
-
1
}
// 未传参 获得当天
if
(
!
y
)
{
var
objDate
=
new
Date
()
}
else
{
var
objDate
=
new
Date
(
y
,
parseInt
(
m
)
-
1
,
d
)
}
var
i
;
var
leap
=
0
;
var
temp
=
0
// 修正ymd参数
var
y
=
objDate
.
getFullYear
()
var
m
=
objDate
.
getMonth
()
+
1
var
d
=
objDate
.
getDate
()
var
offset
=
(
Date
.
UTC
(
objDate
.
getFullYear
(),
objDate
.
getMonth
(),
objDate
.
getDate
())
-
Date
.
UTC
(
1900
,
0
,
31
))
/
86400000
for
(
i
=
1900
;
i
<
2101
&&
offset
>
0
;
i
++
)
{
temp
=
this
.
lYearDays
(
i
)
offset
-=
temp
}
if
(
offset
<
0
)
{
offset
+=
temp
;
i
--
}
// 是否今天
var
isTodayObj
=
new
Date
()
var
isToday
=
false
if
(
isTodayObj
.
getFullYear
()
==
y
&&
isTodayObj
.
getMonth
()
+
1
==
m
&&
isTodayObj
.
getDate
()
==
d
)
{
isToday
=
true
}
// 星期几
var
nWeek
=
objDate
.
getDay
()
var
cWeek
=
this
.
nStr1
[
nWeek
]
// 数字表示周几顺应天朝周一开始的惯例
if
(
nWeek
==
0
)
{
nWeek
=
7
}
// 农历年
var
year
=
i
var
leap
=
this
.
leapMonth
(
i
)
// 闰哪个月
var
isLeap
=
false
// 效验闰月
for
(
i
=
1
;
i
<
13
&&
offset
>
0
;
i
++
)
{
// 闰月
if
(
leap
>
0
&&
i
==
(
leap
+
1
)
&&
isLeap
==
false
)
{
--
i
isLeap
=
true
;
temp
=
this
.
leapDays
(
year
)
// 计算农历闰月天数
}
else
{
temp
=
this
.
monthDays
(
year
,
i
)
// 计算农历普通月天数
}
// 解除闰月
if
(
isLeap
==
true
&&
i
==
(
leap
+
1
))
{
isLeap
=
false
}
offset
-=
temp
}
// 闰月导致数组下标重叠取反
if
(
offset
==
0
&&
leap
>
0
&&
i
==
leap
+
1
)
{
if
(
isLeap
)
{
isLeap
=
false
}
else
{
isLeap
=
true
;
--
i
}
}
if
(
offset
<
0
)
{
offset
+=
temp
;
--
i
}
// 农历月
var
month
=
i
// 农历日
var
day
=
offset
+
1
// 天干地支处理
var
sm
=
m
-
1
var
gzY
=
this
.
toGanZhiYear
(
year
)
// 当月的两个节气
// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
var
firstNode
=
this
.
getTerm
(
y
,
(
m
*
2
-
1
))
// 返回当月「节」为几日开始
var
secondNode
=
this
.
getTerm
(
y
,
(
m
*
2
))
// 返回当月「节」为几日开始
// 依据12节气修正干支月
var
gzM
=
this
.
toGanZhi
((
y
-
1900
)
*
12
+
m
+
11
)
if
(
d
>=
firstNode
)
{
gzM
=
this
.
toGanZhi
((
y
-
1900
)
*
12
+
m
+
12
)
}
// 传入的日期的节气与否
var
isTerm
=
false
var
Term
=
null
if
(
firstNode
==
d
)
{
isTerm
=
true
Term
=
this
.
solarTerm
[
m
*
2
-
2
]
}
if
(
secondNode
==
d
)
{
isTerm
=
true
Term
=
this
.
solarTerm
[
m
*
2
-
1
]
}
// 日柱 当月一日与 1900/1/1 相差天数
var
dayCyclical
=
Date
.
UTC
(
y
,
sm
,
1
,
0
,
0
,
0
,
0
)
/
86400000
+
25567
+
10
var
gzD
=
this
.
toGanZhi
(
dayCyclical
+
d
-
1
)
// 该日期所属的星座
var
astro
=
this
.
toAstro
(
m
,
d
)
return
{
'lYear'
:
year
,
'lMonth'
:
month
,
'lDay'
:
day
,
'Animal'
:
this
.
getAnimal
(
year
),
'IMonthCn'
:
(
isLeap
?
'
\
u95f0'
:
''
)
+
this
.
toChinaMonth
(
month
),
'IDayCn'
:
this
.
toChinaDay
(
day
),
'cYear'
:
y
,
'cMonth'
:
m
,
'cDay'
:
d
,
'gzYear'
:
gzY
,
'gzMonth'
:
gzM
,
'gzDay'
:
gzD
,
'isToday'
:
isToday
,
'isLeap'
:
isLeap
,
'nWeek'
:
nWeek
,
'ncWeek'
:
'
\
u661f
\
u671f'
+
cWeek
,
'isTerm'
:
isTerm
,
'Term'
:
Term
,
'astro'
:
astro
}
},
/**
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
* @param y lunar year
* @param m lunar month
* @param d lunar day
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
* @return JSON object
* @eg:console.log(calendar.lunar2solar(1987,9,10));
*/
lunar2solar
:
function
(
y
,
m
,
d
,
isLeapMonth
)
{
// 参数区间1900.1.31~2100.12.1
var
isLeapMonth
=
!!
isLeapMonth
var
leapOffset
=
0
var
leapMonth
=
this
.
leapMonth
(
y
)
var
leapDay
=
this
.
leapDays
(
y
)
if
(
isLeapMonth
&&
(
leapMonth
!=
m
))
{
return
-
1
}
// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
if
(
y
==
2100
&&
m
==
12
&&
d
>
1
||
y
==
1900
&&
m
==
1
&&
d
<
31
)
{
return
-
1
}
// 超出了最大极限值
var
day
=
this
.
monthDays
(
y
,
m
)
var
_day
=
day
// bugFix 2016-9-25
// if month is leap, _day use leapDays method
if
(
isLeapMonth
)
{
_day
=
this
.
leapDays
(
y
,
m
)
}
if
(
y
<
1900
||
y
>
2100
||
d
>
_day
)
{
return
-
1
}
// 参数合法性效验
// 计算农历的时间差
var
offset
=
0
for
(
var
i
=
1900
;
i
<
y
;
i
++
)
{
offset
+=
this
.
lYearDays
(
i
)
}
var
leap
=
0
;
var
isAdd
=
false
for
(
var
i
=
1
;
i
<
m
;
i
++
)
{
leap
=
this
.
leapMonth
(
y
)
if
(
!
isAdd
)
{
// 处理闰月
if
(
leap
<=
i
&&
leap
>
0
)
{
offset
+=
this
.
leapDays
(
y
);
isAdd
=
true
}
}
offset
+=
this
.
monthDays
(
y
,
i
)
}
// 转换闰月农历 需补充该年闰月的前一个月的时差
if
(
isLeapMonth
)
{
offset
+=
day
}
// 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
var
stmap
=
Date
.
UTC
(
1900
,
1
,
30
,
0
,
0
,
0
)
var
calObj
=
new
Date
((
offset
+
d
-
31
)
*
86400000
+
stmap
)
var
cY
=
calObj
.
getUTCFullYear
()
var
cM
=
calObj
.
getUTCMonth
()
+
1
var
cD
=
calObj
.
getUTCDate
()
return
this
.
solar2lunar
(
cY
,
cM
,
cD
)
}
}
export
default
calendar
uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
0 → 100644
View file @
16d3b58f
<
template
>
<view
class=
"uni-calendar"
@
mouseleave=
"leaveCale"
>
<view
v-if=
"!insert&&show"
class=
"uni-calendar__mask"
:class=
"
{'uni-calendar--mask-show':aniMaskShow}"
@click="clean">
</view>
<view
v-if=
"insert || show"
class=
"uni-calendar__content"
:class=
"
{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
<view
class=
"uni-calendar__header"
>
<view
v-if=
"left"
class=
"uni-calendar__header-btn-box"
@
click
.
stop=
"pre"
>
<view
class=
"uni-calendar__header-btn uni-calendar--left"
></view>
</view>
<picker
mode=
"date"
:value=
"date"
fields=
"month"
@
change=
"bindDateChange"
>
<text
class=
"uni-calendar__header-text"
>
{{
(
nowDate
.
year
||
''
)
+
' / '
+
(
nowDate
.
month
||
''
)
}}
</text>
</picker>
<view
v-if=
"right"
class=
"uni-calendar__header-btn-box"
@
click
.
stop=
"next"
>
<view
class=
"uni-calendar__header-btn uni-calendar--right"
></view>
</view>
<!--
<text
class=
"uni-calendar__backtoday"
@
click=
"backtoday"
>
回到今天
</text>
-->
</view>
<view
class=
"uni-calendar__box"
>
<view
v-if=
"showMonth"
class=
"uni-calendar__box-bg"
>
<text
class=
"uni-calendar__box-bg-text"
>
{{
nowDate
.
month
}}
</text>
</view>
<view
class=
"uni-calendar__weeks"
>
<view
class=
"uni-calendar__weeks-day"
>
<text
class=
"uni-calendar__weeks-day-text"
>
{{
SUNText
}}
</text>
</view>
<view
class=
"uni-calendar__weeks-day"
>
<text
class=
"uni-calendar__weeks-day-text"
>
{{
monText
}}
</text>
</view>
<view
class=
"uni-calendar__weeks-day"
>
<text
class=
"uni-calendar__weeks-day-text"
>
{{
TUEText
}}
</text>
</view>
<view
class=
"uni-calendar__weeks-day"
>
<text
class=
"uni-calendar__weeks-day-text"
>
{{
WEDText
}}
</text>
</view>
<view
class=
"uni-calendar__weeks-day"
>
<text
class=
"uni-calendar__weeks-day-text"
>
{{
THUText
}}
</text>
</view>
<view
class=
"uni-calendar__weeks-day"
>
<text
class=
"uni-calendar__weeks-day-text"
>
{{
FRIText
}}
</text>
</view>
<view
class=
"uni-calendar__weeks-day"
>
<text
class=
"uni-calendar__weeks-day-text"
>
{{
SATText
}}
</text>
</view>
</view>
<view
class=
"uni-calendar__weeks"
v-for=
"(item,weekIndex) in weeks"
:key=
"weekIndex"
>
<view
class=
"uni-calendar__weeks-item"
v-for=
"(weeks,weeksIndex) in item"
:key=
"weeksIndex"
>
<calendar-item
class=
"uni-calendar-item--hook"
:weeks=
"weeks"
:calendar=
"calendar"
:selected=
"selected"
:lunar=
"lunar"
:checkHover=
"range"
@
change=
"choiceDate"
@
handleMouse=
"handleMouse"
>
</calendar-item>
</view>
</view>
</view>
<view
v-if=
"!insert && !range && typeHasTime"
class=
"uni-date-changed uni-calendar--fixed-top"
style=
"padding: 0 40px;"
>
<text
class=
"uni-date-changed--time-date"
>
{{
tempSingleDate
?
tempSingleDate
:
selectDateText
}}
</text>
<time-picker
type=
"time"
:start=
"reactStartTime"
:end=
"reactEndTime"
v-model=
"time"
:disabled=
"!tempSingleDate"
:border=
"false"
class=
"time-picker-style"
>
</time-picker>
</view>
<view
v-if=
"!insert && range && typeHasTime"
class=
"uni-date-changed uni-calendar--fixed-top"
>
<view
class=
"uni-date-changed--time-start"
>
<text
class=
"uni-date-changed--time-date"
>
{{
tempRange
.
before
?
tempRange
.
before
:
startDateText
}}
</text>
<time-picker
type=
"time"
:start=
"reactStartTime"
v-model=
"timeRange.startTime"
:border=
"false"
:disabled=
"!tempRange.before"
class=
"time-picker-style"
>
</time-picker>
</view>
<uni-icons
type=
"arrowthinright"
color=
"#999"
style=
"line-height: 50px;"
></uni-icons>
<view
class=
"uni-date-changed--time-end"
>
<text
class=
"uni-date-changed--time-date"
>
{{
tempRange
.
after
?
tempRange
.
after
:
endDateText
}}
</text>
<time-picker
type=
"time"
:end=
"reactEndTime"
v-model=
"timeRange.endTime"
:border=
"false"
:disabled=
"!tempRange.after"
class=
"time-picker-style"
>
</time-picker>
</view>
</view>
<view
v-if=
"!insert"
class=
"uni-date-changed uni-calendar__header"
@
click=
"confirm"
>
<view
class=
"uni-calendar__header-btn-box"
>
<text
class=
"uni-calendar__button-text uni-calendar--fixed-width"
>
{{
okText
}}
</text>
</view>
</view>
</view>
</view>
</
template
>
<
script
>
import
Calendar
from
'./util.js'
;
import
calendarItem
from
'./calendar-item.vue'
import
timePicker
from
'./time-picker.vue'
import
{
initVueI18n
}
from
'@dcloudio/uni-i18n'
import
messages
from
'./i18n/index.js'
const
{
t
}
=
initVueI18n
(
messages
)
/**
* Calendar 日历
* @description 日历组件可以查看日期,选择任意范围内的日期,打点操作。常用场景如:酒店日期预订、火车机票选择购买日期、上下班打卡等
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
* @property {String} date 自定义当前时间,默认为今天
* @property {Boolean} lunar 显示农历
* @property {String} startDate 日期选择范围-开始日期
* @property {String} endDate 日期选择范围-结束日期
* @property {Boolean} range 范围选择
* @property {Boolean} insert = [true|false] 插入模式,默认为false
* @value true 弹窗模式
* @value false 插入模式
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
* @property {Array} selected 打点,期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
* @property {Boolean} showMonth 是否选择月份为背景
* @event {Function} change 日期改变,`insert :ture` 时生效
* @event {Function} confirm 确认选择`insert :false` 时生效
* @event {Function} monthSwitch 切换月份时触发
* @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
*/
export
default
{
components
:
{
calendarItem
,
timePicker
},
props
:
{
date
:
{
type
:
String
,
default
:
''
},
defTime
:
{
type
:
[
String
,
Object
],
default
:
''
},
selectableTimes
:
{
type
:
[
Object
],
default
()
{
return
{}
}
},
selected
:
{
type
:
Array
,
default
()
{
return
[]
}
},
lunar
:
{
type
:
Boolean
,
default
:
false
},
startDate
:
{
type
:
String
,
default
:
''
},
endDate
:
{
type
:
String
,
default
:
''
},
range
:
{
type
:
Boolean
,
default
:
false
},
typeHasTime
:
{
type
:
Boolean
,
default
:
false
},
insert
:
{
type
:
Boolean
,
default
:
true
},
showMonth
:
{
type
:
Boolean
,
default
:
true
},
clearDate
:
{
type
:
Boolean
,
default
:
true
},
left
:
{
type
:
Boolean
,
default
:
true
},
right
:
{
type
:
Boolean
,
default
:
true
},
checkHover
:
{
type
:
Boolean
,
default
:
true
},
pleStatus
:
{
type
:
Object
,
default
()
{
return
{
before
:
''
,
after
:
''
,
data
:
[],
fulldate
:
''
}
}
}
},
data
()
{
return
{
show
:
false
,
weeks
:
[],
calendar
:
{},
nowDate
:
''
,
aniMaskShow
:
false
,
firstEnter
:
true
,
time
:
this
.
defTime
?
this
.
defTime
:
''
,
timeRange
:
{
startTime
:
this
.
defTime
.
start
?
this
.
defTime
.
start
:
''
,
endTime
:
this
.
defTime
.
end
?
this
.
defTime
.
end
:
''
},
tempSingleDate
:
this
.
date
,
tempRange
:
{
before
:
''
,
after
:
''
}
}
},
watch
:
{
date
:
{
immediate
:
true
,
handler
(
newVal
,
oldVal
)
{
if
(
!
this
.
range
)
setTimeout
(()
=>
{
this
.
init
(
newVal
)
},
100
)
}
},
startDate
(
val
)
{
this
.
cale
.
resetSatrtDate
(
val
)
this
.
cale
.
setDate
(
this
.
nowDate
.
fullDate
)
this
.
weeks
=
this
.
cale
.
weeks
},
endDate
(
val
)
{
this
.
cale
.
resetEndDate
(
val
)
this
.
cale
.
setDate
(
this
.
nowDate
.
fullDate
)
this
.
weeks
=
this
.
cale
.
weeks
},
selected
(
newVal
)
{
this
.
cale
.
setSelectInfo
(
this
.
nowDate
.
fullDate
,
newVal
)
this
.
weeks
=
this
.
cale
.
weeks
},
pleStatus
:
{
immediate
:
true
,
handler
(
newVal
,
oldVal
)
{
const
{
before
,
after
,
fulldate
,
which
}
=
newVal
this
.
tempRange
.
before
=
before
this
.
tempRange
.
after
=
after
setTimeout
(()
=>
{
if
(
fulldate
)
{
this
.
cale
.
setHoverMultiple
(
fulldate
)
if
(
before
&&
after
)
{
this
.
cale
.
lastHover
=
true
if
(
this
.
rangeWithinMonth
(
after
,
before
))
return
this
.
setDate
(
before
)
}
if
(
!
before
&&
!
after
)
{
this
.
cale
.
setMultiple
(
fulldate
)
this
.
setDate
(
this
.
nowDate
.
fullDate
)
this
.
calendar
.
fullDate
=
''
this
.
cale
.
lastHover
=
false
}
}
else
{
this
.
cale
.
setDefaultMultiple
(
before
,
after
)
if
(
which
===
'left'
)
{
this
.
setDate
(
before
)
this
.
weeks
=
this
.
cale
.
weeks
}
else
{
this
.
setDate
(
after
)
this
.
weeks
=
this
.
cale
.
weeks
}
this
.
cale
.
lastHover
=
true
}
},
16
)
}
}
},
computed
:
{
reactStartTime
()
{
const
activeDate
=
this
.
range
?
this
.
tempRange
.
before
:
this
.
calendar
.
fullDate
const
res
=
activeDate
===
this
.
startDate
?
this
.
selectableTimes
.
start
:
''
return
res
},
reactEndTime
()
{
const
activeDate
=
this
.
range
?
this
.
tempRange
.
after
:
this
.
calendar
.
fullDate
const
res
=
activeDate
===
this
.
endDate
?
this
.
selectableTimes
.
end
:
''
return
res
},
/**
* for i18n
*/
selectDateText
()
{
return
t
(
"uni-datetime-picker.selectDate"
)
},
startDateText
()
{
return
this
.
startPlaceholder
||
t
(
"uni-datetime-picker.startDate"
)
},
endDateText
()
{
return
this
.
endPlaceholder
||
t
(
"uni-datetime-picker.endDate"
)
},
okText
()
{
return
t
(
"uni-datetime-picker.ok"
)
},
monText
()
{
return
t
(
"uni-calender.MON"
)
},
TUEText
()
{
return
t
(
"uni-calender.TUE"
)
},
WEDText
()
{
return
t
(
"uni-calender.WED"
)
},
THUText
()
{
return
t
(
"uni-calender.THU"
)
},
FRIText
()
{
return
t
(
"uni-calender.FRI"
)
},
SATText
()
{
return
t
(
"uni-calender.SAT"
)
},
SUNText
()
{
return
t
(
"uni-calender.SUN"
)
},
},
created
()
{
// 获取日历方法实例
this
.
cale
=
new
Calendar
({
// date: new Date(),
selected
:
this
.
selected
,
startDate
:
this
.
startDate
,
endDate
:
this
.
endDate
,
range
:
this
.
range
,
// multipleStatus: this.pleStatus
})
// 选中某一天
// this.cale.setDate(this.date)
this
.
init
(
this
.
date
)
// this.setDay
},
methods
:
{
leaveCale
()
{
this
.
firstEnter
=
true
},
handleMouse
(
weeks
)
{
if
(
weeks
.
disable
)
return
if
(
this
.
cale
.
lastHover
)
return
let
{
before
,
after
}
=
this
.
cale
.
multipleStatus
if
(
!
before
)
return
this
.
calendar
=
weeks
// 设置范围选
this
.
cale
.
setHoverMultiple
(
this
.
calendar
.
fullDate
)
this
.
weeks
=
this
.
cale
.
weeks
// hover时,进入一个日历,更新另一个
if
(
this
.
firstEnter
)
{
this
.
$emit
(
'firstEnterCale'
,
this
.
cale
.
multipleStatus
)
this
.
firstEnter
=
false
}
},
rangeWithinMonth
(
A
,
B
)
{
const
[
yearA
,
monthA
]
=
A
.
split
(
'-'
)
const
[
yearB
,
monthB
]
=
B
.
split
(
'-'
)
return
yearA
===
yearB
&&
monthA
===
monthB
},
// 取消穿透
clean
()
{
this
.
close
()
},
bindDateChange
(
e
)
{
const
value
=
e
.
detail
.
value
+
'-1'
console
.
log
(
this
.
cale
.
getDate
(
value
));
this
.
init
(
value
)
},
/**
* 初始化日期显示
* @param {Object} date
*/
init
(
date
)
{
this
.
cale
.
setDate
(
date
)
this
.
weeks
=
this
.
cale
.
weeks
this
.
nowDate
=
this
.
calendar
=
this
.
cale
.
getInfo
(
date
)
},
// choiceDate(weeks) {
// if (weeks.disable) return
// this.calendar = weeks
// // 设置多选
// this.cale.setMultiple(this.calendar.fullDate, true)
// this.weeks = this.cale.weeks
// this.tempSingleDate = this.calendar.fullDate
// this.tempRange.before = this.cale.multipleStatus.before
// this.tempRange.after = this.cale.multipleStatus.after
// this.change()
// },
/**
* 打开日历弹窗
*/
open
()
{
// 弹窗模式并且清理数据
if
(
this
.
clearDate
&&
!
this
.
insert
)
{
this
.
cale
.
cleanMultipleStatus
()
// this.cale.setDate(this.date)
this
.
init
(
this
.
date
)
}
this
.
show
=
true
this
.
$nextTick
(()
=>
{
setTimeout
(()
=>
{
this
.
aniMaskShow
=
true
},
50
)
})
},
/**
* 关闭日历弹窗
*/
close
()
{
this
.
aniMaskShow
=
false
this
.
$nextTick
(()
=>
{
setTimeout
(()
=>
{
this
.
show
=
false
this
.
$emit
(
'close'
)
},
300
)
})
},
/**
* 确认按钮
*/
confirm
()
{
this
.
setEmit
(
'confirm'
)
this
.
close
()
},
/**
* 变化触发
*/
change
()
{
if
(
!
this
.
insert
)
return
this
.
setEmit
(
'change'
)
},
/**
* 选择月份触发
*/
monthSwitch
()
{
let
{
year
,
month
}
=
this
.
nowDate
this
.
$emit
(
'monthSwitch'
,
{
year
,
month
:
Number
(
month
)
})
},
/**
* 派发事件
* @param {Object} name
*/
setEmit
(
name
)
{
let
{
year
,
month
,
date
,
fullDate
,
lunar
,
extraInfo
}
=
this
.
calendar
this
.
$emit
(
name
,
{
range
:
this
.
cale
.
multipleStatus
,
year
,
month
,
date
,
time
:
this
.
time
,
timeRange
:
this
.
timeRange
,
fulldate
:
fullDate
,
lunar
,
extraInfo
:
extraInfo
||
{}
})
},
/**
* 选择天触发
* @param {Object} weeks
*/
choiceDate
(
weeks
)
{
if
(
weeks
.
disable
)
return
this
.
calendar
=
weeks
// 设置多选
this
.
cale
.
setMultiple
(
this
.
calendar
.
fullDate
,
true
)
this
.
weeks
=
this
.
cale
.
weeks
this
.
tempSingleDate
=
this
.
calendar
.
fullDate
this
.
tempRange
.
before
=
this
.
cale
.
multipleStatus
.
before
this
.
tempRange
.
after
=
this
.
cale
.
multipleStatus
.
after
this
.
change
()
},
/**
* 回到今天
*/
backtoday
()
{
console
.
log
(
this
.
cale
.
getDate
(
new
Date
()).
fullDate
);
let
date
=
this
.
cale
.
getDate
(
new
Date
()).
fullDate
// this.cale.setDate(date)
this
.
init
(
date
)
this
.
change
()
},
/**
* 比较时间大小
*/
dateCompare
(
startDate
,
endDate
)
{
// 计算截止时间
startDate
=
new
Date
(
startDate
.
replace
(
'-'
,
'/'
).
replace
(
'-'
,
'/'
))
// 计算详细项的截止时间
endDate
=
new
Date
(
endDate
.
replace
(
'-'
,
'/'
).
replace
(
'-'
,
'/'
))
if
(
startDate
<=
endDate
)
{
return
true
}
else
{
return
false
}
},
/**
* 上个月
*/
pre
()
{
const
preDate
=
this
.
cale
.
getDate
(
this
.
nowDate
.
fullDate
,
-
1
,
'month'
).
fullDate
this
.
setDate
(
preDate
)
this
.
monthSwitch
()
},
/**
* 下个月
*/
next
()
{
const
nextDate
=
this
.
cale
.
getDate
(
this
.
nowDate
.
fullDate
,
+
1
,
'month'
).
fullDate
this
.
setDate
(
nextDate
)
this
.
monthSwitch
()
},
/**
* 设置日期
* @param {Object} date
*/
setDate
(
date
)
{
this
.
cale
.
setDate
(
date
)
this
.
weeks
=
this
.
cale
.
weeks
this
.
nowDate
=
this
.
cale
.
getInfo
(
date
)
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.uni-calendar
{
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
column
;
}
.uni-calendar__mask
{
position
:
fixed
;
bottom
:
0
;
top
:
0
;
left
:
0
;
right
:
0
;
background-color
:
$uni-bg-color-mask
;
transition-property
:
opacity
;
transition-duration
:
0
.3s
;
opacity
:
0
;
/* #ifndef APP-NVUE */
z-index
:
99
;
/* #endif */
}
.uni-calendar--mask-show
{
opacity
:
1
}
.uni-calendar--fixed
{
position
:
fixed
;
bottom
:
calc
(
var
(
--
window-bottom
));
left
:
0
;
right
:
0
;
transition-property
:
transform
;
transition-duration
:
0
.3s
;
transform
:
translateY
(
460px
);
/* #ifndef APP-NVUE */
z-index
:
99
;
/* #endif */
}
.uni-calendar--ani-show
{
transform
:
translateY
(
0
);
}
.uni-calendar__content
{
background-color
:
#fff
;
}
.uni-calendar__header
{
position
:
relative
;
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
row
;
justify-content
:
center
;
align-items
:
center
;
height
:
50px
;
// border-bottom-color: $uni-border-color;
// border-bottom-style: solid;
// border-bottom-width: 1px;
}
.uni-calendar--fixed-top
{
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
row
;
justify-content
:
space-between
;
border-top-color
:
$uni-border-color
;
border-top-style
:
solid
;
border-top-width
:
1px
;
}
.uni-calendar--fixed-width
{
width
:
50px
;
// padding: 0 15px;
}
.uni-calendar__backtoday
{
position
:
absolute
;
right
:
0
;
top
:
25rpx
;
padding
:
0
5px
;
padding-left
:
10px
;
height
:
25px
;
line-height
:
25px
;
font-size
:
12px
;
border-top-left-radius
:
25px
;
border-bottom-left-radius
:
25px
;
color
:
$uni-text-color
;
background-color
:
$uni-bg-color-hover
;
}
.uni-calendar__header-text
{
text-align
:
center
;
width
:
100px
;
font-size
:
$uni-font-size-base
;
color
:
$uni-text-color
;
}
.uni-calendar__button-text
{
text-align
:
center
;
width
:
100px
;
font-size
:
$uni-font-size-base
;
color
:
#007aff
;
/* #ifndef APP-NVUE */
letter-spacing
:
3px
;
/* #endif */
}
.uni-calendar__header-btn-box
{
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
row
;
align-items
:
center
;
justify-content
:
center
;
width
:
50px
;
height
:
50px
;
}
.uni-calendar__header-btn
{
width
:
10px
;
height
:
10px
;
border-left-color
:
$uni-text-color-placeholder
;
border-left-style
:
solid
;
border-left-width
:
2px
;
border-top-color
:
$uni-color-subtitle
;
border-top-style
:
solid
;
border-top-width
:
2px
;
}
.uni-calendar--left
{
transform
:
rotate
(
-45deg
);
}
.uni-calendar--right
{
transform
:
rotate
(
135deg
);
}
.uni-calendar__weeks
{
position
:
relative
;
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
row
;
}
.uni-calendar__weeks-item
{
flex
:
1
;
}
.uni-calendar__weeks-day
{
flex
:
1
;
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
column
;
justify-content
:
center
;
align-items
:
center
;
height
:
45px
;
border-bottom-color
:
#F5F5F5
;
border-bottom-style
:
solid
;
border-bottom-width
:
1px
;
}
.uni-calendar__weeks-day-text
{
font-size
:
14px
;
}
.uni-calendar__box
{
position
:
relative
;
}
.uni-calendar__box-bg
{
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
justify-content
:
center
;
align-items
:
center
;
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
}
.uni-calendar__box-bg-text
{
font-size
:
200px
;
font-weight
:
bold
;
color
:
$uni-text-color-grey
;
opacity
:
0
.1
;
text-align
:
center
;
/* #ifndef APP-NVUE */
line-height
:
1
;
/* #endif */
}
.uni-date-changed
{
padding
:
0
10px
;
// line-height: 50px;
text-align
:
center
;
color
:
#333
;
border-top-color
:
$uni-border-color
;
border-top-style
:
solid
;
border-top-width
:
1px
;
flex
:
1
;
}
.uni-date-changed--time-start
{
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
align-items
:
center
;
}
.uni-date-changed--time-end
{
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
align-items
:
center
;
}
.uni-date-changed--time-date
{
color
:
#999
;
line-height
:
50px
;
// opacity: 0.6;
}
.time-picker-style
{
width
:
62px
;
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
justify-content
:
center
;
align-items
:
center
}
.mr-10
{
margin-right
:
10px
;
}
</
style
>
uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json
0 → 100644
View file @
16d3b58f
{
"uni-datetime-picker.selectDate"
:
"select date"
,
"uni-datetime-picker.selectTime"
:
"select time"
,
"uni-datetime-picker.selectDateTime"
:
"select datetime"
,
"uni-datetime-picker.startDate"
:
"start date"
,
"uni-datetime-picker.endDate"
:
"end date"
,
"uni-datetime-picker.startTime"
:
"start time"
,
"uni-datetime-picker.endTime"
:
"end time"
,
"uni-datetime-picker.ok"
:
"ok"
,
"uni-datetime-picker.clear"
:
"clear"
,
"uni-datetime-picker.cancel"
:
"cancel"
,
"uni-calender.MON"
:
"MON"
,
"uni-calender.TUE"
:
"TUE"
,
"uni-calender.WED"
:
"WED"
,
"uni-calender.THU"
:
"THU"
,
"uni-calender.FRI"
:
"FRI"
,
"uni-calender.SAT"
:
"SAT"
,
"uni-calender.SUN"
:
"SUN"
}
uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js
0 → 100644
View file @
16d3b58f
import
en
from
'./en.json'
import
zhHans
from
'./zh-Hans.json'
import
zhHant
from
'./zh-Hant.json'
export
default
{
en
,
'zh-Hans'
:
zhHans
,
'zh-Hant'
:
zhHant
}
uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hans.json
0 → 100644
View file @
16d3b58f
{
"uni-datetime-picker.selectDate"
:
"选择日期"
,
"uni-datetime-picker.selectTime"
:
"选择时间"
,
"uni-datetime-picker.selectDateTime"
:
"选择日期时间"
,
"uni-datetime-picker.startDate"
:
"开始日期"
,
"uni-datetime-picker.endDate"
:
"结束日期"
,
"uni-datetime-picker.startTime"
:
"开始时间"
,
"uni-datetime-picker.endTime"
:
"结束时间"
,
"uni-datetime-picker.ok"
:
"确定"
,
"uni-datetime-picker.clear"
:
"清除"
,
"uni-datetime-picker.cancel"
:
"取消"
,
"uni-calender.SUN"
:
"日"
,
"uni-calender.MON"
:
"一"
,
"uni-calender.TUE"
:
"二"
,
"uni-calender.WED"
:
"三"
,
"uni-calender.THU"
:
"四"
,
"uni-calender.FRI"
:
"五"
,
"uni-calender.SAT"
:
"六"
}
uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hant.json
0 → 100644
View file @
16d3b58f
{
"uni-datetime-picker.selectDate"
:
"選擇日期"
,
"uni-datetime-picker.selectTime"
:
"選擇時間"
,
"uni-datetime-picker.selectDateTime"
:
"選擇日期時間"
,
"uni-datetime-picker.startDate"
:
"開始日期"
,
"uni-datetime-picker.endDate"
:
"結束日期"
,
"uni-datetime-picker.startTime"
:
"開始时间"
,
"uni-datetime-picker.endTime"
:
"結束时间"
,
"uni-datetime-picker.ok"
:
"確定"
,
"uni-datetime-picker.clear"
:
"清除"
,
"uni-datetime-picker.cancel"
:
"取消"
,
"uni-calender.SUN"
:
"日"
,
"uni-calender.MON"
:
"一"
,
"uni-calender.TUE"
:
"二"
,
"uni-calender.WED"
:
"三"
,
"uni-calender.THU"
:
"四"
,
"uni-calender.FRI"
:
"五"
,
"uni-calender.SAT"
:
"六"
}
uni_modules/uni-datetime-picker/components/uni-datetime-picker/keypress.js
0 → 100644
View file @
16d3b58f
// #ifdef H5
export
default
{
name
:
'Keypress'
,
props
:
{
disable
:
{
type
:
Boolean
,
default
:
false
}
},
mounted
()
{
const
keyNames
=
{
esc
:
[
'Esc'
,
'Escape'
],
tab
:
'Tab'
,
enter
:
'Enter'
,
space
:
[
' '
,
'Spacebar'
],
up
:
[
'Up'
,
'ArrowUp'
],
left
:
[
'Left'
,
'ArrowLeft'
],
right
:
[
'Right'
,
'ArrowRight'
],
down
:
[
'Down'
,
'ArrowDown'
],
delete
:
[
'Backspace'
,
'Delete'
,
'Del'
]
}
const
listener
=
(
$event
)
=>
{
if
(
this
.
disable
)
{
return
}
const
keyName
=
Object
.
keys
(
keyNames
).
find
(
key
=>
{
const
keyName
=
$event
.
key
const
value
=
keyNames
[
key
]
return
value
===
keyName
||
(
Array
.
isArray
(
value
)
&&
value
.
includes
(
keyName
))
})
if
(
keyName
)
{
// 避免和其他按键事件冲突
setTimeout
(()
=>
{
this
.
$emit
(
keyName
,
{})
},
0
)
}
}
document
.
addEventListener
(
'keyup'
,
listener
)
this
.
$once
(
'hook:beforeDestroy'
,
()
=>
{
document
.
removeEventListener
(
'keyup'
,
listener
)
})
},
render
:
()
=>
{}
}
// #endif
\ No newline at end of file
uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
0 → 100644
View file @
16d3b58f
<
template
>
<view
class=
"uni-datetime-picker"
>
<view
@
click=
"initTimePicker"
>
<slot>
<view
class=
"uni-datetime-picker-timebox-pointer"
:class=
"
{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}">
<text
class=
"uni-datetime-picker-text"
>
{{
time
}}
</text>
<view
v-if=
"!time"
class=
"uni-datetime-picker-time"
>
<text
class=
"uni-datetime-picker-text"
>
{{
selectTimeText
}}
</text>
</view>
</view>
</slot>
</view>
<view
v-if=
"visible"
id=
"mask"
class=
"uni-datetime-picker-mask"
@
click=
"tiggerTimePicker"
></view>
<view
v-if=
"visible"
class=
"uni-datetime-picker-popup"
:class=
"[dateShow && timeShow ? '' : 'fix-nvue-height']"
:style=
"fixNvueBug"
>
<view
class=
"uni-title"
>
<text
class=
"uni-datetime-picker-text"
>
{{
selectTimeText
}}
</text>
</view>
<view
v-if=
"dateShow"
class=
"uni-datetime-picker__container-box"
>
<picker-view
class=
"uni-datetime-picker-view"
:indicator-style=
"indicatorStyle"
:value=
"ymd"
@
change=
"bindDateChange"
>
<picker-view-column>
<view
class=
"uni-datetime-picker-item"
v-for=
"(item,index) in years"
:key=
"index"
>
<text
class=
"uni-datetime-picker-item"
>
{{
lessThanTen
(
item
)
}}
</text>
</view>
</picker-view-column>
<picker-view-column>
<view
class=
"uni-datetime-picker-item"
v-for=
"(item,index) in months"
:key=
"index"
>
<text
class=
"uni-datetime-picker-item"
>
{{
lessThanTen
(
item
)
}}
</text>
</view>
</picker-view-column>
<picker-view-column>
<view
class=
"uni-datetime-picker-item"
v-for=
"(item,index) in days"
:key=
"index"
>
<text
class=
"uni-datetime-picker-item"
>
{{
lessThanTen
(
item
)
}}
</text>
</view>
</picker-view-column>
</picker-view>
<!-- 兼容 nvue 不支持伪类 -->
<text
class=
"uni-datetime-picker-sign sign-left"
>
-
</text>
<text
class=
"uni-datetime-picker-sign sign-right"
>
-
</text>
</view>
<view
v-if=
"timeShow"
class=
"uni-datetime-picker__container-box"
>
<picker-view
class=
"uni-datetime-picker-view"
:class=
"[hideSecond ? 'time-hide-second' : '']"
:indicator-style=
"indicatorStyle"
:value=
"hms"
@
change=
"bindTimeChange"
>
<picker-view-column>
<view
class=
"uni-datetime-picker-item"
v-for=
"(item,index) in hours"
:key=
"index"
>
<text
class=
"uni-datetime-picker-item"
>
{{
lessThanTen
(
item
)
}}
</text>
</view>
</picker-view-column>
<picker-view-column>
<view
class=
"uni-datetime-picker-item"
v-for=
"(item,index) in minutes"
:key=
"index"
>
<text
class=
"uni-datetime-picker-item"
>
{{
lessThanTen
(
item
)
}}
</text>
</view>
</picker-view-column>
<picker-view-column
v-if=
"!hideSecond"
>
<view
class=
"uni-datetime-picker-item"
v-for=
"(item,index) in seconds"
:key=
"index"
>
<text
class=
"uni-datetime-picker-item"
>
{{
lessThanTen
(
item
)
}}
</text>
</view>
</picker-view-column>
</picker-view>
<!-- 兼容 nvue 不支持伪类 -->
<text
class=
"uni-datetime-picker-sign"
:class=
"[hideSecond ? 'sign-center' : 'sign-left']"
>
:
</text>
<text
v-if=
"!hideSecond"
class=
"uni-datetime-picker-sign sign-right"
>
:
</text>
</view>
<view
class=
"uni-datetime-picker-btn"
>
<view
@
click=
"clearTime"
>
<text
class=
"uni-datetime-picker-btn-text"
>
{{
clearText
}}
</text>
</view>
<view
class=
"uni-datetime-picker-btn-group"
>
<view
class=
"uni-datetime-picker-cancel"
@
click=
"tiggerTimePicker"
>
<text
class=
"uni-datetime-picker-btn-text"
>
{{
cancelText
}}
</text>
</view>
<view
@
click=
"setTime"
>
<text
class=
"uni-datetime-picker-btn-text"
>
{{
okText
}}
</text>
</view>
</view>
</view>
</view>
<!-- #ifdef H5 -->
<!--
<keypress
v-if=
"visible"
@
esc=
"tiggerTimePicker"
@
enter=
"setTime"
/>
-->
<!-- #endif -->
</view>
</
template
>
<
script
>
// #ifdef H5
import
keypress
from
'./keypress'
// #endif
import
{
initVueI18n
}
from
'@dcloudio/uni-i18n'
import
messages
from
'./i18n/index.js'
const
{
t
}
=
initVueI18n
(
messages
)
/**
* DatetimePicker 时间选择器
* @description 可以同时选择日期和时间的选择器
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
* @property {String} type = [datetime | date | time] 显示模式
* @property {Boolean} multiple = [true|false] 是否多选
* @property {String|Number} value 默认值
* @property {String|Number} start 起始日期或时间
* @property {String|Number} end 起始日期或时间
* @property {String} return-type = [timestamp | string]
* @event {Function} change 选中发生变化触发
*/
export
default
{
name
:
'UniDatetimePicker'
,
components
:
{
// #ifdef H5
keypress
// #endif
},
data
()
{
return
{
indicatorStyle
:
`height: 50px;`
,
visible
:
false
,
fixNvueBug
:
{},
dateShow
:
true
,
timeShow
:
true
,
title
:
'日期和时间'
,
// 输入框当前时间
time
:
''
,
// 当前的年月日时分秒
year
:
1900
,
month
:
0
,
day
:
0
,
hour
:
0
,
minute
:
0
,
second
:
0
,
// 起始时间
startYear
:
1920
,
startMonth
:
1
,
startDay
:
1
,
startHour
:
0
,
startMinute
:
0
,
startSecond
:
0
,
// 结束时间
endYear
:
2120
,
endMonth
:
12
,
endDay
:
31
,
endHour
:
23
,
endMinute
:
59
,
endSecond
:
59
,
}
},
props
:
{
type
:
{
type
:
String
,
default
:
'datetime'
},
value
:
{
type
:
[
String
,
Number
],
default
:
''
},
modelValue
:
{
type
:
[
String
,
Number
],
default
:
''
},
start
:
{
type
:
[
Number
,
String
],
default
:
''
},
end
:
{
type
:
[
Number
,
String
],
default
:
''
},
returnType
:
{
type
:
String
,
default
:
'string'
},
disabled
:
{
type
:
[
Boolean
,
String
],
default
:
false
},
border
:
{
type
:
[
Boolean
,
String
],
default
:
true
},
hideSecond
:
{
type
:
[
Boolean
,
String
],
default
:
false
}
},
watch
:
{
value
:
{
handler
(
newVal
,
oldVal
)
{
if
(
newVal
)
{
this
.
parseValue
(
this
.
fixIosDateFormat
(
newVal
))
//兼容 iOS、safari 日期格式
this
.
initTime
(
false
)
}
else
{
this
.
parseValue
(
Date
.
now
())
}
},
immediate
:
true
},
type
:
{
handler
(
newValue
)
{
if
(
newValue
===
'date'
)
{
this
.
dateShow
=
true
this
.
timeShow
=
false
this
.
title
=
'日期'
}
else
if
(
newValue
===
'time'
)
{
this
.
dateShow
=
false
this
.
timeShow
=
true
this
.
title
=
'时间'
}
else
{
this
.
dateShow
=
true
this
.
timeShow
=
true
this
.
title
=
'日期和时间'
}
},
immediate
:
true
},
start
:
{
handler
(
newVal
)
{
this
.
parseDatetimeRange
(
this
.
fixIosDateFormat
(
newVal
),
'start'
)
//兼容 iOS、safari 日期格式
},
immediate
:
true
},
end
:
{
handler
(
newVal
)
{
this
.
parseDatetimeRange
(
this
.
fixIosDateFormat
(
newVal
),
'end'
)
//兼容 iOS、safari 日期格式
},
immediate
:
true
},
// 月、日、时、分、秒可选范围变化后,检查当前值是否在范围内,不在则当前值重置为可选范围第一项
months
(
newVal
)
{
this
.
checkValue
(
'month'
,
this
.
month
,
newVal
)
},
days
(
newVal
)
{
this
.
checkValue
(
'day'
,
this
.
day
,
newVal
)
},
hours
(
newVal
)
{
this
.
checkValue
(
'hour'
,
this
.
hour
,
newVal
)
},
minutes
(
newVal
)
{
this
.
checkValue
(
'minute'
,
this
.
minute
,
newVal
)
},
seconds
(
newVal
)
{
this
.
checkValue
(
'second'
,
this
.
second
,
newVal
)
}
},
computed
:
{
// 当前年、月、日、时、分、秒选择范围
years
()
{
return
this
.
getCurrentRange
(
'year'
)
},
months
()
{
return
this
.
getCurrentRange
(
'month'
)
},
days
()
{
return
this
.
getCurrentRange
(
'day'
)
},
hours
()
{
return
this
.
getCurrentRange
(
'hour'
)
},
minutes
()
{
return
this
.
getCurrentRange
(
'minute'
)
},
seconds
()
{
return
this
.
getCurrentRange
(
'second'
)
},
// picker 当前值数组
ymd
()
{
return
[
this
.
year
-
this
.
minYear
,
this
.
month
-
this
.
minMonth
,
this
.
day
-
this
.
minDay
]
},
hms
()
{
return
[
this
.
hour
-
this
.
minHour
,
this
.
minute
-
this
.
minMinute
,
this
.
second
-
this
.
minSecond
]
},
// 当前 date 是 start
currentDateIsStart
()
{
return
this
.
year
===
this
.
startYear
&&
this
.
month
===
this
.
startMonth
&&
this
.
day
===
this
.
startDay
},
// 当前 date 是 end
currentDateIsEnd
()
{
return
this
.
year
===
this
.
endYear
&&
this
.
month
===
this
.
endMonth
&&
this
.
day
===
this
.
endDay
},
// 当前年、月、日、时、分、秒的最小值和最大值
minYear
()
{
return
this
.
startYear
},
maxYear
()
{
return
this
.
endYear
},
minMonth
()
{
if
(
this
.
year
===
this
.
startYear
)
{
return
this
.
startMonth
}
else
{
return
1
}
},
maxMonth
()
{
if
(
this
.
year
===
this
.
endYear
)
{
return
this
.
endMonth
}
else
{
return
12
}
},
minDay
()
{
if
(
this
.
year
===
this
.
startYear
&&
this
.
month
===
this
.
startMonth
)
{
return
this
.
startDay
}
else
{
return
1
}
},
maxDay
()
{
if
(
this
.
year
===
this
.
endYear
&&
this
.
month
===
this
.
endMonth
)
{
return
this
.
endDay
}
else
{
return
this
.
daysInMonth
(
this
.
year
,
this
.
month
)
}
},
minHour
()
{
if
(
this
.
type
===
'datetime'
)
{
if
(
this
.
currentDateIsStart
)
{
return
this
.
startHour
}
else
{
return
0
}
}
if
(
this
.
type
===
'time'
)
{
return
this
.
startHour
}
},
maxHour
()
{
if
(
this
.
type
===
'datetime'
)
{
if
(
this
.
currentDateIsEnd
)
{
return
this
.
endHour
}
else
{
return
23
}
}
if
(
this
.
type
===
'time'
)
{
return
this
.
endHour
}
},
minMinute
()
{
if
(
this
.
type
===
'datetime'
)
{
if
(
this
.
currentDateIsStart
&&
this
.
hour
===
this
.
startHour
)
{
return
this
.
startMinute
}
else
{
return
0
}
}
if
(
this
.
type
===
'time'
)
{
if
(
this
.
hour
===
this
.
startHour
)
{
return
this
.
startMinute
}
else
{
return
0
}
}
},
maxMinute
()
{
if
(
this
.
type
===
'datetime'
)
{
if
(
this
.
currentDateIsEnd
&&
this
.
hour
===
this
.
endHour
)
{
return
this
.
endMinute
}
else
{
return
59
}
}
if
(
this
.
type
===
'time'
)
{
if
(
this
.
hour
===
this
.
endHour
)
{
return
this
.
endMinute
}
else
{
return
59
}
}
},
minSecond
()
{
if
(
this
.
type
===
'datetime'
)
{
if
(
this
.
currentDateIsStart
&&
this
.
hour
===
this
.
startHour
&&
this
.
minute
===
this
.
startMinute
)
{
return
this
.
startSecond
}
else
{
return
0
}
}
if
(
this
.
type
===
'time'
)
{
if
(
this
.
hour
===
this
.
startHour
&&
this
.
minute
===
this
.
startMinute
)
{
return
this
.
startSecond
}
else
{
return
0
}
}
},
maxSecond
()
{
if
(
this
.
type
===
'datetime'
)
{
if
(
this
.
currentDateIsEnd
&&
this
.
hour
===
this
.
endHour
&&
this
.
minute
===
this
.
endMinute
)
{
return
this
.
endSecond
}
else
{
return
59
}
}
if
(
this
.
type
===
'time'
)
{
if
(
this
.
hour
===
this
.
endHour
&&
this
.
minute
===
this
.
endMinute
)
{
return
this
.
endSecond
}
else
{
return
59
}
}
},
/**
* for i18n
*/
selectTimeText
()
{
return
t
(
"uni-datetime-picker.selectTime"
)
},
okText
()
{
return
t
(
"uni-datetime-picker.ok"
)
},
clearText
()
{
return
t
(
"uni-datetime-picker.clear"
)
},
cancelText
()
{
return
t
(
"uni-datetime-picker.cancel"
)
}
},
mounted
()
{
// #ifdef APP-NVUE
const
res
=
uni
.
getSystemInfoSync
();
this
.
fixNvueBug
=
{
top
:
res
.
windowHeight
/
2
,
left
:
res
.
windowWidth
/
2
}
// #endif
},
methods
:
{
/**
* @param {Object} item
* 小于 10 在前面加个 0
*/
lessThanTen
(
item
)
{
return
item
<
10
?
'0'
+
item
:
item
},
/**
* 解析时分秒字符串,例如:00:00:00
* @param {String} timeString
*/
parseTimeType
(
timeString
)
{
if
(
timeString
)
{
let
timeArr
=
timeString
.
split
(
':'
)
this
.
hour
=
Number
(
timeArr
[
0
])
this
.
minute
=
Number
(
timeArr
[
1
])
this
.
second
=
Number
(
timeArr
[
2
])
}
},
/**
* 解析选择器初始值,类型可以是字符串、时间戳,例如:2000-10-02、'08:30:00'、 1610695109000
* @param {String | Number} datetime
*/
initPickerValue
(
datetime
)
{
let
defaultValue
=
null
if
(
datetime
)
{
defaultValue
=
this
.
compareValueWithStartAndEnd
(
datetime
,
this
.
start
,
this
.
end
)
}
else
{
defaultValue
=
Date
.
now
()
defaultValue
=
this
.
compareValueWithStartAndEnd
(
defaultValue
,
this
.
start
,
this
.
end
)
}
this
.
parseValue
(
defaultValue
)
},
/**
* 初始值规则:
* - 用户设置初始值 value
* - 设置了起始时间 start、终止时间 end,并 start < value < end,初始值为 value, 否则初始值为 start
* - 只设置了起始时间 start,并 start < value,初始值为 value,否则初始值为 start
* - 只设置了终止时间 end,并 value < end,初始值为 value,否则初始值为 end
* - 无起始终止时间,则初始值为 value
* - 无初始值 value,则初始值为当前本地时间 Date.now()
* @param {Object} value
* @param {Object} dateBase
*/
compareValueWithStartAndEnd
(
value
,
start
,
end
)
{
let
winner
=
null
value
=
this
.
superTimeStamp
(
value
)
start
=
this
.
superTimeStamp
(
start
)
end
=
this
.
superTimeStamp
(
end
)
if
(
start
&&
end
)
{
if
(
value
<
start
)
{
winner
=
new
Date
(
start
)
}
else
if
(
value
>
end
)
{
winner
=
new
Date
(
end
)
}
else
{
winner
=
new
Date
(
value
)
}
}
else
if
(
start
&&
!
end
)
{
winner
=
start
<=
value
?
new
Date
(
value
)
:
new
Date
(
start
)
}
else
if
(
!
start
&&
end
)
{
winner
=
value
<=
end
?
new
Date
(
value
)
:
new
Date
(
end
)
}
else
{
winner
=
new
Date
(
value
)
}
return
winner
},
/**
* 转换为可比较的时间戳,接受日期、时分秒、时间戳
* @param {Object} value
*/
superTimeStamp
(
value
)
{
let
dateBase
=
''
if
(
this
.
type
===
'time'
&&
value
&&
typeof
value
===
'string'
)
{
const
now
=
new
Date
()
const
year
=
now
.
getFullYear
()
const
month
=
now
.
getMonth
()
+
1
const
day
=
now
.
getDate
()
dateBase
=
year
+
'/'
+
month
+
'/'
+
day
+
' '
}
if
(
Number
(
value
)
&&
typeof
value
!==
NaN
)
{
value
=
parseInt
(
value
)
dateBase
=
0
}
return
this
.
createTimeStamp
(
dateBase
+
value
)
},
/**
* 解析默认值 value,字符串、时间戳
* @param {Object} defaultTime
*/
parseValue
(
value
)
{
if
(
!
value
)
return
if
(
this
.
type
===
'time'
&&
typeof
value
===
"string"
)
{
this
.
parseTimeType
(
value
)
}
else
{
let
defaultDate
=
null
defaultDate
=
new
Date
(
value
)
if
(
this
.
type
!==
'time'
)
{
this
.
year
=
defaultDate
.
getFullYear
()
this
.
month
=
defaultDate
.
getMonth
()
+
1
this
.
day
=
defaultDate
.
getDate
()
}
if
(
this
.
type
!==
'date'
)
{
this
.
hour
=
defaultDate
.
getHours
()
this
.
minute
=
defaultDate
.
getMinutes
()
this
.
second
=
defaultDate
.
getSeconds
()
}
}
if
(
this
.
hideSecond
)
{
this
.
second
=
0
}
},
/**
* 解析可选择时间范围 start、end,年月日字符串、时间戳
* @param {Object} defaultTime
*/
parseDatetimeRange
(
point
,
pointType
)
{
// 时间为空,则重置为初始值
if
(
!
point
)
{
if
(
pointType
===
'start'
)
{
this
.
startYear
=
1920
this
.
startMonth
=
1
this
.
startDay
=
1
this
.
startHour
=
0
this
.
startMinute
=
0
this
.
startSecond
=
0
}
if
(
pointType
===
'end'
)
{
this
.
endYear
=
120
this
.
endMonth
=
12
this
.
endDay
=
31
this
.
endHour
=
23
this
.
endMinute
=
59
this
.
endSecond
=
59
}
return
}
if
(
this
.
type
===
'time'
)
{
const
pointArr
=
point
.
split
(
':'
)
this
[
pointType
+
'Hour'
]
=
Number
(
pointArr
[
0
])
this
[
pointType
+
'Minute'
]
=
Number
(
pointArr
[
1
])
this
[
pointType
+
'Second'
]
=
Number
(
pointArr
[
2
])
}
else
{
if
(
!
point
)
{
pointType
===
'start'
?
this
.
startYear
=
this
.
year
-
60
:
this
.
endYear
=
this
.
year
+
60
return
}
if
(
Number
(
point
)
&&
Number
(
point
)
!==
NaN
)
{
point
=
parseInt
(
point
)
}
// datetime 的 end 没有时分秒, 则不限制
const
hasTime
=
/
[
0-9
]
:
[
0-9
]
/
if
(
this
.
type
===
'datetime'
&&
pointType
===
'end'
&&
typeof
point
===
'string'
&&
!
hasTime
.
test
(
point
))
{
point
=
point
+
' 23:59:59'
}
const
pointDate
=
new
Date
(
point
)
this
[
pointType
+
'Year'
]
=
pointDate
.
getFullYear
()
this
[
pointType
+
'Month'
]
=
pointDate
.
getMonth
()
+
1
this
[
pointType
+
'Day'
]
=
pointDate
.
getDate
()
if
(
this
.
type
===
'datetime'
)
{
this
[
pointType
+
'Hour'
]
=
pointDate
.
getHours
()
this
[
pointType
+
'Minute'
]
=
pointDate
.
getMinutes
()
this
[
pointType
+
'Second'
]
=
pointDate
.
getSeconds
()
}
}
},
// 获取 年、月、日、时、分、秒 当前可选范围
getCurrentRange
(
value
)
{
const
range
=
[]
for
(
let
i
=
this
[
'min'
+
this
.
capitalize
(
value
)];
i
<=
this
[
'max'
+
this
.
capitalize
(
value
)];
i
++
)
{
range
.
push
(
i
)
}
return
range
},
// 字符串首字母大写
capitalize
(
str
)
{
return
str
.
charAt
(
0
).
toUpperCase
()
+
str
.
slice
(
1
)
},
// 检查当前值是否在范围内,不在则当前值重置为可选范围第一项
checkValue
(
name
,
value
,
values
)
{
if
(
values
.
indexOf
(
value
)
===
-
1
)
{
this
[
name
]
=
values
[
0
]
}
},
// 每个月的实际天数
daysInMonth
(
year
,
month
)
{
// Use 1 for January, 2 for February, etc.
return
new
Date
(
year
,
month
,
0
).
getDate
();
},
//兼容 iOS、safari 日期格式
fixIosDateFormat
(
value
)
{
if
(
typeof
value
===
'string'
)
{
value
=
value
.
replace
(
/-/g
,
'/'
)
}
return
value
},
/**
* 生成时间戳
* @param {Object} time
*/
createTimeStamp
(
time
)
{
if
(
!
time
)
return
if
(
typeof
time
===
"number"
)
{
return
time
}
else
{
time
=
time
.
replace
(
/-/g
,
'/'
)
if
(
this
.
type
===
'date'
)
{
time
=
time
+
' '
+
'00:00:00'
}
return
Date
.
parse
(
time
)
}
},
/**
* 生成日期或时间的字符串
*/
createDomSting
()
{
const
yymmdd
=
this
.
year
+
'-'
+
this
.
lessThanTen
(
this
.
month
)
+
'-'
+
this
.
lessThanTen
(
this
.
day
)
let
hhmmss
=
this
.
lessThanTen
(
this
.
hour
)
+
':'
+
this
.
lessThanTen
(
this
.
minute
)
if
(
!
this
.
hideSecond
)
{
hhmmss
=
hhmmss
+
':'
+
this
.
lessThanTen
(
this
.
second
)
}
if
(
this
.
type
===
'date'
)
{
return
yymmdd
}
else
if
(
this
.
type
===
'time'
)
{
return
hhmmss
}
else
{
return
yymmdd
+
' '
+
hhmmss
}
},
/**
* 初始化返回值,并抛出 change 事件
*/
initTime
(
emit
=
true
)
{
this
.
time
=
this
.
createDomSting
()
if
(
!
emit
)
return
if
(
this
.
returnType
===
'timestamp'
&&
this
.
type
!==
'time'
)
{
this
.
$emit
(
'change'
,
this
.
createTimeStamp
(
this
.
time
))
this
.
$emit
(
'input'
,
this
.
createTimeStamp
(
this
.
time
))
this
.
$emit
(
'update:modelValue'
,
this
.
createTimeStamp
(
this
.
time
))
}
else
{
this
.
$emit
(
'change'
,
this
.
time
)
this
.
$emit
(
'input'
,
this
.
time
)
this
.
$emit
(
'update:modelValue'
,
this
.
time
)
}
},
/**
* 用户选择日期或时间更新 data
* @param {Object} e
*/
bindDateChange
(
e
)
{
const
val
=
e
.
detail
.
value
this
.
year
=
this
.
years
[
val
[
0
]]
this
.
month
=
this
.
months
[
val
[
1
]]
this
.
day
=
this
.
days
[
val
[
2
]]
},
bindTimeChange
(
e
)
{
const
val
=
e
.
detail
.
value
this
.
hour
=
this
.
hours
[
val
[
0
]]
this
.
minute
=
this
.
minutes
[
val
[
1
]]
this
.
second
=
this
.
seconds
[
val
[
2
]]
},
/**
* 初始化弹出层
*/
initTimePicker
()
{
if
(
this
.
disabled
)
return
const
value
=
this
.
fixIosDateFormat
(
this
.
value
)
this
.
initPickerValue
(
value
)
this
.
visible
=
!
this
.
visible
},
/**
* 触发或关闭弹框
*/
tiggerTimePicker
(
e
)
{
this
.
visible
=
!
this
.
visible
},
/**
* 用户点击“清空”按钮,清空当前值
*/
clearTime
()
{
this
.
time
=
''
this
.
$emit
(
'change'
,
this
.
time
)
this
.
$emit
(
'input'
,
this
.
time
)
this
.
$emit
(
'update:modelValue'
,
this
.
time
)
this
.
tiggerTimePicker
()
},
/**
* 用户点击“确定”按钮
*/
setTime
()
{
this
.
initTime
()
this
.
tiggerTimePicker
()
}
}
}
</
script
>
<
style
>
.uni-datetime-picker
{
/* #ifndef APP-NVUE */
width
:
100%
;
/* #endif */
}
.uni-datetime-picker-view
{
height
:
130px
;
width
:
270px
;
/* #ifndef APP-NVUE */
cursor
:
pointer
;
/* #endif */
}
.uni-datetime-picker-item
{
height
:
50px
;
line-height
:
50px
;
text-align
:
center
;
font-size
:
14px
;
}
.uni-datetime-picker-btn
{
margin-top
:
60px
;
/* #ifndef APP-NVUE */
display
:
flex
;
cursor
:
pointer
;
/* #endif */
flex-direction
:
row
;
justify-content
:
space-between
;
}
.uni-datetime-picker-btn-text
{
font-size
:
14px
;
color
:
#007AFF
;
}
.uni-datetime-picker-btn-group
{
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
row
;
}
.uni-datetime-picker-cancel
{
margin-right
:
30px
;
}
.uni-datetime-picker-mask
{
position
:
fixed
;
bottom
:
0px
;
top
:
0px
;
left
:
0px
;
right
:
0px
;
background-color
:
rgba
(
0
,
0
,
0
,
0.4
);
transition-duration
:
0.3s
;
z-index
:
998
;
}
.uni-datetime-picker-popup
{
border-radius
:
8px
;
padding
:
30px
;
width
:
270px
;
/* #ifdef APP-NVUE */
height
:
500px
;
/* #endif */
/* #ifdef APP-NVUE */
width
:
330px
;
/* #endif */
background-color
:
#fff
;
position
:
fixed
;
top
:
50%
;
left
:
50%
;
transform
:
translate
(
-50%
,
-50%
);
transition-duration
:
0.3s
;
z-index
:
999
;
}
.fix-nvue-height
{
/* #ifdef APP-NVUE */
height
:
330px
;
/* #endif */
}
.uni-datetime-picker-time
{
color
:
grey
;
}
.uni-datetime-picker-column
{
height
:
50px
;
}
.uni-datetime-picker-timebox
{
border
:
1px
solid
#E5E5E5
;
border-radius
:
5px
;
padding
:
7px
10px
;
/* #ifndef APP-NVUE */
box-sizing
:
border-box
;
cursor
:
pointer
;
/* #endif */
}
.uni-datetime-picker-timebox-pointer
{
/* #ifndef APP-NVUE */
cursor
:
pointer
;
/* #endif */
}
.uni-datetime-picker-disabled
{
opacity
:
0.4
;
/* #ifdef H5 */
cursor
:
not-allowed
!important
;
/* #endif */
}
.uni-datetime-picker-text
{
font-size
:
14px
;
}
.uni-datetime-picker-sign
{
position
:
absolute
;
top
:
53px
;
/* 减掉 10px 的元素高度,兼容nvue */
color
:
#999
;
/* #ifdef APP-NVUE */
font-size
:
16px
;
/* #endif */
}
.sign-left
{
left
:
86px
;
}
.sign-right
{
right
:
86px
;
}
.sign-center
{
left
:
135px
;
}
.uni-datetime-picker__container-box
{
position
:
relative
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
margin-top
:
40px
;
}
.time-hide-second
{
width
:
180px
;
}
</
style
>
uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
0 → 100644
View file @
16d3b58f
<
template
>
<view
class=
"uni-date"
>
<view
class=
"uni-date-editor"
@
click=
"show"
>
<slot>
<view
class=
"uni-date-editor--x"
:class=
"
{'uni-date-editor--x__disabled': disabled,
'uni-date-x--border': border}">
<view
v-if=
"!isRange"
class=
"uni-date-x uni-date-single"
>
<view
class=
"uni-date__icon-logo"
>
<image
class=
"uni-date-editor--logo"
:src=
"iconBase64"
mode=
""
></image>
</view>
<input
class=
"uni-date__x-input"
type=
"text"
v-model=
"singleVal"
:placeholder=
"singlePlaceholderText"
:disabled=
"true"
/>
</view>
<view
v-else
class=
"uni-date-x uni-date-range"
>
<view
class=
"uni-date__icon-logo"
>
<image
class=
"uni-date-editor--logo"
:src=
"iconBase64"
mode=
""
></image>
</view>
<input
class=
"uni-date__x-input t-c"
type=
"text"
v-model=
"range.startDate"
:placeholder=
"startPlaceholderText"
:disabled=
"true"
/>
<slot>
<view
class=
""
>
{{
rangeSeparator
}}
</view>
</slot>
<input
class=
"uni-date__x-input t-c"
type=
"text"
v-model=
"range.endDate"
:placeholder=
"endPlaceholderText"
:disabled=
"true"
/>
</view>
<view
v-show=
"clearIcon && !disabled && !isPhone && (singleVal || (range.startDate && range.endDate))"
class=
"uni-date__icon-clear"
@
click
.
stop=
"clear"
>
<uni-icons
type=
"clear"
color=
"#e1e1e1"
size=
"14"
></uni-icons>
</view>
</view>
</slot>
</view>
<view
v-show=
"popup"
class=
"uni-date-mask"
@
click=
"close"
></view>
<view
v-if=
"!isPhone"
ref=
"datePicker"
v-show=
"popup"
class=
"uni-date-picker__container"
>
<view
v-if=
"!isRange"
class=
"uni-date-single--x"
:style=
"popover"
>
<view
v-show=
"hasTime"
class=
"uni-date-changed popup-x-header"
>
<input
class=
"uni-date__input t-c"
type=
"text"
v-model=
"tempSingleDate"
:placeholder=
"selectDateText"
/>
<time-picker
type=
"time"
v-model=
"time"
:border=
"false"
:disabled=
"!tempSingleDate"
:start=
"reactStartTime"
:end=
"reactEndTime"
>
<input
class=
"uni-date__input t-c"
type=
"text"
v-model=
"time"
:placeholder=
"selectTimeText"
:disabled=
"!tempSingleDate"
/>
</time-picker>
</view>
<calendar
ref=
"pcSingle"
class=
"uni-date_calendar-pc"
:showMonth=
"false"
:start-date=
"caleRange.startDate"
:end-date=
"caleRange.endDate"
:date=
"defSingleDate"
@
change=
"singleChange"
/>
<view
v-if=
"hasTime"
class=
"popup-x-footer"
>
<!--
<text
class=
""
>
此刻
</text>
-->
<text
class=
"confirm"
@
click=
"confirmSingleChange"
>
{{
okText
}}
</text>
</view>
<view
class=
"uni-date-popper__arrow"
></view>
</view>
<view
v-else
class=
"uni-date-range--x"
:style=
"popover"
>
<view
v-show=
"hasTime"
class=
"popup-x-header uni-date-changed"
>
<view
class=
"popup-x-header--datetime"
>
<input
class=
"uni-date__input uni-date-range__input"
type=
"text"
v-model=
"tempRange.startDate"
:placeholder=
"startDateText"
/>
<time-picker
type=
"time"
v-model=
"tempRange.startTime"
:start=
"reactStartTime"
:border=
"false"
:disabled=
"!tempRange.startDate"
>
<input
class=
"uni-date__input uni-date-range__input"
type=
"text"
v-model=
"tempRange.startTime"
:placeholder=
"startTimeText"
:disabled=
"!tempRange.startDate"
/>
</time-picker>
</view>
<uni-icons
type=
"arrowthinright"
color=
"#999"
style=
"line-height: 40px;"
></uni-icons>
<view
class=
"popup-x-header--datetime"
>
<input
class=
"uni-date__input uni-date-range__input"
type=
"text"
v-model=
"tempRange.endDate"
:placeholder=
"endDateText"
/>
<time-picker
type=
"time"
v-model=
"tempRange.endTime"
:end=
"reactEndTime"
:border=
"false"
:disabled=
"!tempRange.endDate"
>
<input
class=
"uni-date__input uni-date-range__input"
type=
"text"
v-model=
"tempRange.endTime"
:placeholder=
"endTimeText"
:disabled=
"!tempRange.endDate"
/>
</time-picker>
</view>
</view>
<view
class=
"popup-x-body"
>
<calendar
ref=
"left"
class=
"uni-date_calendar-pc"
:showMonth=
"false"
:start-date=
"caleRange.startDate"
:end-date=
"caleRange.endDate"
:range=
"true"
@
change=
"leftChange"
:pleStatus=
"endMultipleStatus"
@
firstEnterCale=
"updateRightCale"
@
monthSwitch=
"leftMonthSwitch"
/>
<calendar
ref=
"right"
class=
"uni-date_calendar-pc"
:showMonth=
"false"
:start-date=
"caleRange.startDate"
:end-date=
"caleRange.endDate"
:range=
"true"
@
change=
"rightChange"
:pleStatus=
"startMultipleStatus"
@
firstEnterCale=
"updateLeftCale"
@
monthSwitch=
"rightMonthSwitch"
style=
"border-left: 1px solid #F1F1F1;"
/>
</view>
<view
v-if=
"hasTime"
class=
"popup-x-footer"
>
<text
class=
""
@
click=
"clear"
>
{{
clearText
}}
</text>
<text
class=
"confirm"
@
click=
"confirmRangeChange"
>
{{
okText
}}
</text>
</view>
</view>
</view>
<calendar
v-if=
"isPhone"
ref=
"mobile"
:clearDate=
"false"
:date=
"defSingleDate"
:defTime=
"reactMobDefTime"
:start-date=
"caleRange.startDate"
:end-date=
"caleRange.endDate"
:selectableTimes=
"mobSelectableTime"
:pleStatus=
"endMultipleStatus"
:showMonth=
"false"
:range=
"isRange"
:typeHasTime=
"hasTime"
:insert=
"false"
@
confirm=
"mobileChange"
/>
</view>
</
template
>
<
script
>
/**
* DatetimePicker 时间选择器
* @description 同时支持 PC 和移动端使用日历选择日期和日期范围
* @tutorial https://ext.dcloud.net.cn/plugin?id=3962
* @property {String} type 选择器类型
* @property {String|Array} value 绑定值
* @property {String} placeholder 单选择时的占位内容
* @property {String} start 起始时间
* @property {String} start 终止时间
* @property {String} start-placeholder 范围选择时开始日期的占位内容
* @property {String} end-placeholder 范围选择时结束日期的占位内容
* @property {String} range-separator 选择范围时的分隔符
* @property {Boolean} border = [true|false] 是否有边框
* @property {Boolean} disabled = [true|false] 是否禁用
* @property {Boolean} clearIcon = [true|false] 是否显示清除按钮(仅PC端适用)
* @event {Function} change 确定日期时触发的事件
**/
import
calendar
from
'./calendar.vue'
import
timePicker
from
'./time-picker.vue'
import
{
initVueI18n
}
from
'@dcloudio/uni-i18n'
import
messages
from
'./i18n/index.js'
const
{
t
}
=
initVueI18n
(
messages
)
export
default
{
name
:
'UniDatetimePicker'
,
components
:
{
calendar
,
timePicker
},
data
()
{
return
{
isRange
:
false
,
hasTime
:
false
,
mobileRange
:
false
,
// 单选
singleVal
:
''
,
tempSingleDate
:
''
,
defSingleDate
:
''
,
time
:
''
,
// 范围选
caleRange
:
{
startDate
:
''
,
startTime
:
''
,
endDate
:
''
,
endTime
:
''
},
range
:
{
startDate
:
''
,
// startTime: '',
endDate
:
''
,
// endTime: ''
},
tempRange
:
{
startDate
:
''
,
startTime
:
''
,
endDate
:
''
,
endTime
:
''
},
// 左右日历同步数据
startMultipleStatus
:
{
before
:
''
,
after
:
''
,
data
:
[],
fulldate
:
''
},
endMultipleStatus
:
{
before
:
''
,
after
:
''
,
data
:
[],
fulldate
:
''
},
visible
:
false
,
popup
:
false
,
popover
:
null
,
isEmitValue
:
false
,
isPhone
:
false
,
isFirstShow
:
true
,
iconBase64
:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAACVklEQVRoge2Zv2vTQRTAP4oWJQQskmolBAnSQVMcSxbp4ubmIEWETu0oIjg5iIOgpLNunfQfMHToUgpOVgfRqRAL4q8WRLQVq4sOdyHPL9/7evfNJReS+8DB433v7r37fl/eu9xBJBKUB0BLt+uDaOOQZb8SUNXyuKuRftg46NeXcBww6M8AC0ANOAycAyb1s7e6+SbNxi/gBfAQ2HadcA7YB/4MUPsKzLos4jzwewAcNy3mhMnx5I/9BiqUAD4DDWAXmAfqWt8Enlq+GBfSbEwAt4AicAxYBO7aTPaGzhu4KvTLQn/Hh9cpmGzcFvqmaXAyaxWE/MGTg93yXsgFUyfbOrJCJ2s8y+tRP21s0fmMTlmih8zT8WnN1GloCmJWaF0CpvrlSAb1/3fJXshNT470hZEIrZeoahqaU8BZ10Exa4XGtiCaKKL+EIHaMX8U81ZEP7ntrwi7n4CfWi7p+UCFdFdh7Rpaps9+mn93rjY2THut0QqtoVlIkpi1QjNyCzEdnl0W+idCXxb6VmKudaGfsbBhRbcHdEWhf5eYt0o6FVR6BjhqYcOKoQkt2y/SAB5rWVbpVeCilmUl3hb6JNeAI1p+ZWEjFzH9hsY2tEwHdHX9DGATWNLyceCeGL/YhY+58LWhy9o0uhJDKw3T4dlr4L6WZab5JvRBGJqs9UPI5R44lQfpx56pUzK0NlA3R6AK1Engu1+/nGhfK7R5bjtwGnXdFfpSJ6190Quz5grqQCC048lFXMhy2nQZWkUVsRowZv8OvLOPCvdHwE5APyKRSMQzfwE22DtT3T5PPwAAAABJRU5ErkJggg=='
}
},
props
:
{
type
:
{
type
:
String
,
default
:
'datetime'
},
value
:
{
type
:
[
String
,
Number
,
Array
,
Date
],
default
:
''
},
modelValue
:
{
type
:
[
String
,
Number
,
Array
,
Date
],
default
:
''
},
start
:
{
type
:
[
Number
,
String
],
default
:
''
},
end
:
{
type
:
[
Number
,
String
],
default
:
''
},
returnType
:
{
type
:
String
,
default
:
'string'
},
placeholder
:
{
type
:
String
,
default
:
''
},
startPlaceholder
:
{
type
:
String
,
default
:
''
},
endPlaceholder
:
{
type
:
String
,
default
:
''
},
rangeSeparator
:
{
type
:
String
,
default
:
'-'
},
border
:
{
type
:
[
Boolean
],
default
:
true
},
disabled
:
{
type
:
[
Boolean
],
default
:
false
},
clearIcon
:
{
type
:
[
Boolean
],
default
:
true
}
},
watch
:
{
type
:
{
immediate
:
true
,
handler
(
newVal
,
oldVal
)
{
if
(
newVal
.
indexOf
(
'time'
)
!==
-
1
)
{
this
.
hasTime
=
true
}
else
{
this
.
hasTime
=
false
}
if
(
newVal
.
indexOf
(
'range'
)
!==
-
1
)
{
this
.
isRange
=
true
}
else
{
this
.
isRange
=
false
}
}
},
value
:
{
immediate
:
true
,
handler
(
newVal
,
oldVal
)
{
if
(
this
.
isEmitValue
)
{
this
.
isEmitValue
=
false
return
}
this
.
initPicker
(
newVal
)
}
},
start
:
{
immediate
:
true
,
handler
(
newVal
,
oldVal
)
{
if
(
!
newVal
)
return
const
{
defDate
,
defTime
}
=
this
.
parseDate
(
newVal
)
this
.
caleRange
.
startDate
=
defDate
if
(
this
.
hasTime
)
{
this
.
caleRange
.
startTime
=
defTime
}
}
},
end
:
{
immediate
:
true
,
handler
(
newVal
,
oldVal
)
{
if
(
!
newVal
)
return
const
{
defDate
,
defTime
}
=
this
.
parseDate
(
newVal
)
this
.
caleRange
.
endDate
=
defDate
if
(
this
.
hasTime
)
{
this
.
caleRange
.
endTime
=
defTime
}
}
},
},
computed
:
{
reactStartTime
()
{
const
activeDate
=
this
.
isRange
?
this
.
tempRange
.
startDate
:
this
.
tempSingleDate
const
res
=
activeDate
===
this
.
caleRange
.
startDate
?
this
.
caleRange
.
startTime
:
''
return
res
},
reactEndTime
()
{
const
activeDate
=
this
.
isRange
?
this
.
tempRange
.
endDate
:
this
.
tempSingleDate
const
res
=
activeDate
===
this
.
caleRange
.
endDate
?
this
.
caleRange
.
endTime
:
''
return
res
},
reactMobDefTime
()
{
return
this
.
isRange
?
{
start
:
this
.
tempRange
.
startTime
,
end
:
this
.
tempRange
.
endTime
}
:
this
.
time
},
mobSelectableTime
()
{
return
{
start
:
this
.
caleRange
.
startTime
,
end
:
this
.
caleRange
.
endTime
}
},
datePopupWidth
()
{
// todo
return
this
.
isRange
?
653
:
301
},
/**
* for i18n
*/
singlePlaceholderText
()
{
return
this
.
placeholder
||
this
.
type
===
'date'
?
this
.
selectDateText
:
t
(
"uni-datetime-picker.selectDateTime"
)
},
startPlaceholderText
()
{
return
this
.
startPlaceholder
||
this
.
startDateText
},
endPlaceholderText
()
{
return
this
.
endPlaceholder
||
this
.
endDateText
},
selectDateText
()
{
return
t
(
"uni-datetime-picker.selectDate"
)
},
selectTimeText
()
{
return
t
(
"uni-datetime-picker.selectTime"
)
},
startDateText
()
{
return
this
.
startPlaceholder
||
t
(
"uni-datetime-picker.startDate"
)
},
startTimeText
()
{
return
t
(
"uni-datetime-picker.startTime"
)
},
endDateText
()
{
return
this
.
endPlaceholder
||
t
(
"uni-datetime-picker.endDate"
)
},
endTimeText
()
{
return
t
(
"uni-datetime-picker.endTime"
)
},
okText
()
{
return
t
(
"uni-datetime-picker.ok"
)
},
clearText
()
{
return
t
(
"uni-datetime-picker.clear"
)
}
},
created
()
{
this
.
form
=
this
.
getForm
(
'uniForms'
)
this
.
formItem
=
this
.
getForm
(
'uniFormsItem'
)
// if (this.formItem) {
// if (this.formItem.name) {
// this.rename = this.formItem.name
// this.form.inputChildrens.push(this)
// }
// }
},
mounted
()
{
this
.
platform
()
},
methods
:
{
/**
* 获取父元素实例
*/
getForm
(
name
=
'uniForms'
)
{
let
parent
=
this
.
$parent
;
let
parentName
=
parent
.
$options
.
name
;
while
(
parentName
!==
name
)
{
parent
=
parent
.
$parent
;
if
(
!
parent
)
return
false
parentName
=
parent
.
$options
.
name
;
}
return
parent
;
},
initPicker
(
newVal
)
{
if
(
!
newVal
||
Array
.
isArray
(
newVal
)
&&
!
newVal
.
length
)
{
this
.
$nextTick
(()
=>
{
this
.
clear
(
false
)
})
return
}
if
(
!
Array
.
isArray
(
newVal
)
&&
!
this
.
isRange
)
{
const
{
defDate
,
defTime
}
=
this
.
parseDate
(
newVal
)
this
.
singleVal
=
defDate
this
.
tempSingleDate
=
defDate
this
.
defSingleDate
=
defDate
if
(
this
.
hasTime
)
{
this
.
singleVal
=
defDate
+
' '
+
defTime
this
.
time
=
defTime
}
}
else
{
const
[
before
,
after
]
=
newVal
if
(
!
before
&&
!
after
)
return
const
defBefore
=
this
.
parseDate
(
before
)
const
defAfter
=
this
.
parseDate
(
after
)
const
startDate
=
defBefore
.
defDate
const
endDate
=
defAfter
.
defDate
this
.
range
.
startDate
=
this
.
tempRange
.
startDate
=
startDate
this
.
range
.
endDate
=
this
.
tempRange
.
endDate
=
endDate
if
(
this
.
hasTime
)
{
this
.
range
.
startDate
=
defBefore
.
defDate
+
' '
+
defBefore
.
defTime
this
.
range
.
endDate
=
defAfter
.
defDate
+
' '
+
defAfter
.
defTime
this
.
tempRange
.
startTime
=
defBefore
.
defTime
this
.
tempRange
.
endTime
=
defAfter
.
defTime
}
const
defaultRange
=
{
before
:
defBefore
.
defDate
,
after
:
defAfter
.
defDate
}
this
.
startMultipleStatus
=
Object
.
assign
({},
this
.
startMultipleStatus
,
defaultRange
,
{
which
:
'right'
})
this
.
endMultipleStatus
=
Object
.
assign
({},
this
.
endMultipleStatus
,
defaultRange
,
{
which
:
'left'
})
}
},
updateLeftCale
(
e
)
{
const
left
=
this
.
$refs
.
left
// 设置范围选
left
.
cale
.
setHoverMultiple
(
e
.
after
)
left
.
setDate
(
this
.
$refs
.
left
.
nowDate
.
fullDate
)
},
updateRightCale
(
e
)
{
const
right
=
this
.
$refs
.
right
// 设置范围选
right
.
cale
.
setHoverMultiple
(
e
.
after
)
right
.
setDate
(
this
.
$refs
.
right
.
nowDate
.
fullDate
)
},
platform
()
{
const
systemInfo
=
uni
.
getSystemInfoSync
()
this
.
isPhone
=
systemInfo
.
windowWidth
<=
500
this
.
windowWidth
=
systemInfo
.
windowWidth
},
show
(
event
)
{
if
(
this
.
disabled
)
{
return
}
this
.
platform
()
if
(
this
.
isPhone
)
{
this
.
$refs
.
mobile
.
open
()
return
}
this
.
popover
=
{
top
:
'10px'
}
const
dateEditor
=
uni
.
createSelectorQuery
().
in
(
this
).
select
(
".uni-date-editor"
)
dateEditor
.
boundingClientRect
(
rect
=>
{
if
(
this
.
windowWidth
-
rect
.
left
<
this
.
datePopupWidth
)
{
this
.
popover
.
right
=
0
}
}).
exec
()
setTimeout
(()
=>
{
this
.
popup
=
!
this
.
popup
if
(
!
this
.
isPhone
&&
this
.
isRange
&&
this
.
isFirstShow
)
{
this
.
isFirstShow
=
false
const
{
startDate
,
endDate
}
=
this
.
range
if
(
startDate
&&
endDate
)
{
if
(
this
.
diffDate
(
startDate
,
endDate
)
<
30
)
{
this
.
$refs
.
right
.
next
()
}
}
else
{
this
.
$refs
.
right
.
next
()
this
.
$refs
.
right
.
cale
.
lastHover
=
false
}
}
},
20
)
},
close
()
{
setTimeout
(()
=>
{
this
.
popup
=
false
this
.
$emit
(
'maskClick'
,
this
.
value
)
},
20
)
},
setEmit
(
value
)
{
if
(
this
.
returnType
===
"timestamp"
||
this
.
returnType
===
"date"
)
{
if
(
!
Array
.
isArray
(
value
))
{
if
(
!
this
.
hasTime
)
{
value
=
value
+
' '
+
'00:00:00'
}
value
=
this
.
createTimestamp
(
value
)
if
(
this
.
returnType
===
"date"
)
{
value
=
new
Date
(
value
)
}
}
else
{
if
(
!
this
.
hasTime
)
{
value
[
0
]
=
value
[
0
]
+
' '
+
'00:00:00'
value
[
1
]
=
value
[
1
]
+
' '
+
'00:00:00'
}
value
[
0
]
=
this
.
createTimestamp
(
value
[
0
])
value
[
1
]
=
this
.
createTimestamp
(
value
[
1
])
if
(
this
.
returnType
===
"date"
)
{
value
[
0
]
=
new
Date
(
value
[
0
])
value
[
1
]
=
new
Date
(
value
[
1
])
}
}
}
this
.
formItem
&&
this
.
formItem
.
setValue
(
value
)
this
.
$emit
(
'change'
,
value
)
this
.
$emit
(
'input'
,
value
)
this
.
$emit
(
'update:modelValue'
,
value
)
this
.
isEmitValue
=
true
},
createTimestamp
(
date
)
{
date
=
this
.
fixIosDateFormat
(
date
)
return
Date
.
parse
(
new
Date
(
date
))
},
singleChange
(
e
)
{
this
.
tempSingleDate
=
e
.
fulldate
if
(
this
.
hasTime
)
return
this
.
confirmSingleChange
()
},
confirmSingleChange
()
{
if
(
!
this
.
tempSingleDate
)
{
this
.
popup
=
false
return
}
if
(
this
.
hasTime
)
{
this
.
singleVal
=
this
.
tempSingleDate
+
' '
+
(
this
.
time
?
this
.
time
:
'00:00:00'
)
}
else
{
this
.
singleVal
=
this
.
tempSingleDate
}
this
.
setEmit
(
this
.
singleVal
)
this
.
popup
=
false
},
leftChange
(
e
)
{
const
{
before
,
after
}
=
e
.
range
this
.
rangeChange
(
before
,
after
)
const
obj
=
{
before
:
e
.
range
.
before
,
after
:
e
.
range
.
after
,
data
:
e
.
range
.
data
,
fulldate
:
e
.
fulldate
}
this
.
startMultipleStatus
=
Object
.
assign
({},
this
.
startMultipleStatus
,
obj
)
},
rightChange
(
e
)
{
const
{
before
,
after
}
=
e
.
range
this
.
rangeChange
(
before
,
after
)
const
obj
=
{
before
:
e
.
range
.
before
,
after
:
e
.
range
.
after
,
data
:
e
.
range
.
data
,
fulldate
:
e
.
fulldate
}
this
.
endMultipleStatus
=
Object
.
assign
({},
this
.
endMultipleStatus
,
obj
)
},
mobileChange
(
e
)
{
if
(
this
.
isRange
)
{
const
{
before
,
after
}
=
e
.
range
this
.
handleStartAndEnd
(
before
,
after
,
true
)
if
(
this
.
hasTime
)
{
const
{
startTime
,
endTime
}
=
e
.
timeRange
this
.
tempRange
.
startTime
=
startTime
this
.
tempRange
.
endTime
=
endTime
}
this
.
confirmRangeChange
()
}
else
{
if
(
this
.
hasTime
)
{
this
.
singleVal
=
e
.
fulldate
+
' '
+
e
.
time
}
else
{
this
.
singleVal
=
e
.
fulldate
}
this
.
setEmit
(
this
.
singleVal
)
}
this
.
$refs
.
mobile
.
close
()
},
rangeChange
(
before
,
after
)
{
if
(
!
(
before
&&
after
))
return
this
.
handleStartAndEnd
(
before
,
after
,
true
)
if
(
this
.
hasTime
)
return
this
.
confirmRangeChange
()
},
confirmRangeChange
()
{
if
(
!
this
.
tempRange
.
startDate
&&
!
this
.
tempRange
.
endDate
)
{
this
.
popup
=
false
return
}
let
start
,
end
if
(
!
this
.
hasTime
)
{
start
=
this
.
range
.
startDate
=
this
.
tempRange
.
startDate
end
=
this
.
range
.
endDate
=
this
.
tempRange
.
endDate
}
else
{
start
=
this
.
range
.
startDate
=
this
.
tempRange
.
startDate
+
' '
+
(
this
.
tempRange
.
startTime
?
this
.
tempRange
.
startTime
:
'00:00:00'
)
end
=
this
.
range
.
endDate
=
this
.
tempRange
.
endDate
+
' '
+
(
this
.
tempRange
.
endTime
?
this
.
tempRange
.
endTime
:
'00:00:00'
)
}
const
displayRange
=
[
start
,
end
]
this
.
setEmit
(
displayRange
)
this
.
popup
=
false
},
handleStartAndEnd
(
before
,
after
,
temp
=
false
)
{
if
(
!
(
before
&&
after
))
return
const
type
=
temp
?
'tempRange'
:
'range'
if
(
this
.
dateCompare
(
before
,
after
))
{
this
[
type
].
startDate
=
before
this
[
type
].
endDate
=
after
}
else
{
this
[
type
].
startDate
=
after
this
[
type
].
endDate
=
before
}
},
/**
* 比较时间大小
*/
dateCompare
(
startDate
,
endDate
)
{
// 计算截止时间
startDate
=
new
Date
(
startDate
.
replace
(
'-'
,
'/'
).
replace
(
'-'
,
'/'
))
// 计算详细项的截止时间
endDate
=
new
Date
(
endDate
.
replace
(
'-'
,
'/'
).
replace
(
'-'
,
'/'
))
if
(
startDate
<=
endDate
)
{
return
true
}
else
{
return
false
}
},
/**
* 比较时间差
*/
diffDate
(
startDate
,
endDate
)
{
// 计算截止时间
startDate
=
new
Date
(
startDate
.
replace
(
'-'
,
'/'
).
replace
(
'-'
,
'/'
))
// 计算详细项的截止时间
endDate
=
new
Date
(
endDate
.
replace
(
'-'
,
'/'
).
replace
(
'-'
,
'/'
))
const
diff
=
(
endDate
-
startDate
)
/
(
24
*
60
*
60
*
1000
)
return
Math
.
abs
(
diff
)
},
clear
(
needEmit
=
true
)
{
if
(
!
this
.
isRange
)
{
this
.
singleVal
=
''
if
(
this
.
isPhone
)
{
this
.
defSingleDate
=
''
}
else
{
this
.
$refs
.
pcSingle
.
calendar
.
fullDate
=
''
this
.
$refs
.
pcSingle
.
setDate
()
}
if
(
needEmit
)
{
this
.
formItem
&&
this
.
formItem
.
setValue
(
''
)
this
.
$emit
(
'change'
,
''
)
this
.
$emit
(
'input'
,
''
)
this
.
$emit
(
'update:modelValue'
,
''
)
}
}
else
{
this
.
range
.
startDate
=
''
this
.
range
.
endDate
=
''
this
.
tempRange
=
{}
if
(
this
.
isPhone
)
{
this
.
endMultipleStatus
=
Object
.
assign
({},
this
.
endMultipleStatus
,
{
before
:
''
,
after
:
''
,
data
:
[],
fulldate
:
''
},
{
which
:
'left'
})
}
else
{
this
.
$refs
.
left
.
cale
.
multipleStatus
.
before
=
''
this
.
$refs
.
left
.
cale
.
multipleStatus
.
after
=
''
this
.
$refs
.
left
.
cale
.
multipleStatus
.
data
=
[]
this
.
$refs
.
left
.
cale
.
lastHover
=
false
this
.
$refs
.
left
.
setDate
()
this
.
$refs
.
right
.
cale
.
multipleStatus
.
before
=
''
this
.
$refs
.
right
.
cale
.
multipleStatus
.
after
=
''
this
.
$refs
.
right
.
cale
.
multipleStatus
.
data
=
[]
this
.
$refs
.
right
.
cale
.
lastHover
=
false
this
.
$refs
.
right
.
setDate
()
this
.
$refs
.
right
.
next
()
}
if
(
needEmit
)
{
this
.
formItem
&&
this
.
formItem
.
setValue
([])
this
.
$emit
(
'change'
,
[])
this
.
$emit
(
'input'
,
[])
this
.
$emit
(
'update:modelValue'
,
[])
}
}
},
parseDate
(
date
)
{
date
=
this
.
fixIosDateFormat
(
date
)
const
defVal
=
new
Date
(
date
)
const
year
=
defVal
.
getFullYear
()
const
month
=
defVal
.
getMonth
()
+
1
const
day
=
defVal
.
getDate
()
const
hour
=
defVal
.
getHours
()
const
minute
=
defVal
.
getMinutes
()
const
second
=
defVal
.
getSeconds
()
const
defDate
=
year
+
'-'
+
this
.
lessTen
(
month
)
+
'-'
+
this
.
lessTen
(
day
)
const
defTime
=
this
.
lessTen
(
hour
)
+
':'
+
this
.
lessTen
(
minute
)
+
':'
+
this
.
lessTen
(
second
)
return
{
defDate
,
defTime
}
},
lessTen
(
item
)
{
return
item
<
10
?
'0'
+
item
:
item
},
//兼容 iOS、safari 日期格式
fixIosDateFormat
(
value
)
{
if
(
typeof
value
===
'string'
)
{
value
=
value
.
replace
(
/-/g
,
'/'
)
}
return
value
},
leftMonthSwitch
(
e
)
{
// console.log('leftMonthSwitch 返回:', e)
},
rightMonthSwitch
(
e
)
{
// console.log('rightMonthSwitch 返回:', e)
}
}
}
</
script
>
<
style
>
.uni-date-x
{
display
:
flex
;
flex-direction
:
row
;
align-items
:
center
;
justify-content
:
center
;
padding
:
0
10px
;
border-radius
:
4px
;
background-color
:
#fff
;
color
:
#666
;
font-size
:
14px
;
}
.uni-date-x--border
{
box-sizing
:
border-box
;
border-radius
:
4px
;
border
:
1px
solid
#dcdfe6
;
}
.uni-date-editor--x
{
position
:
relative
;
}
.uni-date-editor--x
.uni-date__icon-clear
{
position
:
absolute
;
top
:
5px
;
right
:
0
;
display
:
inline-block
;
box-sizing
:
border-box
;
border
:
6px
solid
transparent
;
margin-right
:
6px
;
/* #ifdef H5 */
cursor
:
pointer
;
/* #endif */
}
.uni-date__x-input
{
padding
:
0
8px
;
height
:
40px
;
width
:
100%
;
line-height
:
40px
;
font-size
:
14px
;
}
.t-c
{
text-align
:
center
;
}
.uni-date__input
{
height
:
40px
;
width
:
100%
;
line-height
:
40px
;
font-size
:
14px
;
}
.uni-date-range__input
{
text-align
:
center
;
max-width
:
152px
;
}
.uni-date-picker__container
{
position
:
relative
;
/* position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
box-sizing: border-box;
z-index: 996;
font-size: 14px; */
}
.uni-date-mask
{
position
:
fixed
;
bottom
:
0px
;
top
:
0px
;
left
:
0px
;
right
:
0px
;
background-color
:
rgba
(
0
,
0
,
0
,
0
);
transition-duration
:
0.3s
;
z-index
:
996
;
}
.uni-date-single--x
{
/* padding: 0 8px; */
background-color
:
#fff
;
position
:
absolute
;
top
:
0
;
z-index
:
999
;
border
:
1px
solid
#e4e7ed
;
box-shadow
:
0
2px
12px
0
rgb
(
0
0
0
/
10%
);
border-radius
:
4px
;
}
.uni-date-range--x
{
/* padding: 0 8px; */
background-color
:
#fff
;
position
:
absolute
;
top
:
0
;
z-index
:
999
;
border
:
1px
solid
#e4e7ed
;
box-shadow
:
0
2px
12px
0
rgb
(
0
0
0
/
10%
);
border-radius
:
4px
;
}
.uni-date-editor--x__disabled
{
opacity
:
0.4
;
cursor
:
default
;
}
.uni-date-editor--logo
{
width
:
16px
;
height
:
16px
;
vertical-align
:
middle
;
}
/* 添加时间 */
.popup-x-header
{
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
row
;
/* justify-content: space-between; */
}
.popup-x-header--datetime
{
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
row
;
flex
:
1
;
}
.popup-x-body
{
display
:
flex
;
}
.popup-x-footer
{
padding
:
0
15px
;
border-top-color
:
#F1F1F1
;
border-top-style
:
solid
;
border-top-width
:
1px
;
background-color
:
#fff
;
line-height
:
40px
;
text-align
:
right
;
color
:
#666
;
}
.popup-x-footer
text
:hover
{
color
:
#007aff
;
cursor
:
pointer
;
opacity
:
0.8
;
}
.popup-x-footer
.confirm
{
margin-left
:
20px
;
color
:
#007aff
;
}
.uni-date-changed
{
background-color
:
#fff
;
text-align
:
center
;
color
:
#333
;
border-bottom-color
:
#F1F1F1
;
border-bottom-style
:
solid
;
border-bottom-width
:
1px
;
/* padding: 0 50px; */
}
.uni-date-changed--time
text
{
/* padding: 0 20px; */
height
:
50px
;
line-height
:
50px
;
}
.uni-date-changed
.uni-date-changed--time
{
/* display: flex; */
flex
:
1
;
}
.uni-date-changed--time-date
{
color
:
#333
;
opacity
:
0.6
;
}
.mr-50
{
margin-right
:
50px
;
}
.uni-date_calendar-pc
{
padding
:
0
6px
;
}
</
style
>
uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js
0 → 100644
View file @
16d3b58f
import
CALENDAR
from
'./calendar.js'
class
Calendar
{
constructor
({
date
,
selected
,
startDate
,
endDate
,
range
,
// multipleStatus
}
=
{})
{
// 当前日期
this
.
date
=
this
.
getDate
(
new
Date
())
// 当前初入日期
// 打点信息
this
.
selected
=
selected
||
[];
// 范围开始
this
.
startDate
=
startDate
// 范围结束
this
.
endDate
=
endDate
this
.
range
=
range
// 多选状态
this
.
cleanMultipleStatus
()
// 每周日期
this
.
weeks
=
{}
// this._getWeek(this.date.fullDate)
// this.multipleStatus = multipleStatus
this
.
lastHover
=
false
}
/**
* 设置日期
* @param {Object} date
*/
setDate
(
date
)
{
this
.
selectDate
=
this
.
getDate
(
date
)
this
.
_getWeek
(
this
.
selectDate
.
fullDate
)
}
/**
* 清理多选状态
*/
cleanMultipleStatus
()
{
this
.
multipleStatus
=
{
before
:
''
,
after
:
''
,
data
:
[]
}
}
/**
* 重置开始日期
*/
resetSatrtDate
(
startDate
)
{
// 范围开始
this
.
startDate
=
startDate
}
/**
* 重置结束日期
*/
resetEndDate
(
endDate
)
{
// 范围结束
this
.
endDate
=
endDate
}
/**
* 获取任意时间
*/
getDate
(
date
,
AddDayCount
=
0
,
str
=
'day'
)
{
if
(
!
date
)
{
date
=
new
Date
()
}
if
(
typeof
date
!==
'object'
)
{
date
=
date
.
replace
(
/-/g
,
'/'
)
}
const
dd
=
new
Date
(
date
)
switch
(
str
)
{
case
'day'
:
dd
.
setDate
(
dd
.
getDate
()
+
AddDayCount
)
// 获取AddDayCount天后的日期
break
case
'month'
:
if
(
dd
.
getDate
()
===
31
)
{
dd
.
setDate
(
dd
.
getDate
()
+
AddDayCount
)
}
else
{
dd
.
setMonth
(
dd
.
getMonth
()
+
AddDayCount
)
// 获取AddDayCount天后的日期
}
break
case
'year'
:
dd
.
setFullYear
(
dd
.
getFullYear
()
+
AddDayCount
)
// 获取AddDayCount天后的日期
break
}
const
y
=
dd
.
getFullYear
()
const
m
=
dd
.
getMonth
()
+
1
<
10
?
'0'
+
(
dd
.
getMonth
()
+
1
)
:
dd
.
getMonth
()
+
1
// 获取当前月份的日期,不足10补0
const
d
=
dd
.
getDate
()
<
10
?
'0'
+
dd
.
getDate
()
:
dd
.
getDate
()
// 获取当前几号,不足10补0
return
{
fullDate
:
y
+
'-'
+
m
+
'-'
+
d
,
year
:
y
,
month
:
m
,
date
:
d
,
day
:
dd
.
getDay
()
}
}
/**
* 获取上月剩余天数
*/
_getLastMonthDays
(
firstDay
,
full
)
{
let
dateArr
=
[]
for
(
let
i
=
firstDay
;
i
>
0
;
i
--
)
{
const
beforeDate
=
new
Date
(
full
.
year
,
full
.
month
-
1
,
-
i
+
1
).
getDate
()
dateArr
.
push
({
date
:
beforeDate
,
month
:
full
.
month
-
1
,
lunar
:
this
.
getlunar
(
full
.
year
,
full
.
month
-
1
,
beforeDate
),
disable
:
true
})
}
return
dateArr
}
/**
* 获取本月天数
*/
_currentMonthDys
(
dateData
,
full
)
{
let
dateArr
=
[]
let
fullDate
=
this
.
date
.
fullDate
for
(
let
i
=
1
;
i
<=
dateData
;
i
++
)
{
let
isinfo
=
false
let
nowDate
=
full
.
year
+
'-'
+
(
full
.
month
<
10
?
full
.
month
:
full
.
month
)
+
'-'
+
(
i
<
10
?
'0'
+
i
:
i
)
// 是否今天
let
isDay
=
fullDate
===
nowDate
// 获取打点信息
let
info
=
this
.
selected
&&
this
.
selected
.
find
((
item
)
=>
{
if
(
this
.
dateEqual
(
nowDate
,
item
.
date
))
{
return
item
}
})
// 日期禁用
let
disableBefore
=
true
let
disableAfter
=
true
if
(
this
.
startDate
)
{
// let dateCompBefore = this.dateCompare(this.startDate, fullDate)
// disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
disableBefore
=
this
.
dateCompare
(
this
.
startDate
,
nowDate
)
}
if
(
this
.
endDate
)
{
// let dateCompAfter = this.dateCompare(fullDate, this.endDate)
// disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
disableAfter
=
this
.
dateCompare
(
nowDate
,
this
.
endDate
)
}
let
multiples
=
this
.
multipleStatus
.
data
let
checked
=
false
let
multiplesStatus
=
-
1
if
(
this
.
range
)
{
if
(
multiples
)
{
multiplesStatus
=
multiples
.
findIndex
((
item
)
=>
{
return
this
.
dateEqual
(
item
,
nowDate
)
})
}
if
(
multiplesStatus
!==
-
1
)
{
checked
=
true
}
}
let
data
=
{
fullDate
:
nowDate
,
year
:
full
.
year
,
date
:
i
,
multiple
:
this
.
range
?
checked
:
false
,
beforeMultiple
:
this
.
dateEqual
(
this
.
multipleStatus
.
before
,
nowDate
),
afterMultiple
:
this
.
dateEqual
(
this
.
multipleStatus
.
after
,
nowDate
),
month
:
full
.
month
,
lunar
:
this
.
getlunar
(
full
.
year
,
full
.
month
,
i
),
disable
:
!
(
disableBefore
&&
disableAfter
),
isDay
}
if
(
info
)
{
data
.
extraInfo
=
info
}
dateArr
.
push
(
data
)
}
return
dateArr
}
/**
* 获取下月天数
*/
_getNextMonthDays
(
surplus
,
full
)
{
let
dateArr
=
[]
for
(
let
i
=
1
;
i
<
surplus
+
1
;
i
++
)
{
dateArr
.
push
({
date
:
i
,
month
:
Number
(
full
.
month
)
+
1
,
lunar
:
this
.
getlunar
(
full
.
year
,
Number
(
full
.
month
)
+
1
,
i
),
disable
:
true
})
}
return
dateArr
}
/**
* 获取当前日期详情
* @param {Object} date
*/
getInfo
(
date
)
{
if
(
!
date
)
{
date
=
new
Date
()
}
const
dateInfo
=
this
.
canlender
.
find
(
item
=>
item
.
fullDate
===
this
.
getDate
(
date
).
fullDate
)
return
dateInfo
}
/**
* 比较时间大小
*/
dateCompare
(
startDate
,
endDate
)
{
// 计算截止时间
startDate
=
new
Date
(
startDate
.
replace
(
'-'
,
'/'
).
replace
(
'-'
,
'/'
))
// 计算详细项的截止时间
endDate
=
new
Date
(
endDate
.
replace
(
'-'
,
'/'
).
replace
(
'-'
,
'/'
))
if
(
startDate
<=
endDate
)
{
return
true
}
else
{
return
false
}
}
/**
* 比较时间是否相等
*/
dateEqual
(
before
,
after
)
{
// 计算截止时间
before
=
new
Date
(
before
.
replace
(
'-'
,
'/'
).
replace
(
'-'
,
'/'
))
// 计算详细项的截止时间
after
=
new
Date
(
after
.
replace
(
'-'
,
'/'
).
replace
(
'-'
,
'/'
))
if
(
before
.
getTime
()
-
after
.
getTime
()
===
0
)
{
return
true
}
else
{
return
false
}
}
/**
* 获取日期范围内所有日期
* @param {Object} begin
* @param {Object} end
*/
geDateAll
(
begin
,
end
)
{
var
arr
=
[]
var
ab
=
begin
.
split
(
'-'
)
var
ae
=
end
.
split
(
'-'
)
var
db
=
new
Date
()
db
.
setFullYear
(
ab
[
0
],
ab
[
1
]
-
1
,
ab
[
2
])
var
de
=
new
Date
()
de
.
setFullYear
(
ae
[
0
],
ae
[
1
]
-
1
,
ae
[
2
])
var
unixDb
=
db
.
getTime
()
-
24
*
60
*
60
*
1000
var
unixDe
=
de
.
getTime
()
-
24
*
60
*
60
*
1000
for
(
var
k
=
unixDb
;
k
<=
unixDe
;)
{
k
=
k
+
24
*
60
*
60
*
1000
arr
.
push
(
this
.
getDate
(
new
Date
(
parseInt
(
k
))).
fullDate
)
}
return
arr
}
/**
* 计算阴历日期显示
*/
getlunar
(
year
,
month
,
date
)
{
return
CALENDAR
.
solar2lunar
(
year
,
month
,
date
)
}
/**
* 设置打点
*/
setSelectInfo
(
data
,
value
)
{
this
.
selected
=
value
this
.
_getWeek
(
data
)
}
/**
* 获取多选状态
*/
setMultiple
(
fullDate
)
{
let
{
before
,
after
}
=
this
.
multipleStatus
if
(
!
this
.
range
)
return
if
(
before
&&
after
)
{
if
(
!
this
.
lastHover
)
{
this
.
lastHover
=
true
return
}
this
.
multipleStatus
.
before
=
''
this
.
multipleStatus
.
after
=
''
this
.
multipleStatus
.
data
=
[]
this
.
multipleStatus
.
fulldate
=
''
this
.
lastHover
=
false
}
else
{
this
.
lastHover
=
false
if
(
!
before
)
{
this
.
multipleStatus
.
before
=
fullDate
}
else
{
this
.
multipleStatus
.
after
=
fullDate
if
(
this
.
dateCompare
(
this
.
multipleStatus
.
before
,
this
.
multipleStatus
.
after
))
{
this
.
multipleStatus
.
data
=
this
.
geDateAll
(
this
.
multipleStatus
.
before
,
this
.
multipleStatus
.
after
);
}
else
{
this
.
multipleStatus
.
data
=
this
.
geDateAll
(
this
.
multipleStatus
.
after
,
this
.
multipleStatus
.
before
);
}
}
}
this
.
_getWeek
(
fullDate
)
}
/**
* 鼠标 hover 更新多选状态
*/
setHoverMultiple
(
fullDate
)
{
let
{
before
,
after
}
=
this
.
multipleStatus
if
(
!
this
.
range
)
return
if
(
this
.
lastHover
)
return
if
(
!
before
)
{
this
.
multipleStatus
.
before
=
fullDate
}
else
{
this
.
multipleStatus
.
after
=
fullDate
if
(
this
.
dateCompare
(
this
.
multipleStatus
.
before
,
this
.
multipleStatus
.
after
))
{
this
.
multipleStatus
.
data
=
this
.
geDateAll
(
this
.
multipleStatus
.
before
,
this
.
multipleStatus
.
after
);
}
else
{
this
.
multipleStatus
.
data
=
this
.
geDateAll
(
this
.
multipleStatus
.
after
,
this
.
multipleStatus
.
before
);
}
}
this
.
_getWeek
(
fullDate
)
}
/**
* 更新默认值多选状态
*/
setDefaultMultiple
(
before
,
after
)
{
this
.
multipleStatus
.
before
=
before
this
.
multipleStatus
.
after
=
after
if
(
before
&&
after
)
{
if
(
this
.
dateCompare
(
before
,
after
))
{
this
.
multipleStatus
.
data
=
this
.
geDateAll
(
before
,
after
);
this
.
_getWeek
(
after
)
}
else
{
this
.
multipleStatus
.
data
=
this
.
geDateAll
(
after
,
before
);
this
.
_getWeek
(
before
)
}
}
}
/**
* 获取每周数据
* @param {Object} dateData
*/
_getWeek
(
dateData
)
{
const
{
fullDate
,
year
,
month
,
date
,
day
}
=
this
.
getDate
(
dateData
)
let
firstDay
=
new
Date
(
year
,
month
-
1
,
1
).
getDay
()
let
currentDay
=
new
Date
(
year
,
month
,
0
).
getDate
()
let
dates
=
{
lastMonthDays
:
this
.
_getLastMonthDays
(
firstDay
,
this
.
getDate
(
dateData
)),
// 上个月末尾几天
currentMonthDys
:
this
.
_currentMonthDys
(
currentDay
,
this
.
getDate
(
dateData
)),
// 本月天数
nextMonthDays
:
[],
// 下个月开始几天
weeks
:
[]
}
let
canlender
=
[]
const
surplus
=
42
-
(
dates
.
lastMonthDays
.
length
+
dates
.
currentMonthDys
.
length
)
dates
.
nextMonthDays
=
this
.
_getNextMonthDays
(
surplus
,
this
.
getDate
(
dateData
))
canlender
=
canlender
.
concat
(
dates
.
lastMonthDays
,
dates
.
currentMonthDys
,
dates
.
nextMonthDays
)
let
weeks
=
{}
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
for
(
let
i
=
0
;
i
<
canlender
.
length
;
i
++
)
{
if
(
i
%
7
===
0
)
{
weeks
[
parseInt
(
i
/
7
)]
=
new
Array
(
7
)
}
weeks
[
parseInt
(
i
/
7
)][
i
%
7
]
=
canlender
[
i
]
}
this
.
canlender
=
canlender
this
.
weeks
=
weeks
}
//静态方法
// static init(date) {
// if (!this.instance) {
// this.instance = new Calendar(date);
// }
// return this.instance;
// }
}
export
default
Calendar
uni_modules/uni-datetime-picker/package.json
0 → 100644
View file @
16d3b58f
{
"id"
:
"uni-datetime-picker"
,
"displayName"
:
"uni-datetime-picker 日期选择器"
,
"version"
:
"2.1.1"
,
"description"
:
"uni-datetime-picker 日期时间选择器,支持日历,支持范围选择"
,
"keywords"
:
[
"uni-datetime-picker"
,
"uni-ui"
,
"uniui"
,
"日期时间选择器"
,
"日期时间"
],
"repository"
:
"https://github.com/dcloudio/uni-ui"
,
"engines"
:
{
"HBuilderX"
:
""
},
"directories"
:
{
"example"
:
"../../temps/example_temps"
},
"dcloudext"
:
{
"category"
:
[
"前端组件"
,
"通用组件"
],
"sale"
:
{
"regular"
:
{
"price"
:
"0.00"
},
"sourcecode"
:
{
"price"
:
"0.00"
}
},
"contact"
:
{
"qq"
:
""
},
"declaration"
:
{
"ads"
:
"无"
,
"data"
:
"无"
,
"permissions"
:
"无"
},
"npmurl"
:
"https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules"
:
{
"dependencies"
:
[
"uni-icons"
],
"encrypt"
:
[],
"platforms"
:
{
"cloud"
:
{
"tcb"
:
"y"
,
"aliyun"
:
"y"
},
"client"
:
{
"App"
:
{
"app-vue"
:
"y"
,
"app-nvue"
:
"n"
},
"H5-mobile"
:
{
"Safari"
:
"y"
,
"Android Browser"
:
"y"
,
"微信浏览器(Android)"
:
"y"
,
"QQ浏览器(Android)"
:
"y"
},
"H5-pc"
:
{
"Chrome"
:
"y"
,
"IE"
:
"y"
,
"Edge"
:
"y"
,
"Firefox"
:
"y"
,
"Safari"
:
"y"
},
"小程序"
:
{
"微信"
:
"y"
,
"阿里"
:
"y"
,
"百度"
:
"y"
,
"字节跳动"
:
"y"
,
"QQ"
:
"y"
},
"快应用"
:
{
"华为"
:
"u"
,
"联盟"
:
"u"
},
"Vue"
:
{
"vue2"
:
"y"
,
"vue3"
:
"u"
}
}
}
}
}
uni_modules/uni-datetime-picker/readme.md
0 → 100644
View file @
16d3b58f
> `重要通知:组件升级更新 2.0.0 后,支持日期+时间范围选择,组件 ui 将使用日历选择日期,ui 变化较大,同时支持 PC 和 移动端。此版本不向后兼容,不再支持单独的时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker)。若仍需使用旧版本,可在插件市场下载*非uni_modules版本*,旧版本将不再维护`
## DatetimePicker 时间选择器
> **组件名:uni-datetime-picker**
> 代码块: `uDatetimePicker`
该组件的优势是,支持
**时间戳**
输入和输出(起始时间、终止时间也支持时间戳),可
**同时选择**
日期和时间。
若只是需要单独选择日期和时间,不需要时间戳输入和输出,可使用原生的 picker 组件。
___点击 picker 默认值规则:__
_
-
若设置初始值 value, 会显示在 picker 显示框中
-
若无初始值 value,则初始值 value 为当前本地时间 Date.now(), 但不会显示在 picker 显示框中
### 安装方式
本组件符合
[
easycom
](
https://uniapp.dcloud.io/collocation/pages?id=easycom
)
规范,
`HBuilderX 2.5.5`
起,只需将本组件导入项目,在页面
`template`
中即可直接使用,无需在页面中
`import`
和注册
`components`
。
如需通过
`npm`
方式使用
`uni-ui`
组件,另见文档:
[
https://ext.dcloud.net.cn/plugin?id=55
](
https://ext.dcloud.net.cn/plugin?id=55
)
### 基本用法
在
``template``
中使用组件
```
html
<template>
<view
class=
"page"
>
<text
class=
"example-info"
>
可以同时选择日期和时间的选择器
</text>
<uni-section
:title=
"'日期用法:' + single"
type=
"line"
></uni-section>
<view
class=
"example-body"
>
<uni-datetime-picker
type=
"date"
:value=
"single"
start=
"2021-3-20"
end=
"2021-6-20"
@
change=
"change"
/>
</view>
<uni-section
:title=
"'时间戳用法:' + single"
type=
"line"
></uni-section>
<view
class=
"example-body"
>
<uni-datetime-picker
returnType=
"timestamp"
@
change=
"changeLog($event)"
start=
"2021-3-20"
end=
"2021-5-20"
/>
</view>
<uni-section
:title=
"'日期时间用法:' + datetimesingle"
type=
"line"
></uni-section>
<view
class=
"example-body"
>
<uni-datetime-picker
type=
"datetime"
v-model=
"datetimesingle"
@
change=
"changeLog"
/>
</view>
<uni-section
:title=
"'v-model用法:' + single"
type=
"line"
></uni-section>
<view
class=
"example-body"
>
<uni-datetime-picker
v-model=
"single"
/>
</view>
<uni-section
:title=
"'插槽用法:' + single"
type=
"line"
></uni-section>
<view
class=
"example-body"
>
<uni-datetime-picker
v-model=
"single"
>
我是一个插槽,点击我
</uni-datetime-picker>
</view>
<uni-section
:title=
"'无边框用法:' + single"
type=
"line"
></uni-section>
<view
class=
"example-body"
>
<uni-datetime-picker
v-model=
"single"
:border=
"false"
/>
</view>
<uni-section
:title=
"'disabled用法:' + single"
type=
"line"
></uni-section>
<view
class=
"example-body"
>
<uni-datetime-picker
v-model=
"single"
disabled
/>
</view>
<uni-section
:title=
"'日期范围用法:' + '[' + range + ']'"
type=
"line"
></uni-section>
<view
class=
"example-body"
>
<uni-datetime-picker
v-model=
"range"
type=
"daterange"
start=
"2021-3-20"
end=
"2021-5-20"
rangeSeparator=
"至"
/>
</view>
<uni-section
:title=
"'日期时间范围用法:' + '[' + datetimerange + ']' "
type=
"line"
></uni-section>
<view
class=
"example-body"
>
<uni-datetime-picker
v-model=
"datetimerange"
type=
"datetimerange"
start=
"2021-3-20 12:00:00"
end=
"2021-6-20 20:00:00"
rangeSeparator=
"至"
/>
</view>
</view>
</template>
<script>
export
default
{
data
()
{
return
{
single
:
'2021-04-3'
,
datetimesingle
:
'2021-04-3'
,
range
:
[
'2021-03-8'
,
'2021-4-20'
],
datetimerange
:
[
'2021-03-20 20:10:10'
,
'2021-05-10 10:10:10'
],
}
},
watch
:
{
datetimesingle
(
newval
)
{
console
.
log
(
'单选:'
,
this
.
datetimesingle
);
},
range
(
newval
)
{
console
.
log
(
'范围选:'
,
this
.
range
);
},
datetimerange
(
newval
)
{
console
.
log
(
'范围选:'
,
this
.
datetimerange
);
}
},
mounted
()
{
setTimeout
(()
=>
{
this
.
datetimesingle
=
'2021-5-1'
this
.
single
=
'2021-5-1'
},
1000
)
},
methods
:{
change
(
e
)
{
this
.
single
=
e
console
.
log
(
'-change事件:'
,
e
);
}
}
}
</script>
<style
lang=
"scss"
>
@import
'@/common/uni-nvue.scss'
;
</style>
```
## API
### DatetimePicker Props
|属性名 |类型 |默认值 |值域 |说明 |
|:-: |:-: |:-: | |:-: |
|type |String |datetime |date/daterange/datetime/datetimerange|选择器类型 |
|value |String、Number、Array(范围选择)、Date|- |- |输入框当前值 |
|start |String、Number |- |- |最小值,可以使用日期的字符串(String)、时间戳(Number) |
|end |String、Number |- |- |最大值,可以使用日期的字符串(String)、时间戳(Number) |
|return-type |String |string |timestamp 、string、date |返回值格式 |
|border |Boolean、String |true | |是否有边框 |
|rangeSeparator |String |'-' |- |选择范围时的分隔符 |
|placeholder |String |- |- |非范围选择时的占位内容 |
|start-placeholder|String |- |- |范围选择时开始日期的占位内容 |
|end-placeholder |String |- |- |范围选择时结束日期的占位内容 |
|disabled |Boolean、String |false | |是否不可选择 |
|clearIcon |Boolean、String |true | |是否显示清除按钮(仅PC端适用) |
### DatetimePicker Events
|事件名称 |说明 |返回值 |
|:-: |:-: |:-: |
|change |确定日期时间时触发的事件,参数为当前选择的日期对象 |单选返回日期字符串,如:'2010-02-3';范围选返回日期字符串数组,如:
[
'2020-10-1', '2021-4-1'
]
|
|maskClick|点击遮罩层触发 |- |
### Popup Methods
|方法称名 |说明|参数|
|:-:|:-:|:-:|
|show|打开弹出层|-|
|close|关闭弹出层 |-|
## 组件示例
点击查看:
[
https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker
](
https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker
)
\ No newline at end of file
uni_modules/uni-icons/changelog.md
0 → 100644
View file @
16d3b58f
## 1.3.5(2022-01-24)
-
优化 size 属性可以传入不带单位的字符串数值
## 1.3.4(2022-01-24)
-
优化 size 支持其他单位
## 1.3.3(2022-01-17)
-
修复 nvue 有些图标不显示的bug,兼容老版本图标
## 1.3.2(2021-12-01)
-
优化 示例可复制图标名称
## 1.3.1(2021-11-23)
-
优化 兼容旧组件 type 值
## 1.3.0(2021-11-19)
-
新增 更多图标
-
优化 自定义图标使用方式
-
优化 组件UI,并提供设计资源,详见:
[
https://uniapp.dcloud.io/component/uniui/resource
](
https://uniapp.dcloud.io/component/uniui/resource
)
-
文档迁移,详见:
[
https://uniapp.dcloud.io/component/uniui/uni-icons
](
https://uniapp.dcloud.io/component/uniui/uni-icons
)
## 1.1.7(2021-11-08)
## 1.2.0(2021-07-30)
-
组件兼容 vue3,如何创建vue3项目,详见
[
uni-app 项目支持 vue3 介绍
](
https://ask.dcloud.net.cn/article/37834
)
## 1.1.5(2021-05-12)
-
新增 组件示例地址
## 1.1.4(2021-02-05)
-
调整为uni_modules目录规范
uni_modules/uni-icons/components/uni-icons/icons.js
0 → 100644
View file @
16d3b58f
export
default
{
"id"
:
"2852637"
,
"name"
:
"uniui图标库"
,
"font_family"
:
"uniicons"
,
"css_prefix_text"
:
"uniui-"
,
"description"
:
""
,
"glyphs"
:
[
{
"icon_id"
:
"25027049"
,
"name"
:
"yanse"
,
"font_class"
:
"color"
,
"unicode"
:
"e6cf"
,
"unicode_decimal"
:
59087
},
{
"icon_id"
:
"25027048"
,
"name"
:
"wallet"
,
"font_class"
:
"wallet"
,
"unicode"
:
"e6b1"
,
"unicode_decimal"
:
59057
},
{
"icon_id"
:
"25015720"
,
"name"
:
"settings-filled"
,
"font_class"
:
"settings-filled"
,
"unicode"
:
"e6ce"
,
"unicode_decimal"
:
59086
},
{
"icon_id"
:
"25015434"
,
"name"
:
"shimingrenzheng-filled"
,
"font_class"
:
"auth-filled"
,
"unicode"
:
"e6cc"
,
"unicode_decimal"
:
59084
},
{
"icon_id"
:
"24934246"
,
"name"
:
"shop-filled"
,
"font_class"
:
"shop-filled"
,
"unicode"
:
"e6cd"
,
"unicode_decimal"
:
59085
},
{
"icon_id"
:
"24934159"
,
"name"
:
"staff-filled-01"
,
"font_class"
:
"staff-filled"
,
"unicode"
:
"e6cb"
,
"unicode_decimal"
:
59083
},
{
"icon_id"
:
"24932461"
,
"name"
:
"VIP-filled"
,
"font_class"
:
"vip-filled"
,
"unicode"
:
"e6c6"
,
"unicode_decimal"
:
59078
},
{
"icon_id"
:
"24932462"
,
"name"
:
"plus_circle_fill"
,
"font_class"
:
"plus-filled"
,
"unicode"
:
"e6c7"
,
"unicode_decimal"
:
59079
},
{
"icon_id"
:
"24932463"
,
"name"
:
"folder_add-filled"
,
"font_class"
:
"folder-add-filled"
,
"unicode"
:
"e6c8"
,
"unicode_decimal"
:
59080
},
{
"icon_id"
:
"24932464"
,
"name"
:
"yanse-filled"
,
"font_class"
:
"color-filled"
,
"unicode"
:
"e6c9"
,
"unicode_decimal"
:
59081
},
{
"icon_id"
:
"24932465"
,
"name"
:
"tune-filled"
,
"font_class"
:
"tune-filled"
,
"unicode"
:
"e6ca"
,
"unicode_decimal"
:
59082
},
{
"icon_id"
:
"24932455"
,
"name"
:
"a-rilidaka-filled"
,
"font_class"
:
"calendar-filled"
,
"unicode"
:
"e6c0"
,
"unicode_decimal"
:
59072
},
{
"icon_id"
:
"24932456"
,
"name"
:
"notification-filled"
,
"font_class"
:
"notification-filled"
,
"unicode"
:
"e6c1"
,
"unicode_decimal"
:
59073
},
{
"icon_id"
:
"24932457"
,
"name"
:
"wallet-filled"
,
"font_class"
:
"wallet-filled"
,
"unicode"
:
"e6c2"
,
"unicode_decimal"
:
59074
},
{
"icon_id"
:
"24932458"
,
"name"
:
"paihangbang-filled"
,
"font_class"
:
"medal-filled"
,
"unicode"
:
"e6c3"
,
"unicode_decimal"
:
59075
},
{
"icon_id"
:
"24932459"
,
"name"
:
"gift-filled"
,
"font_class"
:
"gift-filled"
,
"unicode"
:
"e6c4"
,
"unicode_decimal"
:
59076
},
{
"icon_id"
:
"24932460"
,
"name"
:
"fire-filled"
,
"font_class"
:
"fire-filled"
,
"unicode"
:
"e6c5"
,
"unicode_decimal"
:
59077
},
{
"icon_id"
:
"24928001"
,
"name"
:
"refreshempty"
,
"font_class"
:
"refreshempty"
,
"unicode"
:
"e6bf"
,
"unicode_decimal"
:
59071
},
{
"icon_id"
:
"24926853"
,
"name"
:
"location-ellipse"
,
"font_class"
:
"location-filled"
,
"unicode"
:
"e6af"
,
"unicode_decimal"
:
59055
},
{
"icon_id"
:
"24926735"
,
"name"
:
"person-filled"
,
"font_class"
:
"person-filled"
,
"unicode"
:
"e69d"
,
"unicode_decimal"
:
59037
},
{
"icon_id"
:
"24926703"
,
"name"
:
"personadd-filled"
,
"font_class"
:
"personadd-filled"
,
"unicode"
:
"e698"
,
"unicode_decimal"
:
59032
},
{
"icon_id"
:
"24923351"
,
"name"
:
"back"
,
"font_class"
:
"back"
,
"unicode"
:
"e6b9"
,
"unicode_decimal"
:
59065
},
{
"icon_id"
:
"24923352"
,
"name"
:
"forward"
,
"font_class"
:
"forward"
,
"unicode"
:
"e6ba"
,
"unicode_decimal"
:
59066
},
{
"icon_id"
:
"24923353"
,
"name"
:
"arrowthinright"
,
"font_class"
:
"arrow-right"
,
"unicode"
:
"e6bb"
,
"unicode_decimal"
:
59067
},
{
"icon_id"
:
"24923353"
,
"name"
:
"arrowthinright"
,
"font_class"
:
"arrowthinright"
,
"unicode"
:
"e6bb"
,
"unicode_decimal"
:
59067
},
{
"icon_id"
:
"24923354"
,
"name"
:
"arrowthinleft"
,
"font_class"
:
"arrow-left"
,
"unicode"
:
"e6bc"
,
"unicode_decimal"
:
59068
},
{
"icon_id"
:
"24923354"
,
"name"
:
"arrowthinleft"
,
"font_class"
:
"arrowthinleft"
,
"unicode"
:
"e6bc"
,
"unicode_decimal"
:
59068
},
{
"icon_id"
:
"24923355"
,
"name"
:
"arrowthinup"
,
"font_class"
:
"arrow-up"
,
"unicode"
:
"e6bd"
,
"unicode_decimal"
:
59069
},
{
"icon_id"
:
"24923355"
,
"name"
:
"arrowthinup"
,
"font_class"
:
"arrowthinup"
,
"unicode"
:
"e6bd"
,
"unicode_decimal"
:
59069
},
{
"icon_id"
:
"24923356"
,
"name"
:
"arrowthindown"
,
"font_class"
:
"arrow-down"
,
"unicode"
:
"e6be"
,
"unicode_decimal"
:
59070
},{
"icon_id"
:
"24923356"
,
"name"
:
"arrowthindown"
,
"font_class"
:
"arrowthindown"
,
"unicode"
:
"e6be"
,
"unicode_decimal"
:
59070
},
{
"icon_id"
:
"24923349"
,
"name"
:
"arrowdown"
,
"font_class"
:
"bottom"
,
"unicode"
:
"e6b8"
,
"unicode_decimal"
:
59064
},{
"icon_id"
:
"24923349"
,
"name"
:
"arrowdown"
,
"font_class"
:
"arrowdown"
,
"unicode"
:
"e6b8"
,
"unicode_decimal"
:
59064
},
{
"icon_id"
:
"24923346"
,
"name"
:
"arrowright"
,
"font_class"
:
"right"
,
"unicode"
:
"e6b5"
,
"unicode_decimal"
:
59061
},
{
"icon_id"
:
"24923346"
,
"name"
:
"arrowright"
,
"font_class"
:
"arrowright"
,
"unicode"
:
"e6b5"
,
"unicode_decimal"
:
59061
},
{
"icon_id"
:
"24923347"
,
"name"
:
"arrowup"
,
"font_class"
:
"top"
,
"unicode"
:
"e6b6"
,
"unicode_decimal"
:
59062
},
{
"icon_id"
:
"24923347"
,
"name"
:
"arrowup"
,
"font_class"
:
"arrowup"
,
"unicode"
:
"e6b6"
,
"unicode_decimal"
:
59062
},
{
"icon_id"
:
"24923348"
,
"name"
:
"arrowleft"
,
"font_class"
:
"left"
,
"unicode"
:
"e6b7"
,
"unicode_decimal"
:
59063
},
{
"icon_id"
:
"24923348"
,
"name"
:
"arrowleft"
,
"font_class"
:
"arrowleft"
,
"unicode"
:
"e6b7"
,
"unicode_decimal"
:
59063
},
{
"icon_id"
:
"24923334"
,
"name"
:
"eye"
,
"font_class"
:
"eye"
,
"unicode"
:
"e651"
,
"unicode_decimal"
:
58961
},
{
"icon_id"
:
"24923335"
,
"name"
:
"eye-filled"
,
"font_class"
:
"eye-filled"
,
"unicode"
:
"e66a"
,
"unicode_decimal"
:
58986
},
{
"icon_id"
:
"24923336"
,
"name"
:
"eye-slash"
,
"font_class"
:
"eye-slash"
,
"unicode"
:
"e6b3"
,
"unicode_decimal"
:
59059
},
{
"icon_id"
:
"24923337"
,
"name"
:
"eye-slash-filled"
,
"font_class"
:
"eye-slash-filled"
,
"unicode"
:
"e6b4"
,
"unicode_decimal"
:
59060
},
{
"icon_id"
:
"24923305"
,
"name"
:
"info-filled"
,
"font_class"
:
"info-filled"
,
"unicode"
:
"e649"
,
"unicode_decimal"
:
58953
},
{
"icon_id"
:
"24923299"
,
"name"
:
"reload-01"
,
"font_class"
:
"reload"
,
"unicode"
:
"e6b2"
,
"unicode_decimal"
:
59058
},
{
"icon_id"
:
"24923195"
,
"name"
:
"mic_slash_fill"
,
"font_class"
:
"micoff-filled"
,
"unicode"
:
"e6b0"
,
"unicode_decimal"
:
59056
},
{
"icon_id"
:
"24923165"
,
"name"
:
"map-pin-ellipse"
,
"font_class"
:
"map-pin-ellipse"
,
"unicode"
:
"e6ac"
,
"unicode_decimal"
:
59052
},
{
"icon_id"
:
"24923166"
,
"name"
:
"map-pin"
,
"font_class"
:
"map-pin"
,
"unicode"
:
"e6ad"
,
"unicode_decimal"
:
59053
},
{
"icon_id"
:
"24923167"
,
"name"
:
"location"
,
"font_class"
:
"location"
,
"unicode"
:
"e6ae"
,
"unicode_decimal"
:
59054
},
{
"icon_id"
:
"24923064"
,
"name"
:
"starhalf"
,
"font_class"
:
"starhalf"
,
"unicode"
:
"e683"
,
"unicode_decimal"
:
59011
},
{
"icon_id"
:
"24923065"
,
"name"
:
"star"
,
"font_class"
:
"star"
,
"unicode"
:
"e688"
,
"unicode_decimal"
:
59016
},
{
"icon_id"
:
"24923066"
,
"name"
:
"star-filled"
,
"font_class"
:
"star-filled"
,
"unicode"
:
"e68f"
,
"unicode_decimal"
:
59023
},
{
"icon_id"
:
"24899646"
,
"name"
:
"a-rilidaka"
,
"font_class"
:
"calendar"
,
"unicode"
:
"e6a0"
,
"unicode_decimal"
:
59040
},
{
"icon_id"
:
"24899647"
,
"name"
:
"fire"
,
"font_class"
:
"fire"
,
"unicode"
:
"e6a1"
,
"unicode_decimal"
:
59041
},
{
"icon_id"
:
"24899648"
,
"name"
:
"paihangbang"
,
"font_class"
:
"medal"
,
"unicode"
:
"e6a2"
,
"unicode_decimal"
:
59042
},
{
"icon_id"
:
"24899649"
,
"name"
:
"font"
,
"font_class"
:
"font"
,
"unicode"
:
"e6a3"
,
"unicode_decimal"
:
59043
},
{
"icon_id"
:
"24899650"
,
"name"
:
"gift"
,
"font_class"
:
"gift"
,
"unicode"
:
"e6a4"
,
"unicode_decimal"
:
59044
},
{
"icon_id"
:
"24899651"
,
"name"
:
"link"
,
"font_class"
:
"link"
,
"unicode"
:
"e6a5"
,
"unicode_decimal"
:
59045
},
{
"icon_id"
:
"24899652"
,
"name"
:
"notification"
,
"font_class"
:
"notification"
,
"unicode"
:
"e6a6"
,
"unicode_decimal"
:
59046
},
{
"icon_id"
:
"24899653"
,
"name"
:
"staff"
,
"font_class"
:
"staff"
,
"unicode"
:
"e6a7"
,
"unicode_decimal"
:
59047
},
{
"icon_id"
:
"24899654"
,
"name"
:
"VIP"
,
"font_class"
:
"vip"
,
"unicode"
:
"e6a8"
,
"unicode_decimal"
:
59048
},
{
"icon_id"
:
"24899655"
,
"name"
:
"folder_add"
,
"font_class"
:
"folder-add"
,
"unicode"
:
"e6a9"
,
"unicode_decimal"
:
59049
},
{
"icon_id"
:
"24899656"
,
"name"
:
"tune"
,
"font_class"
:
"tune"
,
"unicode"
:
"e6aa"
,
"unicode_decimal"
:
59050
},
{
"icon_id"
:
"24899657"
,
"name"
:
"shimingrenzheng"
,
"font_class"
:
"auth"
,
"unicode"
:
"e6ab"
,
"unicode_decimal"
:
59051
},
{
"icon_id"
:
"24899565"
,
"name"
:
"person"
,
"font_class"
:
"person"
,
"unicode"
:
"e699"
,
"unicode_decimal"
:
59033
},
{
"icon_id"
:
"24899566"
,
"name"
:
"email-filled"
,
"font_class"
:
"email-filled"
,
"unicode"
:
"e69a"
,
"unicode_decimal"
:
59034
},
{
"icon_id"
:
"24899567"
,
"name"
:
"phone-filled"
,
"font_class"
:
"phone-filled"
,
"unicode"
:
"e69b"
,
"unicode_decimal"
:
59035
},
{
"icon_id"
:
"24899568"
,
"name"
:
"phone"
,
"font_class"
:
"phone"
,
"unicode"
:
"e69c"
,
"unicode_decimal"
:
59036
},
{
"icon_id"
:
"24899570"
,
"name"
:
"email"
,
"font_class"
:
"email"
,
"unicode"
:
"e69e"
,
"unicode_decimal"
:
59038
},
{
"icon_id"
:
"24899571"
,
"name"
:
"personadd"
,
"font_class"
:
"personadd"
,
"unicode"
:
"e69f"
,
"unicode_decimal"
:
59039
},
{
"icon_id"
:
"24899558"
,
"name"
:
"chatboxes-filled"
,
"font_class"
:
"chatboxes-filled"
,
"unicode"
:
"e692"
,
"unicode_decimal"
:
59026
},
{
"icon_id"
:
"24899559"
,
"name"
:
"contact"
,
"font_class"
:
"contact"
,
"unicode"
:
"e693"
,
"unicode_decimal"
:
59027
},
{
"icon_id"
:
"24899560"
,
"name"
:
"chatbubble-filled"
,
"font_class"
:
"chatbubble-filled"
,
"unicode"
:
"e694"
,
"unicode_decimal"
:
59028
},
{
"icon_id"
:
"24899561"
,
"name"
:
"contact-filled"
,
"font_class"
:
"contact-filled"
,
"unicode"
:
"e695"
,
"unicode_decimal"
:
59029
},
{
"icon_id"
:
"24899562"
,
"name"
:
"chatboxes"
,
"font_class"
:
"chatboxes"
,
"unicode"
:
"e696"
,
"unicode_decimal"
:
59030
},
{
"icon_id"
:
"24899563"
,
"name"
:
"chatbubble"
,
"font_class"
:
"chatbubble"
,
"unicode"
:
"e697"
,
"unicode_decimal"
:
59031
},
{
"icon_id"
:
"24881290"
,
"name"
:
"upload-filled"
,
"font_class"
:
"upload-filled"
,
"unicode"
:
"e68e"
,
"unicode_decimal"
:
59022
},
{
"icon_id"
:
"24881292"
,
"name"
:
"upload"
,
"font_class"
:
"upload"
,
"unicode"
:
"e690"
,
"unicode_decimal"
:
59024
},
{
"icon_id"
:
"24881293"
,
"name"
:
"weixin"
,
"font_class"
:
"weixin"
,
"unicode"
:
"e691"
,
"unicode_decimal"
:
59025
},
{
"icon_id"
:
"24881274"
,
"name"
:
"compose"
,
"font_class"
:
"compose"
,
"unicode"
:
"e67f"
,
"unicode_decimal"
:
59007
},
{
"icon_id"
:
"24881275"
,
"name"
:
"qq"
,
"font_class"
:
"qq"
,
"unicode"
:
"e680"
,
"unicode_decimal"
:
59008
},
{
"icon_id"
:
"24881276"
,
"name"
:
"download-filled"
,
"font_class"
:
"download-filled"
,
"unicode"
:
"e681"
,
"unicode_decimal"
:
59009
},
{
"icon_id"
:
"24881277"
,
"name"
:
"pengyouquan"
,
"font_class"
:
"pyq"
,
"unicode"
:
"e682"
,
"unicode_decimal"
:
59010
},
{
"icon_id"
:
"24881279"
,
"name"
:
"sound"
,
"font_class"
:
"sound"
,
"unicode"
:
"e684"
,
"unicode_decimal"
:
59012
},
{
"icon_id"
:
"24881280"
,
"name"
:
"trash-filled"
,
"font_class"
:
"trash-filled"
,
"unicode"
:
"e685"
,
"unicode_decimal"
:
59013
},
{
"icon_id"
:
"24881281"
,
"name"
:
"sound-filled"
,
"font_class"
:
"sound-filled"
,
"unicode"
:
"e686"
,
"unicode_decimal"
:
59014
},
{
"icon_id"
:
"24881282"
,
"name"
:
"trash"
,
"font_class"
:
"trash"
,
"unicode"
:
"e687"
,
"unicode_decimal"
:
59015
},
{
"icon_id"
:
"24881284"
,
"name"
:
"videocam-filled"
,
"font_class"
:
"videocam-filled"
,
"unicode"
:
"e689"
,
"unicode_decimal"
:
59017
},
{
"icon_id"
:
"24881285"
,
"name"
:
"spinner-cycle"
,
"font_class"
:
"spinner-cycle"
,
"unicode"
:
"e68a"
,
"unicode_decimal"
:
59018
},
{
"icon_id"
:
"24881286"
,
"name"
:
"weibo"
,
"font_class"
:
"weibo"
,
"unicode"
:
"e68b"
,
"unicode_decimal"
:
59019
},
{
"icon_id"
:
"24881288"
,
"name"
:
"videocam"
,
"font_class"
:
"videocam"
,
"unicode"
:
"e68c"
,
"unicode_decimal"
:
59020
},
{
"icon_id"
:
"24881289"
,
"name"
:
"download"
,
"font_class"
:
"download"
,
"unicode"
:
"e68d"
,
"unicode_decimal"
:
59021
},
{
"icon_id"
:
"24879601"
,
"name"
:
"help"
,
"font_class"
:
"help"
,
"unicode"
:
"e679"
,
"unicode_decimal"
:
59001
},
{
"icon_id"
:
"24879602"
,
"name"
:
"navigate-filled"
,
"font_class"
:
"navigate-filled"
,
"unicode"
:
"e67a"
,
"unicode_decimal"
:
59002
},
{
"icon_id"
:
"24879603"
,
"name"
:
"plusempty"
,
"font_class"
:
"plusempty"
,
"unicode"
:
"e67b"
,
"unicode_decimal"
:
59003
},
{
"icon_id"
:
"24879604"
,
"name"
:
"smallcircle"
,
"font_class"
:
"smallcircle"
,
"unicode"
:
"e67c"
,
"unicode_decimal"
:
59004
},
{
"icon_id"
:
"24879605"
,
"name"
:
"minus-filled"
,
"font_class"
:
"minus-filled"
,
"unicode"
:
"e67d"
,
"unicode_decimal"
:
59005
},
{
"icon_id"
:
"24879606"
,
"name"
:
"micoff"
,
"font_class"
:
"micoff"
,
"unicode"
:
"e67e"
,
"unicode_decimal"
:
59006
},
{
"icon_id"
:
"24879588"
,
"name"
:
"closeempty"
,
"font_class"
:
"closeempty"
,
"unicode"
:
"e66c"
,
"unicode_decimal"
:
58988
},
{
"icon_id"
:
"24879589"
,
"name"
:
"clear"
,
"font_class"
:
"clear"
,
"unicode"
:
"e66d"
,
"unicode_decimal"
:
58989
},
{
"icon_id"
:
"24879590"
,
"name"
:
"navigate"
,
"font_class"
:
"navigate"
,
"unicode"
:
"e66e"
,
"unicode_decimal"
:
58990
},
{
"icon_id"
:
"24879591"
,
"name"
:
"minus"
,
"font_class"
:
"minus"
,
"unicode"
:
"e66f"
,
"unicode_decimal"
:
58991
},
{
"icon_id"
:
"24879592"
,
"name"
:
"image"
,
"font_class"
:
"image"
,
"unicode"
:
"e670"
,
"unicode_decimal"
:
58992
},
{
"icon_id"
:
"24879593"
,
"name"
:
"mic"
,
"font_class"
:
"mic"
,
"unicode"
:
"e671"
,
"unicode_decimal"
:
58993
},
{
"icon_id"
:
"24879594"
,
"name"
:
"paperplane"
,
"font_class"
:
"paperplane"
,
"unicode"
:
"e672"
,
"unicode_decimal"
:
58994
},
{
"icon_id"
:
"24879595"
,
"name"
:
"close"
,
"font_class"
:
"close"
,
"unicode"
:
"e673"
,
"unicode_decimal"
:
58995
},
{
"icon_id"
:
"24879596"
,
"name"
:
"help-filled"
,
"font_class"
:
"help-filled"
,
"unicode"
:
"e674"
,
"unicode_decimal"
:
58996
},
{
"icon_id"
:
"24879597"
,
"name"
:
"plus-filled"
,
"font_class"
:
"paperplane-filled"
,
"unicode"
:
"e675"
,
"unicode_decimal"
:
58997
},
{
"icon_id"
:
"24879598"
,
"name"
:
"plus"
,
"font_class"
:
"plus"
,
"unicode"
:
"e676"
,
"unicode_decimal"
:
58998
},
{
"icon_id"
:
"24879599"
,
"name"
:
"mic-filled"
,
"font_class"
:
"mic-filled"
,
"unicode"
:
"e677"
,
"unicode_decimal"
:
58999
},
{
"icon_id"
:
"24879600"
,
"name"
:
"image-filled"
,
"font_class"
:
"image-filled"
,
"unicode"
:
"e678"
,
"unicode_decimal"
:
59000
},
{
"icon_id"
:
"24855900"
,
"name"
:
"locked-filled"
,
"font_class"
:
"locked-filled"
,
"unicode"
:
"e668"
,
"unicode_decimal"
:
58984
},
{
"icon_id"
:
"24855901"
,
"name"
:
"info"
,
"font_class"
:
"info"
,
"unicode"
:
"e669"
,
"unicode_decimal"
:
58985
},
{
"icon_id"
:
"24855903"
,
"name"
:
"locked"
,
"font_class"
:
"locked"
,
"unicode"
:
"e66b"
,
"unicode_decimal"
:
58987
},
{
"icon_id"
:
"24855884"
,
"name"
:
"camera-filled"
,
"font_class"
:
"camera-filled"
,
"unicode"
:
"e658"
,
"unicode_decimal"
:
58968
},
{
"icon_id"
:
"24855885"
,
"name"
:
"chat-filled"
,
"font_class"
:
"chat-filled"
,
"unicode"
:
"e659"
,
"unicode_decimal"
:
58969
},
{
"icon_id"
:
"24855886"
,
"name"
:
"camera"
,
"font_class"
:
"camera"
,
"unicode"
:
"e65a"
,
"unicode_decimal"
:
58970
},
{
"icon_id"
:
"24855887"
,
"name"
:
"circle"
,
"font_class"
:
"circle"
,
"unicode"
:
"e65b"
,
"unicode_decimal"
:
58971
},
{
"icon_id"
:
"24855888"
,
"name"
:
"checkmarkempty"
,
"font_class"
:
"checkmarkempty"
,
"unicode"
:
"e65c"
,
"unicode_decimal"
:
58972
},
{
"icon_id"
:
"24855889"
,
"name"
:
"chat"
,
"font_class"
:
"chat"
,
"unicode"
:
"e65d"
,
"unicode_decimal"
:
58973
},
{
"icon_id"
:
"24855890"
,
"name"
:
"circle-filled"
,
"font_class"
:
"circle-filled"
,
"unicode"
:
"e65e"
,
"unicode_decimal"
:
58974
},
{
"icon_id"
:
"24855891"
,
"name"
:
"flag"
,
"font_class"
:
"flag"
,
"unicode"
:
"e65f"
,
"unicode_decimal"
:
58975
},
{
"icon_id"
:
"24855892"
,
"name"
:
"flag-filled"
,
"font_class"
:
"flag-filled"
,
"unicode"
:
"e660"
,
"unicode_decimal"
:
58976
},
{
"icon_id"
:
"24855893"
,
"name"
:
"gear-filled"
,
"font_class"
:
"gear-filled"
,
"unicode"
:
"e661"
,
"unicode_decimal"
:
58977
},
{
"icon_id"
:
"24855894"
,
"name"
:
"home"
,
"font_class"
:
"home"
,
"unicode"
:
"e662"
,
"unicode_decimal"
:
58978
},
{
"icon_id"
:
"24855895"
,
"name"
:
"home-filled"
,
"font_class"
:
"home-filled"
,
"unicode"
:
"e663"
,
"unicode_decimal"
:
58979
},
{
"icon_id"
:
"24855896"
,
"name"
:
"gear"
,
"font_class"
:
"gear"
,
"unicode"
:
"e664"
,
"unicode_decimal"
:
58980
},
{
"icon_id"
:
"24855897"
,
"name"
:
"smallcircle-filled"
,
"font_class"
:
"smallcircle-filled"
,
"unicode"
:
"e665"
,
"unicode_decimal"
:
58981
},
{
"icon_id"
:
"24855898"
,
"name"
:
"map-filled"
,
"font_class"
:
"map-filled"
,
"unicode"
:
"e666"
,
"unicode_decimal"
:
58982
},
{
"icon_id"
:
"24855899"
,
"name"
:
"map"
,
"font_class"
:
"map"
,
"unicode"
:
"e667"
,
"unicode_decimal"
:
58983
},
{
"icon_id"
:
"24855825"
,
"name"
:
"refresh-filled"
,
"font_class"
:
"refresh-filled"
,
"unicode"
:
"e656"
,
"unicode_decimal"
:
58966
},
{
"icon_id"
:
"24855826"
,
"name"
:
"refresh"
,
"font_class"
:
"refresh"
,
"unicode"
:
"e657"
,
"unicode_decimal"
:
58967
},
{
"icon_id"
:
"24855808"
,
"name"
:
"cloud-upload"
,
"font_class"
:
"cloud-upload"
,
"unicode"
:
"e645"
,
"unicode_decimal"
:
58949
},
{
"icon_id"
:
"24855809"
,
"name"
:
"cloud-download-filled"
,
"font_class"
:
"cloud-download-filled"
,
"unicode"
:
"e646"
,
"unicode_decimal"
:
58950
},
{
"icon_id"
:
"24855810"
,
"name"
:
"cloud-download"
,
"font_class"
:
"cloud-download"
,
"unicode"
:
"e647"
,
"unicode_decimal"
:
58951
},
{
"icon_id"
:
"24855811"
,
"name"
:
"cloud-upload-filled"
,
"font_class"
:
"cloud-upload-filled"
,
"unicode"
:
"e648"
,
"unicode_decimal"
:
58952
},
{
"icon_id"
:
"24855813"
,
"name"
:
"redo"
,
"font_class"
:
"redo"
,
"unicode"
:
"e64a"
,
"unicode_decimal"
:
58954
},
{
"icon_id"
:
"24855814"
,
"name"
:
"images-filled"
,
"font_class"
:
"images-filled"
,
"unicode"
:
"e64b"
,
"unicode_decimal"
:
58955
},
{
"icon_id"
:
"24855815"
,
"name"
:
"undo-filled"
,
"font_class"
:
"undo-filled"
,
"unicode"
:
"e64c"
,
"unicode_decimal"
:
58956
},
{
"icon_id"
:
"24855816"
,
"name"
:
"more"
,
"font_class"
:
"more"
,
"unicode"
:
"e64d"
,
"unicode_decimal"
:
58957
},
{
"icon_id"
:
"24855817"
,
"name"
:
"more-filled"
,
"font_class"
:
"more-filled"
,
"unicode"
:
"e64e"
,
"unicode_decimal"
:
58958
},
{
"icon_id"
:
"24855818"
,
"name"
:
"undo"
,
"font_class"
:
"undo"
,
"unicode"
:
"e64f"
,
"unicode_decimal"
:
58959
},
{
"icon_id"
:
"24855819"
,
"name"
:
"images"
,
"font_class"
:
"images"
,
"unicode"
:
"e650"
,
"unicode_decimal"
:
58960
},
{
"icon_id"
:
"24855821"
,
"name"
:
"paperclip"
,
"font_class"
:
"paperclip"
,
"unicode"
:
"e652"
,
"unicode_decimal"
:
58962
},
{
"icon_id"
:
"24855822"
,
"name"
:
"settings"
,
"font_class"
:
"settings"
,
"unicode"
:
"e653"
,
"unicode_decimal"
:
58963
},
{
"icon_id"
:
"24855823"
,
"name"
:
"search"
,
"font_class"
:
"search"
,
"unicode"
:
"e654"
,
"unicode_decimal"
:
58964
},
{
"icon_id"
:
"24855824"
,
"name"
:
"redo-filled"
,
"font_class"
:
"redo-filled"
,
"unicode"
:
"e655"
,
"unicode_decimal"
:
58965
},
{
"icon_id"
:
"24841702"
,
"name"
:
"list"
,
"font_class"
:
"list"
,
"unicode"
:
"e644"
,
"unicode_decimal"
:
58948
},
{
"icon_id"
:
"24841489"
,
"name"
:
"mail-open-filled"
,
"font_class"
:
"mail-open-filled"
,
"unicode"
:
"e63a"
,
"unicode_decimal"
:
58938
},
{
"icon_id"
:
"24841491"
,
"name"
:
"hand-thumbsdown-filled"
,
"font_class"
:
"hand-down-filled"
,
"unicode"
:
"e63c"
,
"unicode_decimal"
:
58940
},
{
"icon_id"
:
"24841492"
,
"name"
:
"hand-thumbsdown"
,
"font_class"
:
"hand-down"
,
"unicode"
:
"e63d"
,
"unicode_decimal"
:
58941
},
{
"icon_id"
:
"24841493"
,
"name"
:
"hand-thumbsup-filled"
,
"font_class"
:
"hand-up-filled"
,
"unicode"
:
"e63e"
,
"unicode_decimal"
:
58942
},
{
"icon_id"
:
"24841494"
,
"name"
:
"hand-thumbsup"
,
"font_class"
:
"hand-up"
,
"unicode"
:
"e63f"
,
"unicode_decimal"
:
58943
},
{
"icon_id"
:
"24841496"
,
"name"
:
"heart-filled"
,
"font_class"
:
"heart-filled"
,
"unicode"
:
"e641"
,
"unicode_decimal"
:
58945
},
{
"icon_id"
:
"24841498"
,
"name"
:
"mail-open"
,
"font_class"
:
"mail-open"
,
"unicode"
:
"e643"
,
"unicode_decimal"
:
58947
},
{
"icon_id"
:
"24841488"
,
"name"
:
"heart"
,
"font_class"
:
"heart"
,
"unicode"
:
"e639"
,
"unicode_decimal"
:
58937
},
{
"icon_id"
:
"24839963"
,
"name"
:
"loop"
,
"font_class"
:
"loop"
,
"unicode"
:
"e633"
,
"unicode_decimal"
:
58931
},
{
"icon_id"
:
"24839866"
,
"name"
:
"pulldown"
,
"font_class"
:
"pulldown"
,
"unicode"
:
"e632"
,
"unicode_decimal"
:
58930
},
{
"icon_id"
:
"24813798"
,
"name"
:
"scan"
,
"font_class"
:
"scan"
,
"unicode"
:
"e62a"
,
"unicode_decimal"
:
58922
},
{
"icon_id"
:
"24813786"
,
"name"
:
"bars"
,
"font_class"
:
"bars"
,
"unicode"
:
"e627"
,
"unicode_decimal"
:
58919
},
{
"icon_id"
:
"24813788"
,
"name"
:
"cart-filled"
,
"font_class"
:
"cart-filled"
,
"unicode"
:
"e629"
,
"unicode_decimal"
:
58921
},
{
"icon_id"
:
"24813790"
,
"name"
:
"checkbox"
,
"font_class"
:
"checkbox"
,
"unicode"
:
"e62b"
,
"unicode_decimal"
:
58923
},
{
"icon_id"
:
"24813791"
,
"name"
:
"checkbox-filled"
,
"font_class"
:
"checkbox-filled"
,
"unicode"
:
"e62c"
,
"unicode_decimal"
:
58924
},
{
"icon_id"
:
"24813794"
,
"name"
:
"shop"
,
"font_class"
:
"shop"
,
"unicode"
:
"e62f"
,
"unicode_decimal"
:
58927
},
{
"icon_id"
:
"24813795"
,
"name"
:
"headphones"
,
"font_class"
:
"headphones"
,
"unicode"
:
"e630"
,
"unicode_decimal"
:
58928
},
{
"icon_id"
:
"24813796"
,
"name"
:
"cart"
,
"font_class"
:
"cart"
,
"unicode"
:
"e631"
,
"unicode_decimal"
:
58929
}
]
}
uni_modules/uni-icons/components/uni-icons/uni-icons.vue
0 → 100644
View file @
16d3b58f
<
template
>
<!-- #ifdef APP-NVUE -->
<text
:style=
"
{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">
{{
unicode
}}
</text>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<text
:style=
"
{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick">
</text>
<!-- #endif -->
</
template
>
<
script
>
import
icons
from
'./icons.js'
;
const
getVal
=
(
val
)
=>
{
const
reg
=
/^
[
0-9
]
*$/g
return
(
typeof
val
===
'number'
||
reg
.
test
(
val
)
)?
val
+
'px'
:
val
;
}
// #ifdef APP-NVUE
var
domModule
=
weex
.
requireModule
(
'dom'
);
import
iconUrl
from
'./uniicons.ttf'
domModule
.
addRule
(
'fontFace'
,
{
'fontFamily'
:
"uniicons"
,
'src'
:
"url('"
+
iconUrl
+
"')"
});
// #endif
/**
* Icons 图标
* @description 用于展示 icons 图标
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
* @property {Number} size 图标大小
* @property {String} type 图标图案,参考示例
* @property {String} color 图标颜色
* @property {String} customPrefix 自定义图标
* @event {Function} click 点击 Icon 触发事件
*/
export
default
{
name
:
'UniIcons'
,
emits
:[
'click'
],
props
:
{
type
:
{
type
:
String
,
default
:
''
},
color
:
{
type
:
String
,
default
:
'#333333'
},
size
:
{
type
:
[
Number
,
String
],
default
:
16
},
customPrefix
:{
type
:
String
,
default
:
''
}
},
data
()
{
return
{
icons
:
icons
.
glyphs
}
},
computed
:{
unicode
(){
let
code
=
this
.
icons
.
find
(
v
=>
v
.
font_class
===
this
.
type
)
if
(
code
){
return
unescape
(
`%u
${
code
.
unicode
}
`
)
}
return
''
},
iconSize
(){
return
getVal
(
this
.
size
)
}
},
methods
:
{
_onClick
()
{
this
.
$emit
(
'click'
)
}
}
}
</
script
>
<
style
lang=
"scss"
>
/* #ifndef APP-NVUE */
@import
'./uniicons.css'
;
@font-face
{
font-family
:
uniicons
;
src
:
url('./uniicons.ttf')
format
(
'truetype'
);
}
/* #endif */
.uni-icons
{
font-family
:
uniicons
;
text-decoration
:
none
;
text-align
:
center
;
}
</
style
>
uni_modules/uni-icons/components/uni-icons/uni.ttf
0 → 100644
View file @
16d3b58f
File added
uni_modules/uni-icons/components/uni-icons/uniicons.css
0 → 100644
View file @
16d3b58f
.uniui-color
:before
{
content
:
"\e6cf"
;
}
.uniui-wallet
:before
{
content
:
"\e6b1"
;
}
.uniui-settings-filled
:before
{
content
:
"\e6ce"
;
}
.uniui-auth-filled
:before
{
content
:
"\e6cc"
;
}
.uniui-shop-filled
:before
{
content
:
"\e6cd"
;
}
.uniui-staff-filled
:before
{
content
:
"\e6cb"
;
}
.uniui-vip-filled
:before
{
content
:
"\e6c6"
;
}
.uniui-plus-filled
:before
{
content
:
"\e6c7"
;
}
.uniui-folder-add-filled
:before
{
content
:
"\e6c8"
;
}
.uniui-color-filled
:before
{
content
:
"\e6c9"
;
}
.uniui-tune-filled
:before
{
content
:
"\e6ca"
;
}
.uniui-calendar-filled
:before
{
content
:
"\e6c0"
;
}
.uniui-notification-filled
:before
{
content
:
"\e6c1"
;
}
.uniui-wallet-filled
:before
{
content
:
"\e6c2"
;
}
.uniui-medal-filled
:before
{
content
:
"\e6c3"
;
}
.uniui-gift-filled
:before
{
content
:
"\e6c4"
;
}
.uniui-fire-filled
:before
{
content
:
"\e6c5"
;
}
.uniui-refreshempty
:before
{
content
:
"\e6bf"
;
}
.uniui-location-filled
:before
{
content
:
"\e6af"
;
}
.uniui-person-filled
:before
{
content
:
"\e69d"
;
}
.uniui-personadd-filled
:before
{
content
:
"\e698"
;
}
.uniui-back
:before
{
content
:
"\e6b9"
;
}
.uniui-forward
:before
{
content
:
"\e6ba"
;
}
.uniui-arrow-right
:before
{
content
:
"\e6bb"
;
}
.uniui-arrowthinright
:before
{
content
:
"\e6bb"
;
}
.uniui-arrow-left
:before
{
content
:
"\e6bc"
;
}
.uniui-arrowthinleft
:before
{
content
:
"\e6bc"
;
}
.uniui-arrow-up
:before
{
content
:
"\e6bd"
;
}
.uniui-arrowthinup
:before
{
content
:
"\e6bd"
;
}
.uniui-arrow-down
:before
{
content
:
"\e6be"
;
}
.uniui-arrowthindown
:before
{
content
:
"\e6be"
;
}
.uniui-bottom
:before
{
content
:
"\e6b8"
;
}
.uniui-arrowdown
:before
{
content
:
"\e6b8"
;
}
.uniui-right
:before
{
content
:
"\e6b5"
;
}
.uniui-arrowright
:before
{
content
:
"\e6b5"
;
}
.uniui-top
:before
{
content
:
"\e6b6"
;
}
.uniui-arrowup
:before
{
content
:
"\e6b6"
;
}
.uniui-left
:before
{
content
:
"\e6b7"
;
}
.uniui-arrowleft
:before
{
content
:
"\e6b7"
;
}
.uniui-eye
:before
{
content
:
"\e651"
;
}
.uniui-eye-filled
:before
{
content
:
"\e66a"
;
}
.uniui-eye-slash
:before
{
content
:
"\e6b3"
;
}
.uniui-eye-slash-filled
:before
{
content
:
"\e6b4"
;
}
.uniui-info-filled
:before
{
content
:
"\e649"
;
}
.uniui-reload
:before
{
content
:
"\e6b2"
;
}
.uniui-micoff-filled
:before
{
content
:
"\e6b0"
;
}
.uniui-map-pin-ellipse
:before
{
content
:
"\e6ac"
;
}
.uniui-map-pin
:before
{
content
:
"\e6ad"
;
}
.uniui-location
:before
{
content
:
"\e6ae"
;
}
.uniui-starhalf
:before
{
content
:
"\e683"
;
}
.uniui-star
:before
{
content
:
"\e688"
;
}
.uniui-star-filled
:before
{
content
:
"\e68f"
;
}
.uniui-calendar
:before
{
content
:
"\e6a0"
;
}
.uniui-fire
:before
{
content
:
"\e6a1"
;
}
.uniui-medal
:before
{
content
:
"\e6a2"
;
}
.uniui-font
:before
{
content
:
"\e6a3"
;
}
.uniui-gift
:before
{
content
:
"\e6a4"
;
}
.uniui-link
:before
{
content
:
"\e6a5"
;
}
.uniui-notification
:before
{
content
:
"\e6a6"
;
}
.uniui-staff
:before
{
content
:
"\e6a7"
;
}
.uniui-vip
:before
{
content
:
"\e6a8"
;
}
.uniui-folder-add
:before
{
content
:
"\e6a9"
;
}
.uniui-tune
:before
{
content
:
"\e6aa"
;
}
.uniui-auth
:before
{
content
:
"\e6ab"
;
}
.uniui-person
:before
{
content
:
"\e699"
;
}
.uniui-email-filled
:before
{
content
:
"\e69a"
;
}
.uniui-phone-filled
:before
{
content
:
"\e69b"
;
}
.uniui-phone
:before
{
content
:
"\e69c"
;
}
.uniui-email
:before
{
content
:
"\e69e"
;
}
.uniui-personadd
:before
{
content
:
"\e69f"
;
}
.uniui-chatboxes-filled
:before
{
content
:
"\e692"
;
}
.uniui-contact
:before
{
content
:
"\e693"
;
}
.uniui-chatbubble-filled
:before
{
content
:
"\e694"
;
}
.uniui-contact-filled
:before
{
content
:
"\e695"
;
}
.uniui-chatboxes
:before
{
content
:
"\e696"
;
}
.uniui-chatbubble
:before
{
content
:
"\e697"
;
}
.uniui-upload-filled
:before
{
content
:
"\e68e"
;
}
.uniui-upload
:before
{
content
:
"\e690"
;
}
.uniui-weixin
:before
{
content
:
"\e691"
;
}
.uniui-compose
:before
{
content
:
"\e67f"
;
}
.uniui-qq
:before
{
content
:
"\e680"
;
}
.uniui-download-filled
:before
{
content
:
"\e681"
;
}
.uniui-pyq
:before
{
content
:
"\e682"
;
}
.uniui-sound
:before
{
content
:
"\e684"
;
}
.uniui-trash-filled
:before
{
content
:
"\e685"
;
}
.uniui-sound-filled
:before
{
content
:
"\e686"
;
}
.uniui-trash
:before
{
content
:
"\e687"
;
}
.uniui-videocam-filled
:before
{
content
:
"\e689"
;
}
.uniui-spinner-cycle
:before
{
content
:
"\e68a"
;
}
.uniui-weibo
:before
{
content
:
"\e68b"
;
}
.uniui-videocam
:before
{
content
:
"\e68c"
;
}
.uniui-download
:before
{
content
:
"\e68d"
;
}
.uniui-help
:before
{
content
:
"\e679"
;
}
.uniui-navigate-filled
:before
{
content
:
"\e67a"
;
}
.uniui-plusempty
:before
{
content
:
"\e67b"
;
}
.uniui-smallcircle
:before
{
content
:
"\e67c"
;
}
.uniui-minus-filled
:before
{
content
:
"\e67d"
;
}
.uniui-micoff
:before
{
content
:
"\e67e"
;
}
.uniui-closeempty
:before
{
content
:
"\e66c"
;
}
.uniui-clear
:before
{
content
:
"\e66d"
;
}
.uniui-navigate
:before
{
content
:
"\e66e"
;
}
.uniui-minus
:before
{
content
:
"\e66f"
;
}
.uniui-image
:before
{
content
:
"\e670"
;
}
.uniui-mic
:before
{
content
:
"\e671"
;
}
.uniui-paperplane
:before
{
content
:
"\e672"
;
}
.uniui-close
:before
{
content
:
"\e673"
;
}
.uniui-help-filled
:before
{
content
:
"\e674"
;
}
.uniui-paperplane-filled
:before
{
content
:
"\e675"
;
}
.uniui-plus
:before
{
content
:
"\e676"
;
}
.uniui-mic-filled
:before
{
content
:
"\e677"
;
}
.uniui-image-filled
:before
{
content
:
"\e678"
;
}
.uniui-locked-filled
:before
{
content
:
"\e668"
;
}
.uniui-info
:before
{
content
:
"\e669"
;
}
.uniui-locked
:before
{
content
:
"\e66b"
;
}
.uniui-camera-filled
:before
{
content
:
"\e658"
;
}
.uniui-chat-filled
:before
{
content
:
"\e659"
;
}
.uniui-camera
:before
{
content
:
"\e65a"
;
}
.uniui-circle
:before
{
content
:
"\e65b"
;
}
.uniui-checkmarkempty
:before
{
content
:
"\e65c"
;
}
.uniui-chat
:before
{
content
:
"\e65d"
;
}
.uniui-circle-filled
:before
{
content
:
"\e65e"
;
}
.uniui-flag
:before
{
content
:
"\e65f"
;
}
.uniui-flag-filled
:before
{
content
:
"\e660"
;
}
.uniui-gear-filled
:before
{
content
:
"\e661"
;
}
.uniui-home
:before
{
content
:
"\e662"
;
}
.uniui-home-filled
:before
{
content
:
"\e663"
;
}
.uniui-gear
:before
{
content
:
"\e664"
;
}
.uniui-smallcircle-filled
:before
{
content
:
"\e665"
;
}
.uniui-map-filled
:before
{
content
:
"\e666"
;
}
.uniui-map
:before
{
content
:
"\e667"
;
}
.uniui-refresh-filled
:before
{
content
:
"\e656"
;
}
.uniui-refresh
:before
{
content
:
"\e657"
;
}
.uniui-cloud-upload
:before
{
content
:
"\e645"
;
}
.uniui-cloud-download-filled
:before
{
content
:
"\e646"
;
}
.uniui-cloud-download
:before
{
content
:
"\e647"
;
}
.uniui-cloud-upload-filled
:before
{
content
:
"\e648"
;
}
.uniui-redo
:before
{
content
:
"\e64a"
;
}
.uniui-images-filled
:before
{
content
:
"\e64b"
;
}
.uniui-undo-filled
:before
{
content
:
"\e64c"
;
}
.uniui-more
:before
{
content
:
"\e64d"
;
}
.uniui-more-filled
:before
{
content
:
"\e64e"
;
}
.uniui-undo
:before
{
content
:
"\e64f"
;
}
.uniui-images
:before
{
content
:
"\e650"
;
}
.uniui-paperclip
:before
{
content
:
"\e652"
;
}
.uniui-settings
:before
{
content
:
"\e653"
;
}
.uniui-search
:before
{
content
:
"\e654"
;
}
.uniui-redo-filled
:before
{
content
:
"\e655"
;
}
.uniui-list
:before
{
content
:
"\e644"
;
}
.uniui-mail-open-filled
:before
{
content
:
"\e63a"
;
}
.uniui-hand-down-filled
:before
{
content
:
"\e63c"
;
}
.uniui-hand-down
:before
{
content
:
"\e63d"
;
}
.uniui-hand-up-filled
:before
{
content
:
"\e63e"
;
}
.uniui-hand-up
:before
{
content
:
"\e63f"
;
}
.uniui-heart-filled
:before
{
content
:
"\e641"
;
}
.uniui-mail-open
:before
{
content
:
"\e643"
;
}
.uniui-heart
:before
{
content
:
"\e639"
;
}
.uniui-loop
:before
{
content
:
"\e633"
;
}
.uniui-pulldown
:before
{
content
:
"\e632"
;
}
.uniui-scan
:before
{
content
:
"\e62a"
;
}
.uniui-bars
:before
{
content
:
"\e627"
;
}
.uniui-cart-filled
:before
{
content
:
"\e629"
;
}
.uniui-checkbox
:before
{
content
:
"\e62b"
;
}
.uniui-checkbox-filled
:before
{
content
:
"\e62c"
;
}
.uniui-shop
:before
{
content
:
"\e62f"
;
}
.uniui-headphones
:before
{
content
:
"\e630"
;
}
.uniui-cart
:before
{
content
:
"\e631"
;
}
uni_modules/uni-icons/components/uni-icons/uniicons.ttf
0 → 100644
View file @
16d3b58f
File added
uni_modules/uni-icons/package.json
0 → 100644
View file @
16d3b58f
{
"id"
:
"uni-icons"
,
"displayName"
:
"uni-icons 图标"
,
"version"
:
"1.3.5"
,
"description"
:
"图标组件,用于展示移动端常见的图标,可自定义颜色、大小。"
,
"keywords"
:
[
"uni-ui"
,
"uniui"
,
"icon"
,
"图标"
],
"repository"
:
"https://github.com/dcloudio/uni-ui"
,
"engines"
:
{
"HBuilderX"
:
"^3.2.14"
},
"directories"
:
{
"example"
:
"../../temps/example_temps"
},
"dcloudext"
:
{
"category"
:
[
"前端组件"
,
"通用组件"
],
"sale"
:
{
"regular"
:
{
"price"
:
"0.00"
},
"sourcecode"
:
{
"price"
:
"0.00"
}
},
"contact"
:
{
"qq"
:
""
},
"declaration"
:
{
"ads"
:
"无"
,
"data"
:
"无"
,
"permissions"
:
"无"
},
"npmurl"
:
"https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules"
:
{
"dependencies"
:
[
"uni-scss"
],
"encrypt"
:
[],
"platforms"
:
{
"cloud"
:
{
"tcb"
:
"y"
,
"aliyun"
:
"y"
},
"client"
:
{
"App"
:
{
"app-vue"
:
"y"
,
"app-nvue"
:
"y"
},
"H5-mobile"
:
{
"Safari"
:
"y"
,
"Android Browser"
:
"y"
,
"微信浏览器(Android)"
:
"y"
,
"QQ浏览器(Android)"
:
"y"
},
"H5-pc"
:
{
"Chrome"
:
"y"
,
"IE"
:
"y"
,
"Edge"
:
"y"
,
"Firefox"
:
"y"
,
"Safari"
:
"y"
},
"小程序"
:
{
"微信"
:
"y"
,
"阿里"
:
"y"
,
"百度"
:
"y"
,
"字节跳动"
:
"y"
,
"QQ"
:
"y"
},
"快应用"
:
{
"华为"
:
"u"
,
"联盟"
:
"u"
},
"Vue"
:
{
"vue2"
:
"y"
,
"vue3"
:
"y"
}
}
}
}
}
\ No newline at end of file
uni_modules/uni-icons/readme.md
0 → 100644
View file @
16d3b58f
## Icons 图标
> **组件名:uni-icons**
> 代码块: `uIcons`
用于展示 icons 图标 。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
uni_modules/uni-number-box/changelog.md
0 → 100644
View file @
16d3b58f
## 1.2.1(2021-11-22)
-
修复 vue3中某些scss变量无法找到的问题
## 1.2.0(2021-11-19)
-
优化 组件UI,并提供设计资源,详见:
[
https://uniapp.dcloud.io/component/uniui/resource
](
https://uniapp.dcloud.io/component/uniui/resource
)
-
文档迁移,详见:
[
https://uniapp.dcloud.io/component/uniui/uni-number-box
](
https://uniapp.dcloud.io/component/uniui/uni-number-box
)
## 1.1.2(2021-11-09)
-
新增 提供组件设计资源,组件样式调整
## 1.1.1(2021-07-30)
-
优化 vue3下事件警告的问题
## 1.1.0(2021-07-13)
-
组件兼容 vue3,如何创建vue3项目,详见
[
uni-app 项目支持 vue3 介绍
](
https://ask.dcloud.net.cn/article/37834
)
## 1.0.7(2021-05-12)
-
新增 组件示例地址
## 1.0.6(2021-04-20)
-
修复 uni-number-box 浮点数运算不精确的 bug
-
修复 uni-number-box change 事件触发不正确的 bug
-
新增 uni-number-box v-model 双向绑定
## 1.0.5(2021-02-05)
-
调整为uni_modules目录规范
## 1.0.7(2021-02-05)
-
调整为uni_modules目录规范
-
新增 支持 v-model
-
新增 支持 focus、blur 事件
-
新增 支持 PC 端
uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue
0 → 100644
View file @
16d3b58f
<
template
>
<view
class=
"uni-numbox"
>
<view
@
click=
"_calcValue('minus')"
class=
"uni-numbox__minus uni-numbox-btns"
:style=
"
{background}">
<text
class=
"uni-numbox--text"
:class=
"
{ 'uni-numbox--disabled': inputValue
<
=
min
||
disabled
}"
:style=
"
{color}">-
</text>
</view>
<input
:disabled=
"disabled"
@
focus=
"_onFocus"
@
blur=
"_onBlur"
class=
"uni-numbox__value"
type=
"number"
v-model=
"inputValue"
:style=
"
{background, color}" />
<view
@
click=
"_calcValue('plus')"
class=
"uni-numbox__plus uni-numbox-btns"
:style=
"
{background}">
<text
class=
"uni-numbox--text"
:class=
"
{ 'uni-numbox--disabled': inputValue >= max || disabled }" :style="{color}">+
</text>
</view>
</view>
</
template
>
<
script
>
/**
* NumberBox 数字输入框
* @description 带加减按钮的数字输入框
* @tutorial https://ext.dcloud.net.cn/plugin?id=31
* @property {Number} value 输入框当前值
* @property {Number} min 最小值
* @property {Number} max 最大值
* @property {Number} step 每次点击改变的间隔大小
* @property {String} background 背景色
* @property {String} color 字体颜色(前景色)
* @property {Boolean} disabled = [true|false] 是否为禁用状态
* @event {Function} change 输入框值改变时触发的事件,参数为输入框当前的 value
* @event {Function} focus 输入框聚焦时触发的事件,参数为 event 对象
* @event {Function} blur 输入框失焦时触发的事件,参数为 event 对象
*/
export
default
{
name
:
"UniNumberBox"
,
emits
:
[
'change'
,
'input'
,
'update:modelValue'
,
'blur'
,
'focus'
],
props
:
{
value
:
{
type
:
[
Number
,
String
],
default
:
1
},
modelValue
:
{
type
:
[
Number
,
String
],
default
:
1
},
min
:
{
type
:
Number
,
default
:
0
},
max
:
{
type
:
Number
,
default
:
100
},
step
:
{
type
:
Number
,
default
:
1
},
background
:
{
type
:
String
,
default
:
'#f5f5f5'
},
color
:
{
type
:
String
,
default
:
'#333'
},
disabled
:
{
type
:
Boolean
,
default
:
false
}
},
data
()
{
return
{
inputValue
:
0
};
},
watch
:
{
value
(
val
)
{
this
.
inputValue
=
+
val
;
},
modelValue
(
val
)
{
this
.
inputValue
=
+
val
;
}
},
created
()
{
if
(
this
.
value
===
1
)
{
this
.
inputValue
=
+
this
.
modelValue
;
}
if
(
this
.
modelValue
===
1
)
{
this
.
inputValue
=
+
this
.
value
;
}
},
methods
:
{
_calcValue
(
type
)
{
if
(
this
.
disabled
)
{
return
;
}
const
scale
=
this
.
_getDecimalScale
();
let
value
=
this
.
inputValue
*
scale
;
let
step
=
this
.
step
*
scale
;
if
(
type
===
"minus"
)
{
value
-=
step
;
if
(
value
<
(
this
.
min
*
scale
))
{
return
;
}
if
(
value
>
(
this
.
max
*
scale
))
{
value
=
this
.
max
*
scale
}
}
if
(
type
===
"plus"
)
{
value
+=
step
;
if
(
value
>
(
this
.
max
*
scale
))
{
return
;
}
if
(
value
<
(
this
.
min
*
scale
))
{
value
=
this
.
min
*
scale
}
}
this
.
inputValue
=
(
value
/
scale
).
toFixed
(
String
(
scale
).
length
-
1
);
this
.
$emit
(
"change"
,
+
this
.
inputValue
);
// TODO vue2 兼容
this
.
$emit
(
"input"
,
+
this
.
inputValue
);
// TODO vue3 兼容
this
.
$emit
(
"update:modelValue"
,
+
this
.
inputValue
);
},
_getDecimalScale
()
{
let
scale
=
1
;
// 浮点型
if
(
~~
this
.
step
!==
this
.
step
)
{
scale
=
Math
.
pow
(
10
,
String
(
this
.
step
).
split
(
"."
)[
1
].
length
);
}
return
scale
;
},
_onBlur
(
event
)
{
this
.
$emit
(
'blur'
,
event
)
let
value
=
event
.
detail
.
value
;
if
(
!
value
)
{
// this.inputValue = 0;
return
;
}
value
=
+
value
;
if
(
value
>
this
.
max
)
{
value
=
this
.
max
;
}
else
if
(
value
<
this
.
min
)
{
value
=
this
.
min
;
}
const
scale
=
this
.
_getDecimalScale
();
this
.
inputValue
=
value
.
toFixed
(
String
(
scale
).
length
-
1
);
this
.
$emit
(
"change"
,
+
this
.
inputValue
);
this
.
$emit
(
"input"
,
+
this
.
inputValue
);
},
_onFocus
(
event
)
{
this
.
$emit
(
'focus'
,
event
)
}
}
};
</
script
>
<
style
lang=
"scss"
scoped
>
$box-height
:
26px
;
$bg
:
#f5f5f5
;
$br
:
2px
;
$color
:
#333
;
.uni-numbox
{
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
row
;
}
.uni-numbox-btns
{
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
row
;
align-items
:
center
;
justify-content
:
center
;
padding
:
0
8px
;
background-color
:
$bg
;
/* #ifdef H5 */
cursor
:
pointer
;
/* #endif */
}
.uni-numbox__value
{
margin
:
0
2px
;
background-color
:
$bg
;
width
:
40px
;
height
:
$box-height
;
text-align
:
center
;
font-size
:
14px
;
border-left-width
:
0
;
border-right-width
:
0
;
color
:
$color
;
}
.uni-numbox__minus
{
border-top-left-radius
:
$br
;
border-bottom-left-radius
:
$br
;
}
.uni-numbox__plus
{
border-top-right-radius
:
$br
;
border-bottom-right-radius
:
$br
;
}
.uni-numbox--text
{
// fix nvue
line-height
:
20px
;
font-size
:
20px
;
font-weight
:
300
;
color
:
$color
;
}
.uni-numbox
.uni-numbox--disabled
{
color
:
#c0c0c0
!
important
;
/* #ifdef H5 */
cursor
:
not
-
allowed
;
/* #endif */
}
</
style
>
uni_modules/uni-number-box/package.json
0 → 100644
View file @
16d3b58f
{
"id"
:
"uni-number-box"
,
"displayName"
:
"uni-number-box 数字输入框"
,
"version"
:
"1.2.1"
,
"description"
:
"NumberBox 带加减按钮的数字输入框组件,用户可以控制每次点击增加的数值,支持小数。"
,
"keywords"
:
[
"uni-ui"
,
"uniui"
,
"数字输入框"
],
"repository"
:
"https://github.com/dcloudio/uni-ui"
,
"engines"
:
{
"HBuilderX"
:
""
},
"directories"
:
{
"example"
:
"../../temps/example_temps"
},
"dcloudext"
:
{
"category"
:
[
"前端组件"
,
"通用组件"
],
"sale"
:
{
"regular"
:
{
"price"
:
"0.00"
},
"sourcecode"
:
{
"price"
:
"0.00"
}
},
"contact"
:
{
"qq"
:
""
},
"declaration"
:
{
"ads"
:
"无"
,
"data"
:
"无"
,
"permissions"
:
"无"
},
"npmurl"
:
"https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules"
:
{
"dependencies"
:
[
"uni-scss"
],
"encrypt"
:
[],
"platforms"
:
{
"cloud"
:
{
"tcb"
:
"y"
,
"aliyun"
:
"y"
},
"client"
:
{
"App"
:
{
"app-vue"
:
"y"
,
"app-nvue"
:
"y"
},
"H5-mobile"
:
{
"Safari"
:
"y"
,
"Android Browser"
:
"y"
,
"微信浏览器(Android)"
:
"y"
,
"QQ浏览器(Android)"
:
"y"
},
"H5-pc"
:
{
"Chrome"
:
"y"
,
"IE"
:
"y"
,
"Edge"
:
"y"
,
"Firefox"
:
"y"
,
"Safari"
:
"y"
},
"小程序"
:
{
"微信"
:
"y"
,
"阿里"
:
"y"
,
"百度"
:
"y"
,
"字节跳动"
:
"y"
,
"QQ"
:
"y"
},
"快应用"
:
{
"华为"
:
"u"
,
"联盟"
:
"u"
},
"Vue"
:
{
"vue2"
:
"y"
,
"vue3"
:
"y"
}
}
}
}
}
\ No newline at end of file
uni_modules/uni-number-box/readme.md
0 → 100644
View file @
16d3b58f
## NumberBox 数字输入框
> **组件名:uni-number-box**
> 代码块: `uNumberBox`
带加减按钮的数字输入框。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-number-box)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
uni_modules/uni-scss/changelog.md
0 → 100644
View file @
16d3b58f
## 1.0.3(2022-01-21)
-
优化 组件示例
## 1.0.2(2021-11-22)
-
修复 / 符号在 vue 不同版本兼容问题引起的报错问题
## 1.0.1(2021-11-22)
-
修复 vue3中scss语法兼容问题
## 1.0.0(2021-11-18)
-
init
uni_modules/uni-scss/index.scss
0 → 100644
View file @
16d3b58f
@import
'./styles/index.scss'
;
uni_modules/uni-scss/package.json
0 → 100644
View file @
16d3b58f
{
"id"
:
"uni-scss"
,
"displayName"
:
"uni-scss 辅助样式"
,
"version"
:
"1.0.3"
,
"description"
:
"uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。"
,
"keywords"
:
[
"uni-scss"
,
"uni-ui"
,
"辅助样式"
],
"repository"
:
"https://github.com/dcloudio/uni-ui"
,
"engines"
:
{
"HBuilderX"
:
"^3.1.0"
},
"dcloudext"
:
{
"category"
:
[
"JS SDK"
,
"通用 SDK"
],
"sale"
:
{
"regular"
:
{
"price"
:
"0.00"
},
"sourcecode"
:
{
"price"
:
"0.00"
}
},
"contact"
:
{
"qq"
:
""
},
"declaration"
:
{
"ads"
:
"无"
,
"data"
:
"无"
,
"permissions"
:
"无"
},
"npmurl"
:
"https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules"
:
{
"dependencies"
:
[],
"encrypt"
:
[],
"platforms"
:
{
"cloud"
:
{
"tcb"
:
"y"
,
"aliyun"
:
"y"
},
"client"
:
{
"App"
:
{
"app-vue"
:
"y"
,
"app-nvue"
:
"u"
},
"H5-mobile"
:
{
"Safari"
:
"y"
,
"Android Browser"
:
"y"
,
"微信浏览器(Android)"
:
"y"
,
"QQ浏览器(Android)"
:
"y"
},
"H5-pc"
:
{
"Chrome"
:
"y"
,
"IE"
:
"y"
,
"Edge"
:
"y"
,
"Firefox"
:
"y"
,
"Safari"
:
"y"
},
"小程序"
:
{
"微信"
:
"y"
,
"阿里"
:
"y"
,
"百度"
:
"y"
,
"字节跳动"
:
"y"
,
"QQ"
:
"y"
},
"快应用"
:
{
"华为"
:
"n"
,
"联盟"
:
"n"
},
"Vue"
:
{
"vue2"
:
"y"
,
"vue3"
:
"y"
}
}
}
}
}
uni_modules/uni-scss/readme.md
0 → 100644
View file @
16d3b58f
`uni-sass`
是
`uni-ui`
提供的一套全局样式 ,通过一些简单的类名和
`sass`
变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
uni_modules/uni-scss/styles/index.scss
0 → 100644
View file @
16d3b58f
@import
'./setting/_variables.scss'
;
@import
'./setting/_border.scss'
;
@import
'./setting/_color.scss'
;
@import
'./setting/_space.scss'
;
@import
'./setting/_radius.scss'
;
@import
'./setting/_text.scss'
;
@import
'./setting/_styles.scss'
;
uni_modules/uni-scss/styles/setting/_border.scss
0 → 100644
View file @
16d3b58f
.uni-border
{
border
:
1px
$uni-border-1
solid
;
}
\ No newline at end of file
uni_modules/uni-scss/styles/setting/_color.scss
0 → 100644
View file @
16d3b58f
// TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐
// @mixin get-styles($k,$c) {
// @if $k == size or $k == weight{
// font-#{$k}:#{$c}
// }@else{
// #{$k}:#{$c}
// }
// }
$uni-ui-color
:(
//
主色
primary
:
$uni-primary
,
primary-disable
:
$uni-primary-disable
,
primary-light
:
$uni-primary-light
,
//
辅助色
success
:
$uni-success
,
success-disable
:
$uni-success-disable
,
success-light
:
$uni-success-light
,
warning
:
$uni-warning
,
warning-disable
:
$uni-warning-disable
,
warning-light
:
$uni-warning-light
,
error
:
$uni-error
,
error-disable
:
$uni-error-disable
,
error-light
:
$uni-error-light
,
info
:
$uni-info
,
info-disable
:
$uni-info-disable
,
info-light
:
$uni-info-light
,
//
中性色
main-color
:
$uni-main-color
,
base-color
:
$uni-base-color
,
secondary-color
:
$uni-secondary-color
,
extra-color
:
$uni-extra-color
,
//
背景色
bg-color
:
$uni-bg-color
,
//
边框颜色
border-1
:
$uni-border-1
,
border-2
:
$uni-border-2
,
border-3
:
$uni-border-3
,
border-4
:
$uni-border-4
,
//
黑色
black
:
$uni-black
,
//
白色
white
:
$uni-white
,
//
透明
transparent
:
$uni-transparent
)
!
default
;
@each
$key
,
$child
in
$uni-ui-color
{
.uni-
#{
""
+
$key
}
{
color
:
$child
;
}
.uni-
#{
""
+
$key
}
-bg
{
background-color
:
$child
;
}
}
.uni-shadow-sm
{
box-shadow
:
$uni-shadow-sm
;
}
.uni-shadow-base
{
box-shadow
:
$uni-shadow-base
;
}
.uni-shadow-lg
{
box-shadow
:
$uni-shadow-lg
;
}
.uni-mask
{
background-color
:
$uni-mask
;
}
uni_modules/uni-scss/styles/setting/_radius.scss
0 → 100644
View file @
16d3b58f
@mixin
radius
(
$r
,
$d
:
null
,
$important
:
false
){
$radius-value
:
map-get
(
$uni-radius
,
$r
)
if
(
$important
,
!
important
,
null
);
// Key exists within the $uni-radius variable
@if
(
map-has-key
(
$uni-radius
,
$r
)
and
$d
){
@if
$d
==
t
{
border-top-left-radius
:
$radius-value
;
border-top-right-radius
:
$radius-value
;
}
@else
if
$d
==
r
{
border-top-right-radius
:
$radius-value
;
border-bottom-right-radius
:
$radius-value
;
}
@else
if
$d
==
b
{
border-bottom-left-radius
:
$radius-value
;
border-bottom-right-radius
:
$radius-value
;
}
@else
if
$d
==
l
{
border-top-left-radius
:
$radius-value
;
border-bottom-left-radius
:
$radius-value
;
}
@else
if
$d
==
tl
{
border-top-left-radius
:
$radius-value
;
}
@else
if
$d
==
tr
{
border-top-right-radius
:
$radius-value
;
}
@else
if
$d
==
br
{
border-bottom-right-radius
:
$radius-value
;
}
@else
if
$d
==
bl
{
border-bottom-left-radius
:
$radius-value
;
}
}
@else
{
border-radius
:
$radius-value
;
}
}
@each
$key
,
$child
in
$uni-radius
{
@if
(
$key
){
.uni-radius-
#{
""
+
$key
}
{
@include
radius
(
$key
)
}
}
@else
{
.uni-radius
{
@include
radius
(
$key
)
}
}
}
@each
$direction
in
t
,
r
,
b
,
l
,
tl
,
tr
,
br
,
bl
{
@each
$key
,
$child
in
$uni-radius
{
@if
(
$key
){
.uni-radius-
#{
""
+
$direction
}
-
#{
""
+
$key
}
{
@include
radius
(
$key
,
$direction
,
false
)
}
}
@else
{
.uni-radius-
#{
$direction
}
{
@include
radius
(
$key
,
$direction
,
false
)
}
}
}
}
uni_modules/uni-scss/styles/setting/_space.scss
0 → 100644
View file @
16d3b58f
@mixin
fn
(
$space
,
$direction
,
$size
,
$n
)
{
@if
$n
{
#{
$space
}
-
#{
$direction
}
:
#{
$size
*
$uni-space-root
}
px
}
@else
{
#{
$space
}
-
#{
$direction
}
:
#{
-
$size
*
$uni-space-root
}
px
}
}
@mixin
get-styles
(
$direction
,
$i
,
$space
,
$n
){
@if
$direction
==
t
{
@include
fn
(
$space
,
top
,
$i
,
$n
);
}
@if
$direction
==
r
{
@include
fn
(
$space
,
right
,
$i
,
$n
);
}
@if
$direction
==
b
{
@include
fn
(
$space
,
bottom
,
$i
,
$n
);
}
@if
$direction
==
l
{
@include
fn
(
$space
,
left
,
$i
,
$n
);
}
@if
$direction
==
x
{
@include
fn
(
$space
,
left
,
$i
,
$n
);
@include
fn
(
$space
,
right
,
$i
,
$n
);
}
@if
$direction
==
y
{
@include
fn
(
$space
,
top
,
$i
,
$n
);
@include
fn
(
$space
,
bottom
,
$i
,
$n
);
}
@if
$direction
==
a
{
@if
$n
{
#{
$space
}
:
#{
$i
*
$uni-space-root
}
px
;
}
@else
{
#{
$space
}
:
#{
-
$i
*
$uni-space-root
}
px
;
}
}
}
@each
$orientation
in
m
,
p
{
$space
:
margin
;
@if
$orientation
==
m
{
$space
:
margin
;
}
@else
{
$space
:
padding
;
}
@for
$i
from
0
through
16
{
@each
$direction
in
t
,
r
,
b
,
l
,
x
,
y
,
a
{
.uni-
#{
$orientation
}#{
$direction
}
-
#{
$i
}
{
@include
get-styles
(
$direction
,
$i
,
$space
,
true
);
}
.uni-
#{
$orientation
}#{
$direction
}
-n
#{
$i
}
{
@include
get-styles
(
$direction
,
$i
,
$space
,
false
);
}
}
}
}
\ No newline at end of file
uni_modules/uni-scss/styles/setting/_styles.scss
0 → 100644
View file @
16d3b58f
/* #ifndef APP-NVUE */
$-color-white
:
#fff
;
$-color-black
:
#000
;
@mixin
base-style
(
$color
)
{
color
:
#fff
;
background-color
:
$color
;
border-color
:
mix
(
$-color-black
,
$color
,
8%
);
&
:not
([
hover-class
])
:active
{
background
:
mix
(
$-color-black
,
$color
,
10%
);
border-color
:
mix
(
$-color-black
,
$color
,
20%
);
color
:
$-color-white
;
outline
:
none
;
}
}
@mixin
is-color
(
$color
)
{
@include
base-style
(
$color
);
&
[
loading
]
{
@include
base-style
(
$color
);
&
:
:
before
{
margin-right
:
5px
;
}
}
&
[
disabled
]
{
&
,
&
[
loading
],
&
:not
([
hover-class
])
:active
{
color
:
$-color-white
;
border-color
:
mix
(
darken
(
$color
,
10%
)
,
$-color-white
);
background-color
:
mix
(
$color
,
$-color-white
);
}
}
}
@mixin
base-plain-style
(
$color
)
{
color
:
$color
;
background-color
:
mix
(
$-color-white
,
$color
,
90%
);
border-color
:
mix
(
$-color-white
,
$color
,
70%
);
&
:not
([
hover-class
])
:active
{
background
:
mix
(
$-color-white
,
$color
,
80%
);
color
:
$color
;
outline
:
none
;
border-color
:
mix
(
$-color-white
,
$color
,
50%
);
}
}
@mixin
is-plain
(
$color
){
&
[
plain
]
{
@include
base-plain-style
(
$color
);
&
[
loading
]
{
@include
base-plain-style
(
$color
);
&
:
:
before
{
margin-right
:
5px
;
}
}
&
[
disabled
]
{
&
,
&
:active
{
color
:
mix
(
$-color-white
,
$color
,
40%
);
background-color
:
mix
(
$-color-white
,
$color
,
90%
);
border-color
:
mix
(
$-color-white
,
$color
,
80%
);
}
}
}
}
.uni-btn
{
margin
:
5px
;
color
:
#393939
;
border
:
1px
solid
#ccc
;
font-size
:
16px
;
font-weight
:
200
;
background-color
:
#F9F9F9
;
// TODO 暂时处理边框隐藏一边的问题
overflow
:
visible
;
&
:
:
after
{
border
:
none
;
}
&
:not
([
type
]),
&
[
type
=
default
]
{
color
:
#999
;
&
[
loading
]
{
background
:
none
;
&
:
:
before
{
margin-right
:
5px
;
}
}
&
[
disabled
]
{
color
:
mix
(
$-color-white
,
#999
,
60%
);
&
,
&
[
loading
],
&
:active
{
color
:
mix
(
$-color-white
,
#999
,
60%
);
background-color
:
mix
(
$-color-white
,
$-color-black
,
98%
);
border-color
:
mix
(
$-color-white
,
#999
,
85%
);
}
}
&
[
plain
]
{
color
:
#999
;
background
:
none
;
border-color
:
$uni-border-1
;
&
:not
([
hover-class
])
:active
{
background
:
none
;
color
:
mix
(
$-color-white
,
$-color-black
,
80%
);
border-color
:
mix
(
$-color-white
,
$-color-black
,
90%
);
outline
:
none
;
}
&
[
disabled
]
{
&
,
&
[
loading
],
&
:active
{
background
:
none
;
color
:
mix
(
$-color-white
,
#999
,
60%
);
border-color
:
mix
(
$-color-white
,
#999
,
85%
);
}
}
}
}
&
:not
([
hover-class
])
:active
{
color
:
mix
(
$-color-white
,
$-color-black
,
50%
);
}
&
[
size
=
mini
]
{
font-size
:
16px
;
font-weight
:
200
;
border-radius
:
8px
;
}
&
.uni-btn-small
{
font-size
:
14px
;
}
&
.uni-btn-mini
{
font-size
:
12px
;
}
&
.uni-btn-radius
{
border-radius
:
999px
;
}
&
[
type
=
primary
]
{
@include
is-color
(
$uni-primary
);
@include
is-plain
(
$uni-primary
)
}
&
[
type
=
success
]
{
@include
is-color
(
$uni-success
);
@include
is-plain
(
$uni-success
)
}
&
[
type
=
error
]
{
@include
is-color
(
$uni-error
);
@include
is-plain
(
$uni-error
)
}
&
[
type
=
warning
]
{
@include
is-color
(
$uni-warning
);
@include
is-plain
(
$uni-warning
)
}
&
[
type
=
info
]
{
@include
is-color
(
$uni-info
);
@include
is-plain
(
$uni-info
)
}
}
/* #endif */
uni_modules/uni-scss/styles/setting/_text.scss
0 → 100644
View file @
16d3b58f
@mixin
get-styles
(
$k
,
$c
)
{
@if
$k
==
size
or
$k
==
weight
{
font-
#{
$k
}
:
#{
$c
}
}
@else
{
#{
$k
}
:
#{
$c
}
}
}
@each
$key
,
$child
in
$uni-headings
{
/* #ifndef APP-NVUE */
.uni-
#{
$key
}
{
@each
$k
,
$c
in
$child
{
@include
get-styles
(
$k
,
$c
)
}
}
/* #endif */
/* #ifdef APP-NVUE */
.container
.uni-
#{
$key
}
{
@each
$k
,
$c
in
$child
{
@include
get-styles
(
$k
,
$c
)
}
}
/* #endif */
}
uni_modules/uni-scss/styles/setting/_variables.scss
0 → 100644
View file @
16d3b58f
// @use "sass:math";
@import
'../tools/functions.scss'
;
// 间距基础倍数
$uni-space-root
:
2
!
default
;
// 边框半径默认值
$uni-radius-root
:
5px
!
default
;
$uni-radius
:
()
!
default
;
// 边框半径断点
$uni-radius
:
map-deep-merge
(
(
0
:
0
,
//
TODO
当前版本暂时不支持
sm
属性
//
'sm'
:
math
.
div
(
$uni-radius-root
,
2
)
,
null
:
$uni-radius-root
,
'lg'
:
$uni-radius-root
*
2
,
'xl'
:
$uni-radius-root
*
6
,
'pill'
:
9999px
,
'circle'
:
50%
)
,
$uni-radius
);
// 字体家族
$body-font-family
:
'Roboto'
,
sans-serif
!
default
;
// 文本
$heading-font-family
:
$body-font-family
!
default
;
$uni-headings
:
()
!
default
;
$letterSpacing
:
-0
.01562em
;
$uni-headings
:
map-deep-merge
(
(
'h1'
:
(
size
:
32px
,
weight
:
300
,
line-height
:
50px
,
//
letter-spacing
:-
0
.01562em
)
,
'h2'
:
(
size
:
28px
,
weight
:
300
,
line-height
:
40px
,
//
letter-spacing
:
-0
.00833em
)
,
'h3'
:
(
size
:
24px
,
weight
:
400
,
line-height
:
32px
,
//
letter-spacing
:
normal
)
,
'h4'
:
(
size
:
20px
,
weight
:
400
,
line-height
:
30px
,
//
letter-spacing
:
0
.00735em
)
,
'h5'
:
(
size
:
16px
,
weight
:
400
,
line-height
:
24px
,
//
letter-spacing
:
normal
)
,
'h6'
:
(
size
:
14px
,
weight
:
500
,
line-height
:
18px
,
//
letter-spacing
:
0
.0125em
)
,
'subtitle'
:
(
size
:
12px
,
weight
:
400
,
line-height
:
20px
,
//
letter-spacing
:
0
.00937em
)
,
'body'
:
(
font-size
:
14px
,
font-weight
:
400
,
line-height
:
22px
,
//
letter-spacing
:
0
.03125em
)
,
'caption'
:
(
'size'
:
12px
,
'weight'
:
400
,
'line-height'
:
20px
,
//
'letter-spacing'
:
0
.03333em
,
//
'text-transform'
:
false
)
)
,
$uni-headings
);
// 主色
$uni-primary
:
#2979ff
!
default
;
$uni-primary-disable
:
lighten
(
$uni-primary
,
20%
)
!
default
;
$uni-primary-light
:
lighten
(
$uni-primary
,
25%
)
!
default
;
// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success
:
#18bc37
!
default
;
$uni-success-disable
:
lighten
(
$uni-success
,
20%
)
!
default
;
$uni-success-light
:
lighten
(
$uni-success
,
25%
)
!
default
;
$uni-warning
:
#f3a73f
!
default
;
$uni-warning-disable
:
lighten
(
$uni-warning
,
20%
)
!
default
;
$uni-warning-light
:
lighten
(
$uni-warning
,
25%
)
!
default
;
$uni-error
:
#e43d33
!
default
;
$uni-error-disable
:
lighten
(
$uni-error
,
20%
)
!
default
;
$uni-error-light
:
lighten
(
$uni-error
,
25%
)
!
default
;
$uni-info
:
#8f939c
!
default
;
$uni-info-disable
:
lighten
(
$uni-info
,
20%
)
!
default
;
$uni-info-light
:
lighten
(
$uni-info
,
25%
)
!
default
;
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color
:
#3a3a3a
!
default
;
// 主要文字
$uni-base-color
:
#6a6a6a
!
default
;
// 常规文字
$uni-secondary-color
:
#909399
!
default
;
// 次要文字
$uni-extra-color
:
#c7c7c7
!
default
;
// 辅助说明
// 边框颜色
$uni-border-1
:
#F0F0F0
!
default
;
$uni-border-2
:
#EDEDED
!
default
;
$uni-border-3
:
#DCDCDC
!
default
;
$uni-border-4
:
#B9B9B9
!
default
;
// 常规色
$uni-black
:
#000000
!
default
;
$uni-white
:
#ffffff
!
default
;
$uni-transparent
:
rgba
(
$color
:
#000000
,
$alpha
:
0
)
!
default
;
// 背景色
$uni-bg-color
:
#f7f7f7
!
default
;
/* 水平间距 */
$uni-spacing-sm
:
8px
!
default
;
$uni-spacing-base
:
15px
!
default
;
$uni-spacing-lg
:
30px
!
default
;
// 阴影
$uni-shadow-sm
:
0
0
5px
rgba
(
$color
:
#d8d8d8
,
$alpha
:
0
.5
)
!
default
;
$uni-shadow-base
:
0
1px
8px
1px
rgba
(
$color
:
#a5a5a5
,
$alpha
:
0
.2
)
!
default
;
$uni-shadow-lg
:
0px
1px
10px
2px
rgba
(
$color
:
#a5a4a4
,
$alpha
:
0
.5
)
!
default
;
// 蒙版
$uni-mask
:
rgba
(
$color
:
#000000
,
$alpha
:
0
.4
)
!
default
;
uni_modules/uni-scss/styles/tools/functions.scss
0 → 100644
View file @
16d3b58f
// 合并 map
@function
map-deep-merge
(
$parent-map
,
$child-map
){
$result
:
$parent-map
;
@each
$key
,
$child
in
$child-map
{
$parent-has-key
:
map-has-key
(
$result
,
$key
);
$parent-value
:
map-get
(
$result
,
$key
);
$parent-type
:
type-of
(
$parent-value
);
$child-type
:
type-of
(
$child
);
$parent-is-map
:
$parent-type
==
map
;
$child-is-map
:
$child-type
==
map
;
@if
(
not
$parent-has-key
)
or
(
$parent-type
!=
$child-type
)
or
(
not
(
$parent-is-map
and
$child-is-map
)){
$result
:
map-merge
(
$result
,
(
$key
:
$child
));
}
@else
{
$result
:
map-merge
(
$result
,
(
$key
:
map-deep-merge
(
$parent-value
,
$child
)
));
}
}
@return
$result
;
};
uni_modules/uni-scss/theme.scss
0 → 100644
View file @
16d3b58f
// 间距基础倍数
$uni-space-root
:
2
;
// 边框半径默认值
$uni-radius-root
:
5px
;
// 主色
$uni-primary
:
#2979ff
;
// 辅助色
$uni-success
:
#4cd964
;
// 警告色
$uni-warning
:
#f0ad4e
;
// 错误色
$uni-error
:
#dd524d
;
// 描述色
$uni-info
:
#909399
;
// 中性色
$uni-main-color
:
#303133
;
$uni-base-color
:
#606266
;
$uni-secondary-color
:
#909399
;
$uni-extra-color
:
#C0C4CC
;
// 背景色
$uni-bg-color
:
#f5f5f5
;
// 边框颜色
$uni-border-1
:
#DCDFE6
;
$uni-border-2
:
#E4E7ED
;
$uni-border-3
:
#EBEEF5
;
$uni-border-4
:
#F2F6FC
;
// 常规色
$uni-black
:
#000000
;
$uni-white
:
#ffffff
;
$uni-transparent
:
rgba
(
$color
:
#000000
,
$alpha
:
0
);
uni_modules/uni-scss/variables.scss
0 → 100644
View file @
16d3b58f
@import
'./styles/setting/_variables.scss'
;
// 间距基础倍数
$uni-space-root
:
2
;
// 边框半径默认值
$uni-radius-root
:
5px
;
// 主色
$uni-primary
:
#2979ff
;
$uni-primary-disable
:
mix
(
#fff
,
$uni-primary
,
50%
);
$uni-primary-light
:
mix
(
#fff
,
$uni-primary
,
80%
);
// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success
:
#18bc37
;
$uni-success-disable
:
mix
(
#fff
,
$uni-success
,
50%
);
$uni-success-light
:
mix
(
#fff
,
$uni-success
,
80%
);
$uni-warning
:
#f3a73f
;
$uni-warning-disable
:
mix
(
#fff
,
$uni-warning
,
50%
);
$uni-warning-light
:
mix
(
#fff
,
$uni-warning
,
80%
);
$uni-error
:
#e43d33
;
$uni-error-disable
:
mix
(
#fff
,
$uni-error
,
50%
);
$uni-error-light
:
mix
(
#fff
,
$uni-error
,
80%
);
$uni-info
:
#8f939c
;
$uni-info-disable
:
mix
(
#fff
,
$uni-info
,
50%
);
$uni-info-light
:
mix
(
#fff
,
$uni-info
,
80%
);
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color
:
#3a3a3a
;
// 主要文字
$uni-base-color
:
#6a6a6a
;
// 常规文字
$uni-secondary-color
:
#909399
;
// 次要文字
$uni-extra-color
:
#c7c7c7
;
// 辅助说明
// 边框颜色
$uni-border-1
:
#F0F0F0
;
$uni-border-2
:
#EDEDED
;
$uni-border-3
:
#DCDCDC
;
$uni-border-4
:
#B9B9B9
;
// 常规色
$uni-black
:
#000000
;
$uni-white
:
#ffffff
;
$uni-transparent
:
rgba
(
$color
:
#000000
,
$alpha
:
0
);
// 背景色
$uni-bg-color
:
#f7f7f7
;
/* 水平间距 */
$uni-spacing-sm
:
8px
;
$uni-spacing-base
:
15px
;
$uni-spacing-lg
:
30px
;
// 阴影
$uni-shadow-sm
:
0
0
5px
rgba
(
$color
:
#d8d8d8
,
$alpha
:
0
.5
);
$uni-shadow-base
:
0
1px
8px
1px
rgba
(
$color
:
#a5a5a5
,
$alpha
:
0
.2
);
$uni-shadow-lg
:
0px
1px
10px
2px
rgba
(
$color
:
#a5a4a4
,
$alpha
:
0
.5
);
// 蒙版
$uni-mask
:
rgba
(
$color
:
#000000
,
$alpha
:
0
.4
);
uni_modules/uni-table/changelog.md
0 → 100644
View file @
16d3b58f
## 1.1.0(2021-07-30)
-
组件兼容 vue3,如何创建vue3项目,详见
[
uni-app 项目支持 vue3 介绍
](
https://ask.dcloud.net.cn/article/37834
)
## 1.0.7(2021-07-08)
-
新增 uni-th 支持 date 日期筛选范围
## 1.0.6(2021-07-05)
-
新增 uni-th 支持 range 筛选范围
## 1.0.5(2021-06-28)
-
新增 uni-th 筛选功能
## 1.0.4(2021-05-12)
-
新增 示例地址
-
修复 示例项目缺少组件的Bug
## 1.0.3(2021-04-16)
-
新增 sortable 属性,是否开启单列排序
-
优化 表格多选逻辑
## 1.0.2(2021-03-22)
-
uni-tr 添加 disabled 属性,用于 type=selection 时,设置某行是否可由全选按钮控制
## 1.0.1(2021-02-05)
-
调整为uni_modules目录规范
uni_modules/uni-table/components/uni-table/uni-table.vue
0 → 100644
View file @
16d3b58f
<
template
>
<view
class=
"uni-table-scroll"
:class=
"
{ 'table--border': border, 'border-none': !noData }">
<!-- #ifdef H5 -->
<table
class=
"uni-table"
border=
"0"
cellpadding=
"0"
cellspacing=
"0"
:class=
"
{ 'table--stripe': stripe }" :style="{ 'min-width': minWidth + 'px' }">
<slot></slot>
<view
v-if=
"noData"
class=
"uni-table-loading"
>
<view
class=
"uni-table-text"
:class=
"
{ 'empty-border': border }">
{{
emptyText
}}
</view>
</view>
<view
v-if=
"loading"
class=
"uni-table-mask"
:class=
"
{ 'empty-border': border }">
<div
class=
"uni-table--loader"
></div></view>
</table>
<!-- #endif -->
<!-- #ifndef H5 -->
<view
class=
"uni-table"
:style=
"
{ 'min-width': minWidth + 'px' }" :class="{ 'table--stripe': stripe }">
<slot></slot>
<view
v-if=
"noData"
class=
"uni-table-loading"
>
<view
class=
"uni-table-text"
:class=
"
{ 'empty-border': border }">
{{
emptyText
}}
</view>
</view>
<view
v-if=
"loading"
class=
"uni-table-mask"
:class=
"
{ 'empty-border': border }">
<div
class=
"uni-table--loader"
></div></view>
</view>
<!-- #endif -->
</view>
</
template
>
<
script
>
/**
* Table 表格
* @description 用于展示多条结构类似的数据
* @tutorial https://ext.dcloud.net.cn/plugin?id=3270
* @property {Boolean} border 是否带有纵向边框
* @property {Boolean} stripe 是否显示斑马线
* @property {Boolean} type 是否开启多选
* @property {String} emptyText 空数据时显示的文本内容
* @property {Boolean} loading 显示加载中
* @event {Function} selection-change 开启多选时,当选择项发生变化时会触发该事件
*/
export
default
{
name
:
'uniTable'
,
options
:
{
virtualHost
:
true
},
emits
:[
'selection-change'
],
props
:
{
data
:
{
type
:
Array
,
default
()
{
return
[]
}
},
// 是否有竖线
border
:
{
type
:
Boolean
,
default
:
false
},
// 是否显示斑马线
stripe
:
{
type
:
Boolean
,
default
:
false
},
// 多选
type
:
{
type
:
String
,
default
:
''
},
// 没有更多数据
emptyText
:
{
type
:
String
,
default
:
'没有更多数据'
},
loading
:
{
type
:
Boolean
,
default
:
false
},
rowKey
:
{
type
:
String
,
default
:
''
}
},
data
()
{
return
{
noData
:
true
,
minWidth
:
0
,
multiTableHeads
:
[]
}
},
watch
:
{
loading
(
val
)
{},
data
(
newVal
)
{
let
theadChildren
=
this
.
theadChildren
let
rowspan
=
1
if
(
this
.
theadChildren
)
{
rowspan
=
this
.
theadChildren
.
rowspan
}
// this.trChildren.length - rowspan
this
.
noData
=
false
// this.noData = newVal.length === 0
}
},
created
()
{
// 定义tr的实例数组
this
.
trChildren
=
[]
this
.
thChildren
=
[]
this
.
theadChildren
=
null
this
.
backData
=
[]
this
.
backIndexData
=
[]
},
methods
:
{
isNodata
()
{
let
theadChildren
=
this
.
theadChildren
let
rowspan
=
1
if
(
this
.
theadChildren
)
{
rowspan
=
this
.
theadChildren
.
rowspan
}
this
.
noData
=
this
.
trChildren
.
length
-
rowspan
<=
0
},
/**
* 选中所有
*/
selectionAll
()
{
let
startIndex
=
1
let
theadChildren
=
this
.
theadChildren
if
(
!
this
.
theadChildren
)
{
theadChildren
=
this
.
trChildren
[
0
]
}
else
{
startIndex
=
theadChildren
.
rowspan
-
1
}
let
isHaveData
=
this
.
data
&&
this
.
data
.
length
.
length
>
0
theadChildren
.
checked
=
true
theadChildren
.
indeterminate
=
false
this
.
trChildren
.
forEach
((
item
,
index
)
=>
{
if
(
!
item
.
disabled
)
{
item
.
checked
=
true
if
(
isHaveData
&&
item
.
keyValue
)
{
const
row
=
this
.
data
.
find
(
v
=>
v
[
this
.
rowKey
]
===
item
.
keyValue
)
if
(
!
this
.
backData
.
find
(
v
=>
v
[
this
.
rowKey
]
===
row
[
this
.
rowKey
]))
{
this
.
backData
.
push
(
row
)
}
}
if
(
index
>
(
startIndex
-
1
)
&&
this
.
backIndexData
.
indexOf
(
index
-
startIndex
)
===
-
1
)
{
this
.
backIndexData
.
push
(
index
-
startIndex
)
}
}
})
// this.backData = JSON.parse(JSON.stringify(this.data))
this
.
$emit
(
'selection-change'
,
{
detail
:
{
value
:
this
.
backData
,
index
:
this
.
backIndexData
}
})
},
/**
* 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
*/
toggleRowSelection
(
row
,
selected
)
{
// if (!this.theadChildren) return
row
=
[].
concat
(
row
)
this
.
trChildren
.
forEach
((
item
,
index
)
=>
{
// if (item.keyValue) {
const
select
=
row
.
findIndex
(
v
=>
{
//
if
(
typeof
v
===
'number'
)
{
return
v
===
index
-
1
}
else
{
return
v
[
this
.
rowKey
]
===
item
.
keyValue
}
})
let
ischeck
=
item
.
checked
if
(
select
!==
-
1
)
{
if
(
typeof
selected
===
'boolean'
)
{
item
.
checked
=
selected
}
else
{
item
.
checked
=
!
item
.
checked
}
if
(
ischeck
!==
item
.
checked
)
{
this
.
check
(
item
.
rowData
||
item
,
item
.
checked
,
item
.
rowData
?
item
.
keyValue
:
null
,
true
)
}
}
// }
})
this
.
$emit
(
'selection-change'
,
{
detail
:
{
value
:
this
.
backData
,
index
:
this
.
backIndexData
}
})
},
/**
* 用于多选表格,清空用户的选择
*/
clearSelection
()
{
let
theadChildren
=
this
.
theadChildren
if
(
!
this
.
theadChildren
)
{
theadChildren
=
this
.
trChildren
[
0
]
}
// if (!this.theadChildren) return
theadChildren
.
checked
=
false
theadChildren
.
indeterminate
=
false
this
.
trChildren
.
forEach
(
item
=>
{
// if (item.keyValue) {
item
.
checked
=
false
// }
})
this
.
backData
=
[]
this
.
backIndexData
=
[]
this
.
$emit
(
'selection-change'
,
{
detail
:
{
value
:
[],
index
:
[]
}
})
},
/**
* 用于多选表格,切换所有行的选中状态
*/
toggleAllSelection
()
{
let
list
=
[]
let
startIndex
=
1
let
theadChildren
=
this
.
theadChildren
if
(
!
this
.
theadChildren
)
{
theadChildren
=
this
.
trChildren
[
0
]
}
else
{
startIndex
=
theadChildren
.
rowspan
-
1
}
this
.
trChildren
.
forEach
((
item
,
index
)
=>
{
if
(
!
item
.
disabled
)
{
if
(
index
>
(
startIndex
-
1
)
)
{
list
.
push
(
index
-
startIndex
)
}
}
})
this
.
toggleRowSelection
(
list
)
},
/**
* 选中\取消选中
* @param {Object} child
* @param {Object} check
* @param {Object} rowValue
*/
check
(
child
,
check
,
keyValue
,
emit
)
{
let
theadChildren
=
this
.
theadChildren
if
(
!
this
.
theadChildren
)
{
theadChildren
=
this
.
trChildren
[
0
]
}
let
childDomIndex
=
this
.
trChildren
.
findIndex
((
item
,
index
)
=>
child
===
item
)
if
(
childDomIndex
<
0
){
childDomIndex
=
this
.
data
.
findIndex
(
v
=>
v
[
this
.
rowKey
]
===
keyValue
)
+
1
}
const
dataLen
=
this
.
trChildren
.
filter
(
v
=>
!
v
.
disabled
&&
v
.
keyValue
).
length
if
(
childDomIndex
===
0
)
{
check
?
this
.
selectionAll
()
:
this
.
clearSelection
()
return
}
if
(
check
)
{
if
(
keyValue
)
{
this
.
backData
.
push
(
child
)
}
this
.
backIndexData
.
push
(
childDomIndex
-
1
)
}
else
{
const
index
=
this
.
backData
.
findIndex
(
v
=>
v
[
this
.
rowKey
]
===
keyValue
)
const
idx
=
this
.
backIndexData
.
findIndex
(
item
=>
item
===
childDomIndex
-
1
)
if
(
keyValue
)
{
this
.
backData
.
splice
(
index
,
1
)
}
this
.
backIndexData
.
splice
(
idx
,
1
)
}
const
domCheckAll
=
this
.
trChildren
.
find
((
item
,
index
)
=>
index
>
0
&&
!
item
.
checked
&&
!
item
.
disabled
)
if
(
!
domCheckAll
)
{
theadChildren
.
indeterminate
=
false
theadChildren
.
checked
=
true
}
else
{
theadChildren
.
indeterminate
=
true
theadChildren
.
checked
=
false
}
if
(
this
.
backIndexData
.
length
===
0
)
{
theadChildren
.
indeterminate
=
false
}
if
(
!
emit
)
{
this
.
$emit
(
'selection-change'
,
{
detail
:
{
value
:
this
.
backData
,
index
:
this
.
backIndexData
}
})
}
}
}
}
</
script
>
<
style
lang=
"scss"
>
$border-color
:
#ebeef5
;
.uni-table-scroll
{
width
:
100%
;
/* #ifndef APP-NVUE */
overflow-x
:
auto
;
/* #endif */
}
.uni-table
{
position
:
relative
;
width
:
100%
;
border-radius
:
5px
;
// box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
background-color
:
#fff
;
/* #ifndef APP-NVUE */
box-sizing
:
border-box
;
display
:
table
;
overflow-x
:
auto
;
::v-deep
.uni-table-tr
:nth-child
(
n
+
2
)
{
&
:hover
{
background-color
:
#f5f7fa
;
}
}
::v-deep
.uni-table-thead
{
.uni-table-tr
{
// background-color: #f5f7fa;
&
:hover
{
background-color
:
#fafafa
;
}
}
}
/* #endif */
}
.table--border
{
border
:
1px
$border-color
solid
;
border-right
:
none
;
}
.border-none
{
/* #ifndef APP-NVUE */
border-bottom
:
none
;
/* #endif */
}
.table--stripe
{
/* #ifndef APP-NVUE */
::v-deep
.uni-table-tr
:nth-child
(
2n
+
3
)
{
background-color
:
#fafafa
;
}
/* #endif */
}
/* 表格加载、无数据样式 */
.uni-table-loading
{
position
:
relative
;
/* #ifndef APP-NVUE */
display
:
table-row
;
/* #endif */
height
:
50px
;
line-height
:
50px
;
overflow
:
hidden
;
box-sizing
:
border-box
;
}
.empty-border
{
border-right
:
1px
$border-color
solid
;
}
.uni-table-text
{
position
:
absolute
;
right
:
0
;
left
:
0
;
text-align
:
center
;
font-size
:
14px
;
color
:
#999
;
}
.uni-table-mask
{
position
:
absolute
;
top
:
0
;
bottom
:
0
;
left
:
0
;
right
:
0
;
background-color
:
rgba
(
255
,
255
,
255
,
0
.8
);
z-index
:
99
;
/* #ifndef APP-NVUE */
display
:
flex
;
margin
:
auto
;
transition
:
all
0
.5s
;
/* #endif */
justify-content
:
center
;
align-items
:
center
;
}
.uni-table--loader
{
width
:
30px
;
height
:
30px
;
border
:
2px
solid
#aaa
;
// border-bottom-color: transparent;
border-radius
:
50%
;
/* #ifndef APP-NVUE */
animation
:
2s
uni-table--loader
linear
infinite
;
/* #endif */
position
:
relative
;
}
@keyframes
uni-table--loader
{
0
%
{
transform
:
rotate
(
360deg
);
}
10
%
{
border-left-color
:
transparent
;
}
20
%
{
border-bottom-color
:
transparent
;
}
30
%
{
border-right-color
:
transparent
;
}
40
%
{
border-top-color
:
transparent
;
}
50
%
{
transform
:
rotate
(
0deg
);
}
60
%
{
border-top-color
:
transparent
;
}
70
%
{
border-left-color
:
transparent
;
}
80
%
{
border-bottom-color
:
transparent
;
}
90
%
{
border-right-color
:
transparent
;
}
100
%
{
transform
:
rotate
(
-360deg
);
}
}
</
style
>
uni_modules/uni-table/components/uni-tbody/uni-tbody.vue
0 → 100644
View file @
16d3b58f
<
template
>
<!-- #ifdef H5 -->
<tbody>
<slot></slot>
</tbody>
<!-- #endif -->
<!-- #ifndef H5 -->
<view><slot></slot></view>
<!-- #endif -->
</
template
>
<
script
>
export
default
{
name
:
'uniBody'
,
options
:
{
virtualHost
:
true
},
data
()
{
return
{
}
},
created
()
{},
methods
:
{}
}
</
script
>
<
style
>
</
style
>
uni_modules/uni-table/components/uni-td/uni-td.vue
0 → 100644
View file @
16d3b58f
<
template
>
<!-- #ifdef H5 -->
<td
class=
"uni-table-td"
:rowspan=
"rowspan"
:colspan=
"colspan"
:class=
"
{'table--border':border}" :style="{width:width + 'px','text-align':align}">
<slot></slot>
</td>
<!-- #endif -->
<!-- #ifndef H5 -->
<!-- :class="
{'table--border':border}" -->
<view
class=
"uni-table-td"
:class=
"
{'table--border':border}" :style="{width:width + 'px','text-align':align}">
<slot></slot>
</view>
<!-- #endif -->
</
template
>
<
script
>
/**
* Td 单元格
* @description 表格中的标准单元格组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=3270
* @property {Number} align = [left|center|right] 单元格对齐方式
*/
export
default
{
name
:
'uniTd'
,
options
:
{
virtualHost
:
true
},
props
:
{
width
:
{
type
:
[
String
,
Number
],
default
:
''
},
align
:
{
type
:
String
,
default
:
'left'
},
rowspan
:
{
type
:
[
Number
,
String
],
default
:
1
},
colspan
:
{
type
:
[
Number
,
String
],
default
:
1
}
},
data
()
{
return
{
border
:
false
};
},
created
()
{
this
.
root
=
this
.
getTable
()
this
.
border
=
this
.
root
.
border
},
methods
:
{
/**
* 获取父元素实例
*/
getTable
()
{
let
parent
=
this
.
$parent
;
let
parentName
=
parent
.
$options
.
name
;
while
(
parentName
!==
'uniTable'
)
{
parent
=
parent
.
$parent
;
if
(
!
parent
)
return
false
;
parentName
=
parent
.
$options
.
name
;
}
return
parent
;
},
}
}
</
script
>
<
style
lang=
"scss"
>
$border-color
:
#EBEEF5
;
.uni-table-td
{
display
:
table-cell
;
padding
:
8px
10px
;
font-size
:
14px
;
border-bottom
:
1px
$border-color
solid
;
font-weight
:
400
;
color
:
#606266
;
line-height
:
23px
;
box-sizing
:
border-box
;
}
.table--border
{
border-right
:
1px
$border-color
solid
;
}
</
style
>
uni_modules/uni-table/components/uni-th/filter-dropdown.vue
0 → 100644
View file @
16d3b58f
<
template
>
<view
class=
"uni-filter-dropdown"
>
<view
class=
"dropdown-btn"
@
click=
"onDropdown"
>
<view
class=
"icon-select"
:class=
"
{active: canReset}" v-if="isSelect || isRange">
</view>
<view
class=
"icon-search"
:class=
"
{active: canReset}" v-if="isSearch">
<view
class=
"icon-search-0"
></view>
<view
class=
"icon-search-1"
></view>
</view>
<view
class=
"icon-calendar"
:class=
"
{active: canReset}" v-if="isDate">
<view
class=
"icon-calendar-0"
></view>
<view
class=
"icon-calendar-1"
></view>
</view>
</view>
<view
class=
"uni-dropdown-cover"
v-if=
"isOpened"
@
click=
"handleClose"
></view>
<view
class=
"dropdown-popup dropdown-popup-right"
v-if=
"isOpened"
@
click
.
stop
>
<!-- select-->
<view
v-if=
"isSelect"
class=
"list"
>
<label
class=
"flex-r a-i-c list-item"
v-for=
"(item,index) in dataList"
:key=
"index"
@
click=
"onItemClick($event, index)"
>
<check-box
class=
"check"
:checked=
"item.checked"
/>
<view
class=
"checklist-content"
>
<text
class=
"checklist-text"
:style=
"item.styleIconText"
>
{{
item
[
map
.
text
]
}}
</text>
</view>
</label>
</view>
<view
v-if=
"isSelect"
class=
"flex-r opera-area"
>
<view
class=
"flex-f btn btn-default"
:class=
"
{disable: !canReset}" @click="handleSelectReset">
{{
resource
.
reset
}}
</view>
<view
class=
"flex-f btn btn-submit"
@
click=
"handleSelectSubmit"
>
{{
resource
.
submit
}}
</view>
</view>
<!-- search -->
<view
v-if=
"isSearch"
class=
"search-area"
>
<input
class=
"search-input"
v-model=
"filterValue"
/>
</view>
<view
v-if=
"isSearch"
class=
"flex-r opera-area"
>
<view
class=
"flex-f btn btn-submit"
@
click=
"handleSearchSubmit"
>
{{
resource
.
search
}}
</view>
<view
class=
"flex-f btn btn-default"
:class=
"
{disable: !canReset}" @click="handleSearchReset">
{{
resource
.
reset
}}
</view>
</view>
<!-- range -->
<view
v-if=
"isRange"
>
<view
class=
"input-label"
>
{{
resource
.
gt
}}
</view>
<input
class=
"input"
v-model=
"gtValue"
/>
<view
class=
"input-label"
>
{{
resource
.
lt
}}
</view>
<input
class=
"input"
v-model=
"ltValue"
/>
</view>
<view
v-if=
"isRange"
class=
"flex-r opera-area"
>
<view
class=
"flex-f btn btn-default"
:class=
"
{disable: !canReset}" @click="handleRangeReset">
{{
resource
.
reset
}}
</view>
<view
class=
"flex-f btn btn-submit"
@
click=
"handleRangeSubmit"
>
{{
resource
.
submit
}}
</view>
</view>
<!-- date -->
<view
v-if=
"isDate"
>
<uni-datetime-picker
ref=
"datetimepicker"
:value=
"dateRange"
type=
"datetimerange"
return-type=
"timestamp"
@
change=
"datetimechange"
@
maskClick=
"timepickerclose"
>
<view></view>
</uni-datetime-picker>
</view>
</view>
</view>
</
template
>
<
script
>
import
checkBox
from
'../uni-tr/table-checkbox.vue'
const
resource
=
{
"reset"
:
"重置"
,
"search"
:
"搜索"
,
"submit"
:
"确定"
,
"filter"
:
"筛选"
,
"gt"
:
"大于等于"
,
"lt"
:
"小于等于"
,
"date"
:
"日期范围"
}
const
DropdownType
=
{
Select
:
"select"
,
Search
:
"search"
,
Range
:
"range"
,
Date
:
"date"
,
Timestamp
:
"timestamp"
}
export
default
{
name
:
'FilterDropdown'
,
emits
:[
'change'
],
components
:
{
checkBox
},
options
:
{
virtualHost
:
true
},
props
:
{
filterType
:
{
type
:
String
,
default
:
DropdownType
.
Select
},
filterData
:
{
type
:
Array
,
default
()
{
return
[]
}
},
mode
:
{
type
:
String
,
default
:
'default'
},
map
:
{
type
:
Object
,
default
()
{
return
{
text
:
'text'
,
value
:
'value'
}
}
}
},
computed
:
{
canReset
()
{
if
(
this
.
isSearch
)
{
return
this
.
filterValue
.
length
>
0
}
if
(
this
.
isSelect
)
{
return
this
.
checkedValues
.
length
>
0
}
if
(
this
.
isRange
)
{
return
(
this
.
gtValue
.
length
>
0
&&
this
.
ltValue
.
length
>
0
)
}
if
(
this
.
isDate
)
{
return
this
.
dateSelect
.
length
>
0
}
return
false
},
isSelect
()
{
return
this
.
filterType
===
DropdownType
.
Select
},
isSearch
()
{
return
this
.
filterType
===
DropdownType
.
Search
},
isRange
()
{
return
this
.
filterType
===
DropdownType
.
Range
},
isDate
()
{
return
(
this
.
filterType
===
DropdownType
.
Date
||
this
.
filterType
===
DropdownType
.
Timestamp
)
}
},
watch
:
{
filters
(
newVal
)
{
this
.
_copyFilters
()
},
indeterminate
(
newVal
)
{
this
.
isIndeterminate
=
newVal
}
},
data
()
{
return
{
resource
,
enabled
:
true
,
isOpened
:
false
,
dataList
:
[],
filterValue
:
''
,
checkedValues
:
[],
gtValue
:
''
,
ltValue
:
''
,
dateRange
:
[],
dateSelect
:
[]
};
},
created
()
{
this
.
_copyFilters
()
},
methods
:
{
_copyFilters
()
{
let
dl
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
filterData
))
for
(
let
i
=
0
;
i
<
dl
.
length
;
i
++
)
{
if
(
dl
[
i
].
checked
===
undefined
)
{
dl
[
i
].
checked
=
false
}
}
this
.
dataList
=
dl
},
openPopup
()
{
this
.
isOpened
=
true
if
(
this
.
isDate
)
{
this
.
$nextTick
(()
=>
{
if
(
!
this
.
dateRange
.
length
)
{
this
.
resetDate
()
}
this
.
$refs
.
datetimepicker
.
show
()
})
}
},
closePopup
()
{
this
.
isOpened
=
false
},
handleClose
(
e
)
{
this
.
closePopup
()
},
resetDate
()
{
let
date
=
new
Date
()
let
dateText
=
date
.
toISOString
().
split
(
'T'
)[
0
]
this
.
dateRange
=
[
dateText
+
' 0:00:00'
,
dateText
+
' 23:59:59'
]
},
onDropdown
(
e
)
{
this
.
openPopup
()
},
onItemClick
(
e
,
index
)
{
let
items
=
this
.
dataList
let
listItem
=
items
[
index
]
if
(
listItem
.
checked
===
undefined
)
{
items
[
index
].
checked
=
true
}
else
{
items
[
index
].
checked
=
!
listItem
.
checked
}
let
checkvalues
=
[]
for
(
let
i
=
0
;
i
<
items
.
length
;
i
++
)
{
const
item
=
items
[
i
]
if
(
item
.
checked
)
{
checkvalues
.
push
(
item
.
value
)
}
}
this
.
checkedValues
=
checkvalues
},
datetimechange
(
e
)
{
this
.
closePopup
()
this
.
dateRange
=
e
this
.
dateSelect
=
e
this
.
$emit
(
'change'
,
{
filterType
:
this
.
filterType
,
filter
:
e
})
},
timepickerclose
(
e
)
{
this
.
closePopup
()
},
handleSelectSubmit
()
{
this
.
closePopup
()
this
.
$emit
(
'change'
,
{
filterType
:
this
.
filterType
,
filter
:
this
.
checkedValues
})
},
handleSelectReset
()
{
if
(
!
this
.
canReset
)
{
return
;
}
var
items
=
this
.
dataList
for
(
let
i
=
0
;
i
<
items
.
length
;
i
++
)
{
let
item
=
items
[
i
]
this
.
$set
(
item
,
'checked'
,
false
)
}
this
.
checkedValues
=
[]
this
.
handleSelectSubmit
()
},
handleSearchSubmit
()
{
this
.
closePopup
()
this
.
$emit
(
'change'
,
{
filterType
:
this
.
filterType
,
filter
:
this
.
filterValue
})
},
handleSearchReset
()
{
if
(
!
this
.
canReset
)
{
return
;
}
this
.
filterValue
=
''
this
.
handleSearchSubmit
()
},
handleRangeSubmit
(
isReset
)
{
this
.
closePopup
()
this
.
$emit
(
'change'
,
{
filterType
:
this
.
filterType
,
filter
:
isReset
===
true
?
[]
:
[
parseInt
(
this
.
gtValue
),
parseInt
(
this
.
ltValue
)]
})
},
handleRangeReset
()
{
if
(
!
this
.
canReset
)
{
return
;
}
this
.
gtValue
=
''
this
.
ltValue
=
''
this
.
handleRangeSubmit
(
true
)
}
}
}
</
script
>
<
style
lang=
"scss"
>
.flex-r
{
display
:
flex
;
flex-direction
:
row
;
}
.flex-f
{
flex
:
1
;
}
.a-i-c
{
align-items
:
center
;
}
.j-c-c
{
justify-content
:
center
;
}
.icon-select
{
width
:
14px
;
height
:
16px
;
border
:
solid
6px
transparent
;
border-top
:
solid
6px
#ddd
;
border-bottom
:
none
;
background-color
:
#ddd
;
background-clip
:
content-box
;
box-sizing
:
border-box
;
}
.icon-select.active
{
background-color
:
#1890ff
;
border-top-color
:
#1890ff
;
}
.icon-search
{
width
:
12px
;
height
:
16px
;
position
:
relative
;
}
.icon-search-0
{
border
:
2px
solid
#ddd
;
border-radius
:
8px
;
width
:
7px
;
height
:
7px
;
}
.icon-search-1
{
position
:
absolute
;
top
:
8px
;
right
:
0
;
width
:
1px
;
height
:
7px
;
background-color
:
#ddd
;
transform
:
rotate
(
-45deg
);
}
.icon-search.active
.icon-search-0
{
border-color
:
#1890ff
;
}
.icon-search.active
.icon-search-1
{
background-color
:
#1890ff
;
}
.icon-calendar
{
color
:
#ddd
;
width
:
14px
;
height
:
16px
;
}
.icon-calendar-0
{
height
:
4px
;
margin-top
:
3px
;
margin-bottom
:
1px
;
background-color
:
#ddd
;
border-radius
:
2px
2px
1px
1px
;
position
:
relative
;
}
.icon-calendar-0
:before
,
.icon-calendar-0
:after
{
content
:
''
;
position
:
absolute
;
top
:
-3px
;
width
:
4px
;
height
:
3px
;
border-radius
:
1px
;
background-color
:
#ddd
;
}
.icon-calendar-0
:before
{
left
:
2px
;
}
.icon-calendar-0
:after
{
right
:
2px
;
}
.icon-calendar-1
{
height
:
9px
;
background-color
:
#ddd
;
border-radius
:
1px
1px
2px
2px
;
}
.icon-calendar.active
{
color
:
#1890ff
;
}
.icon-calendar.active
.icon-calendar-0
,
.icon-calendar.active
.icon-calendar-1
,
.icon-calendar.active
.icon-calendar-0
:before
,
.icon-calendar.active
.icon-calendar-0
:after
{
background-color
:
#1890ff
;
}
.uni-filter-dropdown
{
position
:
relative
;
font-weight
:
normal
;
}
.dropdown-popup
{
position
:
absolute
;
top
:
100%
;
background-color
:
#fff
;
box-shadow
:
0
3px
6px
-4px
#000000
1f
,
0
6px
16px
#000000
14
,
0
9px
28px
8px
#000000
0d
;
min-width
:
150px
;
z-index
:
1000
;
}
.dropdown-popup-left
{
left
:
0
;
}
.dropdown-popup-right
{
right
:
0
;
}
.uni-dropdown-cover
{
position
:
fixed
;
left
:
0
;
top
:
0
;
right
:
0
;
bottom
:
0
;
background-color
:
transparent
;
z-index
:
100
;
}
.list
{
margin-top
:
5px
;
margin-bottom
:
5px
;
}
.list-item
{
padding
:
5px
10px
;
text-align
:
left
;
}
.list-item
:hover
{
background-color
:
#f0f0f0
;
}
.check
{
margin-right
:
5px
;
}
.search-area
{
padding
:
10px
;
}
.search-input
{
font-size
:
12px
;
border
:
1px
solid
#f0f0f0
;
border-radius
:
3px
;
padding
:
2px
5px
;
min-width
:
150px
;
text-align
:
left
;
}
.input-label
{
margin
:
10px
10px
5px
10px
;
text-align
:
left
;
}
.input
{
font-size
:
12px
;
border
:
1px
solid
#f0f0f0
;
border-radius
:
3px
;
margin
:
10px
;
padding
:
2px
5px
;
min-width
:
150px
;
text-align
:
left
;
}
.opera-area
{
cursor
:
default
;
border-top
:
1px
solid
#ddd
;
padding
:
5px
;
}
.opera-area
.btn
{
font-size
:
12px
;
border-radius
:
3px
;
margin
:
5px
;
padding
:
4px
4px
;
}
.btn-default
{
border
:
1px
solid
#ddd
;
}
.btn-default.disable
{
border-color
:
transparent
;
}
.btn-submit
{
background-color
:
#1890ff
;
color
:
#ffffff
;
}
</
style
>
uni_modules/uni-table/components/uni-th/uni-th.vue
0 → 100644
View file @
16d3b58f
<
template
>
<!-- #ifdef H5 -->
<th
:rowspan=
"rowspan"
:colspan=
"colspan"
class=
"uni-table-th"
:class=
"
{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }">
<view
class=
"uni-table-th-row"
>
<view
class=
"uni-table-th-content"
:style=
"
{ 'justify-content': contentAlign }" @click="sort">
<slot></slot>
<view
v-if=
"sortable"
class=
"arrow-box"
>
<text
class=
"arrow up"
:class=
"
{ active: ascending }" @click.stop="ascendingFn">
</text>
<text
class=
"arrow down"
:class=
"
{ active: descending }" @click.stop="descendingFn">
</text>
</view>
</view>
<dropdown
v-if=
"filterType || filterData.length"
:filterData=
"filterData"
:filterType=
"filterType"
@
change=
"ondropdown"
></dropdown>
</view>
</th>
<!-- #endif -->
<!-- #ifndef H5 -->
<view
class=
"uni-table-th"
:class=
"
{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }">
<slot></slot></view>
<!-- #endif -->
</
template
>
<
script
>
import
dropdown
from
'./filter-dropdown.vue'
/**
* Th 表头
* @description 表格内的表头单元格组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=3270
* @property {Number} width 单元格宽度
* @property {Boolean} sortable 是否启用排序
* @property {Number} align = [left|center|right] 单元格对齐方式
* @value left 单元格文字左侧对齐
* @value center 单元格文字居中
* @value right 单元格文字右侧对齐
* @property {Array} filterData 筛选数据
* @property {String} filterType [search|select] 筛选类型
* @value search 关键字搜素
* @value select 条件选择
* @event {Function} sort-change 排序触发事件
*/
export
default
{
name
:
'uniTh'
,
options
:
{
virtualHost
:
true
},
components
:
{
dropdown
},
emits
:[
'sort-change'
,
'filter-change'
],
props
:
{
width
:
{
type
:
[
String
,
Number
],
default
:
''
},
align
:
{
type
:
String
,
default
:
'left'
},
rowspan
:
{
type
:
[
Number
,
String
],
default
:
1
},
colspan
:
{
type
:
[
Number
,
String
],
default
:
1
},
sortable
:
{
type
:
Boolean
,
default
:
false
},
filterType
:
{
type
:
String
,
default
:
""
},
filterData
:
{
type
:
Array
,
default
()
{
return
[]
}
}
},
data
()
{
return
{
border
:
false
,
ascending
:
false
,
descending
:
false
}
},
computed
:
{
contentAlign
()
{
let
align
=
'left'
switch
(
this
.
align
)
{
case
'left'
:
align
=
'flex-start'
break
case
'center'
:
align
=
'center'
break
case
'right'
:
align
=
'flex-end'
break
}
return
align
}
},
created
()
{
this
.
root
=
this
.
getTable
(
'uniTable'
)
this
.
rootTr
=
this
.
getTable
(
'uniTr'
)
this
.
rootTr
.
minWidthUpdate
(
this
.
width
?
this
.
width
:
140
)
this
.
border
=
this
.
root
.
border
this
.
root
.
thChildren
.
push
(
this
)
},
methods
:
{
sort
()
{
if
(
!
this
.
sortable
)
return
this
.
clearOther
()
if
(
!
this
.
ascending
&&
!
this
.
descending
)
{
this
.
ascending
=
true
this
.
$emit
(
'sort-change'
,
{
order
:
'ascending'
})
return
}
if
(
this
.
ascending
&&
!
this
.
descending
)
{
this
.
ascending
=
false
this
.
descending
=
true
this
.
$emit
(
'sort-change'
,
{
order
:
'descending'
})
return
}
if
(
!
this
.
ascending
&&
this
.
descending
)
{
this
.
ascending
=
false
this
.
descending
=
false
this
.
$emit
(
'sort-change'
,
{
order
:
null
})
}
},
ascendingFn
()
{
this
.
clearOther
()
this
.
ascending
=
!
this
.
ascending
this
.
descending
=
false
this
.
$emit
(
'sort-change'
,
{
order
:
this
.
ascending
?
'ascending'
:
null
})
},
descendingFn
()
{
this
.
clearOther
()
this
.
descending
=
!
this
.
descending
this
.
ascending
=
false
this
.
$emit
(
'sort-change'
,
{
order
:
this
.
descending
?
'descending'
:
null
})
},
clearOther
()
{
this
.
root
.
thChildren
.
map
(
item
=>
{
if
(
item
!==
this
)
{
item
.
ascending
=
false
item
.
descending
=
false
}
return
item
})
},
ondropdown
(
e
)
{
this
.
$emit
(
"filter-change"
,
e
)
},
/**
* 获取父元素实例
*/
getTable
(
name
)
{
let
parent
=
this
.
$parent
let
parentName
=
parent
.
$options
.
name
while
(
parentName
!==
name
)
{
parent
=
parent
.
$parent
if
(
!
parent
)
return
false
parentName
=
parent
.
$options
.
name
}
return
parent
}
}
}
</
script
>
<
style
lang=
"scss"
>
$border-color
:
#ebeef5
;
.uni-table-th
{
padding
:
12px
10px
;
/* #ifndef APP-NVUE */
display
:
table-cell
;
box-sizing
:
border-box
;
/* #endif */
font-size
:
14px
;
font-weight
:
bold
;
color
:
#909399
;
border-bottom
:
1px
$border-color
solid
;
}
.uni-table-th-row
{
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
row
;
}
.table--border
{
border-right
:
1px
$border-color
solid
;
}
.uni-table-th-content
{
display
:
flex
;
align-items
:
center
;
flex
:
1
;
}
.arrow-box
{
}
.arrow
{
display
:
block
;
position
:
relative
;
width
:
10px
;
height
:
8px
;
// border: 1px red solid;
left
:
5px
;
overflow
:
hidden
;
cursor
:
pointer
;
}
.down
{
top
:
3px
;
::after
{
content
:
''
;
width
:
8px
;
height
:
8px
;
position
:
absolute
;
left
:
2px
;
top
:
-5px
;
transform
:
rotate
(
45deg
);
background-color
:
#ccc
;
}
&
.active
{
::after
{
background-color
:
#007aff
;
}
}
}
.up
{
::after
{
content
:
''
;
width
:
8px
;
height
:
8px
;
position
:
absolute
;
left
:
2px
;
top
:
5px
;
transform
:
rotate
(
45deg
);
background-color
:
#ccc
;
}
&
.active
{
::after
{
background-color
:
#007aff
;
}
}
}
</
style
>
uni_modules/uni-table/components/uni-thead/uni-thead.vue
0 → 100644
View file @
16d3b58f
<
template
>
<!-- #ifdef H5 -->
<thead
class=
"uni-table-thead"
>
<tr
class=
"uni-table-tr"
>
<th
:rowspan=
"rowspan"
colspan=
"1"
class=
"checkbox"
:class=
"
{ 'tr-table--border': border }">
<table-checkbox
:indeterminate=
"indeterminate"
:checked=
"checked"
@
checkboxSelected=
"checkboxSelected"
></table-checkbox>
</th>
</tr>
<slot></slot>
</thead>
<!-- #endif -->
<!-- #ifndef H5 -->
<view
class=
"uni-table-thead"
><slot></slot></view>
<!-- #endif -->
</
template
>
<
script
>
import
tableCheckbox
from
'../uni-tr/table-checkbox.vue'
export
default
{
name
:
'uniThead'
,
components
:
{
tableCheckbox
},
options
:
{
virtualHost
:
true
},
data
()
{
return
{
border
:
false
,
selection
:
false
,
rowspan
:
1
,
indeterminate
:
false
,
checked
:
false
}
},
created
()
{
this
.
root
=
this
.
getTable
()
// #ifdef H5
this
.
root
.
theadChildren
=
this
// #endif
this
.
border
=
this
.
root
.
border
this
.
selection
=
this
.
root
.
type
},
methods
:
{
init
(
self
)
{
this
.
rowspan
++
},
checkboxSelected
(
e
)
{
this
.
indeterminate
=
false
const
backIndexData
=
this
.
root
.
backIndexData
const
data
=
this
.
root
.
trChildren
.
filter
(
v
=>
!
v
.
disabled
&&
v
.
keyValue
)
if
(
backIndexData
.
length
===
data
.
length
)
{
this
.
checked
=
false
this
.
root
.
clearSelection
()
}
else
{
this
.
checked
=
true
this
.
root
.
selectionAll
()
}
},
/**
* 获取父元素实例
*/
getTable
(
name
=
'uniTable'
)
{
let
parent
=
this
.
$parent
let
parentName
=
parent
.
$options
.
name
while
(
parentName
!==
name
)
{
parent
=
parent
.
$parent
if
(
!
parent
)
return
false
parentName
=
parent
.
$options
.
name
}
return
parent
}
}
}
</
script
>
<
style
lang=
"scss"
>
$border-color
:
#ebeef5
;
.uni-table-thead
{
display
:
table-header-group
;
}
.uni-table-tr
{
/* #ifndef APP-NVUE */
display
:
table-row
;
transition
:
all
0
.3s
;
box-sizing
:
border-box
;
/* #endif */
border
:
1px
red
solid
;
background-color
:
#fafafa
;
}
.checkbox
{
padding
:
0
8px
;
width
:
26px
;
padding-left
:
12px
;
/* #ifndef APP-NVUE */
display
:
table-cell
;
vertical-align
:
middle
;
/* #endif */
color
:
#333
;
font-weight
:
500
;
border-bottom
:
1px
$border-color
solid
;
font-size
:
14px
;
// text-align: center;
}
.tr-table--border
{
border-right
:
1px
$border-color
solid
;
}
/* #ifndef APP-NVUE */
.uni-table-tr
{
::v-deep
.uni-table-th
{
&
.table--border
:last-child
{
// border-right: none;
}
}
::v-deep
.uni-table-td
{
&
.table--border
:last-child
{
// border-right: none;
}
}
}
/* #endif */
</
style
>
uni_modules/uni-table/components/uni-tr/table-checkbox.vue
0 → 100644
View file @
16d3b58f
<
template
>
<view
class=
"uni-table-checkbox"
@
click=
"selected"
>
<view
v-if=
"!indeterminate"
class=
"checkbox__inner"
:class=
"
{'is-checked':isChecked,'is-disable':isDisabled}">
<view
class=
"checkbox__inner-icon"
></view>
</view>
<view
v-else
class=
"checkbox__inner checkbox--indeterminate"
>
<view
class=
"checkbox__inner-icon"
></view>
</view>
</view>
</
template
>
<
script
>
export
default
{
name
:
'TableCheckbox'
,
emits
:[
'checkboxSelected'
],
props
:
{
indeterminate
:
{
type
:
Boolean
,
default
:
false
},
checked
:
{
type
:
[
Boolean
,
String
],
default
:
false
},
disabled
:
{
type
:
Boolean
,
default
:
false
},
index
:
{
type
:
Number
,
default
:
-
1
},
cellData
:
{
type
:
Object
,
default
()
{
return
{}
}
}
},
watch
:{
checked
(
newVal
){
if
(
typeof
this
.
checked
===
'boolean'
){
this
.
isChecked
=
newVal
}
else
{
this
.
isChecked
=
true
}
},
indeterminate
(
newVal
){
this
.
isIndeterminate
=
newVal
}
},
data
()
{
return
{
isChecked
:
false
,
isDisabled
:
false
,
isIndeterminate
:
false
}
},
created
()
{
if
(
typeof
this
.
checked
===
'boolean'
){
this
.
isChecked
=
this
.
checked
}
this
.
isDisabled
=
this
.
disabled
},
methods
:
{
selected
()
{
if
(
this
.
isDisabled
)
return
this
.
isIndeterminate
=
false
this
.
isChecked
=
!
this
.
isChecked
this
.
$emit
(
'checkboxSelected'
,
{
checked
:
this
.
isChecked
,
data
:
this
.
cellData
})
}
}
}
</
script
>
<
style
lang=
"scss"
>
$checked-color
:
#007aff
;
$border-color
:
#DCDFE6
;
$disable
:
0
.4
;
.uni-table-checkbox
{
display
:
flex
;
flex-direction
:
row
;
align-items
:
center
;
justify-content
:
center
;
position
:
relative
;
margin
:
5px
0
;
cursor
:
pointer
;
// 多选样式
.checkbox__inner
{
/* #ifndef APP-NVUE */
flex-shrink
:
0
;
box-sizing
:
border-box
;
/* #endif */
position
:
relative
;
width
:
16px
;
height
:
16px
;
border
:
1px
solid
$border-color
;
border-radius
:
2px
;
background-color
:
#fff
;
z-index
:
1
;
.checkbox__inner-icon
{
position
:
absolute
;
/* #ifdef APP-NVUE */
top
:
2px
;
/* #endif */
/* #ifndef APP-NVUE */
top
:
2px
;
/* #endif */
left
:
5px
;
height
:
7px
;
width
:
3px
;
border
:
1px
solid
#fff
;
border-left
:
0
;
border-top
:
0
;
opacity
:
0
;
transform-origin
:
center
;
transform
:
rotate
(
45deg
);
box-sizing
:
content-box
;
}
&
.checkbox--indeterminate
{
border-color
:
$checked-color
;
background-color
:
$checked-color
;
.checkbox__inner-icon
{
position
:
absolute
;
opacity
:
1
;
transform
:
rotate
(
0deg
);
height
:
2px
;
top
:
0
;
bottom
:
0
;
margin
:
auto
;
left
:
0px
;
right
:
0px
;
bottom
:
0
;
width
:
auto
;
border
:
none
;
border-radius
:
2px
;
transform
:
scale
(
0
.5
);
background-color
:
#fff
;
}
}
&
:hover
{
border-color
:
$checked-color
;
}
// 禁用
&
.is-disable
{
/* #ifdef H5 */
cursor
:
not
-
allowed
;
/* #endif */
background-color
:
#F2F6FC
;
border-color
:
$border-color
;
}
// 选中
&
.is-checked
{
border-color
:
$checked-color
;
background-color
:
$checked-color
;
.checkbox__inner-icon
{
opacity
:
1
;
transform
:
rotate
(
45deg
);
}
// 选中禁用
&
.is-disable
{
opacity
:
$disable
;
}
}
}
}
</
style
>
uni_modules/uni-table/components/uni-tr/uni-tr.vue
0 → 100644
View file @
16d3b58f
<
template
>
<!-- #ifdef H5 -->
<tr
class=
"uni-table-tr"
>
<th
v-if=
"selection === 'selection' && ishead"
class=
"checkbox"
:class=
"
{ 'tr-table--border': border }">
<table-checkbox
:checked=
"checked"
:indeterminate=
"indeterminate"
:disabled=
"disabled"
@
checkboxSelected=
"checkboxSelected"
></table-checkbox>
</th>
<slot></slot>
<!--
<uni-th
class=
"th-fixed"
>
123
</uni-th>
-->
</tr>
<!-- #endif -->
<!-- #ifndef H5 -->
<view
class=
"uni-table-tr"
>
<view
v-if=
"selection === 'selection' "
class=
"checkbox"
:class=
"
{ 'tr-table--border': border }">
<table-checkbox
:checked=
"checked"
:indeterminate=
"indeterminate"
:disabled=
"disabled"
@
checkboxSelected=
"checkboxSelected"
></table-checkbox>
</view>
<slot></slot>
</view>
<!-- #endif -->
</
template
>
<
script
>
import
tableCheckbox
from
'./table-checkbox.vue'
/**
* Tr 表格行组件
* @description 表格行组件 仅包含 th,td 组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=
*/
export
default
{
name
:
'uniTr'
,
components
:
{
tableCheckbox
},
props
:
{
disabled
:
{
type
:
Boolean
,
default
:
false
},
keyValue
:
{
type
:
[
String
,
Number
],
default
:
''
}
},
options
:
{
virtualHost
:
true
},
data
()
{
return
{
value
:
false
,
border
:
false
,
selection
:
false
,
widthThArr
:
[],
ishead
:
true
,
checked
:
false
,
indeterminate
:
false
}
},
created
()
{
this
.
root
=
this
.
getTable
()
this
.
head
=
this
.
getTable
(
'uniThead'
)
if
(
this
.
head
)
{
this
.
ishead
=
false
this
.
head
.
init
(
this
)
}
this
.
border
=
this
.
root
.
border
this
.
selection
=
this
.
root
.
type
this
.
root
.
trChildren
.
push
(
this
)
const
rowData
=
this
.
root
.
data
.
find
(
v
=>
v
[
this
.
root
.
rowKey
]
===
this
.
keyValue
)
if
(
rowData
){
this
.
rowData
=
rowData
}
this
.
root
.
isNodata
()
},
mounted
()
{
if
(
this
.
widthThArr
.
length
>
0
)
{
const
selectionWidth
=
this
.
selection
===
'selection'
?
50
:
0
this
.
root
.
minWidth
=
this
.
widthThArr
.
reduce
((
a
,
b
)
=>
Number
(
a
)
+
Number
(
b
))
+
selectionWidth
}
},
destroyed
()
{
const
index
=
this
.
root
.
trChildren
.
findIndex
(
i
=>
i
===
this
)
this
.
root
.
trChildren
.
splice
(
index
,
1
)
this
.
root
.
isNodata
()
},
methods
:
{
minWidthUpdate
(
width
)
{
this
.
widthThArr
.
push
(
width
)
},
// 选中
checkboxSelected
(
e
)
{
let
rootData
=
this
.
root
.
data
.
find
(
v
=>
v
[
this
.
root
.
rowKey
]
===
this
.
keyValue
)
this
.
checked
=
e
.
checked
this
.
root
.
check
(
rootData
||
this
,
e
.
checked
,
rootData
?
this
.
keyValue
:
null
)
},
change
(
e
)
{
this
.
root
.
trChildren
.
forEach
(
item
=>
{
if
(
item
===
this
)
{
this
.
root
.
check
(
this
,
e
.
detail
.
value
.
length
>
0
?
true
:
false
)
}
})
},
/**
* 获取父元素实例
*/
getTable
(
name
=
'uniTable'
)
{
let
parent
=
this
.
$parent
let
parentName
=
parent
.
$options
.
name
while
(
parentName
!==
name
)
{
parent
=
parent
.
$parent
if
(
!
parent
)
return
false
parentName
=
parent
.
$options
.
name
}
return
parent
}
}
}
</
script
>
<
style
lang=
"scss"
>
$border-color
:
#ebeef5
;
.uni-table-tr
{
/* #ifndef APP-NVUE */
display
:
table-row
;
transition
:
all
0
.3s
;
box-sizing
:
border-box
;
/* #endif */
}
.checkbox
{
padding
:
0
8px
;
width
:
26px
;
padding-left
:
12px
;
/* #ifndef APP-NVUE */
display
:
table-cell
;
vertical-align
:
middle
;
/* #endif */
color
:
#333
;
font-weight
:
500
;
border-bottom
:
1px
$border-color
solid
;
font-size
:
14px
;
// text-align: center;
}
.tr-table--border
{
border-right
:
1px
$border-color
solid
;
}
/* #ifndef APP-NVUE */
.uni-table-tr
{
::v-deep
.uni-table-th
{
&
.table--border
:last-child
{
// border-right: none;
}
}
::v-deep
.uni-table-td
{
&
.table--border
:last-child
{
// border-right: none;
}
}
}
/* #endif */
</
style
>
uni_modules/uni-table/package.json
0 → 100644
View file @
16d3b58f
{
"id"
:
"uni-table"
,
"displayName"
:
"uni-table 表格"
,
"version"
:
"1.1.0"
,
"description"
:
"表格组件,多用于展示多条结构类似的数据,如"
,
"keywords"
:
[
"uni-ui"
,
"uniui"
,
"table"
,
"表格"
],
"repository"
:
"https://github.com/dcloudio/uni-ui"
,
"engines"
:
{
"HBuilderX"
:
""
},
"directories"
:
{
"example"
:
"../../temps/example_temps"
},
"dcloudext"
:
{
"category"
:
[
"前端组件"
,
"通用组件"
],
"sale"
:
{
"regular"
:
{
"price"
:
"0.00"
},
"sourcecode"
:
{
"price"
:
"0.00"
}
},
"contact"
:
{
"qq"
:
""
},
"declaration"
:
{
"ads"
:
"无"
,
"data"
:
"无"
,
"permissions"
:
"无"
},
"npmurl"
:
"https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules"
:
{
"dependencies"
:
[
"uni-datetime-picker"
],
"encrypt"
:
[],
"platforms"
:
{
"cloud"
:
{
"tcb"
:
"y"
,
"aliyun"
:
"y"
},
"client"
:
{
"App"
:
{
"app-vue"
:
"y"
,
"app-nvue"
:
"n"
},
"H5-mobile"
:
{
"Safari"
:
"y"
,
"Android Browser"
:
"y"
,
"微信浏览器(Android)"
:
"y"
,
"QQ浏览器(Android)"
:
"y"
},
"H5-pc"
:
{
"Chrome"
:
"y"
,
"IE"
:
"y"
,
"Edge"
:
"y"
,
"Firefox"
:
"y"
,
"Safari"
:
"y"
},
"小程序"
:
{
"微信"
:
"y"
,
"阿里"
:
"y"
,
"百度"
:
"y"
,
"字节跳动"
:
"n"
,
"QQ"
:
"y"
},
"快应用"
:
{
"华为"
:
"n"
,
"联盟"
:
"n"
}
}
}
}
}
\ No newline at end of file
uni_modules/uni-table/readme.md
0 → 100644
View file @
16d3b58f
## Table 表单
> 组件名:``uni-table``,代码块: `uTable`。
用于展示多条结构类似的数据
### 平台差异说明
目前仅支持pc端
### 组件使用注意事项
为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
-
组件需要依赖
`sass`
插件 ,请自行手动安装
-
如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
### 安装方式
本组件符合
[
easycom
](
https://uniapp.dcloud.io/collocation/pages?id=easycom
)
规范,
`HBuilderX 2.5.5`
起,只需将本组件导入项目,在页面
`template`
中即可直接使用,无需在页面中
`import`
和注册
`components`
。
如需通过
`npm`
方式使用
`uni-ui`
组件,另见文档:
[
https://ext.dcloud.net.cn/plugin?id=55
](
https://ext.dcloud.net.cn/plugin?id=55
)
### 基本用法
表格是由4个组件:
`uni-table`
表格组件、
`uni-tr`
表格行 、
`uni-th`
表格头、
`uni-td`
单元格组成
需要注意的是:
-
`uni-table`
的根节点一定是
`uni-tr`
-
`uni-tr`
的根节点一定是
`uni-th`
或者
`uni-td`
-
一个表格内理论上只能包含表头行
-
目前只能在
`uni-th`
中设置 width 属性,
`uni-td`
的宽度跟随
`uni-th`
宽度变化
```html
<uni-table border stripe emptyText="暂无更多数据" >
<!-- 表头行 -->
<uni-tr>
<uni-th align="center">日期</uni-th>
<uni-th align="center">姓名</uni-th>
<uni-th align="left">地址</uni-th>
</uni-tr>
<!-- 表格数据行 -->
<uni-tr>
<uni-td>2020-10-20</uni-td>
<uni-td>Jeson</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
<uni-tr>
<uni-td>2020-10-21</uni-td>
<uni-td>HanMeiMei</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
<uni-tr>
<uni-td>2020-10-22</uni-td>
<uni-td>LiLei</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
<uni-tr>
<uni-td>2020-10-23</uni-td>
<uni-td>Danner</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
</uni-table>
</script>
```
## API
### Table Props
|属性名 | 类型 |默认值 | 可选值 | 说明|
|:-: | :-: |:-: | :-: | :-: |
|border | Boolean | false | - | 是否带有纵向边框 |
|stripe | Boolean | false | - | 是否显示斑马线样式 |
|type | String | '' | - | 值为type="selection" 时开启多选|
|emptyText | String | 没有更多数据 | - | 空数据时显示的文本内容 |
|loading | Boolean | false | - | 显示加载中|
### Table Events
事件称名 |说明 | 返回参数
:-: |:-: | :-:
selection-change | 开启多选时,当选择项发生变化时会触发该事件 | Function(Object)
### Table Methods
**Tips: 因微信小程序框架问题,暂不支持如下方法**
|方法称名 |说明 |参数|
|:-: |:-: |:-:|
|selectionAll |选中全部行 |- |
|toggleRowSelection |用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) | Function(Array:
[
行索引
]
,Boolean:selected) |
|clearSelection |用于多选表格,清空用户的选择 |- |
|toggleAllSelection |用于多选表格,切换所有行的选中状态 |- |
### Th Props
|属性名 |类型 |默认值 |可选值 |说明|
|:-: |:-: |:-: | :-: |:-:|
|width |String | - |- | 单元格宽度|
|align |String | left |left/center/right | 表头对齐方式|
|filter-type |String | |search/select/range/date | 筛选类型,search关键字搜索,select类别选择|
|filter-data |Array | || 筛选数据|
|sortable |Boolean| false |- | 是否启用排序|
filter-data 示例
```
json
[{
text
:
""
,
//显示
value
:
""
//
值
}]
```
### Th Events
|事件称名 |说明 | 返回参数 |
|:-: |:-: | :-: |
||sort-change | 点击排序时会触发该事件 | Function(Object)|
||filter-change | 筛选数据时会触发该事件 | Function(Object)|
filter-change(e) 说明
```
json
e
=
{
filterType
:
""
,
//筛选类型
search/select/range
和传入的相同
filter
:
""
//
值
,
filterType=search字符串类型,filterType=select数组类型,filterType=range数组类型,
[
0
]
开始值,
[
1
]
结束值
}
```
### Td Props
|属性名 |类型 |默认值 |可选值 |说明|
|:-: |:-: |:-: |:-: |:-:|
|align |Boolean| left |left/center/right | 单元格对齐方式|
## 组件示例
点击查看:
[
https://hellouniapp.dcloud.net.cn/pages/extUI/table/table
](
https://hellouniapp.dcloud.net.cn/pages/extUI/table/table
)
\ No newline at end of file
uni_modules/v-tabs/changelog.md
0 → 100644
View file @
16d3b58f
## 2.1.1(2022-09-16)
1.
将插件更新为
`uni_modules`
方式
## 2.1.0(2022-08-12)
1.
增加
`disable`
参数,控制是否可以点击,只能应用在数组对象中,见
[
disabled 的用法
](
#112-当tabs使用的数组对象的方式特定参数需要注意一下
)
```
js
export
default
{
data
()
{
return
{
tabs
:
[{
id
:
1
,
name
:
''
}]
}
}
}
```
## 2.0.10(2022-01-27)
1.
更新属性line-animation设置为false可以不要动画,这是好多朋友问到,特此加上
## 2.0.9(2020-10-12)
1.
修复 v-tabs 第一次可能出现第一个标签显示不完整的情况
2.
修改了 pages/tabs/order 示例文件
## 2.0.8(2020-09-21)
1.
修复添加 fixed 属性后,滚动条无效
2.
修复选项很少的情况下,下划线计算计算错误
3.
新增 paddingItem 属性,设置选项左右边距(上下边距需要设置 height 属性,或者设置 padding 属性)
## 2.0.7(2020-09-17)
1.
紧急修复 bug,横向滑动不了的情况
## 2.0.6(2020-09-16)
1.
新增 fixed 属性,是否固定在顶部,示例地址:pages/tabs/tabs-static
2.
优化之前的页面结构
## 2.0.5(2020-09-09)
1.
修复 width 错误,dom 加载的时候没有及时获取到 data 属性导致的 。
## 2.0.4(2020-08-29)
1.
优化异步改变 tabs 后,下划线不初始化问题
2.
github 地址上有图 2 的源码,需要的自行下载,页面路径:pages/tabs/order.vue
## 2.0.3(2020-08-20)
1.
优化 节点查询 和 选中渲染
2.
优化支付宝中 createSelectorQuery() 的影响
**特别说明:**
> 支付宝中平铺方法和其他方法不能在一个页面中出现,不然有一个显示错误(具体什么原因没查到,有好心的人发现了,望告知一下,感谢
## 2.0.2(2020-08-19)
1.
优化 change 事件触发机制
## 2.0.1(2020-08-16)
1.
修改默认高度为 70rpx
2.
新增属性 bgColor,可设置背景颜色,默认 #fff
3.
新增整个 tab 的 padding 属性,默认 0
## 2.0.0(2020-08-13)
1.
全新的 v-tabs 2.0
2.
支持 H5 小程序 APP
3.
属性高度可配置
## 1.3.2(2020-07-21)
1.
新增 auto 的配置,是否平铺 tab
2.
修复文档上的错误示例(感谢 lushgwe@163.com 的反馈)
## 1.3.0(2020-07-05)
1.
新增 padding 的可配置
2.
修复 v-model 双向绑定问题
3.
修复初始化下划线没定位的为题
## 1.2.0(2020-06-19)
1.
添加注释
2.
修复 bug
## 1.1.8(2020-06-11)
1.
添加 change 事件
2.
修复插件内容问题
3.
修复下划线不居中问题
## 1.1.6(2020-06-11)
1.
添加 change 事件
2.
修复插件内容问题
## 1.1.4(2020-06-11)
1.
添加 change 事件
2.
修复插件内容问题
## 1.1.2(2020-06-11)
1.
添加 change 事件
## 1.1.1(2020-06-09)
1.
修复小程序端选中的下划线不显示问题
2.
新增 tab 高度设置
3.
lineHeight 修改为只支持 String 方式
## 1.1.0(2020-06-09)
1.
修复小程序端选中的下划线不显示问题
2.
新增 tab 高度设置
3.
lineHeight 修改为只支持 String 方式
## 1.0.0(2020-06-04)
1.
更新插件1.0.0
\ No newline at end of file
uni_modules/v-tabs/components/v-tabs/v-tabs.vue
0 → 100644
View file @
16d3b58f
<
template
>
<view
:id=
"elId"
class=
"v-tabs"
>
<scroll-view
id=
"scrollContainer"
:scroll-x=
"scroll"
:scroll-left=
"scroll ? scrollLeft : 0"
:scroll-with-animation=
"scroll"
:style=
"
{ position: fixed ? 'fixed' : 'relative', zIndex: 1993 }"
>
<view
class=
"v-tabs__container"
:style=
"
{
display: scroll ? 'inline-flex' : 'flex',
whiteSpace: scroll ? 'nowrap' : 'normal',
background: bgColor,
height,
padding
}"
>
<view
:class=
"['v-tabs__container-item',
{ disabled: !!v.disabled }]"
v-for="(v, i) in tabs"
:key="i"
:style="{
color: current == i ? activeColor : color,
fontSize: current == i ? fontSize : fontSize,
fontWeight: bold
&&
current == i ? 'bold' : '',
justifyContent: !scroll ? 'center' : '',
flex: scroll ? '' : 1,
padding: paddingItem
}"
@click="change(i)"
>
{{
field
?
v
[
field
]
:
v
}}
</view>
<view
v-if=
"!pills"
:class=
"['v-tabs__container-line',
{ animation: lineAnimation }]"
:style="{
background: lineColor,
width: lineWidth + 'px',
height: lineHeight,
borderRadius: lineRadius,
left: lineLeft + 'px',
transform: `translateX(-${lineWidth / 2}px)`
}"
>
</view>
<view
v-else
:class=
"['v-tabs__container-pills',
{ animation: lineAnimation }]"
:style="{
background: pillsColor,
borderRadius: pillsBorderRadius,
left: pillsLeft + 'px',
width: currentWidth + 'px',
height
}"
>
</view>
</view>
</scroll-view>
<view
class=
"v-tabs__placeholder"
:style=
"
{
height: fixed ? height : '0',
padding
}"
>
</view>
</view>
</
template
>
<
script
>
/**
* v-tabs
* @property {Number} value 选中的下标
* @property {Array} tabs tabs 列表
* @property {String} bgColor = '#fff' 背景颜色
* @property {String} color = '#333' 默认颜色
* @property {String} activeColor = '#2979ff' 选中文字颜色
* @property {String} fontSize = '28rpx' 默认文字大小
* @property {String} activeFontSize = '28rpx' 选中文字大小
* @property {Boolean} bold = [true | false] 选中文字是否加粗
* @property {Boolean} scroll = [true | false] 是否滚动
* @property {String} height = '60rpx' tab 的高度
* @property {String} lineHeight = '10rpx' 下划线的高度
* @property {String} lineColor = '#2979ff' 下划线的颜色
* @property {Number} lineScale = 0.5 下划线的宽度缩放比例
* @property {String} lineRadius = '10rpx' 下划线圆角
* @property {Boolean} pills = [true | false] 是否胶囊样式
* @property {String} pillsColor = '#2979ff' 胶囊背景色
* @property {String} pillsBorderRadius = '10rpx' 胶囊圆角大小
* @property {String} field 如果是对象,显示的键名
* @property {Boolean} fixed = [true | false] 是否固定
* @property {String} paddingItem = '0 22rpx' 选项的边距
* @property {Boolean} lineAnimation = [true | false] 下划线是否有动画
*
* @event {Function(current)} change 改变标签触发
*/
export
default
{
props
:
{
value
:
{
type
:
Number
,
default
:
0
},
tabs
:
{
type
:
Array
,
default
()
{
return
[]
}
},
bgColor
:
{
type
:
String
,
default
:
'#fff'
},
padding
:
{
type
:
String
,
default
:
'0'
},
color
:
{
type
:
String
,
default
:
'#333'
},
activeColor
:
{
type
:
String
,
default
:
'#2979ff'
},
fontSize
:
{
type
:
String
,
default
:
'28rpx'
},
activeFontSize
:
{
type
:
String
,
default
:
'32rpx'
},
bold
:
{
type
:
Boolean
,
default
:
true
},
scroll
:
{
type
:
Boolean
,
default
:
true
},
height
:
{
type
:
String
,
default
:
'70rpx'
},
lineColor
:
{
type
:
String
,
default
:
'#2979ff'
},
lineHeight
:
{
type
:
String
,
default
:
'10rpx'
},
lineScale
:
{
type
:
Number
,
default
:
0.5
},
lineRadius
:
{
type
:
String
,
default
:
'10rpx'
},
pills
:
{
type
:
Boolean
,
default
:
false
},
pillsColor
:
{
type
:
String
,
default
:
'#2979ff'
},
pillsBorderRadius
:
{
type
:
String
,
default
:
'10rpx'
},
field
:
{
type
:
String
,
default
:
''
},
fixed
:
{
type
:
Boolean
,
default
:
false
},
paddingItem
:
{
type
:
String
,
default
:
'0 22rpx'
},
lineAnimation
:
{
type
:
Boolean
,
default
:
true
}
},
data
()
{
return
{
elId
:
''
,
lineWidth
:
30
,
currentWidth
:
0
,
// 当前选项的宽度
lineLeft
:
0
,
// 滑块距离左侧的位置
pillsLeft
:
0
,
// 胶囊距离左侧的位置
scrollLeft
:
0
,
// 距离左边的位置
containerWidth
:
0
,
// 容器的宽度
current
:
0
// 当前选中项
}
},
watch
:
{
value
(
newVal
)
{
this
.
current
=
newVal
this
.
$nextTick
(()
=>
{
this
.
getTabItemWidth
()
})
},
current
(
newVal
)
{
this
.
$emit
(
'input'
,
newVal
)
},
tabs
(
newVal
)
{
this
.
$nextTick
(()
=>
{
this
.
getTabItemWidth
()
})
}
},
methods
:
{
// 产生随机字符串
randomString
(
len
)
{
len
=
len
||
32
let
$chars
=
'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
/****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
let
maxPos
=
$chars
.
length
let
pwd
=
''
for
(
let
i
=
0
;
i
<
len
;
i
++
)
{
pwd
+=
$chars
.
charAt
(
Math
.
floor
(
Math
.
random
()
*
maxPos
))
}
return
pwd
},
// 切换事件
change
(
index
)
{
const
isDisabled
=
!!
this
.
tabs
[
index
].
disabled
if
(
this
.
current
!==
index
&&
!
isDisabled
)
{
this
.
current
=
index
this
.
$emit
(
'change'
,
index
)
}
},
// 获取左移动位置
getTabItemWidth
()
{
let
query
=
uni
.
createSelectorQuery
()
// #ifndef MP-ALIPAY
.
in
(
this
)
// #endif
// 获取容器的宽度
query
.
select
(
`#scrollContainer`
)
.
boundingClientRect
((
data
)
=>
{
if
(
!
this
.
containerWidth
&&
data
)
{
this
.
containerWidth
=
data
.
width
}
})
.
exec
()
// 获取所有的 tab-item 的宽度
query
.
selectAll
(
'.v-tabs__container-item'
)
.
boundingClientRect
((
data
)
=>
{
if
(
!
data
)
{
return
}
let
lineLeft
=
0
let
currentWidth
=
0
if
(
data
)
{
for
(
let
i
=
0
;
i
<
data
.
length
;
i
++
)
{
if
(
i
<
this
.
current
)
{
lineLeft
+=
data
[
i
].
width
}
else
if
(
i
==
this
.
current
)
{
currentWidth
=
data
[
i
].
width
}
else
{
break
}
}
}
// 当前滑块的宽度
this
.
currentWidth
=
currentWidth
// 缩放后的滑块宽度
this
.
lineWidth
=
currentWidth
*
this
.
lineScale
*
1
// 滑块作移动的位置
this
.
lineLeft
=
lineLeft
+
currentWidth
/
2
// 胶囊距离左侧的位置
this
.
pillsLeft
=
lineLeft
// 计算滚动的距离左侧的位置
if
(
this
.
scroll
)
{
this
.
scrollLeft
=
this
.
lineLeft
-
this
.
containerWidth
/
2
}
})
.
exec
()
}
},
mounted
()
{
this
.
elId
=
'xfjpeter_'
+
this
.
randomString
()
this
.
current
=
this
.
value
this
.
$nextTick
(()
=>
{
this
.
getTabItemWidth
()
})
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.v-tabs
{
width
:
100%
;
box-sizing
:
border-box
;
overflow
:
hidden
;
::-webkit-scrollbar
{
display
:
none
;
}
&
__container
{
min-width
:
100%
;
position
:
relative
;
display
:
inline-flex
;
align-items
:
center
;
white-space
:
nowrap
;
overflow
:
hidden
;
&
-item
{
display
:
flex
;
align-items
:
center
;
height
:
100%
;
position
:
relative
;
z-index
:
10
;
// padding: 0 11px;
transition
:
all
0
.3s
;
white-space
:
nowrap
;
&
.disabled
{
opacity
:
0
.5
;
color
:
#999
;
}
}
&
-line
{
position
:
absolute
;
bottom
:
0
;
}
&
-pills
{
position
:
absolute
;
z-index
:
9
;
}
&
-line
,
&
-pills
{
&
.animation
{
transition
:
all
0
.3s
linear
;
}
}
}
}
</
style
>
uni_modules/v-tabs/package.json
0 → 100644
View file @
16d3b58f
{
"id"
:
"v-tabs"
,
"displayName"
:
"自定义 tab 选项卡 2"
,
"version"
:
"2.1.1"
,
"description"
:
"自定义 tab ,支持多种样式,支持 h5 小程序 app"
,
"keywords"
:
[
"v-tabs"
,
"tab"
,
"选项卡"
],
"repository"
:
"https://github.com/xfjpeter/uni-plugins"
,
"engines"
:
{
"HBuilderX"
:
"^3.1.0"
},
"dcloudext"
:
{
"type"
:
"component-vue"
,
"sale"
:
{
"regular"
:
{
"price"
:
"0.00"
},
"sourcecode"
:
{
"price"
:
"0.00"
}
},
"contact"
:
{
"qq"
:
"1207791534"
},
"declaration"
:
{
"ads"
:
"无"
,
"data"
:
"无"
,
"permissions"
:
"无"
},
"npmurl"
:
""
},
"uni_modules"
:
{
"dependencies"
:
[],
"encrypt"
:
[],
"platforms"
:
{
"cloud"
:
{
"tcb"
:
"y"
,
"aliyun"
:
"y"
},
"client"
:
{
"Vue"
:
{
"vue2"
:
"y"
,
"vue3"
:
"n"
},
"App"
:
{
"app-vue"
:
"y"
,
"app-nvue"
:
"n"
},
"H5-mobile"
:
{
"Safari"
:
"y"
,
"Android Browser"
:
"y"
,
"微信浏览器(Android)"
:
"y"
,
"QQ浏览器(Android)"
:
"y"
},
"H5-pc"
:
{
"Chrome"
:
"y"
,
"IE"
:
"n"
,
"Edge"
:
"y"
,
"Firefox"
:
"y"
,
"Safari"
:
"y"
},
"小程序"
:
{
"微信"
:
"y"
,
"阿里"
:
"y"
,
"百度"
:
"y"
,
"字节跳动"
:
"y"
,
"QQ"
:
"y"
,
"钉钉"
:
"y"
,
"快手"
:
"y"
,
"飞书"
:
"y"
,
"京东"
:
"y"
},
"快应用"
:
{
"华为"
:
"u"
,
"联盟"
:
"u"
}
}
}
}
}
\ No newline at end of file
uni_modules/v-tabs/readme.md
0 → 100644
View file @
16d3b58f
## 插件说明
> 这是 `v-tabs` 插件的升级版本,参数上有很大变动,支持 `H5` `小程序` `手机端`,如果是在之前的插件上升级的话,请注意参数的变更,触发的事件没有变更。
## 使用说明
### 1、最基本用法
-
视图文件
```
html
<v-tabs
v-model=
"current"
:tabs=
"tabs"
@
change=
"changeTab"
></v-tabs>
```
-
脚本文件
```
js
export
default
{
data
()
{
return
{
current
:
0
,
tabs
:
[
'军事'
,
'国内'
,
'新闻新闻'
,
'军事'
,
'国内'
,
'新闻'
,
'军事'
,
'国内'
,
'新闻'
]
}
},
methods
:
{
changeTab
(
index
)
{
console
.
log
(
'当前选中的项:'
+
index
)
}
}
}
```
### 2、平铺整个屏幕
-
视图文件
```
html
<v-tabs
v-model=
"activeTab"
:scroll=
"false"
:tabs=
"['全部', '进行中', '已完成']"
></v-tabs>
```
-
脚本文件
```
js
export
default
{
data
()
{
return
{
activeTab
:
0
}
}
}
```
### 3、胶囊用法
-
视图文件
```
html
<v-tabs
v-model=
"current"
:tabs=
"tabs"
:pills=
"true"
line-height=
"0"
activeColor=
"#fff"
@
change=
"changeTab"
></v-tabs>
```
-
脚本文件
```
js
data
()
{
return
{
current
:
2
,
tabs
:
[
'军事'
,
'国内'
,
'新闻新闻'
,
'军事'
,
'国内'
,
'新闻'
,
'军事'
,
'国内'
,
'新闻'
,
],
},
methods
:
{
changeTab
(
index
)
{
console
.
log
(
'当前选中索引:'
+
index
)
}
}
}
```
## 文档说明
### 1、属性说明
| 参数 | 类型 | 默认值 | 说明 |
| :---------------: | :-----: | :-------: | :-----------------------------------------------------------------------: |
| tabs | Array |
[]
| 控制 tab 的列表 |
| value | Number | 0 | 必传(双向绑定的值) |
| color | String | '#333' | 默认文字颜色 |
| activeColor | String | '#2979ff' | 选中文字的颜色 |
| fontSize | String | '28rpx' | 默认文字大小(rpx 或 px)(弃用) |
| bold | Boolean | true | 是否加粗选中项 |
| scroll | Boolean | true | 是否显示滚动条,平铺设置 false |
| height | String | '70rpx' | tab 高度(rpx 或 px) |
| lineHeight | String | '10rpx' | 滑块高度(rpx 或 px) |
| lineColor | String | '#2979ff' | 滑块的颜色 |
| lineScale | Number | 0.5 | 滑块宽度缩放值 |
| lineRadius | String | '10rpx' | 滑块圆角宽度(rpx 或 px) |
| pills | Boolean | false | 是否开启胶囊 |
| pillsColor | String | '#2979ff' | 胶囊背景颜色(rpx 或 px) |
| pillsBorderRadius | String | '10rpx' | 胶囊圆角宽度(rpx 或 px) |
| field | String | '' | 如果 tabs 子项是对象,输入需要展示的键名 |
| bgColor | String | '#fff' | 背景色,支持 linear-gradient 渐变 |
| padding | String | '0' | 整个 tab padding 属性 |
| fixed | Boolean | false | 是否固定在顶部 |
| paddingItem | String | '0 22rpx' | 选项的边距(设置上下不生效,需要设置高度) |
| lineAnimation | Boolean | true | 是否需要 line 和 pills 的动画,在隐藏页面后默认移动到第一个的时候比较实用 |
### 1.1 `tabs`参数展开说明
#### 1.1.1 当`tabs`仅仅是单纯的数组时候,没有什么特别的地方
```
js
export
default
{
data
()
{
return
{
tabs
:
[
'全部'
,
'待付款'
,
'待消费'
,
'已完成'
,
'已评价'
,
'已过期'
,
'已退款'
]
}
}
}
```
#### 1.1.2 当`tabs`使用的数组对象的方式,特定参数需要注意一下
-
`disabled`
参数,可以控制按钮是否可以点击
```
js
export
default
{
data
()
{
return
{
tabs
:
[
{
id
:
1
,
name
:
'待付款'
,
disabled
:
false
},
{
id
:
2
,
name
:
'待收货'
,
disabled
:
false
},
{
id
:
3
,
name
:
'待评价'
,
disabled
:
false
},
{
id
:
4
,
name
:
'退款/售后'
,
disabled
:
true
},
{
id
:
5
,
name
:
'我的订单'
,
disabled
:
false
}
]
}
}
}
```
### 2、事件说明
| 名称 | 参数 | 说明 |
| :----: | :---: | :--------------------------------: |
| change | index | 改变选中项触发, index 选中项的下标 |
## 更新日志
### 2.1.1(2022-09-16)
1.
将插件更新为
`uni_modules`
方式
### 2022-08-12
1.
增加
`disable`
参数,控制是否可以点击,只能应用在数组对象中,见
[
disabled 的用法
](
#112-当tabs使用的数组对象的方式特定参数需要注意一下
)
```
js
export
default
{
data
()
{
return
{
tabs
:
[{
id
:
1
,
name
:
''
}]
}
}
}
```
### 2022-01-27
1.
更新属性
`line-animation`
设置为
`false`
可以不要动画,这是好多朋友问到,特此加上
### 2020-09-24
1.
修复
`v-tabs`
第一次可能出现第一个标签显示不完整的情况
2.
修改了
`pages/tabs/order`
示例文件
### 2020-09-21
1.
修复添加
`fixed`
属性后,滚动条无效
2.
修复选项很少的情况下,下划线计算计算错误
3.
新增
`paddingItem`
属性,设置选项左右边距(上下边距需要设置
`height`
属性,或者设置
`padding`
属性)
**写在最后:**
欢迎各位老铁反馈 bug ,本人后端 PHP 一枚,只是应为感兴趣前端,自己琢磨,自己搞。如果你在使用的过程中有什么不合理,需要优化的,都可以在下面评论(或加我 QQ: 1207791534),本人看见后回复、修正,感谢。
### 2020-09-17
1.
紧急修复 bug,横向滑动不了的情况
### 2020-09-16
1.
新增
`fixed`
属性,是否固定在顶部,示例地址:
`pages/tabs/tabs-static`
2.
优化之前的页面结构
**注意:**
1.
使用
`padding`
属性的时候,尽量不要左右边距,会导致下划线位置不对
2.
如果不绑定
`v-model`
会导致
`change`
事件改变的时候,下划线不跟随问题
### 2020-09-09
1.
修复
`width`
错误,dom 加载的时候没有及时获取到
`data`
属性导致的。
### 2020-08-29
1.
优化异步改变
`tabs`
后,下划线不初始化问题
2.
`github`
地址上有图 2 的源码,需要的自行下载,页面路径:
`pages/tabs/order`
### 2020-08-20
1.
优化
`节点查询`
和
`选中渲染`
2.
优化支付宝中
`createSelectorQuery()`
的影响
### 2020-08-19
1.
优化
`change`
事件触发机制
### 2020-08-16
1.
修改默认高度为
`70rpx`
2.
新增属性
`bgColor`
,可设置背景颜色,默认
`#fff`
3.
新增整个
`tab`
的
`padding`
属性,默认
`0`
### 2020-08-13
1.
全新的
`v-tabs 2.0`
2.
支持
`H5`
`小程序`
`APP`
3.
属性高度可配置
## 预览
![
v-tabs 2.0.1.gif
](
https://tva1.sinaimg.cn/large/007S8ZIlgy1ghsv40mj76g30ai0i2tsd.gif
)
![
v-tabs 2.0.2.gif
](
https://img-cdn-aliyun.dcloud.net.cn/stream/plugin_screens/42f3a920-a674-11ea-8a24-ffee00625e2e_1.png?v=1597912963
)
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment