Browse Source

fix: price demo

richard1015 5 years ago
parent
commit
7d6fdb664e
2 changed files with 28 additions and 30 deletions
  1. 13 11
      src/packages/cell/index.vue
  2. 15 19
      src/packages/price/demo.vue

+ 13 - 11
src/packages/cell/index.vue

@@ -1,16 +1,18 @@
 <template>
   <view :class="classes" @click="handleClick">
-    <view class="nut-cell__title">
-      <template v-if="subTitle">
-        <view class="title">{{ title }}</view>
-        <view class="nut-cell__title-desc">{{ subTitle }}</view>
-      </template>
-      <template v-else>
-        {{ title }}
-      </template>
-    </view>
-    <view v-if="desc" class="nut-cell__value">{{ desc }}</view>
-    <nut-icon v-if="isLink || to" name="right"></nut-icon>
+    <slot>
+      <view class="nut-cell__title">
+        <template v-if="subTitle">
+          <view class="title">{{ title }}</view>
+          <view class="nut-cell__title-desc">{{ subTitle }}</view>
+        </template>
+        <template v-else>
+          {{ title }}
+        </template>
+      </view>
+      <view v-if="desc" class="nut-cell__value">{{ desc }}</view>
+      <nut-icon v-if="isLink || to" name="right"></nut-icon>
+    </slot>
   </view>
 </template>
 

+ 15 - 19
src/packages/price/demo.vue

@@ -1,38 +1,34 @@
 <template>
   <div class="demo">
-    <div class="title">基本用法</div>
-    <div class="demo-price-box">
+    <h2>基本用法</h2>
+    <nut-cell>
       <nut-price :price="1010" :needSymbol="false" :thousands="true" />
-    </div>
-    <div class="title">无人民币符号,有千位分隔</div>
-    <div class="demo-price-box">
+    </nut-cell>
+    <h2>无人民币符号,有千位分隔</h2>
+    <nut-cell>
       <nut-price :price="10010.01" :needSymbol="true" :thousands="false" />
-    </div>
-    <div class="title">带人民币符号,有千位分隔,保留小数点后三位</div>
-    <div class="demo-price-box">
+    </nut-cell>
+    <h2>带人民币符号,有千位分隔,保留小数点后三位</h2>
+    <nut-cell>
       <nut-price :price="15213.1221" :decimalDigits="3" :needSymbol="true" :thousands="true" />
-    </div>
+    </nut-cell>
   </div>
 </template>
 
 <script lang="ts">
 import Price from '@/packages/price/index.vue';
+import Cell from '@/packages/cell/index.vue';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('price');
 export default createDemo({
   props: {
     text: String
   },
-  components: { [Price.name]: Price }
+  components: {
+    [Price.name]: Price,
+    [Cell.name]: Cell
+  }
 });
 </script>
 
-<style lang="scss" scoped>
-.demo-price-box {
-  padding: 5px 20px;
-  min-height: 43px;
-  background: rgba(255, 255, 255, 1);
-  border-radius: 7px;
-  box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
-}
-</style>
+<style lang="scss" scoped></style>