DatetimePlugin: Fix style missing (Close #1659)

airyland · Jul 7, 2017 · b1838c8 · b1838c8 · DeronEndless · Jul 7, 2017
1 parent 83f9eb3
commit b1838c8
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 153 deletions.
diff --git a/src/components/datetime/index.vue b/src/components/datetime/index.vue
@@ -268,157 +268,5 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../styles/variable.less';
-
-.dp-container {
-  &.vux-datetime-view {
-    position: static;
-    transition: none;
-    & .dp-header {
-      display: none;
-    }
-  }
-}
-
-.vux-datetime-clear {
-  text-align: center;
-}
-
-.scroller-component {
-  display: block;
-  position: relative;
-  height: 238px;
-  overflow: hidden;
-  width: 100%;
-}
-
-.scroller-content {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  z-index: -1;
-}
-
-.scroller-mask {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  margin: 0 auto;
-  width: 100%;
-  z-index: 3;
-  background-image:
-    linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.6)),
-    linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.6));
-  background-position: top, bottom;
-  background-size: 100% 102px;
-  background-repeat: no-repeat;
-}
-
-.scroller-item {
-  text-align: center;
-  font-size: 16px;
-  height: 34px;
-  line-height: 34px;
-  color: #000;
-}
-
-.scroller-indicator {
-  width: 100%;
-  height: 34px;
-  position: absolute;
-  left: 0;
-  top: 102px;
-  z-index: 3;
-  background-image:
-    linear-gradient(to bottom, #d0d0d0, #d0d0d0, transparent, transparent),
-    linear-gradient(to top, #d0d0d0, #d0d0d0, transparent, transparent);
-  background-position: top, bottom;
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-}
-
-.dp-container {
-  position: fixed;
-  width: 100%;
-  left: 0;
-  bottom: 0;
-  z-index: 10000;
-  background-color: #fff;
-  display: none;
-  transition: transform 0.3s ease;
-  transform: translateY(100%);
-}
-
-.dp-mask {
-  z-index: 998;
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  left: 0px;
-  top: 0px;
-  opacity: 0;
-  transition: opacity 0.1s ease;
-  background-color: #000;
-  z-index: 9999;
-}
-
-.dp-header {
-  display: flex;
-  width: 100%;
-  box-align: center;
-  align-items: center;
-  background-image: linear-gradient(to bottom, #e7e7e7, #e7e7e7, transparent, transparent);
-  background-position: bottom;
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-}
-
-.dp-header .dp-item {
-  color: @datetime-header-item-font-color;
-  font-size: 16px;
-  height: 44px;
-  line-height: 44px;
-  cursor: pointer;
-}
-
-.dp-header .dp-item.dp-left {
-  color: @datetime-header-item-cancel-font-color;
-}
-
-.dp-header .dp-item.dp-right {
-  color: @datetime-header-item-confirm-font-color;
-}
-
-.dp-content {
-  display: flex;
-  width: 100%;
-  box-align: center;
-  align-items: center;
-  padding: 10px 0;
-}
-
-.dp-header .dp-item,
-.dp-content .dp-item {
-  box-sizing: border-box;
-  flex: 1;
-}
-.vux-datetime-cancel {
-  text-align: left;
-  padding-left: 15px;
-}
-.vux-datetime-confirm {
-  text-align: right;
-  padding-right: 15px;
-}
-.vux-datetime {
-  color: #000;
-}
-.vux-datetime .vux-input-icon {
-  float: right;
-}
-.vux-cell-primary {
-  flex: 1;
-}
+@import './style.less';
 </style>
diff --git a/src/components/datetime/style.less b/src/components/datetime/style.less
@@ -0,0 +1,153 @@
+@import '../../styles/variable.less';
+
+.dp-container {
+  &.vux-datetime-view {
+    position: static;
+    transition: none;
+    & .dp-header {
+      display: none;
+    }
+  }
+}
+
+.vux-datetime-clear {
+  text-align: center;
+}
+
+.scroller-component {
+  display: block;
+  position: relative;
+  height: 238px;
+  overflow: hidden;
+  width: 100%;
+}
+
+.scroller-content {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: -1;
+}
+
+.scroller-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  margin: 0 auto;
+  width: 100%;
+  z-index: 3;
+  background-image:
+    linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.6)),
+    linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.6));
+  background-position: top, bottom;
+  background-size: 100% 102px;
+  background-repeat: no-repeat;
+}
+
+.scroller-item {
+  text-align: center;
+  font-size: 16px;
+  height: 34px;
+  line-height: 34px;
+  color: #000;
+}
+
+.scroller-indicator {
+  width: 100%;
+  height: 34px;
+  position: absolute;
+  left: 0;
+  top: 102px;
+  z-index: 3;
+  background-image:
+    linear-gradient(to bottom, #d0d0d0, #d0d0d0, transparent, transparent),
+    linear-gradient(to top, #d0d0d0, #d0d0d0, transparent, transparent);
+  background-position: top, bottom;
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+}
+
+.dp-container {
+  position: fixed;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  z-index: 10000;
+  background-color: #fff;
+  display: none;
+  transition: transform 0.3s ease;
+  transform: translateY(100%);
+}
+
+.dp-mask {
+  z-index: 998;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0px;
+  top: 0px;
+  opacity: 0;
+  transition: opacity 0.1s ease;
+  background-color: #000;
+  z-index: 9999;
+}
+
+.dp-header {
+  display: flex;
+  width: 100%;
+  box-align: center;
+  align-items: center;
+  background-image: linear-gradient(to bottom, #e7e7e7, #e7e7e7, transparent, transparent);
+  background-position: bottom;
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+}
+
+.dp-header .dp-item {
+  color: @datetime-header-item-font-color;
+  font-size: 16px;
+  height: 44px;
+  line-height: 44px;
+  cursor: pointer;
+}
+
+.dp-header .dp-item.dp-left {
+  color: @datetime-header-item-cancel-font-color;
+}
+
+.dp-header .dp-item.dp-right {
+  color: @datetime-header-item-confirm-font-color;
+}
+
+.dp-content {
+  display: flex;
+  width: 100%;
+  box-align: center;
+  align-items: center;
+  padding: 10px 0;
+}
+
+.dp-header .dp-item,
+.dp-content .dp-item {
+  box-sizing: border-box;
+  flex: 1;
+}
+.vux-datetime-cancel {
+  text-align: left;
+  padding-left: 15px;
+}
+.vux-datetime-confirm {
+  text-align: right;
+  padding-right: 15px;
+}
+.vux-datetime {
+  color: #000;
+}
+.vux-datetime .vux-input-icon {
+  float: right;
+}
+.vux-cell-primary {
+  flex: 1;
+}
diff --git a/src/plugins/datetime/index.js b/src/plugins/datetime/index.js
@@ -1,6 +1,8 @@
 import Datetime from '../../components/datetime/datetimepicker'
 import ObjectAssign from 'object-assign'
 
+require('../../components/datetime/style.less')
+
 const libs = {
   show: function (options = {}) {
     options = ObjectAssign({

diff --git a/src/plugins/datetime/metas.yml b/src/plugins/datetime/metas.yml
@@ -1,4 +1,9 @@
 changes:
+  next:
+    en:
+      - '[fix] Fix style missing #1659'
+    zh-CN:
+      - '[fix] 修复插件形式使用时缺失样式导致报错问题 #1659'
   v2.3.8:
     zh-CN:
       - '[feature] 是的，Datetime 可以作为插件直接调用了'