<template>
|
<div class="wrap-range">
|
<!-- 为了不在子组件中变更值，不用v-model -->
|
<input
|
type="range"
|
:value="brushSize"
|
min="1"
|
max="30"
|
title="调整笔刷粗细"
|
@change="(event) => $emit('change-size', +event.target.value)"
|
/>
|
<el-color-picker v-model="checkColor" @change="onChangeColor"></el-color-picker>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
size: {
|
type: Number,
|
default: 5,
|
},
|
},
|
computed:{
|
brushSize() {
|
return this.size
|
}
|
},
|
data() {
|
return {
|
checkColor:"#000000"
|
}
|
},
|
methods:{
|
onChangeColor(color) {
|
this.$emit("change-color", color);
|
},
|
}
|
};
|
|
// const brushSize = computed(() => props.size);
|
</script>
|
<style lang="less" scoped>
|
.wrap-range {
|
display: flex;
|
align-items: center;
|
.el-color-picker {
|
margin-left: 20px;
|
}
|
}
|
.wrap-range input {
|
width: 150px;
|
height: 20px;
|
margin: 0;
|
transform-origin: 75px 75px;
|
border-radius: 15px;
|
-webkit-appearance: none;
|
appearance: none;
|
outline: none;
|
position: relative;
|
}
|
|
.wrap-range input::after {
|
display: block;
|
content: "";
|
width: 0;
|
height: 0;
|
border: 5px solid transparent;
|
border-right: 150px solid #00ccff;
|
border-left-width: 0;
|
position: absolute;
|
left: 0;
|
top: 5px;
|
border-radius: 15px;
|
z-index: 0;
|
}
|
|
.wrap-range input[type="range"]::-webkit-slider-thumb,
|
.wrap-range input[type="range"]::-moz-range-thumb {
|
-webkit-appearance: none;
|
}
|
|
.wrap-range input[type="range"]::-webkit-slider-runnable-track,
|
.wrap-range input[type="range"]::-moz-range-track {
|
height: 10px;
|
border-radius: 10px;
|
box-shadow: none;
|
}
|
|
.wrap-range input[type="range"]::-webkit-slider-thumb {
|
-webkit-appearance: none;
|
height: 20px;
|
width: 20px;
|
margin-top: -1px;
|
background: #ffffff;
|
border-radius: 50%;
|
box-shadow: 0 0 8px #00ccff;
|
position: relative;
|
z-index: 999;
|
}
|
</style>
|
