feat: (Cell) desc-text-align

src/packages/cell/demo.vue

@@ -3,10 +3,15 @@
     <h2>基本用法</h2>
     <nut-cell title="我是标题" desc="描述文字"></nut-cell>
     <nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
+    <nut-cell title="点击测试" @click="testClick"></nut-cell>
     <h2>链接</h2>
     <nut-cell title="链接" is-link></nut-cell>
     <nut-cell title="URL 跳转" desc="https://jd.com" is-link url="https://jd.com"></nut-cell>
     <nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
+    <h2>展示图标</h2>
+    <nut-cell title="姓名" icon="my" desc="张三"></nut-cell>
+    <h2>只展示 desc ，可通过 desc-text-align 调整内容位置</h2>
+    <nut-cell desc-text-align="left" desc="张三"></nut-cell>
   </div>
 </template>
 
@@ -15,7 +20,12 @@ import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('cell');
 export default createDemo({
   props: {},
-  emits: ['click']
+  setup() {
+    const testClick = (event: Event) => {
+      alert(event);
+    };
+    return { testClick };
+  }
 });
 </script>
 

src/packages/cell/doc.md

@@ -19,14 +19,62 @@ app.use(Cell);
 
 ### 基本用法
 
-Cell `to` 有值的时候，跳转路由，`click-cell` 点击 `cell`触发事件
+``` html
+<nut-cell title="我是标题" desc="描述文字"></nut-cell>
+<nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
+<nut-cell title="点击测试" @click="testClick"></nut-cell>
+```
 
 ``` javascript
-console.log('');
+// ...
+setup() {
+    const testClick = (event) => {
+      alert(event);
+    };
+    return { testClick };
+}
+// ...
+```
+
+### 链接
+
+``` html
+<nut-cell title="链接" is-link></nut-cell>
+<nut-cell title="URL 跳转" desc="https://jd.com" is-link url="https://jd.com"></nut-cell>
+<nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
 ```
 
-### 单元格大小
+### 单元格展示图标
+
+``` html
+<nut-cell title="姓名" icon="my" desc="张三"></nut-cell>
+```
+### 只展示 desc ，可通过 desc-text-align 调整内容位置
+
+``` html
+<nut-cell desc-text-align="left" desc="张三"></nut-cell>
+```
+
+## API
+
+### Prop
+
+| 字段            | 说明                                                                                           | 类型    | 默认值  |
+|-----------------|------------------------------------------------------------------------------------------------|---------|---------|
+| title           | 标题名称                                                                                       | String  | ""      |
+| sub-title        | 左侧副标题                                                                                     | String  | ""      |
+| desc            | 右侧描述                                                                                       | String  | ""      |
+| desc-text-align | 右侧描述文本对齐方式 [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp)   | String  | "right" |
+| is-link         | 是否展示右侧箭头并开启点击反馈                                                                 | Boolean | false   |
+| icon            | 左侧 [图标名称](#/icon) 或图片链接                                                             | String  | ""      |
+| url             | 点击后跳转的链接地址                                                                           | String  | ""      |
+| to              | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String  | ""      |
+| replace         | 是否在跳转时替换当前页面历史                                                                   | Boolean | false   |
 
+### Event
 
+| 名称  | 说明     | 回调参数    |
+|-------|----------|-------------|
+| click | 点击事件 | event:Event |
 
 

src/packages/cell/index.scss

@@ -10,31 +10,37 @@
   font-size: $cell-title-font;
   color: $cell-color;
   margin: 10px 0;
-  &::before {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    height: 100%;
-    background-color: $black;
-    border: inherit;
-    border-color: $black;
-    border-radius: inherit;
-    transform: translate(-50%, -50%);
-    opacity: 0;
-    content: ' ';
-  }
   &:active::before {
     opacity: 0.1;
   }
   &--clickable {
     cursor: pointer;
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      height: 100%;
+      background-color: $black;
+      border: inherit;
+      border-color: $black;
+      border-radius: inherit;
+      transform: translate(-50%, -50%);
+      opacity: 0;
+      content: ' ';
+    }
   }
 
   &__title {
     display: flex;
     flex-direction: column;
     flex: 1;
+    &.icon {
+      flex-direction: row;
+      .icon {
+        margin-right: 10px;
+      }
+    }
     &-desc {
       font-size: $cell-title-desc-font;
     }

src/packages/cell/index.vue

@@ -1,7 +1,8 @@
 <template>
   <view :class="classes" @click="handleClick">
     <slot>
-      <view class="nut-cell__title">
+      <view class="nut-cell__title" :class="{ icon: icon }" v-if="title || subTitle || icon">
+        <nut-icon v-if="icon" class="icon" :name="icon"></nut-icon>
         <template v-if="subTitle">
           <view class="title">{{ title }}</view>
           <view class="nut-cell__title-desc">{{ subTitle }}</view>
@@ -10,7 +11,7 @@
           {{ title }}
         </template>
       </view>
-      <view v-if="desc" class="nut-cell__value">{{ desc }}</view>
+      <view v-if="desc" class="nut-cell__value" :style="{ 'text-align': descTextAlign }">{{ desc }}</view>
       <nut-icon v-if="isLink || to" size="14px" color="#979797" name="right"></nut-icon>
     </slot>
   </view>
@@ -28,44 +29,38 @@ export default create({
     title: { type: String, default: '' },
     subTitle: { type: String, default: '' },
     desc: { type: String, default: '' },
+    descTextAlign: { type: String, default: 'right' },
     isLink: { type: Boolean, default: false },
     to: { type: String, default: '' },
     replace: { type: Boolean, default: false },
-    url: { type: String, default: '' }
+    url: { type: String, default: '' },
+    icon: { type: String, default: '' }
   },
   components: {
     [Icon.name]: Icon
   },
   emits: ['click'],
   setup(props, { emit }) {
-    const { title, to, desc, subTitle, isLink, url, replace } = toRefs(props);
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [`${prefixCls}--clickable`]: isLink.value || to
+        [`${prefixCls}--clickable`]: props.isLink || props.to
       };
     });
-
     const router = useRouter();
-
     const handleClick = (event: Event) => {
       emit('click', event);
-      if (to.value && router) {
-        router[replace.value ? 'replace' : 'push'](to.value);
-      } else if (url.value) {
-        replace.value ? location.replace(url.value) : (location.href = url.value);
+      if (props.to && router) {
+        router[props.replace ? 'replace' : 'push'](props.to);
+      } else if (props.url) {
+        props.replace ? location.replace(props.url) : (location.href = props.url);
       }
     };
 
     return {
       handleClick,
-      title,
-      to,
-      subTitle,
-      desc,
-      classes,
-      isLink
+      classes
     };
   }
 });