feat: cell

src/packages/cell/demo.vue

@@ -5,22 +5,14 @@
     <nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
     <h2>链接</h2>
     <nut-cell title="链接" is-link></nut-cell>
-    <nut-cell title="URL 跳转" is-link url="https://jd.com"></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 插槽来自定义标题 -->
-      <template #title>
-        <span class="custom-title">单元格</span>
-      </template>
-    </nut-cell>
   </div>
 </template>
 
 <script lang="ts">
 import Cell from '@/packages/cell/index.vue';
 import { createComponent } from '@/utils/create';
-import { ref } from 'vue';
 const { createDemo } = createComponent('cell');
 export default createDemo({
   props: {},

src/packages/cell/index.scss

@@ -1,4 +1,5 @@
 .nut-cell {
+  position: relative;
   display: flex;
   width: 100%;
   line-height: 20px;
@@ -9,6 +10,20 @@
   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;
   }

src/packages/cell/index.vue

@@ -9,14 +9,13 @@
         {{ title }}
       </template>
     </view>
-    <view class="nut-cell__value">{{ desc }}</view>
+    <view v-if="desc" class="nut-cell__value">{{ desc }}</view>
     <nut-icon v-if="isLink || to" name="right"></nut-icon>
-    <slot></slot>
   </view>
 </template>
 
 <script lang="ts">
-import { toRefs, computed, PropType } from 'vue';
+import { toRefs, computed } from 'vue';
 import { createComponent } from '@/utils/create';
 import { useRouter } from 'vue-router';
 import Icon from '@/packages/icon/index.vue';
@@ -36,7 +35,7 @@ export default create({
     [Icon.name]: Icon
   },
   emits: ['click'],
-  setup(props, { emit, slots }) {
+  setup(props, { emit }) {
     const { title, to, desc, subTitle, isLink, url, replace } = toRefs(props);
     const classes = computed(() => {
       const prefixCls = componentName;
@@ -50,11 +49,10 @@ export default create({
 
     const handleClick = (event: Event) => {
       emit('click', event);
-      debugger;
       if (to.value && router) {
-        router[replace ? 'replace' : 'push'](to.value);
+        router[replace.value ? 'replace' : 'push'](to.value);
       } else if (url.value) {
-        replace ? location.replace(url.value) : (location.href = url.value);
+        replace.value ? location.replace(url.value) : (location.href = url.value);
       }
     };
 

src/packages/icon/index.vue

@@ -15,7 +15,7 @@ export default create({
   },
   components: {},
   emits: ['click'],
-  setup(props, { emit, slots }) {
+  setup(props, { emit }) {
     const { name } = toRefs(props);
     const classes = computed(() => {
       const prefixCls = componentName;
@@ -31,7 +31,6 @@ export default create({
     return {
       handleClick,
       name,
-
       classes
     };
   }