123
This commit is contained in:
parent
75e13dff0e
commit
918331c0ad
|
|
@ -0,0 +1,134 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<tn-nav-bar :isBack="false" backTitle="" :bottomShadow="true" backgroundColor="#FFFFFF">
|
||||||
|
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
||||||
|
<view style="padding-left: 15rpx;" @click="goBack()">
|
||||||
|
<text class="tn-icon-left" style="font-size: 40rpx;"></text>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-top"
|
||||||
|
style=";text-shadow: 1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
|
||||||
|
<tn-tabs :list="[{name:'活动签到'}]" :current="topCurrent" activeColor="#000" :bold="false"
|
||||||
|
:fontSize="36"></tn-tabs>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</tn-nav-bar>
|
||||||
|
<view :style="{paddingTop: vuex_custom_bar_height + 20+'px'}" v-if="info!=''">
|
||||||
|
<view style="padding:0rpx 30rpx;text-align: center;">
|
||||||
|
<view style="">
|
||||||
|
<text class="tn-icon-trust-fill" style="font-size: 250rpx;color: #01BEFF;"></text>
|
||||||
|
</view>
|
||||||
|
<view style="font-size: 38rpx;font-weight: 600;margin-top: 40rpx;">{{info.activity_name}}</view>
|
||||||
|
<view style="margin-top: 100rpx;font-size: 32rpx;font-weight: 600;">
|
||||||
|
<view>开始时间：{{info.activity_start_time}}</view>
|
||||||
|
<view style="margin: 20rpx 0rpx;">-</view>
|
||||||
|
<view>结束时间：{{info.activity_end_time}}</view>
|
||||||
|
</view>
|
||||||
|
<view style="margin-top: 100rpx;">
|
||||||
|
<tn-button @click="sign()" backgroundColor="#01BEFF" :shadow="true" fontColor="#ffffff"
|
||||||
|
width="200rpx" height="200rpx" :fontSize="40" shape="icon" margin="10rpx 10rpx">签到</tn-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
activitySign,
|
||||||
|
eventInfo
|
||||||
|
} from '@/util/api.js';
|
||||||
|
import store from '@/store/index.js'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
topCurrent: 1,
|
||||||
|
activity_id: '',
|
||||||
|
member_id: '',
|
||||||
|
association_id: '',
|
||||||
|
info: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(query) {
|
||||||
|
const q = decodeURIComponent(query.q) // 获取到二维码原始链接内容
|
||||||
|
var data = this.getUrlParams(q);
|
||||||
|
this.activity_id = data.id;
|
||||||
|
this.association_id = data.association_id;
|
||||||
|
var that = this;
|
||||||
|
console.log('---1---');
|
||||||
|
getApp().getUserLogin((r) => {
|
||||||
|
console.log('---2---');
|
||||||
|
that.member_id = r.data.id;
|
||||||
|
that.getEventInfo();
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getEventInfo() {
|
||||||
|
console.log('---3---');
|
||||||
|
eventInfo({
|
||||||
|
association_id: this.association_id,
|
||||||
|
id: this.activity_id
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
console.log(res);
|
||||||
|
if (res.code == 1) {
|
||||||
|
this.info = res.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
uni.showToast({
|
||||||
|
title: error,
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
sign() {
|
||||||
|
activitySign({
|
||||||
|
activity_id: this.activity_id,
|
||||||
|
member_id: this.member_id,
|
||||||
|
association_id: this.association_id,
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
console.log(res);
|
||||||
|
uni.showToast({
|
||||||
|
title: res.msg,
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
uni.showToast({
|
||||||
|
title: error,
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goBack() {
|
||||||
|
if (getCurrentPages().length > 1) {
|
||||||
|
uni.navigateBack()
|
||||||
|
} else {
|
||||||
|
uni.redirectTo({
|
||||||
|
url: '/pages/index/index'
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getUrlParams(url) {
|
||||||
|
// \w+ 表示匹配至少一个(数字、字母及下划线), [\u4e00-\u9fa5]+ 表示匹配至少一个中文字符
|
||||||
|
let pattern = /(\w+|[\u4e00-\u9fa5]+)=(\w+|[\u4e00-\u9fa5]+)/ig;
|
||||||
|
let result = {};
|
||||||
|
url.replace(pattern, ($, $1, $2) => {
|
||||||
|
result[$1] = $2;
|
||||||
|
})
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
|
|
@ -0,0 +1,109 @@
|
||||||
|
## 1.4.0（2024-05-31）
|
||||||
|
1. 更新示例工程
|
||||||
|
## 1.3.9（2024-05-31）
|
||||||
|
1. 修复调色板无法正常选色的问题
|
||||||
|
## 1.3.8（2024-05-13）
|
||||||
|
1. 更新示例三（微信小程序上使用setContents造成聚焦滚动的处理）
|
||||||
|
## 1.3.7（2024-05-10）
|
||||||
|
1. 修复添加超链接后，不触发input更新当前最新内容的bug
|
||||||
|
## 1.3.6（2024-05-09）
|
||||||
|
1. 文档迁移
|
||||||
|
## 1.3.5（2024-05-09）
|
||||||
|
1. 所有事件携带编辑器id参数，以便循环时能区分处理
|
||||||
|
2. 更新示例工程
|
||||||
|
## 1.3.4（2024-05-08）
|
||||||
|
1. 更新示例工程
|
||||||
|
2. 新增editorId参数
|
||||||
|
## 1.3.3（2024-03-22）
|
||||||
|
1. 修复微信小程序长按无法粘贴的问题
|
||||||
|
## 1.3.2（2024-03-14）
|
||||||
|
1. 更新了toolbar样式与配置，见文档
|
||||||
|
2. 更新示例工程，媒体查询响应式写法
|
||||||
|
3. 优化了只读模式效果，开启只读模式后，文章内容的超链接可正常点击并跳转
|
||||||
|
## 1.3.1（2024-03-14）
|
||||||
|
1. 优化了只读功能，开启只读后自动隐藏工具栏
|
||||||
|
2. 更新示例工程
|
||||||
|
## 1.3.0（2024-03-07）
|
||||||
|
1. 新增addLink的emit事件
|
||||||
|
## 1.2.9（2024-02-23）
|
||||||
|
1. 更新文档
|
||||||
|
## 1.2.8（2024-02-23）
|
||||||
|
1. 新增了添加超链接的工具，toolbar中link字段，默认开启
|
||||||
|
2. 优化了部分逻辑
|
||||||
|
3. 更新文档、更新示例工程
|
||||||
|
## 1.2.7（2024-02-23）
|
||||||
|
1. 更新文档，更新示例工程
|
||||||
|
2. 添加toolbar中图标字体大小可配置项
|
||||||
|
## 1.2.6（2024-02-22）
|
||||||
|
1. 添加导出工具按钮，可将当前已编辑的html导出至页面解析
|
||||||
|
2. 超链接工具按钮正在尝试开发中(貌似目前官方不支持)
|
||||||
|
## 1.2.5（2024-02-19）
|
||||||
|
1. 更新示例工程(吸顶写法)
|
||||||
|
2. 完善调色板功能
|
||||||
|
## 1.2.4（2024-02-18）
|
||||||
|
1. 修复工具栏颜色按钮底色动态切换问题
|
||||||
|
## 1.2.3（2024-02-18）
|
||||||
|
1. 更新示例工程
|
||||||
|
## 1.2.2（2024-02-18）
|
||||||
|
1. 删除log调试打印
|
||||||
|
## 1.2.1（2024-02-18）
|
||||||
|
1. 修复了颜色图标不会动态切换的问题
|
||||||
|
## 1.2.0（2024-02-18）
|
||||||
|
1. 修复选择颜色时会将所选文字删除的bug
|
||||||
|
## 1.1.9（2024-02-04）
|
||||||
|
1. 更新示例工程
|
||||||
|
## 1.1.8（2024-02-04）
|
||||||
|
1. 文档修改
|
||||||
|
## 1.1.7（2024-02-04）
|
||||||
|
1. 新增toolbar配置项，可自由配置工具栏工具列表
|
||||||
|
2. 移除组件内原templates属性，默认初始化编辑器内容请看文档使用方式示例
|
||||||
|
3. 更新文档
|
||||||
|
## 1.1.6（2024-01-31）
|
||||||
|
1. 更好的兼容vue2了，修复在vue2下高度可能超出的问题
|
||||||
|
2. 示例工程兼容vue2
|
||||||
|
## 1.1.5（2024-01-30）
|
||||||
|
1. 修复工具栏字体按钮无效的问题
|
||||||
|
## 1.1.4（2024-01-30）
|
||||||
|
1. 解决默认初始化内容时前缀空格或缩进无效的问题
|
||||||
|
2. 解决点击工具栏高亮状态后输入内容时便失去高亮的bug
|
||||||
|
3. 更新示例工程
|
||||||
|
## 1.1.3（2024-01-23）
|
||||||
|
1. 重写高度动态计算逻辑，现在对不同屏幕尺寸的适应性更强了
|
||||||
|
## 1.1.2（2024-01-17）
|
||||||
|
1. 修复分割线会生成多条的问题
|
||||||
|
## 1.1.1（2024-01-15）
|
||||||
|
1. 更新文档
|
||||||
|
## 1.1.0（2024-01-15）
|
||||||
|
1. insertText方法在插入内容的时候会移动光标聚焦，导致焦点回滚到视口处
|
||||||
|
2. 更新示例工程
|
||||||
|
## 1.0.9（2024-01-04）
|
||||||
|
1. 更新文档
|
||||||
|
## 1.0.8（2024-01-04）
|
||||||
|
1. 修复h5端官方cdn请求失败的问题，详见问答贴：https://ask.dcloud.net.cn/article/40900
|
||||||
|
## 1.0.7（2024-01-03）
|
||||||
|
1. 移除v-bind="$attrs"，该写法在微信小程序不支持
|
||||||
|
## 1.0.6（2023-12-29）
|
||||||
|
1. 更新文档
|
||||||
|
## 1.0.5（2023-12-29）
|
||||||
|
1. 更新了init方法，可以使用返回的editor实例尽情自定义
|
||||||
|
2. 组件在<editor>上添加v-bind="$attrs"属性穿透，可以使用原editor参数，官方文档：https://uniapp.dcloud.net.cn/component/editor.html
|
||||||
|
## 1.0.4（2023-12-29）
|
||||||
|
1. 优化了切换文字和背景颜色是，可能会导致切换后不生效的问题
|
||||||
|
2. 修复在部分设备上的微信小程序中可能会存在颜色版无法正常滑动的问题
|
||||||
|
3. 更友好的交互体验：添加图标悬停字样描述、添加格式化文本弹窗确认
|
||||||
|
4. 有插入视频的需求，暂时可能无法实现，官方给予的回复是：目前各端的eidtor组件都不能直接插入视频，编辑时可以采用视频封面占位，并在图片中保存视频信息，在预览时再还原为视频。
|
||||||
|
## 1.0.3（2023-10-13）
|
||||||
|
1. 更新readme文档
|
||||||
|
2. 更新调整组件示例项目，添加插件代码中部分注释
|
||||||
|
## 1.0.2（2023-10-13）
|
||||||
|
1. 更新uni_modules规范，可一键导入组件
|
||||||
|
2. 更新组件示例项目（包括使用uniCloud.uploadFile多选上传图片示例方法）
|
||||||
|
## 1.0.1（2023-10-12）
|
||||||
|
1. 修复小程序中自动聚焦滚动到富文本组件区域的bug
|
||||||
|
2. 略微调整了富文本上方toolbar工具栏中按钮的大小尺寸
|
||||||
|
## 1.0.0（2023-9-19）
|
||||||
|
1. 新增字体与背景颜色板
|
||||||
|
2. 可自定义预设内容模板
|
||||||
|
3. 解决官方样例在小程序和app部分报错不兼容的问题
|
||||||
|
4. 可配合云存储上传富文本中插入的图片 本质上是基于官方内置富文本editor组件改版封装，所以官方有的功能都有，官方能兼容的也都兼容
|
||||||
|
|
||||||
|
|
@ -0,0 +1,825 @@
|
||||||
|
<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.ready()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
ready() {
|
||||||
|
this.rgba = this.color
|
||||||
|
if (this.spareColor.length !== 0) {
|
||||||
|
this.colorList = this.spareColor
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 初始化
|
||||||
|
*/
|
||||||
|
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, clientX, clientY } = e.touches[0]
|
||||||
|
// 部分机型可能没有pageX或clientX，因此此处需要做兼容
|
||||||
|
this.moveX = clientX || pageX
|
||||||
|
this.moveY = clientY || pageY
|
||||||
|
this.setPosition(this.moveX, this.moveY, index)
|
||||||
|
},
|
||||||
|
touchmove(e, index) {
|
||||||
|
const { pageX, pageY, clientX, clientY } = e.touches[0]
|
||||||
|
this.moveX = clientX || pageX
|
||||||
|
this.moveY = clientY || pageY
|
||||||
|
this.setPosition(this.moveX, this.moveY, 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()
|
||||||
|
},
|
||||||
|
hex2Rgb(hexColor, alpha = 1) {
|
||||||
|
const color = hexColor.slice(1)
|
||||||
|
const r = parseInt(color.slice(0, 2), 16)
|
||||||
|
const g = parseInt(color.slice(2, 4), 16)
|
||||||
|
const b = parseInt(color.slice(4, 6), 16)
|
||||||
|
return {
|
||||||
|
r: r,
|
||||||
|
g: g,
|
||||||
|
b: b,
|
||||||
|
a: alpha
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
spareColor(newVal) {
|
||||||
|
this.colorList = newVal
|
||||||
|
},
|
||||||
|
color(newVal) {
|
||||||
|
this.ready()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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>
|
||||||
|
|
@ -0,0 +1,152 @@
|
||||||
|
<template>
|
||||||
|
<view class="link-edit-container" v-if="showPopup">
|
||||||
|
<view class="link-edit">
|
||||||
|
<view class="title">添加链接</view>
|
||||||
|
<view class="edit">
|
||||||
|
<view class="description">
|
||||||
|
链接描述：
|
||||||
|
<input v-model="descVal" type="text" class="input" placeholder="请输入链接描述" />
|
||||||
|
</view>
|
||||||
|
<view class="address">
|
||||||
|
链接地址：
|
||||||
|
<input v-model="addrVal" type="text" class="input" placeholder="请输入链接地址" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="control">
|
||||||
|
<view class="cancel" @click="close">取消</view>
|
||||||
|
<view class="confirm" @click="onConfirm">确认</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="mask"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showPopup: false,
|
||||||
|
descVal: '',
|
||||||
|
addrVal: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
open() {
|
||||||
|
this.showPopup = true
|
||||||
|
this.$emit('open')
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.showPopup = false
|
||||||
|
this.descVal = ''
|
||||||
|
this.addrVal = ''
|
||||||
|
this.$emit('close')
|
||||||
|
},
|
||||||
|
onConfirm() {
|
||||||
|
if (!this.descVal) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入链接描述',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!this.addrVal) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入链接地址',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$emit('confirm', {
|
||||||
|
text: this.descVal,
|
||||||
|
href: this.addrVal
|
||||||
|
})
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.link-edit-container {
|
||||||
|
.link-edit {
|
||||||
|
width: 80%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);
|
||||||
|
border-radius: 12rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
z-index: 999;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
height: 80rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit {
|
||||||
|
padding: 24rpx;
|
||||||
|
border-top: 1px solid #eeeeee;
|
||||||
|
border-bottom: 1px solid #eeeeee;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
border: 1px solid #eeeeee;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
|
||||||
|
.uni-input-placeholder {
|
||||||
|
color: #dddddd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.address {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.control {
|
||||||
|
height: 80rpx;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.cancel {
|
||||||
|
flex: 1;
|
||||||
|
color: #dd524d;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.confirm {
|
||||||
|
border-left: 1px solid #eeeeee;
|
||||||
|
flex: 1;
|
||||||
|
color: #007aff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
z-index: 998;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,518 @@
|
||||||
|
<template>
|
||||||
|
<view class="sp-editor" :style="{ '--icon-size': iconSize, '--icon-columns': iconColumns }">
|
||||||
|
<view class="sp-editor-toolbar" v-if="!readOnly" @tap="format">
|
||||||
|
<view v-if="toolbarList.includes('header')" :class="formats.header === 1 ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-format-header-1" title="标题" data-name="header" :data-value="1"></view>
|
||||||
|
<view v-if="toolbarList.includes('bold')" :class="formats.bold ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-zitijiacu" title="加粗" data-name="bold"></view>
|
||||||
|
<view v-if="toolbarList.includes('italic')" :class="formats.italic ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-zitixieti" title="斜体" data-name="italic"></view>
|
||||||
|
<view v-if="toolbarList.includes('underline')" :class="formats.underline ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-zitixiahuaxian" title="下划线" data-name="underline"></view>
|
||||||
|
<view v-if="toolbarList.includes('strike')" :class="formats.strike ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-zitishanchuxian" title="删除线" data-name="strike"></view>
|
||||||
|
<!-- #ifndef MP-BAIDU -->
|
||||||
|
<view v-if="toolbarList.includes('alignLeft')" :class="formats.align === 'left' ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-zuoduiqi" title="左对齐" data-name="align" data-value="left"></view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<view v-if="toolbarList.includes('alignCenter')" :class="formats.align === 'center' ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-juzhongduiqi" title="居中对齐" data-name="align" data-value="center"></view>
|
||||||
|
<view v-if="toolbarList.includes('alignRight')" :class="formats.align === 'right' ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-youduiqi" title="右对齐" data-name="align" data-value="right"></view>
|
||||||
|
<view v-if="toolbarList.includes('alignJustify')" :class="formats.align === 'justify' ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-zuoyouduiqi" title="两端对齐" data-name="align" data-value="justify"></view>
|
||||||
|
<!-- #ifndef MP-BAIDU -->
|
||||||
|
<view v-if="toolbarList.includes('lineHeight')" :class="formats.lineHeight ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-line-height" title="行间距" data-name="lineHeight" data-value="2"></view>
|
||||||
|
<view v-if="toolbarList.includes('letterSpacing')" :class="formats.letterSpacing ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-Character-Spacing" title="字间距" data-name="letterSpacing" data-value="2em"></view>
|
||||||
|
<view v-if="toolbarList.includes('marginTop')" :class="formats.marginTop ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-722bianjiqi_duanqianju" title="段前距" data-name="marginTop" data-value="20px"></view>
|
||||||
|
<view v-if="toolbarList.includes('marginBottom')" :class="formats.marginBottom ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-723bianjiqi_duanhouju" title="段后距" data-name="marginBottom" data-value="20px">
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifndef MP-BAIDU -->
|
||||||
|
<view v-if="toolbarList.includes('fontSize')" :class="formats.fontFamily ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-font" title="字体" data-name="fontFamily" data-value="宋体"></view>
|
||||||
|
<view v-if="toolbarList.includes('fontSize')" :class="formats.fontSize === '24px' ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-fontsize" title="字号" data-name="fontSize" data-value="24px"></view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<view v-if="toolbarList.includes('color')" :style="{ color: formats.color ? textColor : 'initial' }"
|
||||||
|
class="iconfont icon-text_color" title="文字颜色" data-name="color" :data-value="textColor"></view>
|
||||||
|
<view v-if="toolbarList.includes('backgroundColor')"
|
||||||
|
:style="{ color: formats.backgroundColor ? backgroundColor : 'initial' }"
|
||||||
|
class="iconfont icon-fontbgcolor" title="背景颜色" data-name="backgroundColor"
|
||||||
|
:data-value="backgroundColor"></view>
|
||||||
|
<view v-if="toolbarList.includes('date')" class="iconfont icon-date" title="日期" @tap="insertDate"></view>
|
||||||
|
<view v-if="toolbarList.includes('listCheck')" class="iconfont icon--checklist" title="待办" data-name="list"
|
||||||
|
data-value="check"></view>
|
||||||
|
<view v-if="toolbarList.includes('listOrdered')" :class="formats.list === 'ordered' ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-youxupailie" title="有序列表" data-name="list" data-value="ordered"></view>
|
||||||
|
<view v-if="toolbarList.includes('listBullet')" :class="formats.list === 'bullet' ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-wuxupailie" title="无序列表" data-name="list" data-value="bullet"></view>
|
||||||
|
<view v-if="toolbarList.includes('divider')" class="iconfont icon-fengexian" title="分割线"
|
||||||
|
@click="insertDivider"></view>
|
||||||
|
<view v-if="toolbarList.includes('indentDec')" class="iconfont icon-outdent" title="减少缩进" data-name="indent"
|
||||||
|
data-value="-1"></view>
|
||||||
|
<view v-if="toolbarList.includes('indentInc')" class="iconfont icon-indent" title="增加缩进" data-name="indent"
|
||||||
|
data-value="+1"></view>
|
||||||
|
<view v-if="toolbarList.includes('scriptSub')" :class="formats.script === 'sub' ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-zitixiabiao" title="下标" data-name="script" data-value="sub"></view>
|
||||||
|
<view v-if="toolbarList.includes('scriptSuper')" :class="formats.script === 'super' ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-zitishangbiao" title="上标" data-name="script" data-value="super"></view>
|
||||||
|
<view v-if="toolbarList.includes('direction')" :class="formats.direction === 'rtl' ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-direction-rtl" title="文本方向" data-name="direction" data-value="rtl"></view>
|
||||||
|
<view v-if="toolbarList.includes('image')" class="iconfont icon-charutupian" title="图片" @tap="insertImage">
|
||||||
|
</view>
|
||||||
|
<view v-if="toolbarList.includes('link')" class="iconfont icon-charulianjie" title="超链接" @tap="insertLink">
|
||||||
|
</view>
|
||||||
|
<view v-if="toolbarList.includes('undo')" class="iconfont icon-undo" title="撤销" @tap="undo"></view>
|
||||||
|
<view v-if="toolbarList.includes('redo')" class="iconfont icon-redo" title="重做" @tap="redo"></view>
|
||||||
|
<view v-if="toolbarList.includes('removeFormat')" class="iconfont icon-clearedformat" title="清除格式"
|
||||||
|
@tap="removeFormat"></view>
|
||||||
|
<view v-if="toolbarList.includes('clear')" class="iconfont icon-shanchu" title="清空" @tap="clear"></view>
|
||||||
|
<view v-if="toolbarList.includes('export')" class="iconfont icon-baocun" title="导出" @tap="exportHtml">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 自定义功能组件 -->
|
||||||
|
<!-- 调色板 -->
|
||||||
|
<color-picker v-if="toolbarList.includes('color') || toolbarList.includes('backgroundColor')"
|
||||||
|
ref="colorPickerRef" :color="defaultColor" @confirm="confirmColor"></color-picker>
|
||||||
|
<!-- 添加链接的操作弹窗 -->
|
||||||
|
<link-edit v-if="toolbarList.includes('link') && !readOnly" ref="linkEditRef"
|
||||||
|
@confirm="confirmLink"></link-edit>
|
||||||
|
|
||||||
|
<view class="sp-editor-wrapper" @longpress="eLongpress">
|
||||||
|
<editor :id="editorId" class="ql-editor editor-container" :class="{ 'ql-image-overlay-none': readOnly }"
|
||||||
|
show-img-size show-img-toolbar show-img-resize :placeholder="placeholder" :read-only="readOnly"
|
||||||
|
@statuschange="onStatusChange" @ready="onEditorReady" @input="onEditorInput"></editor>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ColorPicker from './color-picker.vue'
|
||||||
|
import LinkEdit from './link-edit.vue'
|
||||||
|
import {
|
||||||
|
addLink,
|
||||||
|
linkFlag
|
||||||
|
} from '../../utils'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
ColorPicker,
|
||||||
|
LinkEdit
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 编辑器id可传入，以便循环组件使用，防止id重复
|
||||||
|
editorId: {
|
||||||
|
type: String,
|
||||||
|
default: 'editor'
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: '写点什么吧 ~'
|
||||||
|
},
|
||||||
|
// 是否只读
|
||||||
|
readOnly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 最大字数限制，-1不限
|
||||||
|
maxlength: {
|
||||||
|
type: Number,
|
||||||
|
default: -1
|
||||||
|
},
|
||||||
|
// 工具栏配置
|
||||||
|
toolbarConfig: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
keys: [], // 要显示的工具，优先级最大
|
||||||
|
excludeKeys: [], // 除这些指定的工具外，其他都显示
|
||||||
|
iconSize: '18px', // 工具栏字体大小
|
||||||
|
iconColumns: 10 // 工具栏列数
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
toolbarConfig: {
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
handler(newToolbar) {
|
||||||
|
/**
|
||||||
|
* 若工具栏配置中keys存在，则以keys为准
|
||||||
|
* 否则以excludeKeys向toolbarAllList中排查
|
||||||
|
* 若keys与excludeKeys皆为空，则以toolbarAllList为准
|
||||||
|
*/
|
||||||
|
if (newToolbar.keys?.length > 0) {
|
||||||
|
this.toolbarList = newToolbar.keys
|
||||||
|
} else {
|
||||||
|
this.toolbarList =
|
||||||
|
newToolbar.excludeKeys?.length > 0 ?
|
||||||
|
this.toolbarAllList.filter((item) => !newToolbar.excludeKeys.includes(item)) :
|
||||||
|
this.toolbarAllList
|
||||||
|
}
|
||||||
|
this.iconSize = newToolbar.iconSize || '18px'
|
||||||
|
this.iconColumns = newToolbar.iconColumns || 10
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formats: {},
|
||||||
|
textColor: '',
|
||||||
|
backgroundColor: '',
|
||||||
|
curColor: '',
|
||||||
|
defaultColor: {
|
||||||
|
r: 0,
|
||||||
|
g: 0,
|
||||||
|
b: 0,
|
||||||
|
a: 1
|
||||||
|
}, // 调色板默认颜色
|
||||||
|
iconSize: '20px', // 工具栏图标字体大小
|
||||||
|
iconColumns: 10, // 工具栏列数
|
||||||
|
toolbarList: [],
|
||||||
|
toolbarAllList: [
|
||||||
|
'bold', // 加粗
|
||||||
|
'italic', // 斜体
|
||||||
|
'underline', // 下划线
|
||||||
|
'strike', // 删除线
|
||||||
|
'alignLeft', // 左对齐
|
||||||
|
'alignCenter', // 居中对齐
|
||||||
|
'alignRight', // 右对齐
|
||||||
|
'alignJustify', // 两端对齐
|
||||||
|
'lineHeight', // 行间距
|
||||||
|
'letterSpacing', // 字间距
|
||||||
|
'marginTop', // 段前距
|
||||||
|
'marginBottom', // 段后距
|
||||||
|
'fontFamily', // 字体
|
||||||
|
'fontSize', // 字号
|
||||||
|
'color', // 文字颜色
|
||||||
|
'backgroundColor', // 背景颜色
|
||||||
|
'date', // 日期
|
||||||
|
'listCheck', // 待办
|
||||||
|
'listOrdered', // 有序列表
|
||||||
|
'listBullet', // 无序列表
|
||||||
|
'indentInc', // 增加缩进
|
||||||
|
'indentDec', // 减少缩进
|
||||||
|
'divider', // 分割线
|
||||||
|
'header', // 标题
|
||||||
|
'scriptSub', // 下标
|
||||||
|
'scriptSuper', // 上标
|
||||||
|
'direction', // 文本方向
|
||||||
|
'image', // 图片
|
||||||
|
'link', // 超链接
|
||||||
|
'undo', // 撤销
|
||||||
|
'redo', // 重做
|
||||||
|
'removeFormat', // 清除格式
|
||||||
|
'clear', // 清空
|
||||||
|
'export' // 导出
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onEditorReady() {
|
||||||
|
// #ifdef MP-BAIDU
|
||||||
|
this.editorCtx = requireDynamicLib('editorLib').createEditorContext(this.editorId)
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef APP || MP-WEIXIN || H5
|
||||||
|
uni
|
||||||
|
.createSelectorQuery()
|
||||||
|
.in(this)
|
||||||
|
.select('#' + this.editorId)
|
||||||
|
.context((res) => {
|
||||||
|
this.editorCtx = res.context
|
||||||
|
this.$emit('init', this.editorCtx, this.editorId)
|
||||||
|
})
|
||||||
|
.exec()
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
undo() {
|
||||||
|
this.editorCtx.undo()
|
||||||
|
},
|
||||||
|
redo() {
|
||||||
|
this.editorCtx.redo()
|
||||||
|
},
|
||||||
|
format(e) {
|
||||||
|
let {
|
||||||
|
name,
|
||||||
|
value
|
||||||
|
} = e.target.dataset
|
||||||
|
if (!name) return
|
||||||
|
switch (name) {
|
||||||
|
case 'color':
|
||||||
|
case 'backgroundColor':
|
||||||
|
this.curColor = name
|
||||||
|
this.showPicker()
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
this.editorCtx.format(name, value)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showPicker() {
|
||||||
|
switch (this.curColor) {
|
||||||
|
case 'color':
|
||||||
|
this.defaultColor = this.textColor ?
|
||||||
|
this.$refs.colorPickerRef.hex2Rgb(this.textColor) : {
|
||||||
|
r: 0,
|
||||||
|
g: 0,
|
||||||
|
b: 0,
|
||||||
|
a: 1
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 'backgroundColor':
|
||||||
|
this.defaultColor = this.backgroundColor ?
|
||||||
|
this.$refs.colorPickerRef.hex2Rgb(this.backgroundColor) : {
|
||||||
|
r: 0,
|
||||||
|
g: 0,
|
||||||
|
b: 0,
|
||||||
|
a: 0
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
this.$refs.colorPickerRef.open()
|
||||||
|
},
|
||||||
|
confirmColor(e) {
|
||||||
|
switch (this.curColor) {
|
||||||
|
case 'color':
|
||||||
|
this.textColor = e.hex
|
||||||
|
this.editorCtx.format('color', this.textColor)
|
||||||
|
break
|
||||||
|
case 'backgroundColor':
|
||||||
|
this.backgroundColor = e.hex
|
||||||
|
this.editorCtx.format('backgroundColor', this.backgroundColor)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onStatusChange(e) {
|
||||||
|
if (e.detail.color) {
|
||||||
|
this.textColor = e.detail.color
|
||||||
|
}
|
||||||
|
if (e.detail.backgroundColor) {
|
||||||
|
this.backgroundColor = e.detail.backgroundColor
|
||||||
|
}
|
||||||
|
this.formats = e.detail
|
||||||
|
},
|
||||||
|
insertDivider() {
|
||||||
|
this.editorCtx.insertDivider()
|
||||||
|
},
|
||||||
|
clear() {
|
||||||
|
uni.showModal({
|
||||||
|
title: '清空编辑器',
|
||||||
|
content: '确定清空编辑器吗？',
|
||||||
|
success: ({
|
||||||
|
confirm
|
||||||
|
}) => {
|
||||||
|
if (confirm) {
|
||||||
|
this.editorCtx.clear()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
removeFormat() {
|
||||||
|
uni.showModal({
|
||||||
|
title: '文本格式化',
|
||||||
|
content: '确定要清除所选择部分文本块格式吗？',
|
||||||
|
showCancel: true,
|
||||||
|
success: ({
|
||||||
|
confirm
|
||||||
|
}) => {
|
||||||
|
if (confirm) {
|
||||||
|
this.editorCtx.removeFormat()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
insertDate() {
|
||||||
|
const date = new Date()
|
||||||
|
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
|
||||||
|
this.editorCtx.insertText({
|
||||||
|
text: formatDate
|
||||||
|
})
|
||||||
|
},
|
||||||
|
insertLink() {
|
||||||
|
this.$refs.linkEditRef.open()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 确认添加链接
|
||||||
|
* @param {Object} e { text: '链接描述', href: '链接地址' }
|
||||||
|
*/
|
||||||
|
confirmLink(e) {
|
||||||
|
this.$refs.linkEditRef.close()
|
||||||
|
addLink(this.editorCtx, e)
|
||||||
|
this.$emit('addLink', e, this.editorId)
|
||||||
|
// 修复添加超链接后，不触发input更新当前最新内容的bug，这里做一下手动更新
|
||||||
|
this.editorCtx.getContents({
|
||||||
|
success: (res) => {
|
||||||
|
this.$emit('input', {
|
||||||
|
html: res.html,
|
||||||
|
text: res.text
|
||||||
|
}, this.editorId)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
insertImage() {
|
||||||
|
// #ifdef APP-PLUS || H5
|
||||||
|
uni.chooseImage({
|
||||||
|
// count: 1, // 默认9
|
||||||
|
success: (res) => {
|
||||||
|
const {
|
||||||
|
tempFiles
|
||||||
|
} = res
|
||||||
|
// 将文件和编辑器示例抛出，由开发者自行上传和插入图片
|
||||||
|
this.$emit('upinImage', tempFiles, this.editorCtx, this.editorId)
|
||||||
|
},
|
||||||
|
fail() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '未授权访问相册权限，请授权后使用',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
// 微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替。
|
||||||
|
uni.chooseMedia({
|
||||||
|
// count: 1, // 默认9
|
||||||
|
success: (res) => {
|
||||||
|
// 同上chooseImage处理
|
||||||
|
const {
|
||||||
|
tempFiles
|
||||||
|
} = res
|
||||||
|
this.$emit('upinImage', tempFiles, this.editorCtx, this.editorId)
|
||||||
|
},
|
||||||
|
fail() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '未授权访问相册权限，请授权后使用',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
onEditorInput(e) {
|
||||||
|
// 注意不要使用getContents获取html和text，会导致重复触发onStatusChange从而失去toolbar工具的高亮状态
|
||||||
|
// 复制粘贴的时候detail会为空，此时应当直接return
|
||||||
|
if (Object.keys(e.detail).length <= 0) return
|
||||||
|
const {
|
||||||
|
html,
|
||||||
|
text
|
||||||
|
} = e.detail
|
||||||
|
// 识别到标识立即return
|
||||||
|
if (text.indexOf(linkFlag) !== -1) return
|
||||||
|
|
||||||
|
const maxlength = parseInt(this.maxlength)
|
||||||
|
const textStr = text.replace(/[ \t\r\n]/g, '')
|
||||||
|
if (textStr.length > maxlength && maxlength != -1) {
|
||||||
|
uni.showModal({
|
||||||
|
content: `超过${maxlength}字数啦~`,
|
||||||
|
confirmText: '确定',
|
||||||
|
showCancel: false,
|
||||||
|
success: () => {
|
||||||
|
this.$emit('overMax', {
|
||||||
|
html,
|
||||||
|
text
|
||||||
|
}, this.editorId)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$emit('input', {
|
||||||
|
html,
|
||||||
|
text
|
||||||
|
}, this.editorId)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 导出
|
||||||
|
exportHtml() {
|
||||||
|
this.editorCtx.getContents({
|
||||||
|
success: (res) => {
|
||||||
|
this.$emit('exportHtml', res.html, this.editorId)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
eLongpress() {
|
||||||
|
/**
|
||||||
|
* 微信小程序官方editor的长按事件有bug，需要重写覆盖，不需做任何逻辑，可见下面小程序社区问题链接
|
||||||
|
* @tutorial https://developers.weixin.qq.com/community/develop/doc/000c04b3e1c1006f660065e4f61000
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '@/uni_modules/sp-editor/icons/editor-icon.css';
|
||||||
|
|
||||||
|
.sp-editor {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-editor-toolbar {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: calc(var(--icon-size) / 4) 0;
|
||||||
|
border-bottom: 1px solid #e4e4e4;
|
||||||
|
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(var(--icon-columns), 1fr);
|
||||||
|
position: fixed;
|
||||||
|
width: 95%;
|
||||||
|
z-index: 100;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(var(--icon-size) * 1.8);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: var(--icon-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-editor-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 245rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-container {
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-image-overlay-none {
|
||||||
|
::v-deep .ql-image-overlay {
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .ql-editor.ql-blank::before {
|
||||||
|
font-style: normal;
|
||||||
|
color: #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .ql-container {
|
||||||
|
min-height: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-active {
|
||||||
|
color: #66ccff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -0,0 +1,83 @@
|
||||||
|
{
|
||||||
|
"id": "sp-editor",
|
||||||
|
"displayName": "官方富文本编辑器editor组件改良扩展优化版",
|
||||||
|
"version": "1.4.0",
|
||||||
|
"description": "基于官方的富文本编辑器editor组件，进行改良扩展优化版，添加了调色板，添加超链接等功能，可自定义扩展工具，快来试试吧~",
|
||||||
|
"keywords": [
|
||||||
|
"富文本",
|
||||||
|
"editor",
|
||||||
|
"编辑器"
|
||||||
|
],
|
||||||
|
"repository": "",
|
||||||
|
"engines": {
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"type": "component-vue",
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "插件不采集任何数据",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y",
|
||||||
|
"alipay": "n"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
},
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "u",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "u",
|
||||||
|
"QQ": "u",
|
||||||
|
"钉钉": "u",
|
||||||
|
"快手": "u",
|
||||||
|
"飞书": "u",
|
||||||
|
"京东": "u"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
# sp-editor
|
||||||
|
|
||||||
|
### 文档迁移
|
||||||
|
|
||||||
|
> 防止文档失效，提供下列五个地址，内容一致
|
||||||
|
|
||||||
|
- [地址一](https://sonvee.github.io/sv-app-docs/docs-github/src/plugins/sp-editor/sp-editor.html)
|
||||||
|
- [地址二](https://sv-app-docs.pages.dev/src/plugins/sp-editor/sp-editor.html)
|
||||||
|
- [地址三](https://sv-app-docs.4everland.app/src/plugins/sp-editor/sp-editor.html)
|
||||||
|
- [地址四](https://sv-app-docs.vercel.app/src/plugins/sp-editor/sp-editor.html) (需要梯子)
|
||||||
|
- [地址五](https://static-mp-74bfcbac-6ba6-4f39-8513-8831390ff75a.next.bspapp.com/docs-uni/src/plugins/sp-editor/sp-editor.html) (有IP限制)
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,68 @@
|
||||||
|
// 标识必须独一无二 - 标识是为了使用insertText插入标识文本后，查找到标识所在delta位置的索引
|
||||||
|
export const linkFlag = '#-*=*-*=*-*=*@-link超链接标识link-@*=*-*=*-*=*-#'
|
||||||
|
|
||||||
|
export function addLink(editorCtx, attr) {
|
||||||
|
// 先插入一段文本内容
|
||||||
|
editorCtx.insertText({
|
||||||
|
text: linkFlag
|
||||||
|
})
|
||||||
|
// 获取全文delta内容
|
||||||
|
editorCtx.getContents({
|
||||||
|
success(res) {
|
||||||
|
let options = res.delta.ops
|
||||||
|
const findex = options.findIndex(item => {
|
||||||
|
return item.insert && typeof item.insert !== 'object' && item.insert?.indexOf(linkFlag) !== -1
|
||||||
|
})
|
||||||
|
// 根据标识查找到插入的位置
|
||||||
|
if (findex > -1) {
|
||||||
|
const findOption = options[findex]
|
||||||
|
const findAttributes = findOption.attributes
|
||||||
|
// 将该findOption分成三部分：前内容 要插入的link 后内容
|
||||||
|
const [prefix, suffix] = findOption.insert.split(linkFlag);
|
||||||
|
const handleOps = []
|
||||||
|
// 前内容
|
||||||
|
if (prefix) {
|
||||||
|
const prefixOps = findAttributes ? {
|
||||||
|
insert: prefix,
|
||||||
|
attributes: findAttributes
|
||||||
|
} : {
|
||||||
|
insert: prefix
|
||||||
|
}
|
||||||
|
handleOps.push(prefixOps)
|
||||||
|
}
|
||||||
|
// 插入的link
|
||||||
|
const linkOps = {
|
||||||
|
insert: attr.text,
|
||||||
|
attributes: {
|
||||||
|
link: attr.href,
|
||||||
|
textDecoration: attr.textDecoration || 'none', // 下划线
|
||||||
|
color: attr.color || '#007aff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
handleOps.push(linkOps)
|
||||||
|
// 后内容
|
||||||
|
if (suffix) {
|
||||||
|
const suffixOps = findAttributes ? {
|
||||||
|
insert: suffix,
|
||||||
|
attributes: findAttributes
|
||||||
|
} : {
|
||||||
|
insert: suffix
|
||||||
|
}
|
||||||
|
handleOps.push(suffixOps)
|
||||||
|
}
|
||||||
|
// 删除原options[findex]并在findex位置插入上述三个ops
|
||||||
|
options.splice(findex, 1);
|
||||||
|
options.splice(findex, 0, ...handleOps);
|
||||||
|
// 最后重新初始化内容，注意该方法会导致光标重置到最开始位置
|
||||||
|
editorCtx.setContents({
|
||||||
|
delta: {
|
||||||
|
ops: options
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 所以最后建议使富文本光标失焦，让用户手动聚焦光标
|
||||||
|
editorCtx.blur()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue