提交
This commit is contained in:
@@ -0,0 +1,784 @@
|
||||
<template>
|
||||
<view v-if="show" class="t-wrapper" @touchmove.stop.prevent="moveHandle">
|
||||
<view class="t-mask" :class="{active:active}" @click.stop="close"></view>
|
||||
<view class="t-box" :class="{active:active}">
|
||||
<view class="t-header">
|
||||
<view class="t-header-button" @click="close">取消</view>
|
||||
<view class="t-header-button" @click="confirm">确认</view>
|
||||
</view>
|
||||
<view class="t-color__box" :style="{ background: 'rgb(' + bgcolor.r + ',' + bgcolor.g + ',' + bgcolor.b + ')'}">
|
||||
<view class="t-background boxs" @touchstart="touchstart($event, 0)" @touchmove="touchmove($event, 0)" @touchend="touchend($event, 0)">
|
||||
<view class="t-color-mask"></view>
|
||||
<view class="t-pointer" :style="{ top: site[0].top - 8 + 'px', left: site[0].left - 8 + 'px' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="t-control__box">
|
||||
<view class="t-control__color">
|
||||
<view class="t-control__color-content" :style="{ background: 'rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + rgba.a + ')' }"></view>
|
||||
</view>
|
||||
<view class="t-control-box__item">
|
||||
<view class="t-controller boxs" @touchstart="touchstart($event, 1)" @touchmove="touchmove($event, 1)" @touchend="touchend($event, 1)">
|
||||
<view class="t-hue">
|
||||
<view class="t-circle" :style="{ left: site[1].left - 12 + 'px' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="t-controller boxs" @touchstart="touchstart($event, 2)" @touchmove="touchmove($event, 2)" @touchend="touchend($event, 2)">
|
||||
<view class="t-transparency">
|
||||
<view class="t-circle" :style="{ left: site[2].left - 12 + 'px' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="t-result__box">
|
||||
<view v-if="mode" class="t-result__item">
|
||||
<view class="t-result__box-input">{{hex}}</view>
|
||||
<view class="t-result__box-text">HEX</view>
|
||||
</view>
|
||||
<template v-else>
|
||||
<view class="t-result__item">
|
||||
<view class="t-result__box-input">{{rgba.r}}</view>
|
||||
<view class="t-result__box-text">R</view>
|
||||
</view>
|
||||
<view class="t-result__item">
|
||||
<view class="t-result__box-input">{{rgba.g}}</view>
|
||||
<view class="t-result__box-text">G</view>
|
||||
</view>
|
||||
<view class="t-result__item">
|
||||
<view class="t-result__box-input">{{rgba.b}}</view>
|
||||
<view class="t-result__box-text">B</view>
|
||||
</view>
|
||||
<view class="t-result__item">
|
||||
<view class="t-result__box-input">{{rgba.a}}</view>
|
||||
<view class="t-result__box-text">A</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="t-result__item t-select" @click="select">
|
||||
<view class="t-result__box-input">
|
||||
<view>切换</view>
|
||||
<view>模式</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="t-alternative">
|
||||
<view class="t-alternative__item" v-for="(item,index) in colorList" :key="index">
|
||||
<view class="t-alternative__item-content" :style="{ background: 'rgba(' + item.r + ',' + item.g + ',' + item.b + ',' + item.a + ')' }"
|
||||
@click="selectColor(item)">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
color: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0,
|
||||
a: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
spareColor: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
active: false,
|
||||
// rgba 颜色
|
||||
rgba: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0,
|
||||
a: 1
|
||||
},
|
||||
// hsb 颜色
|
||||
hsb: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
b: 0
|
||||
},
|
||||
site: [{
|
||||
top: 0,
|
||||
left: 0
|
||||
}, {
|
||||
left: 0
|
||||
}, {
|
||||
left: 0
|
||||
}],
|
||||
index: 0,
|
||||
bgcolor: {
|
||||
r: 255,
|
||||
g: 0,
|
||||
b: 0,
|
||||
a: 1
|
||||
},
|
||||
hex: '#000000',
|
||||
mode: true,
|
||||
colorList: [{
|
||||
r: 244,
|
||||
g: 67,
|
||||
b: 54,
|
||||
a: 1
|
||||
}, {
|
||||
r: 233,
|
||||
g: 30,
|
||||
b: 99,
|
||||
a: 1
|
||||
}, {
|
||||
r: 156,
|
||||
g: 39,
|
||||
b: 176,
|
||||
a: 1
|
||||
}, {
|
||||
r: 103,
|
||||
g: 58,
|
||||
b: 183,
|
||||
a: 1
|
||||
}, {
|
||||
r: 63,
|
||||
g: 81,
|
||||
b: 181,
|
||||
a: 1
|
||||
}, {
|
||||
r: 33,
|
||||
g: 150,
|
||||
b: 243,
|
||||
a: 1
|
||||
}, {
|
||||
r: 3,
|
||||
g: 169,
|
||||
b: 244,
|
||||
a: 1
|
||||
}, {
|
||||
r: 0,
|
||||
g: 188,
|
||||
b: 212,
|
||||
a: 1
|
||||
}, {
|
||||
r: 0,
|
||||
g: 150,
|
||||
b: 136,
|
||||
a: 1
|
||||
}, {
|
||||
r: 76,
|
||||
g: 175,
|
||||
b: 80,
|
||||
a: 1
|
||||
}, {
|
||||
r: 139,
|
||||
g: 195,
|
||||
b: 74,
|
||||
a: 1
|
||||
}, {
|
||||
r: 205,
|
||||
g: 220,
|
||||
b: 57,
|
||||
a: 1
|
||||
}, {
|
||||
r: 255,
|
||||
g: 235,
|
||||
b: 59,
|
||||
a: 1
|
||||
}, {
|
||||
r: 255,
|
||||
g: 193,
|
||||
b: 7,
|
||||
a: 1
|
||||
}, {
|
||||
r: 255,
|
||||
g: 152,
|
||||
b: 0,
|
||||
a: 1
|
||||
}, {
|
||||
r: 255,
|
||||
g: 87,
|
||||
b: 34,
|
||||
a: 1
|
||||
}, {
|
||||
r: 121,
|
||||
g: 85,
|
||||
b: 72,
|
||||
a: 1
|
||||
}, {
|
||||
r: 158,
|
||||
g: 158,
|
||||
b: 158,
|
||||
a: 1
|
||||
}, {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0,
|
||||
a: 0.5
|
||||
}, {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0,
|
||||
a: 0
|
||||
}, ]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.rgba = this.color;
|
||||
if (this.spareColor.length !== 0) {
|
||||
this.colorList = this.spareColor;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
init() {
|
||||
// hsb 颜色
|
||||
this.hsb = this.rgbToHex(this.rgba);
|
||||
// this.setColor();
|
||||
this.setValue(this.rgba);
|
||||
},
|
||||
moveHandle() {},
|
||||
open() {
|
||||
this.show = true;
|
||||
this.$nextTick(() => {
|
||||
this.init();
|
||||
setTimeout(() => {
|
||||
this.active = true;
|
||||
setTimeout(() => {
|
||||
this.getSelectorQuery();
|
||||
}, 350)
|
||||
}, 50)
|
||||
})
|
||||
|
||||
},
|
||||
close() {
|
||||
this.active = false;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.show = false;
|
||||
}, 500)
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.close();
|
||||
this.$emit('confirm', {
|
||||
rgba: this.rgba,
|
||||
hex: this.hex
|
||||
})
|
||||
},
|
||||
// 选择模式
|
||||
select() {
|
||||
this.mode = !this.mode
|
||||
},
|
||||
// 常用颜色选择
|
||||
selectColor(item) {
|
||||
this.setColorBySelect(item)
|
||||
},
|
||||
touchstart(e, index) {
|
||||
const {
|
||||
pageX,
|
||||
pageY
|
||||
} = e.touches[0];
|
||||
this.pageX = pageX;
|
||||
this.pageY = pageY;
|
||||
this.setPosition(pageX, pageY, index);
|
||||
},
|
||||
touchmove(e, index) {
|
||||
const {
|
||||
pageX,
|
||||
pageY
|
||||
} = e.touches[0];
|
||||
this.moveX = pageX;
|
||||
this.moveY = pageY;
|
||||
this.setPosition(pageX, pageY, index);
|
||||
},
|
||||
touchend(e, index) {},
|
||||
/**
|
||||
* 设置位置
|
||||
*/
|
||||
setPosition(x, y, index) {
|
||||
this.index = index;
|
||||
const {
|
||||
top,
|
||||
left,
|
||||
width,
|
||||
height
|
||||
} = this.position[index];
|
||||
// 设置最大最小值
|
||||
|
||||
this.site[index].left = Math.max(0, Math.min(parseInt(x - left), width));
|
||||
if (index === 0) {
|
||||
this.site[index].top = Math.max(0, Math.min(parseInt(y - top), height));
|
||||
// 设置颜色
|
||||
this.hsb.s = parseInt((100 * this.site[index].left) / width);
|
||||
this.hsb.b = parseInt(100 - (100 * this.site[index].top) / height);
|
||||
this.setColor();
|
||||
this.setValue(this.rgba);
|
||||
} else {
|
||||
this.setControl(index, this.site[index].left);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 设置 rgb 颜色
|
||||
*/
|
||||
setColor() {
|
||||
const rgb = this.HSBToRGB(this.hsb);
|
||||
this.rgba.r = rgb.r;
|
||||
this.rgba.g = rgb.g;
|
||||
this.rgba.b = rgb.b;
|
||||
},
|
||||
/**
|
||||
* 设置二进制颜色
|
||||
* @param {Object} rgb
|
||||
*/
|
||||
setValue(rgb) {
|
||||
this.hex = '#' + this.rgbToHex(rgb);
|
||||
},
|
||||
setControl(index, x) {
|
||||
const {
|
||||
top,
|
||||
left,
|
||||
width,
|
||||
height
|
||||
} = this.position[index];
|
||||
|
||||
if (index === 1) {
|
||||
this.hsb.h = parseInt((360 * x) / width);
|
||||
this.bgcolor = this.HSBToRGB({
|
||||
h: this.hsb.h,
|
||||
s: 100,
|
||||
b: 100
|
||||
});
|
||||
this.setColor()
|
||||
} else {
|
||||
this.rgba.a = (x / width).toFixed(1);
|
||||
}
|
||||
this.setValue(this.rgba);
|
||||
},
|
||||
/**
|
||||
* rgb 转 二进制 hex
|
||||
* @param {Object} rgb
|
||||
*/
|
||||
rgbToHex(rgb) {
|
||||
let hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
|
||||
hex.map(function(str, i) {
|
||||
if (str.length == 1) {
|
||||
hex[i] = '0' + str;
|
||||
}
|
||||
});
|
||||
return hex.join('');
|
||||
},
|
||||
setColorBySelect(getrgb) {
|
||||
const {
|
||||
r,
|
||||
g,
|
||||
b,
|
||||
a
|
||||
} = getrgb;
|
||||
let rgb = {}
|
||||
rgb = {
|
||||
r: r ? parseInt(r) : 0,
|
||||
g: g ? parseInt(g) : 0,
|
||||
b: b ? parseInt(b) : 0,
|
||||
a: a ? a : 0,
|
||||
};
|
||||
this.rgba = rgb;
|
||||
this.hsb = this.rgbToHsb(rgb);
|
||||
this.changeViewByHsb();
|
||||
},
|
||||
changeViewByHsb() {
|
||||
const [a, b, c] = this.position;
|
||||
this.site[0].left = parseInt(this.hsb.s * a.width / 100);
|
||||
this.site[0].top = parseInt((100 - this.hsb.b) * a.height / 100);
|
||||
this.setColor(this.hsb.h);
|
||||
this.setValue(this.rgba);
|
||||
this.bgcolor = this.HSBToRGB({
|
||||
h: this.hsb.h,
|
||||
s: 100,
|
||||
b: 100
|
||||
});
|
||||
|
||||
this.site[1].left = this.hsb.h / 360 * b.width;
|
||||
this.site[2].left = this.rgba.a * c.width;
|
||||
|
||||
},
|
||||
/**
|
||||
* hsb 转 rgb
|
||||
* @param {Object} 颜色模式 H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度
|
||||
*/
|
||||
HSBToRGB(hsb) {
|
||||
let rgb = {};
|
||||
let h = Math.round(hsb.h);
|
||||
let s = Math.round((hsb.s * 255) / 100);
|
||||
let v = Math.round((hsb.b * 255) / 100);
|
||||
if (s == 0) {
|
||||
rgb.r = rgb.g = rgb.b = v;
|
||||
} else {
|
||||
let t1 = v;
|
||||
let t2 = ((255 - s) * v) / 255;
|
||||
let t3 = ((t1 - t2) * (h % 60)) / 60;
|
||||
if (h == 360) h = 0;
|
||||
if (h < 60) {
|
||||
rgb.r = t1;
|
||||
rgb.b = t2;
|
||||
rgb.g = t2 + t3;
|
||||
} else if (h < 120) {
|
||||
rgb.g = t1;
|
||||
rgb.b = t2;
|
||||
rgb.r = t1 - t3;
|
||||
} else if (h < 180) {
|
||||
rgb.g = t1;
|
||||
rgb.r = t2;
|
||||
rgb.b = t2 + t3;
|
||||
} else if (h < 240) {
|
||||
rgb.b = t1;
|
||||
rgb.r = t2;
|
||||
rgb.g = t1 - t3;
|
||||
} else if (h < 300) {
|
||||
rgb.b = t1;
|
||||
rgb.g = t2;
|
||||
rgb.r = t2 + t3;
|
||||
} else if (h < 360) {
|
||||
rgb.r = t1;
|
||||
rgb.g = t2;
|
||||
rgb.b = t1 - t3;
|
||||
} else {
|
||||
rgb.r = 0;
|
||||
rgb.g = 0;
|
||||
rgb.b = 0;
|
||||
}
|
||||
}
|
||||
return {
|
||||
r: Math.round(rgb.r),
|
||||
g: Math.round(rgb.g),
|
||||
b: Math.round(rgb.b)
|
||||
};
|
||||
},
|
||||
rgbToHsb(rgb) {
|
||||
let hsb = {
|
||||
h: 0,
|
||||
s: 0,
|
||||
b: 0
|
||||
};
|
||||
let min = Math.min(rgb.r, rgb.g, rgb.b);
|
||||
let max = Math.max(rgb.r, rgb.g, rgb.b);
|
||||
let delta = max - min;
|
||||
hsb.b = max;
|
||||
hsb.s = max != 0 ? 255 * delta / max : 0;
|
||||
if (hsb.s != 0) {
|
||||
if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;
|
||||
else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
||||
else hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
||||
} else hsb.h = -1;
|
||||
hsb.h *= 60;
|
||||
if (hsb.h < 0) hsb.h = 0;
|
||||
hsb.s *= 100 / 255;
|
||||
hsb.b *= 100 / 255;
|
||||
return hsb;
|
||||
},
|
||||
getSelectorQuery() {
|
||||
const views = uni.createSelectorQuery().in(this);
|
||||
views
|
||||
.selectAll('.boxs')
|
||||
.boundingClientRect(data => {
|
||||
if (!data || data.length === 0) {
|
||||
setTimeout(() => this.getSelectorQuery(), 20)
|
||||
return
|
||||
}
|
||||
this.position = data;
|
||||
// this.site[0].top = data[0].height;
|
||||
// this.site[0].left = 0;
|
||||
// this.site[1].left = data[1].width;
|
||||
// this.site[2].left = data[2].width;
|
||||
this.setColorBySelect(this.rgba);
|
||||
})
|
||||
.exec();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
spareColor(newVal) {
|
||||
this.colorList = newVal;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.t-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.t-box {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 30upx 0;
|
||||
padding-top: 0;
|
||||
background: #fff;
|
||||
transition: all 0.3s;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.t-box.active {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
.t-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100upx;
|
||||
border-bottom: 1px #eee solid;
|
||||
box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.t-header-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 150upx;
|
||||
height: 100upx;
|
||||
font-size: 30upx;
|
||||
color: #666;
|
||||
padding-left: 20upx;
|
||||
}
|
||||
|
||||
.t-header-button:last-child {
|
||||
justify-content: flex-end;
|
||||
padding-right: 20upx;
|
||||
}
|
||||
|
||||
.t-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: -1;
|
||||
transition: all 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.t-mask.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.t-color__box {
|
||||
position: relative;
|
||||
height: 400upx;
|
||||
background: rgb(255, 0, 0);
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
margin: 0 20upx;
|
||||
margin-top: 20upx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.t-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.t-color-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 400upx;
|
||||
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
.t-pointer {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: -8px;
|
||||
z-index: 2;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px #fff solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.t-show-color {
|
||||
width: 100upx;
|
||||
height: 50upx;
|
||||
}
|
||||
|
||||
.t-control__box {
|
||||
margin-top: 50upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-left: 20upx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.t-control__color {
|
||||
flex-shrink: 0;
|
||||
width: 100upx;
|
||||
height: 100upx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
|
||||
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
|
||||
background-size: 36upx 36upx;
|
||||
background-position: 0 0, 18upx 18upx;
|
||||
border: 1px #eee solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.t-control__color-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.t-control-box__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0 30upx;
|
||||
}
|
||||
|
||||
.t-controller {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
|
||||
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
|
||||
background-size: 32upx 32upx;
|
||||
background-position: 0 0, 16upx 16upx;
|
||||
}
|
||||
|
||||
.t-hue {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
.t-transparency {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0));
|
||||
}
|
||||
|
||||
.t-circle {
|
||||
position: absolute;
|
||||
/* right: -10px; */
|
||||
top: -2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.t-result__box {
|
||||
margin-top: 20upx;
|
||||
padding: 10upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.t-result__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10upx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.t-result__box-input {
|
||||
padding: 10upx 0;
|
||||
width: 100%;
|
||||
font-size: 28upx;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
color: #999;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.t-result__box-text {
|
||||
margin-top: 10upx;
|
||||
font-size: 28upx;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.t-select {
|
||||
flex-shrink: 0;
|
||||
width: 150upx;
|
||||
padding: 0 30upx;
|
||||
}
|
||||
|
||||
.t-select .t-result__box-input {
|
||||
border-radius: 10upx;
|
||||
border: none;
|
||||
color: #999;
|
||||
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.t-select .t-result__box-input:active {
|
||||
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.t-alternative {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* justify-content: space-between; */
|
||||
width: 100%;
|
||||
padding-right: 10upx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.t-alternative__item {
|
||||
margin-left: 12upx;
|
||||
margin-top: 10upx;
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
border-radius: 10upx;
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
|
||||
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
|
||||
background-size: 36upx 36upx;
|
||||
background-position: 0 0, 18upx 18upx;
|
||||
border: 1px #eee solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.t-alternative__item-content {
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
background: rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.t-alternative__item:active {
|
||||
transition: all 0.3s;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
123
uni_modules/piaoyi-editor/components/piaoyi-editor/iconfont.css
Normal file
123
uni_modules/piaoyi-editor/components/piaoyi-editor/iconfont.css
Normal file
@@ -0,0 +1,123 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4040150 */
|
||||
src: url('iconfont.woff2?t=1682491617906') format('woff2'),
|
||||
url('iconfont.woff?t=1682491617906') format('woff'),
|
||||
url('iconfont.ttf?t=1682491617906') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-checklist:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-zitiyanse:before {
|
||||
content: "\e646";
|
||||
}
|
||||
|
||||
.icon-formatheader1:before {
|
||||
content: "\e860";
|
||||
}
|
||||
|
||||
.icon-formatheader2:before {
|
||||
content: "\e861";
|
||||
}
|
||||
|
||||
.icon-undo:before {
|
||||
content: "\e787";
|
||||
}
|
||||
|
||||
.icon-redo:before {
|
||||
content: "\e788";
|
||||
}
|
||||
|
||||
.icon-indent:before {
|
||||
content: "\e7f3";
|
||||
}
|
||||
|
||||
.icon-outdent:before {
|
||||
content: "\e7f4";
|
||||
}
|
||||
|
||||
.icon-zitijiacu:before {
|
||||
content: "\ec83";
|
||||
}
|
||||
|
||||
.icon-zuoyouduiqi:before {
|
||||
content: "\ec87";
|
||||
}
|
||||
|
||||
.icon-Character-Spacing:before {
|
||||
content: "\ed91";
|
||||
}
|
||||
|
||||
.icon-format:before {
|
||||
content: "\e6da";
|
||||
}
|
||||
|
||||
.icon-font-size:before {
|
||||
content: "\e7b9";
|
||||
}
|
||||
|
||||
.icon-duanhouju:before {
|
||||
content: "\e61a";
|
||||
}
|
||||
|
||||
.icon-duanqianju:before {
|
||||
content: "\e61b";
|
||||
}
|
||||
|
||||
.icon-shanchuxian:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-charutupian:before {
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
.icon-fengexian:before {
|
||||
content: "\e60e";
|
||||
}
|
||||
|
||||
.icon-juzhongduiqi:before {
|
||||
content: "\e620";
|
||||
}
|
||||
|
||||
.icon-wuxupailie:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.icon-youduiqi:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
|
||||
.icon-youxupailie:before {
|
||||
content: "\e64c";
|
||||
}
|
||||
|
||||
.icon-zitixiahuaxian:before {
|
||||
content: "\e657";
|
||||
}
|
||||
|
||||
.icon-zitixieti:before {
|
||||
content: "\e658";
|
||||
}
|
||||
|
||||
.icon-zuoduiqi:before {
|
||||
content: "\e65a";
|
||||
}
|
||||
|
||||
.icon-LineHeight:before {
|
||||
content: "\e624";
|
||||
}
|
||||
|
||||
.icon-editor-background-color:before {
|
||||
content: "\e829";
|
||||
}
|
||||
|
||||
BIN
uni_modules/piaoyi-editor/components/piaoyi-editor/iconfont.ttf
Normal file
BIN
uni_modules/piaoyi-editor/components/piaoyi-editor/iconfont.ttf
Normal file
Binary file not shown.
BIN
uni_modules/piaoyi-editor/components/piaoyi-editor/iconfont.woff
Normal file
BIN
uni_modules/piaoyi-editor/components/piaoyi-editor/iconfont.woff
Normal file
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,425 @@
|
||||
<template>
|
||||
<view class="container-editor" style="height: 100%;">
|
||||
<view class="textarea" style="height: 100%;">
|
||||
<view class="page-body" style="height: 100%;">
|
||||
<view class='wrapper' style="height: 100%;">
|
||||
<PickerColor ref="colorPicker" :color="{r: 255,g: 0,b: 0,a: 0.6}" @confirm="confirm"></PickerColor>
|
||||
<view class='toolbar' @tap="format">
|
||||
<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-font-size"
|
||||
data-name="fontSize" data-value="24px"></view>
|
||||
<view :class="formats.color? 'ql-active' : ''" class="iconfont icon-zitiyanse" data-name="color" :data-value="formats.color">
|
||||
</view>
|
||||
<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-formatheader1"
|
||||
data-name="header" :data-value="1"></view>
|
||||
<view :class="formats.header === 2 ? 'ql-active' : ''" class="iconfont icon-formatheader2"
|
||||
data-name="header" :data-value="2"></view>
|
||||
<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold">
|
||||
</view>
|
||||
<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti"
|
||||
data-name="italic"></view>
|
||||
<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
|
||||
data-name="underline"></view>
|
||||
<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-shanchuxian"
|
||||
data-name="strike"></view>
|
||||
<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
|
||||
data-name="align" data-value="left"></view>
|
||||
<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
|
||||
data-name="align" data-value="center"></view>
|
||||
<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
|
||||
data-name="align" data-value="right"></view>
|
||||
<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
|
||||
data-name="align" data-value="justify"></view>
|
||||
<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-LineHeight"
|
||||
data-name="lineHeight" data-value="2"></view>
|
||||
<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing"
|
||||
data-name="letterSpacing" data-value="2em">
|
||||
</view>
|
||||
<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-duanqianju"
|
||||
data-name="marginTop" data-value="10px"></view>
|
||||
<view :class="formats.previewarginBottom ? 'ql-active' : ''" class="iconfont icon-duanhouju"
|
||||
data-name="marginBottom" data-value="10px"></view>
|
||||
<!-- <view class="iconfont icon-rili4" @tap="insertDate"></view> -->
|
||||
<view class="iconfont icon-checklist" data-name="list" data-value="check"></view>
|
||||
<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
|
||||
data-name="list" data-value="ordered"></view>
|
||||
<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
|
||||
data-name="list" data-value="bullet"></view>
|
||||
<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
|
||||
<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
|
||||
<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
|
||||
<view class="iconfont icon-charutupian" @tap="insertImage"></view>
|
||||
<view class="iconfont icon-undo" @tap="undo"></view>
|
||||
<view class="iconfont icon-redo" @tap="redo"></view>
|
||||
<view class="iconfont icon-format" @tap="clear"></view>
|
||||
</view>
|
||||
<editor :style="`height:${height}`" style="overflow: auto;padding: 6px;box-sizing: border-box;margin-top: 10px;background-color: transparent;" id="editor" class="editor" :placeholder="placeholder" showImgSize showImgToolbar showImgResize
|
||||
@statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady"
|
||||
@input="saveContens">
|
||||
</editor>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PickerColor from "./color-picker.vue"
|
||||
export default {
|
||||
components: {
|
||||
PickerColor
|
||||
},
|
||||
props: {
|
||||
api: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
photoUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
values: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '100vh'
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: 'file'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentTab: 0,
|
||||
curColor: '#000000',
|
||||
show: true,
|
||||
hdid: "",
|
||||
myHtml: "",
|
||||
formats: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPicker() {
|
||||
this.$refs.colorPicker.open()
|
||||
},
|
||||
confirm(e) {
|
||||
this.editorCtx.format('color', e.hex)
|
||||
},
|
||||
saveContens() {
|
||||
let that = this;
|
||||
let maxlength = parseInt(that.maxlength);
|
||||
that.editorCtx.getContents({
|
||||
success: function(res) {
|
||||
let html_text = res.html;
|
||||
let html_length = html_text.length;
|
||||
that.$emit("changes", {
|
||||
html: res.html,
|
||||
length: html_length
|
||||
});
|
||||
},
|
||||
})
|
||||
},
|
||||
update() {
|
||||
//获取一下是否有数据
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
that.editorCtx.setContents({
|
||||
"html": that.values
|
||||
});
|
||||
}, 1000)
|
||||
},
|
||||
onEditorReady() {
|
||||
let that = this;
|
||||
console.log(uni.createSelectorQuery().in(this).select('#editor'))
|
||||
uni.createSelectorQuery().in(this).select('#editor').context((res) => {
|
||||
that.editorCtx = res.context;
|
||||
that.update();
|
||||
}).exec((result) => {});
|
||||
},
|
||||
undo() {
|
||||
this.editorCtx.undo()
|
||||
},
|
||||
redo() {
|
||||
this.editorCtx.redo()
|
||||
},
|
||||
format(e) {
|
||||
let {
|
||||
name,
|
||||
value
|
||||
} = e.target.dataset
|
||||
if (!name) return
|
||||
if (name == 'color') {
|
||||
this.showPicker()
|
||||
} else {
|
||||
this.editorCtx.format(name, value)
|
||||
}
|
||||
},
|
||||
onStatusChange(e) {
|
||||
const formats = e.detail
|
||||
this.formats = formats
|
||||
},
|
||||
insertDivider() {
|
||||
this.editorCtx.insertDivider();
|
||||
},
|
||||
clear() {
|
||||
this.editorCtx.clear();
|
||||
this.$emit()
|
||||
},
|
||||
insertDate() {
|
||||
const date = new Date()
|
||||
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
|
||||
this.editorCtx.insertText({
|
||||
text: formatDate
|
||||
})
|
||||
},
|
||||
insertImage() {
|
||||
let that = this;
|
||||
// #ifdef APP-PLUS || H5
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册或者相机选择
|
||||
success: (res) => {
|
||||
const tempFilePaths = res.tempFilePaths[0]
|
||||
if (!this.api || !this.photoUrl) {
|
||||
that.editorCtx.insertImage({
|
||||
src: tempFilePaths,
|
||||
alt: '图像',
|
||||
success: function() {}
|
||||
})
|
||||
uni.showToast({
|
||||
title: '未传入api字段或者photoUrl字段，此为临时图片路径',
|
||||
duration: 3000,
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
uni.uploadFile({
|
||||
url: this.photoUrl + this.api,
|
||||
filePath: tempFilePaths,
|
||||
name: this.name,
|
||||
formData: {},
|
||||
success: (uploadFileRes) => {
|
||||
var obj = JSON.parse(uploadFileRes.data)
|
||||
if (obj.code == 0) {
|
||||
uni.hideLoading()
|
||||
this.img = obj.url
|
||||
console.log('this.img at line 218:', this.img)
|
||||
wx.showToast({
|
||||
title: obj.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
this.editorCtx.insertImage({
|
||||
src: this.img,
|
||||
alt: '图像',
|
||||
success: function() {}
|
||||
})
|
||||
} else {uni.hideLoading()
|
||||
wx.showToast({
|
||||
title: obj.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
fail() {uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '未授权访问相册权限，请授权后使用',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
uni.chooseMedia({
|
||||
count: 1,
|
||||
mediaType: ['image'],
|
||||
sourceType: ['album'],
|
||||
sizeType: 'compressed',
|
||||
success: (chooseImageRes) => {
|
||||
const tempFilePaths = chooseImageRes.tempFiles[0].tempFilePath;
|
||||
console.log(tempFilePaths)
|
||||
if (!this.api || !this.photoUrl) {
|
||||
that.editorCtx.insertImage({
|
||||
src: tempFilePaths,
|
||||
alt: '图像',
|
||||
success: function() {}
|
||||
})
|
||||
uni.showToast({
|
||||
title: '未传入api字段或者photoUrl字段，此为临时图片路径',
|
||||
duration: 3000,
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
uni.uploadFile({
|
||||
url: this.photoUrl + this.api,
|
||||
filePath: tempFilePaths,
|
||||
name: this.name,
|
||||
formData: {},
|
||||
success: (uploadFileRes) => {
|
||||
var obj = JSON.parse(uploadFileRes.data)
|
||||
console.log('obj at line 274:', obj)
|
||||
if (obj.code == 0) {
|
||||
uni.hideLoading()
|
||||
this.img = obj.url
|
||||
wx.showToast({
|
||||
title: obj.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
this.editorCtx.insertImage({
|
||||
src: this.img,
|
||||
alt: '图像',
|
||||
success: function() {}
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
wx.showToast({
|
||||
title: obj.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
fail(err) {
|
||||
console.log(err)
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: err.errMsg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('iconfont.css');
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.tabs .current {
|
||||
border-bottom: 2px solid #0369D6;
|
||||
}
|
||||
|
||||
.tabs .tab {
|
||||
font-size: 32upx;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 20upx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.main .item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 80upx;
|
||||
border-bottom: 1px solid #F2F2F2;
|
||||
}
|
||||
|
||||
.main .item .left {
|
||||
min-width: 200upx;
|
||||
}
|
||||
|
||||
.main .title {
|
||||
padding-bottom: 20upx;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #F2F2F2;
|
||||
}
|
||||
|
||||
.main .textarea {
|
||||
border: 1px solid #F2F2F2;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 0 10upx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
width: 9%;
|
||||
cursor: pointer;
|
||||
font-size: 40upx !important;
|
||||
text-align: center;
|
||||
padding: 10upx 0;
|
||||
}
|
||||
|
||||
.icon-rili4 {
|
||||
font-size: 48upx !important;
|
||||
}
|
||||
|
||||
.icon-duanqianju,
|
||||
.icon-duanhouju,
|
||||
.icon-zitijiacu,
|
||||
.icon-zitixieti,
|
||||
.icon-zitixiahuaxian,
|
||||
.icon-shanchuxian {
|
||||
font-size: 36upx !important;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
box-sizing: border-box;
|
||||
border-bottom: 0;
|
||||
margin-bottom: 10upx;
|
||||
}
|
||||
|
||||
.ql-container {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 300upx;
|
||||
height: auto;
|
||||
background: #fff;
|
||||
font-size: 32upx;
|
||||
line-height: 1;
|
||||
padding-bottom: 60upx;
|
||||
}
|
||||
|
||||
/deep/ .ql-editor.ql-blank:before {
|
||||
font-size: 28upx;
|
||||
font-style: inherit;
|
||||
}
|
||||
|
||||
.ql-active {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 150upx;
|
||||
font-size: 30upx;
|
||||
}
|
||||
|
||||
.editor {
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user