Merge branch 'develop' of https://gitee.com/layui-vue/layui-vue into develop

example/docs/zh-CN/components/slider.md

@@ -1,7 +1,10 @@
+::: title 横向
+:::
+
 ::: demo
 
 <template>
-  <lay-slider v-model="value1" :disabled="true"></lay-slider>
+  <lay-slider v-model="value1" :disabled="false"></lay-slider>
 </template>
 
 <script>
@@ -19,10 +22,12 @@ export default {
 
 :::
 
+::: title 纵向
+:::
 ::: demo
 
 <template>
-  <lay-slider v-model="value2" :vertical="vertical" :disabled="true"></lay-slider>
+  <lay-slider v-model="value2" :vertical="true" :disabled="true"></lay-slider>
 </template>
 
 <script>
@@ -31,11 +36,9 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const vertical = ref(true)
     const value2 = ref(10)
 
     return {
-        vertical,
         value2
     }
   }
@@ -44,5 +47,27 @@ export default {
 
 :::
 
+::: title 区间
+:::
+
+::: demo
+
+<template>
+  <lay-slider v-model="value3" :range="true"></lay-slider>
+</template>
+
+<script>
+import { ref } from 'vue'
+export default {
+  setup() {
+    const value3 = ref([20,50])
+    return {
+      value3
+    }
+  }
+}
+</script>
+:::
+
 ::: comment
-:::
+:::

example/docs/zh-CN/components/table.md

@@ -275,15 +275,15 @@ export default {
 
 ::: table
 
-| 属性                 | 描述       | 类型 | 默认值 | 可选值         |
-| -------------------- | ---------- | ---- | ------ | -------------- |
-| columns              | 列配置     | --   | --     | --             |
-| dataSource           | 数据源     | --   | --     | --             |
-| checkbox             | 开启复选框 | --   | --     | --             |
-| id                   | 主键       | --   | --     | --             |
-| v-model:selectedKeys | 选中项     | --   | --     | --             |
-| default-toolbar      | 工具栏     | --   | --     | --             |
-| size                 | 尺寸       | --   | --     | `lg` `md` `sm` |
+| 属性                 | 描述                          | 类型 | 默认值 | 可选值         |
+| -------------------- | ----------------------------- | ---- | ------ | -------------- |
+| columns              | 列配置 - [更多](#tableColumn) | --   | --     | --             |
+| dataSource           | 数据源                        | --   | --     | --             |
+| checkbox             | 开启复选框                    | --   | --     | --             |
+| id                   | 主键                          | --   | --     | --             |
+| v-model:selectedKeys | 选中项                        | --   | --     | --             |
+| default-toolbar      | 工具栏                        | --   | --     | --             |
+| size                 | 尺寸                          | --   | --     | `lg` `md` `sm` |
 
 :::
 
@@ -310,17 +310,19 @@ export default {
 
 :::
 
+### <div id="tableColumn"></div>
+
 ::: title Table Column 属性
 :::
 
 ::: table
 
-| 插槽       | 描述     | 默认 |
-| ---------- | -------- | ---- |
-| title      | 列标题   | --   |
-| key        | 数据字段 | --   |
+| 插槽       | 描述       | 默认 |
+| ---------- | ---------- | ---- |
+| title      | 列标题     | --   |
+| key        | 数据字段   | --   |
 | customSlot | 自定义插槽 | --   |
-| width      | 宽度     | --   |
+| width      | 宽度       | --   |
 
 :::
 

example/docs/zh-CN/guide/changelog.md

@@ -16,7 +16,9 @@
       <li> 
         <h3>0.3.0 <span class="layui-badge-rim">2021-12-25</span></h3> 
         <ul> 
+          <li>[新增] slider 滑块 range 属性, 支持区间过程。</li>
           <li>[新增] button 按钮 disabled 属性, 删除 type 属性 disabled 值。</li>  
+          <li>[修复] 演示站点剪贴板功能，http下不能使用的问题。</li>  
           <li>[修复] checkbox 复选框 modelValue 属性必填警告。</li>  
           <li>[修复] formItem 内下拉框组件校验不通过边框未标红问题。</li>  
           <li>[修复] rate 评分 mouseleave 事件绑定警告。</li>  

example/src/components/LayCode.vue

@@ -34,9 +34,40 @@ const toggle = function () {
 
 const copy = function () {
   const foundCodes = meta.value.getElementsByClassName('language-html')
-  if (document.hasFocus()) {
-    const text = foundCodes[0].textContent || "";
+  const foundCode = foundCodes[0];
+  let successful = false;
+  // 使用原生系统剪贴板，只适用被授权安全的站点，http下不能使用
+  if (navigator.clipboard && document.hasFocus()) {
+    const text = foundCode.textContent || "";
     navigator.clipboard.writeText(text);
+    successful = true;
+  } else if (window.getSelection()){
+    // 使用document.execCommand
+    // 代码div显示状态直接使用，隐藏状态则创建一个div
+    var range = document.createRange();
+    let copyDiv;
+    if (show.value) {
+      range.selectNode(foundCode); 
+    } else {
+      copyDiv = document.createElement('div');
+      copyDiv.innerHTML = foundCode.innerHTML;
+      copyDiv.style.position="fixed";
+      copyDiv.style.left="-9999px";
+      document.body.appendChild(copyDiv);
+      range.selectNode(copyDiv); 
+    }
+    window.getSelection()?.addRange(range);  
+    try {  
+      successful = document.execCommand('copy');  
+    } catch(err) {  
+      successful = false;
+      console.error(err);
+    }
+    window.getSelection()?.removeAllRanges(); 
+    copyDiv?.remove();
+  }
+
+  if (successful) {
     layer.msg("复制成功", { icon : 1, time: 1000}, ()=>{})
   } else {
     layer.msg("复制失败", { icon : 2, time: 1000}, ()=>{})
@@ -155,4 +186,4 @@ function handleScroll() {
   padding-left: 10px;
   padding-right: 10px;
 }
-</style>
+</style>

src/index.ts

@@ -4,7 +4,6 @@ import type { IDefineComponent, InstallOptions } from "./module/type/index";
 import "./css/layui.css";
 import "@layui/layer-vue/lib/index.css";
 import "@layui/icons-vue/lib/index.css";
-
 import { layer } from "@layui/layer-vue";
 
 import LayModal from "./module/layer/modal/index";
@@ -198,9 +197,9 @@ export {
   LayCarousel,
   LayCarouselItem,
   LayColorPicker,
-  LayModal,
-  install,
-  layer,
+  LayModal
 };
 
+export { layer };
+
 export default { install };

src/module/slider/index.less

@@ -18,24 +18,12 @@
   height: 12px;
   background-color: white;
   position: absolute;
-  // top: -7px;
   border: 2px solid rgb(0, 150, 136);
   border-radius: 50%;
   cursor: pointer;
   left: 0%;
   z-index: 2;
 }
-// .layui-slider-btn-v:hover {
-//   width: 14px;
-//   height: 14px;
-//   background-color: white;
-//   position: absolute;
-//   top: -2px;
-//   border: 2px solid rgb(0, 150, 136);
-//   border-radius: 50%;
-//   cursor: pointer;
-//   left: 0%;
-// }
 
 .layui-slider-rate-v {
   width: 0%;
@@ -65,13 +53,11 @@
 .layui-slider-vertical {
   width: 18px;
   height: 200px;
-  // background-color: red;
 }
 
 .layui-slider-vertical-track {
   width: 100%;
   height: 100%;
-  // background-color: #eee;
   position: relative;
 }
 
@@ -106,3 +92,10 @@
   left: 7px;
   background-color: #eee;
 }
+
+.layui-slider-srange {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  cursor: pointer;
+}

src/module/slider/index.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="layui-slider-vertical" v-if="vertical">
+    <div v-if="range">range vertical slider</div>
+
     <div
       ref="verticaltracker"
       @mousedown.stop="handle_mousedown"
       class="layui-slider-vertical-track"
       :class="[props.disabled ? 'layui-slider-disabled' : '']"
+      v-else
     >
       <lay-tooltip :content="modelValue + ''">
         <div
@@ -23,11 +26,33 @@
   </div>
 
   <div class="layui-slider-v" v-else>
+
+
+
+
+
+    <div @mousedown.stop="handle_mousedown" ref="rangetracker1" class="layui-slider-srange" v-if="range">
+      <lay-tooltip :content="rangeValue[0] + ''">
+        <div :style="{ left: rangeValue[0] + '%' }" class="layui-slider-btn-v"></div>
+      </lay-tooltip>
+      <lay-tooltip :content="rangeValue[1]">
+        <div :style="{ left: rangeValue[1] + '%' }" class="layui-slider-btn-v"></div>
+      </lay-tooltip>
+      
+      <div class="layui-slider-line-v"></div>
+      <div :style="{ width:rangeValue[1]-rangeValue[0] +'%', left: rangeValue[0]+'%' }" class="layui-slider-rate-v"></div>
+    </div>
+    
+
+
+
+
     <div
       ref="standardtracker"
       @mousedown.stop="handle_mousedown"
       class="layui-slider-track-v"
       :class="[props.disabled ? 'layui-slider-disabled' : '']"
+      v-else
     >
       <lay-tooltip :content="modelValue + ''">
         <div
@@ -46,7 +71,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { defineProps, reactive, ref } from "vue";
+import { defineProps, onMounted, reactive, Ref, ref } from "vue";
 import { on, off } from "evtd";
 import "./index.less";
 
@@ -54,11 +79,12 @@ const emit = defineEmits(["update:modelValue"]);
 
 interface LaySliderProps {
   vertical?: boolean;
-  modelValue?: number;
+  modelValue?: number | Array<number>;
   min?: number;
   max?: number;
   step?: number;
   disabled?: boolean;
+  range?: boolean;
 }
 
 const props = withDefaults(defineProps<LaySliderProps>(), {
@@ -67,8 +93,13 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
   disabled: false,
 });
 
+let rangeValue:Ref<number[]> = ref([0,0])
+if(Array.isArray(props.modelValue)){
+  rangeValue.value = props.modelValue
+}
 const standardtracker = ref<HTMLElement | null>(null);
 const verticaltracker = ref<HTMLElement | null>(null);
+const rangetracker1 = ref<HTMLElement | null>(null);
 const standard_style = reactive({
   left: props.modelValue,
   width: props.modelValue,
@@ -89,11 +120,17 @@ function handle_mousemove(e: MouseEvent) {
   if (props.disabled === true) {
     return false;
   }
-  if (props.vertical === false) {
+  if (props.vertical === false && props.range === false) {
     standardMove(e);
-  } else {
+  }
+
+  if (props.vertical === true && props.range === false) {
     verticalMove(e);
   }
+
+  if (props.vertical === false && props.range === true) {
+    starndardRangeMove(e);
+  }
 }
 
 function handle_mouseup() {
@@ -124,7 +161,6 @@ const standardMove = (e: MouseEvent) => {
     if (standard_style.left > 100) {
       standard_style.left = 100;
       standard_style.width = 100;
-      // props.modelValue = 100;
     }
   }
   emit("update:modelValue", standard_style.left);
@@ -147,9 +183,44 @@ const verticalMove = (e: MouseEvent) => {
     if (vertical_style.bottom > 100) {
       vertical_style.bottom = 100;
       vertical_style.height = 100;
-      // props.modelValue = 100;
     }
   }
   emit("update:modelValue", vertical_style.bottom);
 };
+
+const starndardRangeMove =(e:MouseEvent)=>{
+  if (!rangetracker1.value) {
+    return;
+  }
+  let tracker_rect = rangetracker1.value.getBoundingClientRect();
+  let origin_left = tracker_rect.left;
+  let point_left = e.clientX;
+  let distance = point_left - origin_left;
+  if(distance < 0){
+    rangeValue.value[0] = 0
+  } else {
+    let rate = (distance / tracker_rect.width) * 100;
+    let idx = moveNeighbor(Math.floor(rate))
+    rangeValue.value[idx] = Math.floor(rate)
+    if(rangeValue.value[1] > 100) {
+      rangeValue.value[1] = 100
+    }
+    if(rangeValue.value[0] < 0) {
+      rangeValue.value[0] = 0
+    }
+
+  }
+  emit("update:modelValue", rangeValue.value);
+}
+
+function moveNeighbor(rate: number) {
+  let d1 = Math.abs(rate - rangeValue.value[0]);
+  let d2 = Math.abs(rate - rangeValue.value[1]);
+
+  if(d1 > d2){
+    return 1
+  } else {
+    return 0
+  }
+}
 </script>

src/module/type/public.ts

@@ -10,10 +10,7 @@ export type IDefineComponent<Props = UnknownObject> = DefineComponent<Props> & {
   install: (app: App, options?: InstallOptions) => void;
 };
 
-export interface InstallOptions extends StringObject {
-  pagination?: null;
-  menu?: null;
-}
+export interface InstallOptions extends StringObject {}
 
 export type Nullable<T> = T | null;