feat(selector): update 2.0 style

lizzie0802 · Aug 20, 2018 · c0ae804 · c0ae804
1 parent 2ba8d43
commit c0ae804
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/components/selector/demo/cases/demo1.vue b/components/selector/demo/cases/demo1.vue
@@ -14,7 +14,6 @@
       v-model="isSelectorShow"
       :data="data[0]"
       title="自定义选项"
-      cancelText="取消"
       :optionRender="optionRender"
       @choose="onSelectorChoose($event)"
     >
@@ -56,7 +55,7 @@ export default {
           },
         ],
       ],
-      selectorValue: '选项二',
+      selectorValue: '',
     }
   },
   methods: {

diff --git a/components/selector/demo/cases/demo2.vue b/components/selector/demo/cases/demo2.vue
@@ -16,7 +16,6 @@
       :default-index="1"
       title="确认模式"
       okText="确认"
-      cancelText="取消"
       @confirm="onSelectorConfirm($event)"
     ></md-selector>
   </div>

diff --git a/components/selector/index.vue b/components/selector/index.vue
@@ -20,7 +20,14 @@
         :cancel-text="cancelText"
         @confirm="$_onSelectorConfirm"
         @cancel="$_onSelectorCancel"
-      ></md-popup-title-bar>
+      >
+        <md-icon
+          v-if="!isCheck && !isNeedConfirm && !cancelText"
+          name="cross"
+          size="lg"
+          slot="cancel"
+        ></md-icon>
+      </md-popup-title-bar>
       <md-scroll-view
         ref="scroll"
         class="md-selector-container"
@@ -37,7 +44,6 @@
             icon="circle-right"
             icon-inverse="circle"
             icon-size="md"
-            is-across-border
             :optionRender="optionRender"
             :is-slot-scope="hasSlot"
             @change="$_onSelectorChoose"
@@ -52,7 +58,8 @@
   </div>
 </template>
 
-<script>import Popup from '../popup'
+<script>import Icon from '../icon'
+import Popup from '../popup'
 import PopupTitlebar from '../popup/title-bar'
 import Radio from '../radio'
 import ScrollView from '../scroll-view'
@@ -62,6 +69,7 @@ export default {
   name: 'md-selector',
 
   components: {
+    [Icon.name]: Icon,
     [Radio.name]: Radio,
     [Popup.name]: Popup,
     [PopupTitlebar.name]: PopupTitlebar,
@@ -99,7 +107,9 @@ export default {
     },
     cancelText: {
       type: String,
-      default: '取消',
+      default() {
+        return this.okText ? '取消' : ''
+      },
     },
     maskClosable: {
       type: Boolean,
@@ -221,13 +231,13 @@ export default {
 .md-selector
   .md-popup
     z-index selector-zindex !important
-    .md-popup-box
-      background-color color-bg-base
+    .md-popup-title-bar .md-popup-cancel
+      .md-icon
+        align-self flex-start
+        margin-left h-gap-lg
     .md-selector-container
-      background color-bg-base
+      padding-bottom constant(safe-area-inset-bottom)
       overflow hidden
-  .md-field-item.selected
-    color selector-active-color !important
   &.is-check
     .md-field-item.selected .md-icon
       fill selector-active-color !important