breaking change: rename GoodsAction to ActionBar

2020-08-20 11:54:04 +08:00
parent 1ad76a8aa3
commit fc825d7a33
22 changed files with 315 additions and 317 deletions
@@ -0,0 +1,119 @@
+<template>
+  <demo-section>
+    <demo-block :title="t('basicUsage')">
+      <van-action-bar>
+        <van-action-bar-icon
+          icon="chat-o"
+          :text="t('icon1')"
+          @click="onClickIcon"
+        />
+        <van-action-bar-icon
+          icon="cart-o"
+          :text="t('icon2')"
+          @click="onClickIcon"
+        />
+        <van-action-bar-icon
+          icon="shop-o"
+          :text="t('icon3')"
+          @click="onClickIcon"
+        />
+        <van-action-bar-button
+          type="danger"
+          :text="t('button2')"
+          @click="onClickButton"
+        />
+      </van-action-bar>
+    </demo-block>
+
+    <demo-block :title="t('iconBadge')">
+      <van-action-bar>
+        <van-action-bar-icon icon="chat-o" dot :text="t('icon1')" />
+        <van-action-bar-icon icon="cart-o" badge="5" :text="t('icon2')" />
+        <van-action-bar-icon icon="shop-o" badge="12" :text="t('icon3')" />
+        <van-action-bar-button type="warning" :text="t('button1')" />
+        <van-action-bar-button type="danger" :text="t('button2')" />
+      </van-action-bar>
+    </demo-block>
+
+    <demo-block v-if="!isWeapp" :title="t('customIconColor')">
+      <van-action-bar>
+        <van-action-bar-icon icon="chat-o" :text="t('icon1')" color="#07c160" />
+        <van-action-bar-icon icon="cart-o" :text="t('icon2')" />
+        <van-action-bar-icon
+          icon="star"
+          :text="t('collected')"
+          color="#ff5000"
+        />
+        <van-action-bar-button type="warning" :text="t('button1')" />
+        <van-action-bar-button type="danger" :text="t('button2')" />
+      </van-action-bar>
+    </demo-block>
+
+    <demo-block :title="t('customButtonColor')">
+      <van-action-bar>
+        <van-action-bar-icon icon="chat-o" :text="t('icon1')" />
+        <van-action-bar-icon icon="cart-o" :text="t('icon2')" />
+        <van-action-bar-button
+          color="#be99ff"
+          type="warning"
+          :text="t('button1')"
+        />
+        <van-action-bar-button
+          color="#7232dd"
+          type="danger"
+          :text="t('button2')"
+        />
+      </van-action-bar>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      icon1: '客服',
+      icon2: '购物车',
+      icon3: '店铺',
+      button1: '加入购物车',
+      button2: '立即购买',
+      iconBadge: '徽标提示',
+      collected: '已收藏',
+      clickIcon: '点击图标',
+      clickButton: '点击按钮',
+      customIconColor: '自定义图标颜色',
+      customButtonColor: '自定义按钮颜色',
+    },
+    'en-US': {
+      icon1: 'Icon1',
+      icon2: 'Icon2',
+      icon3: 'Icon3',
+      button1: 'Button',
+      button2: 'Button',
+      iconBadge: 'Icon Badge',
+      collected: 'Collected',
+      clickIcon: 'Click Icon',
+      clickButton: 'Click Button',
+      customIconColor: 'Custom Icon Color',
+      customButtonColor: 'Custom Button Color',
+    },
+  },
+  methods: {
+    onClickIcon() {
+      this.$toast(this.t('clickIcon'));
+    },
+    onClickButton() {
+      this.$toast(this.t('clickButton'));
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.demo-action-bar {
+  .van-action-bar {
+    position: relative;
+    padding-bottom: 0;
+  }
+}
+</style>