feat(cell): add round-radius prop #547

src/config.json

@@ -115,7 +115,6 @@
           "version": "3.0.0",
           "name": "Cell",
           "taro": true,
-          "tarodoc": true,
           "sort": 1,
           "cName": "单元格",
           "type": "component",
@@ -133,7 +132,6 @@
           "desc": "展示分组列表",
           "author": "richard1015"
         },
-        
         {
           "version": "3.0.0",
           "name": "Icon",
@@ -156,7 +154,6 @@
           "desc": "价格组件",
           "author": "ailululu"
         },
-       
         {
           "version": "3.0.0",
           "name": "OverLay",
@@ -325,7 +322,6 @@
           "show": false,
           "author": "yangxiaolu3"
         },
-    
         {
           "version": "3.0.0",
           "name": "Video",
@@ -413,7 +409,6 @@
           "desc": "轻提示",
           "author": "undo"
         }
-       
       ]
     },
     {
@@ -682,4 +677,4 @@
       ]
     }
   ]
-}
+}

src/packages/__VUE/cell/demo.vue

@@ -8,6 +8,7 @@
       desc="描述文字"
     ></nut-cell>
     <nut-cell title="点击测试" @click="testClick"></nut-cell>
+    <nut-cell title="圆角设置 0" round-radius="0"></nut-cell>
 
     <h2>直接使用插槽(slot)</h2>
 

src/packages/__VUE/cell/doc.md

@@ -8,10 +8,10 @@
 
 ``` javascript
 import { createApp } from 'vue';
-import { Cell } from '@nutui/nutui';
+import { Cell,Icon } from '@nutui/nutui';
 
 const app = createApp();
-app.use(Cell);
+app.use(Cell).use(Icon);
 
 ```
 
@@ -23,6 +23,7 @@ app.use(Cell);
 <nut-cell title="我是标题" desc="描述文字"></nut-cell>
 <nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
 <nut-cell title="点击测试" @click="testClick"></nut-cell>
+<nut-cell title="圆角设置 0" round-radius="0"></nut-cell>
 ```
 
 ``` javascript
@@ -87,17 +88,18 @@ export default {
 
 ### 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  |
+| 字段                   | 说明                                                                                           | 类型    | 默认值 |
+|------------------------|------------------------------------------------------------------------------------------------|---------|--------|
+| 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  | -      |
+| round-radius           | 圆角半径                                                                                       | Number  | 6px    |
+| url `小程序不支持`     | 点击后跳转的链接地址                                                                           | String  | -      |
+| to   `小程序不支持`    | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String  | -      |
+| replace `小程序不支持` | 是否在跳转时替换当前页面历史                                                                   | Boolean | false  |
 
 ### Event
 

src/packages/__VUE/cell/doc.taro.md

@@ -1,104 +0,0 @@
-# Cell 单元格
-
-### 介绍
-
-列表项，可组成列表。
-
-### 安装
-
-``` javascript
-import { createApp } from 'vue';
-import { Cell } from '@nutui/nutui-taro';
-
-const app = createApp();
-app.use(Cell);
-
-```
-
-## 代码示例
-
-### 基本用法
-
-``` html
-<nut-cell title="我是标题" desc="描述文字"></nut-cell>
-<nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
-<nut-cell title="点击测试" @click="testClick"></nut-cell>
-```
-
-``` javascript
-// ...
-import { ref } from 'vue';
-export default {
-  setup() {
-      const switchChecked = ref(true);
-      const testClick = (event) => {
-        console.log('点击事件')
-      };
-      return { testClick,switchChecked };
-  }
-}
-// ...
-```
-
-### 直接使用插槽
-
-``` html
- <nut-cell title="我是标题" desc="描述文字">
-  <div>自定义内容</div>
- </nut-cell>  
-```
-
-### 链接 | 分组用法
-
-``` html
-<nut-cell-group title="链接 | 分组用法">
-  <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>
-</nut-cell-group>
-```
-
-### 自定义右侧箭头区域
-
-``` html
-<nut-cell-group title="自定义右侧箭头区域">
-  <nut-cell title="Switch">
-    <template v-slot:link>
-      <nut-switch v-model="switchChecked" />
-    </template>
-  </nut-cell>
-</nut-cell-group>
-```
-
-
-### 单元格展示图标
-
-``` 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  | -      |
-
-### Event
-
-| 名称  | 说明     | 回调参数    |
-|-------|----------|-------------|
-| click | 点击事件 | event:Event |
-
-

src/packages/__VUE/cell/index.taro.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" @click="handleClick">
+  <view :class="classes" :style="baseStyle" @click="handleClick">
     <slot>
       <view
         class="nut-cell__title"
@@ -37,6 +37,7 @@ import { computed } from 'vue';
 import { createComponent } from '../../utils/create';
 import { useRouter } from 'vue-router';
 import CellGroup from '../cellgroup/index.vue';
+import { pxCheck } from '../../utils/pxCheck';
 const { componentName, create } = createComponent('cell');
 export default create({
   children: [CellGroup],
@@ -48,6 +49,7 @@ export default create({
     isLink: { type: Boolean, default: false },
     to: { type: String, default: '' },
     replace: { type: Boolean, default: false },
+    roundRadius: { type: [String, Number], default: '' },
     url: { type: String, default: '' },
     icon: { type: String, default: '' }
   },
@@ -64,6 +66,13 @@ export default create({
       };
     });
     const router = useRouter();
+
+    const baseStyle = computed(() => {
+      return {
+        borderRadius: pxCheck(props.roundRadius)
+      };
+    });
+
     const handleClick = (event: Event) => {
       emit('click', event);
 
@@ -83,7 +92,8 @@ export default create({
 
     return {
       handleClick,
-      classes
+      classes,
+      baseStyle
     };
   }
 });

src/packages/__VUE/cell/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" @click="handleClick">
+  <view :class="classes" :style="baseStyle" @click="handleClick">
     <slot>
       <view
         class="nut-cell__title"
@@ -35,8 +35,9 @@
 <script lang="ts">
 import { computed } from 'vue';
 import { createComponent } from '../../utils/create';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import CellGroup from '../cellgroup/index.vue';
+import { pxCheck } from '@/packages/utils/pxCheck';
 const { componentName, create } = createComponent('cell');
 export default create({
   props: {
@@ -47,6 +48,7 @@ export default create({
     isLink: { type: Boolean, default: false },
     to: { type: String, default: '' },
     replace: { type: Boolean, default: false },
+    roundRadius: { type: [String, Number], default: '' },
     url: { type: String, default: '' },
     icon: { type: String, default: '' }
   },
@@ -64,6 +66,13 @@ export default create({
       };
     });
     const router = useRouter();
+
+    const baseStyle = computed(() => {
+      return {
+        borderRadius: pxCheck(props.roundRadius)
+      };
+    });
+
     const handleClick = (event: Event) => {
       emit('click', event);
 
@@ -83,7 +92,8 @@ export default create({
 
     return {
       handleClick,
-      classes
+      classes,
+      baseStyle
     };
   }
 });

src/packages/styles/variables.scss

@@ -100,7 +100,7 @@ $cell-title-font: $font-size-2;
 $cell-title-desc-font: $font-size-1;
 $cell-desc-font: $font-size-2;
 $cell-desc-color: $disable-color;
-$cell-border-radius: 7px;
+$cell-border-radius: 6px;
 
 // cell-group
 

src/sites/mobile-taro/vue/src/base/pages/cell/index.vue

@@ -8,6 +8,7 @@
       desc="描述文字"
     ></nut-cell>
     <nut-cell title="点击测试" @click="testClick"></nut-cell>
+    <nut-cell title="圆角设置 0" round-radius="0"></nut-cell>
 
     <h2>直接使用插槽(slot)</h2>