init

.svn/pristine/58/5820d9a355eaa1cf3250af1ab73f5cf09fc8265a.svn-base

@@ -0,0 +1,20 @@
+<script lang="ts">
+export default {
+  name: "UploadCircleIcon",
+};
+</script>
+<script setup lang="ts">
+import LayIcon from "../component/icon/index";
+
+const props = defineProps<{
+  color?: string;
+  size?: string;
+}>();
+</script>
+<template>
+  <lay-icon
+    :color="props.color"
+    :size="props.size"
+    type="layui-icon-upload-circle"
+  />
+</template>

.svn/pristine/58/5836b384bec1f448e9091b54f5cda29f099f12bd.svn-base

@@ -0,0 +1,37 @@
+.lay-page-header{
+  display: flex;
+  line-height: 24px;
+}
+.lay-page-header__left {
+  display: flex;
+  cursor: pointer;
+  margin-right: 40px;
+  position: relative;
+  color: var(--global-neutral-color-8);
+}
+.lay-page-header__left:after {
+  content: "";
+  position: absolute;
+  width: 1px;
+  height: 16px;
+  right: -20px;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: var(--global-neutral-color-8);
+}
+.lay-page-header__left:hover .layui-icon-return ,.lay-page-header__left:hover .lay-page-header__title{
+  color: var(--global-checked-color) !important;
+}
+
+.lay-page-header__left .layui-icon-return {
+  font-size: 14px;
+  margin-right: 6px;
+  align-self: center;
+}
+.lay-page-header__title {
+  font-size: 14px;
+}
+.lay-page-header__content {
+  font-size: 18px;
+  color: #393D49;
+}

.svn/pristine/58/583dc05dae754e1bdb9e3011dc47071a3ed9287a.svn-base

@@ -0,0 +1,20 @@
+<script lang="ts">
+export default {
+  name: "ShrinkRightIcon",
+};
+</script>
+<script setup lang="ts">
+import LayIcon from "../component/icon/index";
+
+const props = defineProps<{
+  color?: string;
+  size?: string;
+}>();
+</script>
+<template>
+  <lay-icon
+    :color="props.color"
+    :size="props.size"
+    type="layui-icon-shrink-right"
+  />
+</template>

.svn/pristine/58/58c517b6c5785ca7532aa7ebe67f4f98a3159293.svn-base

@@ -0,0 +1 @@
+export declare function nextId(): any;

.svn/pristine/58/58f881e4a3f947a7585bc1099fcad9ecae669175.svn-base

@@ -0,0 +1,353 @@
+::: anchor
+:::
+
+::: title 基本介绍
+:::
+
+::: describe 在电商和 O2O 平台尤为常见，常用于对商家进行服务满意度评价。
+:::
+
+::: title 基础使用
+:::
+
+::: demo 使用 `lay-rate` 标签, 创建评分组件
+
+<template>
+  <lay-rate v-model="all1"></lay-rate>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+
+export default {
+  setup() {
+
+     const all1 = ref(0)
+
+    onMounted(() => {
+      all1.value = 4
+    })
+
+    return {
+      all1
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 显示文字
+:::
+
+::: demo
+
+<template>
+  <lay-rate v-model="all" :text="true"></lay-rate>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const all = ref(4)
+
+    return {
+      all
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 半星效果
+:::
+
+::: demo
+
+<template>
+    <lay-rate v-model="half1" :half="true" :is-block="true"></lay-rate>
+    <lay-rate v-model="half2" :half="true" :text="true" :is-block="true"></lay-rate>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+
+     const half1 = ref(0.5)
+     const half2 = ref(0)
+
+
+    return {
+      half1,
+      half2
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 清除功能
+:::
+
+::: demo
+
+<template>
+    <lay-rate v-model="clearHalf" :half="true" :is-block="true" allow-clear></lay-rate>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const clearHalf = ref(0.5)
+    return {
+      clearHalf
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 自定义内容
+:::
+
+::: demo
+
+<template>
+  <lay-rate v-model="val" :text="true" :is-block="true">
+    <template v-slot:default="{value}">{{customText(value)}}</template>
+  </lay-rate>
+  <lay-rate v-model="val2" :text="true" :is-block="true">
+    <template v-slot:default="{value}">{{value}}</template>
+  </lay-rate>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+
+    const val = ref(1)
+    const val2 = ref(1)
+    const arrs = {
+        '1': '极差',
+        '2': '差',
+        '3': '中等',
+        '4': '好',
+        '5': '极好'
+    };
+    const customText = function(val){
+      return arrs[val];
+    }
+    return {
+      val,
+      val2
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 指定长度
+:::
+
+::: demo
+
+<template>
+  <lay-rate v-model="all2" :length="length"></lay-rate>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+
+    const all2 = ref(4);
+    const length = ref(10)
+
+    return {
+      all2,
+      length
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 触发事件
+:::
+
+::: demo
+
+<template>
+  <lay-rate v-model="val" @select="selectRate"></lay-rate>
+  <div>F12 打开调试工具 -> console 控制面板进行查看</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+
+    const val = ref(0);
+    const selectRate = function(value){
+      console.log('selectRate - value:', value)
+    }
+
+    return {
+      val
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 只读模式
+:::
+
+::: demo
+
+<template>
+  <lay-rate v-model="all3" readonly="true"></lay-rate>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+
+    const all3 = ref(4)
+
+    return {
+      all3
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 定义主题
+:::
+
+::: demo
+
+<template>
+  <lay-rate v-model="all4" theme="#FF8000"></lay-rate><br>
+  <lay-rate v-model="all4" theme="#009688"></lay-rate><br>
+  <lay-rate v-model="all4" theme="#1E9FFF"></lay-rate><br>
+  <lay-rate v-model="all4" theme="#2F4056"></lay-rate><br>
+  <lay-rate v-model="all4" theme="#FE0000"></lay-rate><br>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+
+    const all4 = ref(4)
+
+    return {
+      all4
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 自定义图标
+:::
+
+::: demo
+
+<template>
+  <lay-rate v-model="icons" :icons="['layui-icon-heart', 'layui-icon-heart-fill']" theme="#FE0000"></lay-rate><br>
+  <lay-rate v-model="halfIcons" :icons="['layui-icon-circle', 'layui-icon-radio', 'layui-icon-circle-dot']" half text></lay-rate><br>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+
+    const icons = ref(4)
+    const halfIcons = ref(0.5)
+
+
+    return {
+      icons,
+      halfIcons
+    }
+  }
+}
+</script>
+
+:::
+
+::: title Rate 属性
+:::
+
+::: table
+
+| 属性     | 描述      | 类型 | 默认值 |
+| -------- | -------- | ------ | ------ |
+| v-model  | 评分值   | `number` | 0     |
+| length   | 评分长度 | `number` | 5     |
+| readonly | 只读模式 | `boolean` | false     |
+| theme    | 主题颜色 | `string` | #ffb800     |
+| half     | 设定组件是否可以选择半星 | `boolean` | false     |
+| text     | 是否显示评分对应的内容 | `boolean` | false     |
+| is-block | 评分是否显示为快元素 | `boolean` | false     |
+| allow-clear | 评分是否需要清除功能 | `boolean` | false     |
+| clear-icon | 评分清除功能使用的图标`class` | `string` | `layui-icon-close-fill`     |
+| icons    | 评分使用图标`class`；`["空心", "实心"]`/`["空心", "半心", "实心"]` | `string[]` | 星型     |
+
+:::
+
+::: title Rate 插槽
+:::
+
+::: table
+
+| 属性     | 描述      | 参数 |
+| -------- | -------- | ------ |
+| --  | 默认插槽，自定义内容时可以使用为    | { value } |
+
+:::
+
+::: title Rate 事件
+:::
+
+::: table
+
+| 属性     | 描述      | 回调参数 |
+| -------- | -------- | ------ |
+| select  | 选中之后触发事件   | (value: number) |
+| clear  | 清除之后触发事件   | (value: number) |
+
+:::
+
+::: contributor rate
+:::  
+
+::: previousNext rate
+:::