docs: 修改文档

isMrFan · Aug 1, 2024 · 747a6d6 · 747a6d6
1 parent d3ece18
commit 747a6d6
Show file tree

Hide file tree

Showing 8 changed files with 5,107 additions and 6,026 deletions.
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -36,6 +36,7 @@ export default {
         'box-shadow': '0 0 10px #ccc',
         'text-align': 'center',
         'font-size': '14px',
+        'z-index': '9999',
         color: '#333',
         'line-height': '20px',
         'word-break': 'break-all',

diff --git a/docs/zh/components/DataShow/rate.md b/docs/zh/components/DataShow/rate.md
@@ -1 +1,252 @@
-# rate 评分
+# rate 评分
+
+用于评分或打星
+
+- [源代码](https://github.com/isMrFan/dk-plus-ui/blob/master/packages/components/dkrate/src/rate.vue)
+- [文档编辑](https://github.com/isMrFan/dk-plus-ui/blob/master/docs/zh/components/DataShow/rate.md)
+
+## 1.基本使用
+
+通过 `v-model` 绑定一个值
+
+::: module
+<template #code>
+  <dk-rate v-model="checked"></dk-rate>
+</template>
+
+```vue
+<template>
+  <dk-rate v-model="checked"></dk-rate>
+</template>
+<script>
+  import { defineComponent, reactive, toRefs } from 'vue'
+  export default defineComponent({
+    name: 'RateComp',
+    setup() {
+      const data = reactive({
+        checked: 1
+      })
+      return {
+        ...toRefs(data)
+      }
+    }
+  })
+</script>
+```
+
+:::
+
+## 2.自定义颜色
+
+`select-color` 属性可以配置星星选中时的颜色，`no-select-color`属性可以配置星星未选中时的颜色
+
+::: module
+<template #code>
+  <dk-rate
+    v-model="checked1"
+    :select-color="'red'"
+    :no-select-color="'#26BF8C'">
+  </dk-rate>
+</template>
+
+```vue
+  <template>
+    <dk-rate 
+      v-model="checked1" 
+      :select-color="'red'" 
+      :no-select-color="'#26BF8C'">
+    </dk-rate>
+  </template>
+  <script>
+    import { defineComponent, reactive, toRefs } from 'vue'
+    export default defineComponent({
+      name: 'RateComp',
+      setup() {
+        const data = reactive({
+          checked1: 2
+        })
+        return {
+          ...toRefs(data)
+        }
+      }
+    })
+  </script>
+```
+
+:::
+
+## 3.自定义 icon
+
+`icon` 属性可以自定义 `icon` (目前只支持ICON图标组件库内图标)
+
+::: module
+<template #code>
+  <dk-rate
+    v-model="checked1"
+    :icon="'IconAndroid'"
+  >
+  </dk-rate>
+</template>
+
+```vue
+  <template>
+    <dk-rate 
+      v-model="checked1" 
+      :icon="'IconAndroid'"
+    >
+    </dk-rate>
+  </template>
+  <script>
+    import { defineComponent, reactive, toRefs } from 'vue'
+    export default defineComponent({
+      name: 'RateComp',
+      setup() {
+        const data = reactive({
+          checked1: 2
+        })
+        return {
+          ...toRefs(data)
+        }
+      }
+    })
+  </script>
+```
+
+:::
+
+## 4.图标大小
+
+`iconSize` 属性可以定义ICON 大小
+
+::: module
+<template #code>
+  <dk-rate
+    v-model="checked2"
+    :icon="'IconAndroid'"
+    :iconSize="35"
+  >
+  </dk-rate>
+</template>
+
+```vue
+  <template>
+    <dk-rate 
+      v-model="checked2" 
+      :icon="'IconAndroid'"
+    >
+    </dk-rate>
+  </template>
+  <script>
+    import { defineComponent, reactive, toRefs } from 'vue'
+    export default defineComponent({
+      name: 'RateComp',
+      setup() {
+        const data = reactive({
+          checked2: 2
+        })
+        return {
+          ...toRefs(data)
+        }
+      }
+    })
+  </script>
+```
+
+:::
+
+## 5.是否禁用
+
+`readonly` 评分是否禁用  true | false
+
+::: module
+<template #code>
+  <dk-rate
+    v-model="checked3"
+    :readonly='true'
+  >
+  </dk-rate>
+</template>
+
+```vue
+  <template>
+    <dk-rate 
+      v-model="checked3" 
+      :readonly='true'
+    >
+    </dk-rate>
+  </template>
+  <script>
+    import { defineComponent, reactive, toRefs } from 'vue'
+    export default defineComponent({
+      name: 'RateComp',
+      setup() {
+        const data = reactive({
+          checked3: 2
+        })
+        return {
+          ...toRefs(data)
+        }
+      }
+    })
+  </script>
+```
+
+:::
+
+## 6.监听事件
+
+`onchange` 监听事件
+
+::: module
+<template #code>
+  <dk-rate
+    v-model="checked4"
+    :onchange="setFunctionProps"
+  >
+  </dk-rate>
+</template>
+
+```vue
+  <template>
+    <dk-rate 
+      v-model="checked4" 
+      :onchange="setFunctionProps"
+    >
+    </dk-rate>
+  </template>
+  <script>
+    import { defineComponent, reactive, toRefs } from 'vue'
+    export default defineComponent({
+      name: 'RateComp',
+      setup() {
+        const data = reactive({
+          checked4: 2
+        })
+        const methods = reactive({
+          setFunctionProps(item) {
+           alert(item)
+          }
+        })
+        return {
+          ...toRefs(data),
+          ...toRefs(methods)
+        }
+      }
+    })
+  </script>
+```
+
+:::
+
+<script setup>
+  import { ref } from 'vue'
+  const checked = ref(1)
+  const checked1 = ref(2)
+  const checked2 = ref(2)
+  const checked3 = ref(2)
+  const checked4 = ref(2)
+  const setFunctionProps=(item)=> {
+    console.log(item)
+    alert("你看英杰兄弟,还有宇轩兄弟监听事件生效了当前点击的值是"+item)
+  }
+</script>
diff --git a/docs/zh/components/vueDome/icon/index.vue b/docs/zh/components/vueDome/icon/index.vue
@@ -52,11 +52,6 @@
     justify-content: flex-start;
 
     .box-icon_comp {
-      .icon-name {
-        font-size: 10px;
-        color: var(--vp-c-text-2);
-      }
-
       cursor: pointer;
       display: flex;
       width: 110px;
@@ -66,6 +61,10 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
+      .icon-name {
+        font-size: 10px;
+        color: var(--vp-c-text-2);
+      }
     }
   }
 </style>
diff --git a/packages/components/dkrate/src/rate.vue b/packages/components/dkrate/src/rate.vue
@@ -74,7 +74,7 @@
       <div
         v-for="(item, index) in markList"
         :key="index"
-        :class="['dk-rate_star', { 'dk-rate_star-readonly': readonly }]"
+        :class="['dk-rate_star', { 'dk-rate_star-readonly': readonly },{ 'dk-rate_star_forbidden': readonly }]"
         @mouseout="onMouseout"
         @mouseover="onMouseover(index + 1)"
         @click="handleClick(index + 1)"
@@ -86,7 +86,6 @@
         >
         </dk-icon>
       </div>
-      <div>asdas</div>
     </div>
   </div>
 </template>
diff --git a/packages/theme-chalk/src/dkInputNumber.scss b/packages/theme-chalk/src/dkInputNumber.scss
@@ -44,6 +44,7 @@
 
   .dk-button {
     margin: 0;
+    border: none;
     @include block(box) {
       --button-width: var(--input-number-button-width);
       --button-height: var(--input-number-height);
@@ -59,8 +60,6 @@
         --button-hover-background: transparent;
       }
     }
-
-    border: none;
   }
   @include element(disabled) {
     background-color: var(--input-number-background-color);

diff --git a/packages/theme-chalk/src/dkrate.scss b/packages/theme-chalk/src/dkrate.scss
@@ -19,6 +19,10 @@
         transform: scale(1);
       }
     }
+    .dk-rate_star_forbidden{
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
   }
   // &:hover{
   //   cursor: pointer;

diff --git a/play/views/component/DkRate/DkRate.vue b/play/views/component/DkRate/DkRate.vue
@@ -4,17 +4,40 @@
     name: 'RateComp',
     setup() {
       const data = reactive({
-        checked: 1
+        checked: 1,
+        readonly: true
+      })
+      const methods = reactive({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        setFunctionProps(item: number): void {
+          console.log('item', item)
+          alert(item)
+        }
       })
       return {
+        ...toRefs(methods),
         ...toRefs(data)
       }
     }
   })
 </script>
 <template>
   <div class="box">
-    <p>checked:{{ checked }}</p>
-    <dk-rate v-model="checked" :number-value="5" :icon-size="30"></dk-rate>
+    <div>
+      <p>checked:{{ checked }}</p>
+      <dk-rate v-model="checked"></dk-rate>
+    </div>
+    <div>
+      <p>checked:{{ checked }}</p>
+      <dk-rate v-model="checked" :no-select-color="'yellow'" :select-color="'red'"></dk-rate>
+    </div>
+    <div>
+      <p>checked:{{ checked }}</p>
+      <dk-rate v-model="checked" :readonly="readonly"></dk-rate>
+    </div>
+    <div>
+      <p>checked:{{ checked }}</p>
+      <dk-rate v-model="checked" :no-select-color="'yellow'" :select-color="'red'" :number-value="5" :icon-size="30" :onchange="setFunctionProps"></dk-rate>
+    </div>
   </div>
 </template>