[修复] rate 评分组件
This commit is contained in:
就眠儀式
parent
b817d323f6
commit
d0108c63e3
@ -5,7 +5,7 @@
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-checkbox name="like" skin="primary" v-model:checked="checked1" label="1" ></lay-checkbox>
|
||||
<lay-checkbox name="like" skin="primary" v-model="checked1" label="1" ></lay-checkbox>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
@ -33,7 +33,7 @@ export default {
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-checkbox name="like" label="1" v-model:checked="checked2" >普通</lay-checkbox>
|
||||
<lay-checkbox name="like" label="1" v-model="checked2" >普通</lay-checkbox>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
@ -61,9 +61,9 @@ export default {
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-checkbox name="like" skin="primary" v-model:checked="checked3" label="1">写作</lay-checkbox>
|
||||
<lay-checkbox name="like" skin="primary" v-model:checked="checked4" label="2">画画</lay-checkbox>
|
||||
<lay-checkbox name="like" skin="primary" v-model:checked="checked5" label="3">运动</lay-checkbox>
|
||||
<lay-checkbox name="like" skin="primary" v-model="checked3" label="1">写作</lay-checkbox>
|
||||
<lay-checkbox name="like" skin="primary" v-model="checked4" label="2">画画</lay-checkbox>
|
||||
<lay-checkbox name="like" skin="primary" v-model="checked5" label="3">运动</lay-checkbox>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
@ -93,7 +93,7 @@ export default {
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-checkbox name="like" skin="primary" label="1" :disabled="disabled" v-model:checked="checked6">禁用</lay-checkbox>
|
||||
<lay-checkbox name="like" skin="primary" label="1" :disabled="disabled" v-model="checked6">禁用</lay-checkbox>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
@ -123,7 +123,7 @@ export default {
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-checkbox name="like" skin="primary" label="1" @change="change" v-model:checked="checked7">回调</lay-checkbox>
|
||||
<lay-checkbox name="like" skin="primary" label="1" @change="change" v-model="checked7">回调</lay-checkbox>
|
||||
</lay-form>
|
||||
</template>
|
||||
|
||||
@ -159,7 +159,7 @@ export default {
|
||||
| name | 原始属性 name | -- |
|
||||
| skin | 主题 | -- |
|
||||
| label | 选中值 | -- |
|
||||
| checked ( v-model ) | 是否选中 | `true` `false` |
|
||||
| v-model | 是否选中 | `true` `false` |
|
||||
| change | 切换事件 | isChecked : 当前状态 |
|
||||
|
||||
:::
|
||||
|
||||
@ -4624,36 +4624,6 @@ body .layui-util-face .layui-layer-content {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.layui-rate,
|
||||
.layui-rate * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.layui-rate {
|
||||
padding: 10px 5px 10px 0;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.layui-rate li i.layui-icon {
|
||||
font-size: 20px;
|
||||
color: #ffb800;
|
||||
margin-right: 5px;
|
||||
transition: all 0.3s;
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
|
||||
.layui-rate li i:hover {
|
||||
cursor: pointer;
|
||||
transform: scale(1.12);
|
||||
-webkit-transform: scale(1.12);
|
||||
}
|
||||
|
||||
.layui-rate[readonly] li i:hover {
|
||||
cursor: default;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.layui-colorpicker {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
|
||||
@ -37,7 +37,7 @@ const handleClick = function () {
|
||||
class="layui-unselect layui-form-checkbox"
|
||||
:class="{
|
||||
'layui-checkbox-disbaled layui-disabled': disabled,
|
||||
'layui-form-checked': props.checked,
|
||||
'layui-form-checked': props.modelValue,
|
||||
}"
|
||||
:lay-skin="skin"
|
||||
>
|
||||
|
||||
29
src/module/rate/index.less
Normal file
29
src/module/rate/index.less
Normal file
@ -0,0 +1,29 @@
|
||||
.layui-rate,
|
||||
.layui-rate * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.layui-rate {
|
||||
padding: 10px 5px 10px 0;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.layui-rate li i.layui-icon {
|
||||
font-size: 20px;
|
||||
color: #ffb800;
|
||||
margin-right: 5px;
|
||||
transition: all 0.3s;
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
|
||||
.layui-rate li i:hover {
|
||||
cursor: pointer;
|
||||
transform: scale(1.12);
|
||||
-webkit-transform: scale(1.12);
|
||||
}
|
||||
|
||||
.layui-rate[readonly] li i:hover {
|
||||
cursor: default;
|
||||
transform: scale(1);
|
||||
}
|
||||
@ -1,3 +1,46 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayRate",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, defineProps, withDefaults } from "vue";
|
||||
import "./index.less";
|
||||
|
||||
export interface LayRateProps {
|
||||
theme?: string;
|
||||
length?: number;
|
||||
modelValue: number;
|
||||
readonly?: boolean | string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayRateProps>(), {
|
||||
length: 5,
|
||||
modelValue: 0,
|
||||
readonly: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const currentValue = computed({
|
||||
get: function () {
|
||||
return props.modelValue;
|
||||
},
|
||||
set: function (val) {
|
||||
emit("update:modelValue", val);
|
||||
},
|
||||
});
|
||||
|
||||
const mouseenter = function (index: number, event: any) {
|
||||
if (props.readonly) {
|
||||
return false;
|
||||
}
|
||||
currentValue.value = index;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul class="layui-rate">
|
||||
<li
|
||||
@ -18,39 +61,3 @@
|
||||
}}
|
||||
</ul>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, defineProps, withDefaults } from 'vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
length?: number
|
||||
modelValue: number
|
||||
readonly?: boolean | string
|
||||
theme?: string
|
||||
}>(),
|
||||
{
|
||||
length: 5,
|
||||
modelValue: 0,
|
||||
readonly: false,
|
||||
theme: 'green',
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const currentValue = computed({
|
||||
get: function () {
|
||||
return props.modelValue
|
||||
},
|
||||
set: function (val) {
|
||||
emit('update:modelValue', val)
|
||||
},
|
||||
})
|
||||
|
||||
const mouseenter = function (index: number, event: any) {
|
||||
if (props.readonly) {
|
||||
return false
|
||||
}
|
||||
currentValue.value = index
|
||||
}
|
||||
</script>
|
||||
|
||||
0
src/module/switch/index.less
Normal file
0
src/module/switch/index.less
Normal file
@ -1,9 +1,41 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LaySwitch",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits } from "vue";
|
||||
import "./index.less"
|
||||
|
||||
export interface LaySwitchProps {
|
||||
modelValue: boolean;
|
||||
disabled?: boolean;
|
||||
activeText?: string;
|
||||
inactiveText?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LaySwitchProps>(), {
|
||||
activeText: "启用",
|
||||
inactiveText: "禁用",
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
|
||||
const handleClick = function () {
|
||||
if (!props.disabled) {
|
||||
emit("update:modelValue", !props.modelValue);
|
||||
emit("change", !props.modelValue);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span @click.stop="handleClick">
|
||||
<div
|
||||
class="layui-unselect layui-form-switch"
|
||||
:class="{
|
||||
'layui-form-onswitch': modelValue == true,
|
||||
'layui-form-onswitch': modelValue,
|
||||
'layui-checkbox-disbaled layui-disabled': disabled,
|
||||
}"
|
||||
>
|
||||
@ -12,30 +44,3 @@
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup name="LaySwitch" lang="ts">
|
||||
import { defineProps, defineEmits } from 'vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue: boolean
|
||||
disabled?: boolean
|
||||
activeText?: string
|
||||
inactiveText?: string
|
||||
}>(),
|
||||
{
|
||||
activeText: '启用',
|
||||
inactiveText: '禁用',
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'change'])
|
||||
|
||||
const handleClick = function () {
|
||||
if (props.disabled) {
|
||||
return false
|
||||
}
|
||||
emit('update:modelValue', !props.modelValue)
|
||||
emit('change', !props.modelValue)
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user