feat: 组件优化

Nice-PLQ · May 23, 2023 · 9c7a97c · 9c7a97c
1 parent a79bcd5
commit 9c7a97c
Show file tree

Hide file tree

Showing 18 changed files with 94 additions and 81 deletions.
diff --git a/docs/intro.md b/docs/intro.md
@@ -1,5 +1,3 @@
-# Vue3 H5 组件库
-
 ## 特性
 
 - 基于 Vue3 构建

diff --git a/site/config.json b/site/config.json
@@ -29,6 +29,11 @@
     "label": "组件",
     "name": "components",
     "children": [
+      {
+        "name": "Avatar",
+        "label": "头像",
+        "type": 2
+      },
       {
         "name": "ActionSheet",
         "label": "动作面板",

diff --git a/site/docs/config.js b/site/docs/config.js
@@ -24,11 +24,11 @@ export default [
     label: '贡献代码',
     component: () => import('@docs/contribute.md'),
   },
-  // {
-  //   name: 'Avatar',
-  //   label: '头像',
-  //   component: () => import('@/avatar/README.md'),
-  // },
+  {
+    name: 'Avatar',
+    label: '头像',
+    component: () => import('@/avatar/README.md'),
+  },
   {
     name: 'ActionSheet',
     label: '动作面板',

diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue
@@ -21,13 +21,13 @@
       />
     </demo-doc>
     <demo-doc title="设置菜单项的文本颜色">
-      <v-button @click="visible2 = true" type="primary" style="margin-bottom: 16px;">文本颜色</v-button>
+      <v-button @click="visible2 = true" type="primary" class="m-r-4">文本颜色</v-button>
       <v-button @click="visible3 = true" type="primary">单独项文本颜色</v-button>
       <v-action-sheet v-model="visible2" :items="items2" showCancel @select="handleSelect" />
       <v-action-sheet v-model="visible3" :items="items3" showCancel @select="handleSelect" />
     </demo-doc>
     <demo-doc title="带选择图标">
-      <v-button @click="visible4 = true" type="primary">多选</v-button>
+      <v-button @click="visible4 = true" type="primary" class="m-r-4">多选</v-button>
       <v-button @click="visible5 = true" type="primary">单选</v-button>
       <v-action-sheet
         title="ActionSheet标题"
@@ -47,7 +47,7 @@
       />
     </demo-doc>
      <demo-doc title="自定义插槽">
-      <v-button @click="visible6 = true" type="primary">自定义标题</v-button>
+      <v-button @click="visible6 = true" type="primary" class="m-r-4">自定义标题</v-button>
       <v-button @click="visible7 = true" type="primary">自定义选项</v-button>
       <v-action-sheet
         v-model="visible6"

diff --git a/src/avatar/README.md b/src/avatar/README.md
@@ -4,58 +4,63 @@
 
 #### 1、单一头像
 
-通过 uin（即 qq）或 url 属性可以设置头像
+通过 color 设置默认头像的颜色，也可以设置 url 来自定义头像
 
 ```html
-<v-avatar uin="2647439500" />
-<v-avatar
-  url="https://qzonestyle.gtimg.cn/aoi/sola/20200314113311_co3AxlROWA.png"
-/>
-```
-
-#### 2、群头像
-
-`group`属性标识头像为群头像，此时`uin`为群号
-
-```html
-<v-avatar uin="325710777" group />
+<v-avatar />
+<v-avatar color="blue" />
+<v-avatar url="https://path/to/avatar/url" />
 ```
 
 #### 3、设置头像大小
 
 通过`size`字段设置头像的大小，单位是 px
 
 ```html
-<v-avatar uin="2647439600" size="28px" />
+<v-avatar size="28px" />
 ```
 
 #### 4、头像集合
 
-可以同时设置最多 4 个头像显示，与此同时头像也会被缩放
+可以同时设置 2 - 4 个头像显示，与此同时头像也会被缩放
 
 ```html
-<v-avatar size="28px" :uin="[2647439700, 2647439800]" />
-<v-avatar size="28px" :uin="[2647439500, 2647439600, 2647439800]" />
-<v-avatar size="28px" :uin="[2647439500, 2647439600, 2647439700, 2647439800]" />
+<v-avatar
+  size="28px"
+  :url="[
+    'https://path/to/avatar/url_1',
+    'https://path/to/avatar/url_2',
+    'https://path/to/avatar/url_3',
+    'https://path/to/avatar/url_4', 
+  ]"
+/>
 ```
 
 #### 5、轮播头像
 
 同时设置多个头像时，可以让头像滚动播放起来
 
 ```html
-<v-avatar size="28px" :uin="[2647439500, 2647439600, 2647439700, 2647439800, 2647439900]" carousel />
+<v-avatar
+  size="28px"
+  :url="[
+    'https://path/to/avatar/url_1',
+    'https://path/to/avatar/url_2',
+    'https://path/to/avatar/url_3',
+    'https://path/to/avatar/url_4', 
+  ]"
+  carousel
+/>
 ```
 
 ## Props
 
-| 属性     | 说明                 | 类型                                    | 默认值  |
-| -------- | -------------------- | --------------------------------------- | ------- |
-| uin      | qq 号                | _string_ &#124; _number_ &#124; _array_ | -       |
-| url      | 头像的 url 链接      | _string_ &#124; _array_                 | -       |
-| group    | 是否为群头像         | _boolean_                               | `false` |
-| size     | 头像大小（单位: px） | _string_                                | `20px`  |
-| carousel | 是否为轮播头像（仅当uin或url长度大于1时生效） | _boolean_            | `false`  |
+| 属性     | 说明                                                | 类型                    | 默认值  |
+| -------- | --------------------------------------------------- | ----------------------- | ------- |
+| url      | 头像的 url 链接                                     | _string_ &#124; _array_ | -       |
+| color    | 默认头像的颜色                                      | _string_                | -       |
+| size     | 头像大小（单位: px）                                | _string_                | `20px`  |
+| carousel | 是否为轮播头像（仅当 uin 或 url 长度大于 1 时生效） | _boolean_               | `false` |
 
 ## Event
 

diff --git a/src/avatar/avatar.vue b/src/avatar/avatar.vue
@@ -5,7 +5,12 @@
     @click="onClick"
   >
     <template v-if="!isCarousel">
-      <img v-for="(avatar, index) in avatars" :key="index" :src="avatar" />
+      <template v-if="avatars.length" >
+        <img v-for="(avatar, index) in avatars" :key="index" :src="avatar" />
+      </template>
+      <svg v-else viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" :style="{color}">
+        <path d="M512 928C282.8 928 97.1 742.2 97.1 513.1S282.8 98.2 512 98.2 926.9 284 926.9 513.1 741.2 928 512 928z m217.3-177.9c10.9 0 19.8-7.6 19.8-17V614.9C749.1 547 591.1 513 512 513s-237.1 34-237.1 101.9v118.3c0 9.3 8.8 17 19.7 17l434.7-0.1zM512 453.8c65.5 1.4 119.6-50.6 121-116.1 1.4-65.5-50.6-119.6-116.1-121h-5c-65.5 1.4-117.4 55.6-116.1 121 1.5 63.6 52.7 114.8 116.2 116.1z" fill="currentColor"></path>
+      </svg>
     </template>
     <template v-else>
       <transition-group name="horizon-fade-zoom">
@@ -17,7 +22,7 @@
         />
       </transition-group>
     </template>
-    <slot />
+    <slot></slot>
   </div>
 </template>
 
@@ -40,6 +45,11 @@ export default defineComponent({
      * @attribute size
      */
     size: String,
+    /**
+     * @description 默认头像颜色
+     * @attribute color
+     */
+    color: String,
     /**
      * @description 是否为轮播头像
      * @attribute carousel
@@ -58,7 +68,11 @@ export default defineComponent({
 
     const avatars = computed(() => {
       const { url } = props;
-      return Array.isArray(url) ? url : [url];
+      if (url) {
+        return Array.isArray(url) ? url : [url];
+      }
+
+      return [];
     });
 
     const isCarousel = computed(() => (count.value > 1 && props.carousel));

diff --git a/src/avatar/demo/index.vue b/src/avatar/demo/index.vue
@@ -1,36 +1,25 @@
 <template>
   <div>
     <demo-doc title="单一头像">
-      <v-avatar uin="2647439500" />
-      <v-avatar url="https://qzonestyle.gtimg.cn/aoi/sola/20200314113311_co3AxlROWA.png" />
-    </demo-doc>
-    <demo-doc title="群头像">
-      <v-avatar group uin="325710777" />
+      <v-avatar  />
+      <v-avatar color="var(--brand-standard)" />
     </demo-doc>
     <demo-doc title="设置头像大小">
       <ul class="avatar-list">
         <li>
-          <v-avatar uin="2647439600" />
+          <v-avatar />
           <p>默认大小</p>
         </li>
         <li>
-          <v-avatar uin="2647439600" size="28px" />
+          <v-avatar size="28px" />
           <p>28px</p>
         </li>
         <li>
-          <v-avatar uin="2647439800" size="36px" />
+          <v-avatar size="36px" />
           <p>36px</p>
         </li>
       </ul>
     </demo-doc>
-    <demo-doc title="多个头像合集">
-      <v-avatar size="28px" :uin="[2647439700, 2647439800]" />
-      <v-avatar size="28px" :uin="[2647439500, 2647439600, 2647439800]" />
-      <v-avatar size="28px" :uin="[2647439500, 2647439600, 2647439700, 2647439800]" />
-    </demo-doc>
-    <demo-doc title="轮播头像">
-      <v-avatar size="28px" :uin="[2647439500, 2647439600, 2647439700, 2647439800, 2647439900]" carousel />
-    </demo-doc>
   </div>
 </template>
 

diff --git a/src/checkbox/demo/index.vue b/src/checkbox/demo/index.vue
@@ -34,9 +34,9 @@
     </demo-doc>
     <demo-doc title="多选组合（纵向）">
       <v-checkbox-group v-model="checkList1" vertical>
-        <v-checkbox value="month">一个月</v-checkbox>
-        <v-checkbox value="quarter">一个季</v-checkbox>
-        <v-checkbox value="year">一年</v-checkbox>
+        <v-checkbox value="aa">多选A</v-checkbox>
+        <v-checkbox value="bb">多选B</v-checkbox>
+        <v-checkbox value="cc">多选C</v-checkbox>
       </v-checkbox-group>
     </demo-doc>
   </div>
@@ -52,7 +52,7 @@ export default {
       checked4: true,
       checked5: true,
       checkList: ['b'],
-      checkList1: ['month']
+      checkList1: ['aa']
     };
   },
   watch: {

diff --git a/src/divider/README.md b/src/divider/README.md
@@ -15,7 +15,8 @@
 需要注意的是，若要自定义分割线的高度，需要基于粗分割线基础上自定义
 
 ```html
-<v-divider color="blue" /> <v-divider type="bold" height="24px" />
+<v-divider color="blue" />
+<v-divider type="bold" height="24px" />
 ```
 
 ## Props

diff --git a/src/input/demo/index.vue b/src/input/demo/index.vue
@@ -118,7 +118,7 @@
       </v-input-group>
     </demo-doc>
 
-    <demo-doc title="实时报错" class="m-b-16">
+    <demo-doc title="实时报错" class="p-b-16">
       <v-input
         is-error
         show-clear

diff --git a/src/nav-bar/demo/index.vue b/src/nav-bar/demo/index.vue
@@ -12,19 +12,19 @@
         标题
         <template v-slot:left>
           <button style="display: flex; align-items: center;">
-            <v-icon name="left" size="18px" />
-            <v-badge type="capsule" background-color="rgba(255, 255, 255, .2)">99+</v-badge>
+            <v-icon name="ArrowLeft" />
+            <v-badge type="capsule">99+</v-badge>
           </button>
         </template>
       </v-nav-bar>
       <v-nav-bar style="margin-top: 8px;">
         标题
         <template v-slot:left>
-          <v-avatar uin="595527134" size="14px" />
+          <v-avatar size="14px" />
         </template>
         <template v-slot:right>
           <button title="分享">
-            <v-icon name="share" size="18px" />
+            <v-icon name="Share" size="18px" />
           </button>
         </template>
       </v-nav-bar>

diff --git a/src/notice-bar/demo/index.vue b/src/notice-bar/demo/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="notice-bar-demo">
-    <demo-document title="入口型">
+    <demo-doc title="入口型">
       <v-notice-bar @click="click" right-icon-type="right">这是一段超长的提示文本，超长的部分将会自动隐藏</v-notice-bar>
       <v-notice-bar @click="click" type="warning" right-icon-type="right">网络出现异常，请检查。</v-notice-bar>
       <v-notice-bar @click="click" type="info" right-icon-type="right">
@@ -9,9 +9,9 @@
           <v-icon name="Mail" color="#8e8e8e" />
         </template>
       </v-notice-bar>
-    </demo-document>
+    </demo-doc>
 
-    <demo-document title="可关闭型">
+    <demo-doc title="可关闭型">
       <v-notice-bar @click="click" right-icon-type="close">这是一段超长的提示文本，超长的部分将会自动隐藏</v-notice-bar>
       <v-notice-bar @click="click" type="warning" right-icon-type="close">网络出现异常，请检查。</v-notice-bar>
       <v-notice-bar @click="click" type="info" right-icon-type="close">
@@ -20,9 +20,9 @@
           <v-icon name="Mail" color="#8e8e8e" />
         </template>
       </v-notice-bar>
-    </demo-document>
+    </demo-doc>
 
-    <demo-document title="带操作型">
+    <demo-doc title="带操作型" class="p-b-16">
       <v-notice-bar
         right-icon-type="close"
         right-text="去设置"
@@ -52,7 +52,7 @@
           <v-icon name="Mail" color="#8e8e8e" />
         </template>
       </v-notice-bar>
-    </demo-document>
+    </demo-doc>
   </div>
 </template>
 
@@ -77,6 +77,6 @@ export default {
 <style lang="less">
 @import "../../style/var.less";
 .@{prefix}-notice {
-  margin: 0 -16px 16px;
+  margin: 16px -16px 0;
 }
 </style>
diff --git a/src/radio/demo/index.vue b/src/radio/demo/index.vue
@@ -9,9 +9,9 @@
     </demo-doc>
     <demo-doc title="纵向排列">
       <v-radio-group v-model="privance" vertical>
-        <v-radio value="gd">广东省</v-radio>
-        <v-radio value="zj">浙江省</v-radio>
-        <v-radio value="sd">山东省</v-radio>
+        <v-radio value="aa">选项A</v-radio>
+        <v-radio value="bb">选项B</v-radio>
+        <v-radio value="cc">选项C</v-radio>
       </v-radio-group>
     </demo-doc>
     <demo-doc title="设置选中背景色">
@@ -45,7 +45,7 @@ export default {
       checked4: true,
       checked5: true,
       selected: 'b',
-      privance: 'gd'
+      privance: 'aa'
     };
   },
   watch: {

diff --git a/src/style/avatar.less b/src/style/avatar.less
@@ -10,8 +10,8 @@
   width: 2em;
   height: 2em;
   border-radius: var(--avatar-border-radius);
-  background: url(https://static-res.qq.com/static-res/q-ui/avatar.png) no-repeat;
-  background-size: contain;
+  // background: url(https://static-res.qq.com/static-res/q-ui/avatar.png) no-repeat;
+  // background-size: contain;
   overflow: hidden;
   display: inline-flex;
   flex-shrink: 0;

diff --git a/src/style/button.less b/src/style/button.less
@@ -38,7 +38,8 @@
   --button-bg-primary-disable: rgba(0, 102, 204, 0.5);
   --button-bg-secondary-pressed: rgba(61, 61, 61, 0.6);
   --button-bg-error-pressed: rgba(61, 61, 61, 0.6);
-  --button-bg-gray-pressed: rgba(61, 61, 61, 0.6);
+  --button-bg-gray-default: rgba(61, 61, 61, 0.5);
+  --button-bg-gray-pressed: rgba(61, 61, 61, 0.8);
   --button-border-secondary-default: #3d3d3d;
   --button-border-error-default: #3d3d3d;
   --button-text-secondary-default: #fff;