theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' into sightDevelop

Browse Source
This commit is contained in:
sight 2021-12-30 01:07:06 +08:00
commit 4a1451ba17
21 changed files with 469 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.prettierrc
View File

@ -1,3 +1,6 @@
{
"semi": true,
"singleQuote": false,
"tabWidth": 2
}

109
example/docs/zh-CN/components/skeleton.md Normal file
View File

@ -0,0 +1,109 @@
::: title 基础使用
:::
::: demo
<template>
<div>
<div style="margin-bottom: 10px">
<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
</div>
<lay-skeleton :rows="4" :loading="loading" animated>
<p style="margin-bottom: 18px">1 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
<p style="margin-bottom: 18px">2 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
<p style="margin-bottom: 18px">3 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
<p style="margin-bottom: 18px">4 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
</lay-skeleton>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const loading = ref(true);
return {
loading,
}
}
}
</script>
:::
::: title 图片
:::
::: demo
<template>
<div>
<div style="margin-bottom: 10px">
<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
</div>
<lay-skeleton :loading="loading" animated>
<template #skeleton>
<lay-skeleton-item type="image"/>
<lay-skeleton-item type="p" style="width: 240px"/>
</template>
<div class="img-content">
<img src="https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png" />
<p style="margin-top: 18px">layui-vue 发展史....</p>
</div>
</lay-skeleton>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const loading = ref(true);
return {
loading,
}
}
}
</script>
<style>
.img-content {
width: 240px;
height: 240px;
}
</style>
:::
::: title 骨架屏属性
:::
::: table
| 属性 | 描述 | 可选值 |
| ----- | ---- | ------ |
| loading | 是否显示 | `true` `false` |
| rows | 显示行数 | -- |
| animated | 是否动画 | `true` `false` |
| type | 展示类型 | `p` `image` |
:::
::: title 骨架屏插槽
:::
::: table
| 插槽 | 描述 | 可选值 |
| ------ | -------- | ------ |
| default| 默认插槽 | -- |
| skeleton | 自定义插槽 | -- |
:::
::: comment
:::

22
example/docs/zh-CN/components/slider.md
View File

@ -72,5 +72,27 @@ export default {
</script>
:::
::: title 纵向区间
:::
::: demo
<template>
<lay-slider v-model="value3" :range="true" :vertical="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value4 = ref([20,50])
return {
value4
}
}
}
</script>
:::
::: comment
:::

8
example/docs/zh-CN/guide/changelog.md
View File

@ -12,16 +12,18 @@
<lay-timeline>
<lay-timeline-item title="0.3.x">
<ul>
<a name="0-3-0"> </a>
<a name="0-3-1"> </a>
<li>
<h3>0.3.0 <span class="layui-badge-rim">2021-12-25</span></h3>
<h3>0.3.1 <span class="layui-badge-rim">2021-12-28</span></h3>
<ul>
<li>[新增] slider 滑块 range 属性, 支持区间过程。</li>
<li>[新增] count-up 数字滚动组件。</li>
<li>[新增] slider 滑块 range 属性, 支持区间取值。</li>
<li>[新增] button 按钮 disabled 属性, 删除 type 属性 disabled 值。</li>
<li>[修复] 演示站点剪贴板功能，http下不能使用的问题。</li>
<li>[修复] checkbox 复选框 modelValue 属性必填警告。</li>
<li>[修复] formItem 内下拉框组件校验不通过边框未标红问题。</li>
<li>[修复] rate 评分 mouseleave 事件绑定警告。</li>
<li>[修复] npm 安装 layui-vue 不必要的依赖警告。</li>
<li>[集成] eslint, prettier 规范插件 。</li>
<li>[升级] icons-vue 1.0.2。</li>
</ul>

103
example/docs/zh-CN/guide/member.md
View File

@ -9,14 +9,11 @@
<lay-col md="2">
就眠仪式
</lay-col>
<lay-col md="6">
<lay-col md="10">
焦点：layui-vue
</lay-col>
<lay-col md="4">
地点：China Beijing
</lay-col>
<lay-col md="5">
生态：Pear Admin
地点：中国 北京
</lay-col>
<lay-col md="6">
其他：Gitee Github
@ -31,14 +28,11 @@
<lay-col md="2">
落小梅
</lay-col>
<lay-col md="6">
<lay-col md="10">
焦点：tree table
</lay-col>
<lay-col md="4">
地点：China Hunan
</lay-col>
<lay-col md="5">
生态：Pear Admin
地点：中国 湖南
</lay-col>
<lay-col md="6">
其他：Gitee Github
@ -54,17 +48,94 @@
<lay-col md="2">
halo
</lay-col>
<lay-col md="6">
<lay-col md="10">
焦点：slider
</lay-col>
<lay-col md="4">
地点：China Beijing
</lay-col>
<lay-col md="5">
生态：暂无
地点：中国 北京
</lay-col>
<lay-col md="6">
其他：
其他：Gitee Github
</lay-col>
</lay-row>
</lay-card>
<lay-card>
<lay-row>
<lay-col md="1">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1871/5614379_xumisky_1607057214.png"></lay-avatar>
</lay-col>
<lay-col md="2">
须弥
</lay-col>
<lay-col md="10">
焦点：layui-vue
</lay-col>
<lay-col md="4">
地点：中国 广州
</lay-col>
<lay-col md="6">
其他：<a href="https://gitee.com/xumisky">Gitee</a> <a href="https://github.com/xumiSky">Github</a>
</lay-col>
</lay-row>
</lay-card>
<lay-card>
<lay-row>
<lay-col md="1">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2469/7407590_wcg666_1640528494.png"></lay-avatar>
</lay-col>
<lay-col md="2">
Sight
</lay-col>
<lay-col md="10">
焦点：count-up backtop
</lay-col>
<lay-col md="4">
地点：中国 未知
</lay-col>
<lay-col md="6">
其他：Gitee Github
</lay-col>
</lay-row>
</lay-card>
<lay-card>
<lay-row>
<lay-col md="1">
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2596/7789823_finalsummer_1613993823.png"></lay-avatar>
</lay-col>
<lay-col md="2">
finalsummer
</lay-col>
<lay-col md="10">
焦点：layer-vue
</lay-col>
<lay-col md="4">
地点：中国 未知
</lay-col>
<lay-col md="6">
其他：Gitee Github
</lay-col>
</lay-row>
</lay-card>
<lay-card>
<lay-row>
<lay-col md="1">
<lay-avatar src="http://mms0.baidu.com/it/u=1690972933,1482111264&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=500&h=500"></lay-avatar>
</lay-col>
<lay-col md="2">
莫名点
</lay-col>
<lay-col md="10">
焦点：skeleton
</lay-col>
<lay-col md="4">
地点：中国 未知
</lay-col>
<lay-col md="6">
其他：Gitee Github
</lay-col>
</lay-row>
</lay-card>

2
example/src/layouts/Layout.vue
View File

@ -43,7 +43,7 @@
</a>
</li>
<li class="layui-nav-item">
<a href="javascript:void(0)"> 0.3.0 </a>
<a href="javascript:void(0)"> 0.3.1 </a>
</li>
</ul>
</lay-header>

5
example/src/router/zh-CN.ts
View File

@ -76,6 +76,11 @@ const zhCN = [
component: Component,
meta: { title: '组件' },
children: [
{
path: '/zh-CN/components/skeleton',
component: () => import('../../docs/zh-CN/components/skeleton.md'),
meta: { title: '骨架屏' },
},
{
path: '/zh-CN/components/layout',
component: () => import('../../docs/zh-CN/components/layout.md'),

6
example/src/view/component.vue
View File

@ -98,6 +98,12 @@ export default {
id: 1,
title: '布局',
children: [
{
id: 111,
title: '骨架屏',
subTitle: 'skeleton',
path: '/zh-CN/components/skeleton',
},
{
id: 4,
title: '布局',

4
example/src/view/index.vue
View File

@ -26,7 +26,7 @@
>
</div>
<div class="site-version">
<span>当前版本：v<cite class="site-showv">0.3.0</cite></span>
<span>当前版本：v<cite class="site-showv">0.3.1</cite></span>
<span
><router-link
class="layui-inline site-down"
@ -44,7 +44,7 @@
rel="nofollow"
class="site-star"
>
<i class="layui-icon"></i> Star <cite id="getStars">336</cite>
<i class="layui-icon"></i> Star <cite id="getStars">521</cite>
</a>
<a
href="https://gitee.com/layui-vue"

14
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@layui/layui-vue",
"version": "0.3.0",
"version": "0.3.1",
"author": "sleeprite",
"license": "MIT",
"description": "a component library for Vue 3 base on layui-vue",
@ -26,8 +26,9 @@
"build": "vite build --emptyOutDir && npm run build:types",
"build:types": "rimraf types && tsc -d",
"build:example": "vite build example",
"lint:eslint": "eslint \"src/**/*.{vue,ts,tsx}\" --fix",
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
"lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
"lint:prettier": "prettier --write 'src/**/*'",
"publish": "npm run build && npm publish --access=public",
"commit": "git cz"
},
"dependencies": {
@ -78,10 +79,5 @@
"current node",
"last 2 versions and > 2%",
"ie > 10"
],
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
]
}

6
src/index.ts
View File

@ -67,6 +67,8 @@ import LayCarouselItem from "./module/carouselItem/index";
import LayColorPicker from "./module/colorPicker/index";
import LayTooltip from "./module/tooltip/index";
import LayInputNumber from "./module/inputNumber/index";
import LaySkeleton from './module/skeleton/index';
import LaySkeletonItem from './module/skeletonItem/index';
const components: Record<string, IDefineComponent> = {
LayRadio,
@ -129,6 +131,8 @@ const components: Record<string, IDefineComponent> = {
LayModal,
LayTooltip,
LayInputNumber,
LaySkeleton,
LaySkeletonItem,
LayCountUp,
};
@ -142,6 +146,8 @@ const install = (app: App, options?: InstallOptions): void => {
};
export {
LaySkeleton,
LaySkeletonItem,
LayRadio,
LayIcon,
LayButton,

3
src/module/page/index.vue
View File

@ -54,7 +54,7 @@
</template>
<script setup name="LayPage" lang="ts">
import { defineProps, Ref, ref, watch, useSlots } from "vue";
import { defineProps, Ref, ref, watch, useSlots, computed, ComputedRef } from "vue";
const slots = useSlots();
@ -86,7 +86,6 @@ const inlimit = ref(props.limit);
const totalPage = ref(Math.ceil(props.total / inlimit.value));
const currentPage: Ref<number> = ref(1);
const currentPageShow: Ref<number> = ref(currentPage.value);
const emit = defineEmits(["jump"]);
const prev = function () {

72
src/module/skeleton/index.less Normal file
View File

@ -0,0 +1,72 @@
.lay-skeleton{
.lay-skeleton-item {
height: 16px;
border-radius: 5px;
margin-bottom: 16px;
background: #eeeeee;
}
.lay-skeleton-type--p{
height: 16px;
border-radius: 5px;
margin-bottom: 16px;
background: #eeeeee;
}
.lay-skeleton-type--image{
width: 240px;
height: 240px;
background: #eeeeee;
display: flex;
justify-content: center;
align-items: center;
i{
font-size: 40px;
}
}
}
.lay-skeleton-animated {
.lay-skeleton-type--image{
width: 240px;
height: 240px !important;
display: flex;
justify-content: center;
align-items: center;
i{
font-size: 40px;
}
}
.lay-skeleton-item {
height: 16px;
border-radius: 5px;
margin-bottom: 16px;
background: #eeeeee;
background: linear-gradient(
90deg,#f2f2f2 25%,#ececec 37%,#f2f2f2 63%);
background-size: 400% 100%;
animation: lay-skeleton-loading 1.2s ease infinite;
}
}
.lay-skeleton-first {
width: 30%;
}
.lay-skeleton-last {
width: 62.8%;
}
@keyframes lay-skeleton-loading {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}

9
src/module/skeleton/index.ts Normal file
View File

@ -0,0 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
Component.install = (app: App) => {
app.component(Component.name || 'LaySkeleton', Component)
}
export default Component as IDefineComponent

34
src/module/skeleton/index.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<div :class="['lay-skeleton', animated ? 'lay-skeleton-animated': '',]" v-bind="$attrs">
<template v-if="loading">
<slot name="skeleton">
<lay-skeleton-item
v-for="item in rows"
:class="[
item===1? 'lay-skeleton-first': '',
item === rows? 'lay-skeleton-last': '']"
type="p"
></lay-skeleton-item>
</slot>
</template>
<slot v-else></slot>
</div>
</template>
<script setup name="LaySkeleton" lang="ts">
import LaySkeletonItem from '../skeletonItem/index.vue'
import './index.less'
import { defineProps, withDefaults} from "vue";
export interface LaySkeletonProps {
rows?: number;
loading?: boolean;
animated?: boolean;
}
const props = withDefaults(defineProps<LaySkeletonProps>(), {
rows: 4,
loading: false,
animated: false,
});
</script>-

9
src/module/skeletonItem/index.ts Normal file
View File

@ -0,0 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
Component.install = (app: App) => {
app.component(Component.name || 'LaySkeletonItem', Component)
}
export default Component as IDefineComponent

19
src/module/skeletonItem/index.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div :class="['lay-skeleton-item',`lay-skeleton-type--${type}`]" v-bind="$attrs">
<div v-if="type==='image'" >
<lay-icon type="layui-icon-picture"></lay-icon>
</div>
</div>
</template>
<script setup name="LaySkeletonItem" lang="ts">
import { defineProps, withDefaults} from "vue";
export interface LaySkeletonProps {
type?: string;
}
const props = withDefaults(defineProps<LaySkeletonProps>(), {
type: 'p',
});
</script>-

7
src/module/slider/index.less
View File

@ -99,3 +99,10 @@
position: relative;
cursor: pointer;
}
.layui-slider-vrange {
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}

92
src/module/slider/index.vue
View File

@ -1,6 +1,11 @@
<template>
<div class="layui-slider-vertical" v-if="vertical">
<div v-if="range">range vertical slider</div>
<div ref="rangetracker2" class="layui-slider-vrange" v-if="range">
<div class="layui-slider-vertical-btn"></div>
<div class="layui-slider-vertical-btn"></div>
<div class="layui-slider-vertical-line"></div>
<div class="layui-slider-vertical-rate"></div>
</div>
<div
ref="verticaltracker"
@ -26,27 +31,35 @@
</div>
<div class="layui-slider-v" v-else>
<div @mousedown.stop="handle_mousedown" ref="rangetracker1" class="layui-slider-srange" v-if="range">
<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>
<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>
<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
:style="{
width: rangeValue[1] - rangeValue[0] + '%',
left: rangeValue[0] + '%',
}"
class="layui-slider-rate-v"
></div>
</div>
<div
ref="standardtracker"
@mousedown.stop="handle_mousedown"
@ -71,7 +84,7 @@
</div>
</template>
<script setup lang="ts">
import { defineProps, onMounted, reactive, Ref, ref } from "vue";
import { defineProps, reactive, Ref, ref } from "vue";
import { on, off } from "evtd";
import "./index.less";
@ -93,13 +106,23 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
disabled: false,
});
let rangeValue:Ref<number[]> = ref([0,0])
if(Array.isArray(props.modelValue)){
rangeValue.value = props.modelValue
let rangeValue: Ref<number[]> = ref([0, 0]);
if (Array.isArray(props.modelValue)) {
// eslint-disable-next-line vue/no-setup-props-destructure
rangeValue.value = props.modelValue;
}
let verticalRangeValue: Ref<number[]> = ref([0, 0]);
if (Array.isArray(props.modelValue)) {
// eslint-disable-next-line vue/no-setup-props-destructure
verticalRangeValue.value = props.modelValue;
}
const standardtracker = ref<HTMLElement | null>(null);
const verticaltracker = ref<HTMLElement | null>(null);
const rangetracker1 = ref<HTMLElement | null>(null);
const rangetracker2 = ref<HTMLElement | null>(null);
const standard_style = reactive({
left: props.modelValue,
width: props.modelValue,
@ -131,6 +154,10 @@ function handle_mousemove(e: MouseEvent) {
if (props.vertical === false && props.range === true) {
starndardRangeMove(e);
}
if (props.vertical === true && props.range === true) {
verticalRangeMove(e);
}
}
function handle_mouseup() {
@ -188,7 +215,7 @@ const verticalMove = (e: MouseEvent) => {
emit("update:modelValue", vertical_style.bottom);
};
const starndardRangeMove =(e:MouseEvent)=>{
const starndardRangeMove = (e: MouseEvent) => {
if (!rangetracker1.value) {
return;
}
@ -196,31 +223,32 @@ const starndardRangeMove =(e:MouseEvent)=>{
let origin_left = tracker_rect.left;
let point_left = e.clientX;
let distance = point_left - origin_left;
if(distance < 0){
rangeValue.value[0] = 0
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
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
if (rangeValue.value[0] < 0) {
rangeValue.value[0] = 0;
}
}
emit("update:modelValue", rangeValue.value);
}
};
const verticalRangeMove = (e: MouseEvent) => {};
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
if (d1 > d2) {
return 1;
} else {
return 0
return 0;
}
}
</script>