docs(ShareSheet): add custom icon demo

src/share-sheet/README.md

@@ -14,7 +14,7 @@ Vue.use(ShareSheet);
 ### Basic Usage
 
 ```html
-<van-cell @click="showShare = true" />
+<van-cell title="Show ShareSheet" @click="showShare = true" />
 <van-share-sheet
   v-model="showShare"
   :options="options"
@@ -52,8 +52,8 @@ export default {
 ```html
 <van-share-sheet
   v-model="showShare"
-  title="Share with friends"
   :options="options"
+  title="Share with friends"
   description="Description"
 />
 ```

src/share-sheet/README.zh-CN.md

@@ -20,7 +20,7 @@ Vue.use(ShareSheet);
 分享面板通过`options`属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。
 
 ```html
-<van-cell @click="showShare = true" />
+<van-cell title="显示分享面板" @click="showShare = true" />
 <van-share-sheet
   v-model="showShare"
   :options="options"
@@ -60,15 +60,15 @@ export default {
 ```html
 <van-share-sheet
   v-model="showShare"
-  title="立即分享给好友"
   :options="options"
+  title="立即分享给好友"
   description="描述信息"
 />
 ```
 
 ### 展示多行选项
 
-当分享选项的数量较多时，可以将`options`定义为数组嵌套的格式，每个子数组代表一行选项
+当分享选项的数量较多时，可以将`options`定义为数组嵌套的格式，每个子数组会作为一行选项展示
 
 ```html
 <van-share-sheet v-model="showShare" :options="options" />
@@ -96,6 +96,29 @@ export default {
 };
 ```
 
+### 自定义图标
+
+除了使用内置的几种图标外，可以直接在`icon`中传入图片 URL 来使用自定义的图标
+
+```html
+<van-share-sheet v-model="showShare" :options="options" />
+```
+
+```js
+export default {
+  data() {
+    return {
+      showShare: false,
+      options: [
+        { name: '名称', icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png' },
+        { name: '名称', icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png' },
+        { name: '名称', icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png' },
+      ],
+    };
+  },
+};
+```
+
 ## API
 
 ### Props

src/share-sheet/demo/index.vue

@@ -1,13 +1,9 @@
 <template>
   <demo-section>
     <demo-block :title="t('basicUsage')">
-      <van-cell
+      <van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
-        is-link
-        :title="t('showSheet')"
-        @click="showBasicSheet = true"
-      />
       <van-share-sheet
-        v-model="showBasicSheet"
+        v-model="show.basic"
         :options="options"
         @select="onSelect"
       />
@@ -17,10 +13,10 @@
       <van-cell
         is-link
         :title="t('showSheet')"
-        @click="showTitleSheet = true"
+        @click="show.withTitle = true"
       />
       <van-share-sheet
-        v-model="showTitleSheet"
+        v-model="show.withTitle"
         :title="t('title')"
         :options="options"
         :description="t('description')"
@@ -32,14 +28,27 @@
       <van-cell
         is-link
         :title="t('showSheet')"
-        @click="showMultiRowSheet = true"
+        @click="show.multiLine = true"
       />
       <van-share-sheet
-        v-model="showMultiRowSheet"
+        v-model="show.multiLine"
         :options="multiLineOptions"
         @select="onSelect"
       />
     </demo-block>
+
+    <demo-block :title="t('customIcon')">
+      <van-cell
+        is-link
+        :title="t('showSheet')"
+        @click="show.customIcon = true"
+      />
+      <van-share-sheet
+        v-model="show.customIcon"
+        :options="customIconOptions"
+        @select="onSelect"
+      />
+    </demo-block>
   </demo-section>
 </template>
 
@@ -48,6 +57,7 @@ export default {
   i18n: {
     'zh-CN': {
       qq: 'QQ',
+      name: '名称',
       link: '复制链接',
       title: '立即分享给好友',
       weibo: '微博',
@@ -57,10 +67,12 @@ export default {
       multiLine: '展示多行选项',
       showSheet: '显示分享面板',
       withTitle: '展示面板标题',
+      customIcon: '自定义图标',
       description: '描述信息',
     },
     'en-US': {
       qq: 'QQ',
+      name: 'Name',
       link: 'Link',
       title: 'Share with friends',
       weibo: 'Weibo',
@@ -70,47 +82,73 @@ export default {
       multiLine: 'Multi Line',
       showSheet: 'Show ShareSheet',
       withTitle: 'Show Title',
+      customIcon: 'Custom Icon',
       description: 'Description',
     },
   },
 
   data() {
     return {
-      showBasicSheet: false,
+      show: {
-      showTitleSheet: false,
+        basic: false,
-      showMultiRowSheet: false,
+        withTitle: false,
+        multiLine: false,
+        customIcon: false,
+      },
     };
   },
 
-  created() {
+  computed: {
-    this.options = [
+    options() {
-      { name: this.t('wechat'), icon: 'wechat' },
+      return [
-      { name: this.t('weibo'), icon: 'weibo' },
-      { name: this.t('link'), icon: 'link' },
-      { name: this.t('poster'), icon: 'poster' },
-      { name: this.t('qrcode'), icon: 'qrcode' },
-    ];
-
-    this.multiLineOptions = [
-      [
         { name: this.t('wechat'), icon: 'wechat' },
         { name: this.t('weibo'), icon: 'weibo' },
-        { name: this.t('qq'), icon: 'qq' },
-      ],
-      [
         { name: this.t('link'), icon: 'link' },
         { name: this.t('poster'), icon: 'poster' },
         { name: this.t('qrcode'), icon: 'qrcode' },
-      ],
+      ];
-    ];
+    },
+
+    multiLineOptions() {
+      return [
+        [
+          { name: this.t('wechat'), icon: 'wechat' },
+          { name: this.t('weibo'), icon: 'weibo' },
+          { name: this.t('qq'), icon: 'qq' },
+        ],
+        [
+          { name: this.t('link'), icon: 'link' },
+          { name: this.t('poster'), icon: 'poster' },
+          { name: this.t('qrcode'), icon: 'qrcode' },
+        ],
+      ];
+    },
+
+    customIconOptions() {
+      return [
+        {
+          name: this.t('name'),
+          icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
+        },
+        {
+          name: this.t('name'),
+          icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
+        },
+        {
+          name: this.t('name'),
+          icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
+        },
+      ];
+    },
   },
 
   methods: {
     onSelect(option) {
       this.$toast(option.name);
-      this.showBasicSheet = false;
+      this.show.basic = false;
-      this.showTitleSheet = false;
+      this.show.withTitle = false;
-      this.showMultiRowSheet = false;
+      this.show.multiLine = false;
+      this.show.customIcon = false;
     },
   },
 };