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

feat: add page component v-model props

Browse Source
This commit is contained in:
就眠儀式 2022-03-17 09:48:27 +08:00
parent 8400cc879e
commit 569d081553
4 changed files with 100 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
example/docs/zh-CN/components/page.md
View File

@ -13,7 +13,7 @@
::: demo 使用 `lay-page` 标签, 创建分页 ::: demo 使用 `lay-page` 标签, 创建分页
<template> <template>
<lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage"></lay-page> <lay-page v-model="currentPage" :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage"></lay-page>
</template> </template>
<script> <script>
@ -25,11 +25,13 @@ export default {
const limit = ref(20) const limit = ref(20)
const total = ref(100) const total = ref(100)
const showPage = ref(true) const showPage = ref(true)
const currentPage = ref(2);
return { return {
limit, limit,
total, total,
showPage showPage,
currentPage
} }
} }
} }

3
example/docs/zh-CN/components/table.md
View File

@ -151,7 +151,8 @@ export default {
const page = { const page = {
total: 100, total: 100,
limit: 10 limit: 10,
current: 2
} }
const change = function({ current }){ const change = function({ current }){

184
src/component/colorPicker/index.vue
View File

@ -1,95 +1,3 @@
<template>
<lay-dropdown>
<div class="layui-unselect layui-colorpicker">
<span>
<span
class="layui-colorpicker-trigger-span"
lay-type=""
:style="`background-color: ${colorObj.rgba}`"
>
<i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i>
</span>
</span>
</div>
<template #content>
<div class="layui-color-picker">
<div
class="saturation-value"
ref="saturationValue"
@mousedown="mousedownSV"
>
<div :style="`background-color: hsl(${hue}, 100%, 50%);`">
<div class="point" :style="pointStyle"></div>
</div>
<div class="saturation-value-2"></div>
<div class="saturation-value-3"></div>
</div>
<div class="layui-color-picker-middle">
<div style="flex: auto">
<div class="hue-slider" ref="hueSlider" @mousedown="mousedownHue">
<div class="slider" :style="hueSliderStyle"></div>
</div>
<div
class="alpha-slider"
ref="alphaSlider"
@mousedown="mousedownAlpha"
>
<div class="slider" :style="alphaSliderStyle"></div>
<div
:style="`background: linear-gradient(to right, rgba(0,0,0,0), ${colorObj.rgb});width: 100%;height: 100%`"
></div>
</div>
</div>
<div class="color-diamond">
<div
:style="`background-color: ${colorObj.rgba};width: 100%;height: 100%;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 4px rgba(0, 0, 0, .25);`"
></div>
</div>
</div>
<div class="color-value">
<div class="hex">
<label>
<input
:value="colorObj.hex8"
@input="hexChange"
spellcheck="false"
/>
</label>
</div>
<div class="rgba-r">
<label>
<input :value="red" @input="redChange" />
</label>
</div>
<div class="rgba-g">
<label>
<input :value="green" @input="greenChange" />
</label>
</div>
<div class="rgba-b">
<label>
<input :value="blue" @input="blueChange" />
</label>
</div>
<div class="rgba-a">
<label>
<input :value="alpha" @input="alphaChange" />
</label>
</div>
</div>
<ul class="preset">
<li
v-for="item in preset"
:key="item"
:style="`background-color: ${item}`"
@click="presetChange(item)"
></li>
</ul>
</div>
</template>
</lay-dropdown>
</template>
<script lang="ts"> <script lang="ts">
export default { export default {
name: "LayColorPicker", name: "LayColorPicker",
@ -484,3 +392,95 @@ function hex2rgba(s: any) {
} }
} }
</script> </script>
<template>
<lay-dropdown>
<div class="layui-unselect layui-colorpicker">
<span>
<span
class="layui-colorpicker-trigger-span"
lay-type=""
:style="`background-color: ${colorObj.rgba}`"
>
<i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i>
</span>
</span>
</div>
<template #content>
<div class="layui-color-picker">
<div
class="saturation-value"
ref="saturationValue"
@mousedown="mousedownSV"
>
<div :style="`background-color: hsl(${hue}, 100%, 50%);`">
<div class="point" :style="pointStyle"></div>
</div>
<div class="saturation-value-2"></div>
<div class="saturation-value-3"></div>
</div>
<div class="layui-color-picker-middle">
<div style="flex: auto">
<div class="hue-slider" ref="hueSlider" @mousedown="mousedownHue">
<div class="slider" :style="hueSliderStyle"></div>
</div>
<div
class="alpha-slider"
ref="alphaSlider"
@mousedown="mousedownAlpha"
>
<div class="slider" :style="alphaSliderStyle"></div>
<div
:style="`background: linear-gradient(to right, rgba(0,0,0,0), ${colorObj.rgb});width: 100%;height: 100%`"
></div>
</div>
</div>
<div class="color-diamond">
<div
:style="`background-color: ${colorObj.rgba};width: 100%;height: 100%;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 4px rgba(0, 0, 0, .25);`"
></div>
</div>
</div>
<div class="color-value">
<div class="hex">
<label>
<input
:value="colorObj.hex8"
@input="hexChange"
spellcheck="false"
/>
</label>
</div>
<div class="rgba-r">
<label>
<input :value="red" @input="redChange" />
</label>
</div>
<div class="rgba-g">
<label>
<input :value="green" @input="greenChange" />
</label>
</div>
<div class="rgba-b">
<label>
<input :value="blue" @input="blueChange" />
</label>
</div>
<div class="rgba-a">
<label>
<input :value="alpha" @input="alphaChange" />
</label>
</div>
</div>
<ul class="preset">
<li
v-for="item in preset"
:key="item"
:style="`background-color: ${item}`"
@click="presetChange(item)"
></li>
</ul>
</div>
</template>
</lay-dropdown>
</template>

3
src/component/table/index.vue
View File

@ -235,6 +235,7 @@ onMounted(() => {
<LayPage <LayPage
:total="page.total" :total="page.total"
:limit="page.limit" :limit="page.limit"
v-model="page.current"
show-page show-page
show-limit show-limit
show-skip show-skip
@ -246,4 +247,4 @@ onMounted(() => {
</div> </div>
</div> </div>
</div> </div>
</template> </template>