Compare commits
16 Commits
Author | SHA1 | Date |
---|---|---|
jia | d638a2378e | |
jia | d1f6af0aee | |
jia | e7b7551a2e | |
weipengfei | b0ea9966c8 | |
weipengfei | 004a1a1fe3 | |
weipengfei | 2de42f2297 | |
weipengfei | 6de7d3c958 | |
weipengfei | 88f4d0b4fc | |
weipengfei | 22cf9c81c4 | |
weipengfei | 41588cddb3 | |
weipengfei | 228dee5dbd | |
weipengfei | 9b8aa5389a | |
weipengfei | fbdb8fe8c6 | |
weipengfei | f14b0b11be | |
weipengfei | 90d35884d6 | |
weipengfei | e1795bb284 |
|
@ -0,0 +1,28 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
unpackage*
|
||||||
|
/dist
|
||||||
|
.hbuilderx
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
build.sh
|
||||||
|
.idea
|
||||||
|
unpackage
|
||||||
|
*.bak
|
|
@ -1,16 +1,24 @@
|
||||||
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
|
{
|
||||||
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
|
// launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
|
||||||
"version": "0.0",
|
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
|
||||||
"configurations": [{
|
"version" : "0.0",
|
||||||
"app-plus" :
|
"configurations" : [
|
||||||
{
|
{
|
||||||
"launchtype" : "local"
|
"app-plus" : {
|
||||||
},
|
"launchtype" : "local"
|
||||||
"default" :
|
},
|
||||||
{
|
"default" : {
|
||||||
"launchtype" : "local"
|
"launchtype" : "local"
|
||||||
},
|
},
|
||||||
"type" : "uniCloud"
|
"type" : "uniCloud"
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
"playground" : "standard",
|
||||||
|
"type" : "uni-app:app-android"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"playground" : "custom",
|
||||||
|
"type" : "uni-app:app-ios"
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
18
App.vue
|
@ -1,13 +1,23 @@
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
onLaunch: function() {
|
onLaunch: function(info) {
|
||||||
console.log('App Launch')
|
console.log('App Launch');
|
||||||
|
if (info.referrerInfo?.extraData?.uniMP) {
|
||||||
|
uni.setStorageSync('uniMP', info.referrerInfo?.extraData?.uniMP);
|
||||||
|
uni.setStorageSync('APP_token', info.referrerInfo?.extraData?.token);
|
||||||
|
if(info.referrerInfo?.extraData?.avatar){
|
||||||
|
uni.setStorageSync('avatar', info.referrerInfo?.extraData?.avatar);
|
||||||
|
uni.$emit('MPinfo', {
|
||||||
|
avatar: info.referrerInfo?.extraData?.avatar,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onShow: function() {
|
onShow: function() {
|
||||||
console.log('App Show')
|
console.log('App Show');
|
||||||
},
|
},
|
||||||
onHide: function() {
|
onHide: function() {
|
||||||
console.log('App Hide')
|
console.log('App Hide');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -0,0 +1,55 @@
|
||||||
|
import request from "@/config/request.js";
|
||||||
|
import requesta from "@/config/requesta.js";
|
||||||
|
|
||||||
|
export function xuiat(data) {
|
||||||
|
return request.post(`xun_fei/tts`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function feiiat(data) {
|
||||||
|
return request.post(`xun_fei/iat`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function iatWss(data) {
|
||||||
|
return request.post(`xun_fei/iatWss`, data);
|
||||||
|
}
|
||||||
|
// http://chat.lihaink.cn/index/tts
|
||||||
|
//文字转语音
|
||||||
|
export function ttWss(data) {
|
||||||
|
return requesta.post(`index/tts`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
// -防抖
|
||||||
|
export function debounce(fn, wait) {
|
||||||
|
let delay = wait || 500
|
||||||
|
let timer
|
||||||
|
return function() {
|
||||||
|
let args = arguments;
|
||||||
|
if (timer) {
|
||||||
|
clearTimeout(timer)
|
||||||
|
console.log('拦截')
|
||||||
|
}
|
||||||
|
let callNow = !timer
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
console.log('发送')
|
||||||
|
timer = null
|
||||||
|
}, delay)
|
||||||
|
if (callNow) fn.apply(this, args)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// -节流
|
||||||
|
export function throttle(fn, wait) {
|
||||||
|
let delay = wait || 500
|
||||||
|
let timer = null
|
||||||
|
return function() {
|
||||||
|
if (timer) {
|
||||||
|
console.log('拦截');
|
||||||
|
return
|
||||||
|
}
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
console.log('发送');
|
||||||
|
fn.apply(this, arguments)
|
||||||
|
timer = null
|
||||||
|
}, delay)
|
||||||
|
}
|
||||||
|
}
|
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 3.7 KiB |
After Width: | Height: | Size: 3.1 KiB |
After Width: | Height: | Size: 1.9 KiB |
|
@ -0,0 +1,595 @@
|
||||||
|
<template>
|
||||||
|
<view class="qiqb-ctx" v-bind:class="{'on':show}">
|
||||||
|
|
||||||
|
<view class="qiqb-ctx-box">
|
||||||
|
<!-- <text @click="show=false"></text> -->
|
||||||
|
<canvas canvas-id="ctx"
|
||||||
|
:style="{'width':'340px','height':cliceHeight+'px','opacity':img_show?1:0}"></canvas>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="qiqb-ctx-img">
|
||||||
|
<!-- <image :src="tempImage" mode="aspectFit" ></image> -->
|
||||||
|
<img :src="tempImage">
|
||||||
|
</view>
|
||||||
|
<view class="qiqb-ctx-btns u-border-bottom">
|
||||||
|
<view>分享至</view>
|
||||||
|
<view>长按海报可转发分享</view>
|
||||||
|
<view>
|
||||||
|
<!-- <text>微信好友</text><text>分享朋友圈</text> -->
|
||||||
|
<text @click="down">保存图片</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="qiqb-ctx-close" @click="close()">取消</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
HTTP_REQUEST_URL
|
||||||
|
|
||||||
|
} from '@/config/app';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "share",
|
||||||
|
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
tempImage: '',
|
||||||
|
img_show: true,
|
||||||
|
mode: 'img',
|
||||||
|
list: [],
|
||||||
|
len1: 0,
|
||||||
|
len2: 0,
|
||||||
|
cliceHeight: 0,
|
||||||
|
pext1: '',
|
||||||
|
pext2: '',
|
||||||
|
theight: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
mounted() {},
|
||||||
|
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
//关闭
|
||||||
|
close() {
|
||||||
|
this.show = false
|
||||||
|
this.img_show = true
|
||||||
|
},
|
||||||
|
//子组件接受参数
|
||||||
|
refresh(index, item, height) {
|
||||||
|
this.list = index;
|
||||||
|
this.pext1 = index[index.length - 2].content
|
||||||
|
this.pext2 = index[index.length - 1].content
|
||||||
|
this.cliceHeight = item
|
||||||
|
this.theight = height
|
||||||
|
// console.log(index, item, height)
|
||||||
|
},
|
||||||
|
init() { // 通过opt传参数
|
||||||
|
|
||||||
|
uni.showLoading({
|
||||||
|
title: '生成中'
|
||||||
|
})
|
||||||
|
let self = this
|
||||||
|
let ctx = uni.createCanvasContext('ctx')
|
||||||
|
// 绘制背景 宽度 高度 圆角 颜色
|
||||||
|
self.drawBg(ctx, 340, this.cliceHeight, 8, '#fff')
|
||||||
|
|
||||||
|
// console.log(self.pext1, self.pext2)
|
||||||
|
self.drawTxtOne(ctx, '农业咨询小程序', 220, 35, 100,
|
||||||
|
'#222', 12, false)
|
||||||
|
// 绘制圆角头像 图片地址 距离左边 距离上边 宽度 高度 圆角
|
||||||
|
self.drawImg(ctx,
|
||||||
|
'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/20231013091310.png',
|
||||||
|
170, 10, 40, 40, 20)
|
||||||
|
self.drawImg(ctx,
|
||||||
|
'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/20231013091059.png',
|
||||||
|
10, 50, 40, 40, 20)
|
||||||
|
|
||||||
|
self.drawImg(ctx,
|
||||||
|
'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/20231013091310.png',
|
||||||
|
10, self.theight - 15, 40, 40, 20)
|
||||||
|
|
||||||
|
// 绘制封面图 图片地址 距离左边 距离上边 宽度 高度 圆角
|
||||||
|
// self.drawImg(ctx, img, 10, 120, 210, 260, 8)
|
||||||
|
|
||||||
|
// 绘制二维码 图片地址 距离左边 距离上边 宽度 高度 圆角
|
||||||
|
self.drawImg(ctx,
|
||||||
|
'https://lihai001.oss-cn-chengdu.aliyuncs.com/storage/202310/ai_qr_20231013091327.jpg',
|
||||||
|
174, self.cliceHeight - 125, 100, 100,
|
||||||
|
0)
|
||||||
|
|
||||||
|
// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||||
|
// self.drawTxtOne(ctx, self.pext1, 60, 70, 100,
|
||||||
|
// '#222', 12, false)
|
||||||
|
self.drawTxtFour(ctx,
|
||||||
|
self.pext1,
|
||||||
|
60, 70,
|
||||||
|
250, 20, '#222', 12)
|
||||||
|
// self.drawTxtTwo(ctx, self.pext1, 60, 64, 80,
|
||||||
|
// '#222', 13)
|
||||||
|
// self.drawTxtTwo(ctx, self.pext1, 60,64,
|
||||||
|
// 190, 20, '#222', 12)
|
||||||
|
// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||||
|
// self.drawTxtOne(ctx, '邀请您一起购好物', 60, 80, 100,
|
||||||
|
// '#666', 9, false)
|
||||||
|
|
||||||
|
// 绘制两行文字 图片地址 距离左边 距离上边 宽度 行高 颜色 字号
|
||||||
|
self.drawTxtFour(ctx,
|
||||||
|
self.pext2,
|
||||||
|
60, self.theight,
|
||||||
|
250, 20, '#222', 12)
|
||||||
|
// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||||
|
self.drawTxtOne(ctx, '下载二维码', 15, self
|
||||||
|
.cliceHeight - 85, 100,
|
||||||
|
'#666', 11, false)
|
||||||
|
|
||||||
|
// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||||
|
// self.drawTxtOne(ctx, '今日特价:¥', 15, 350, 100,
|
||||||
|
// '#ED3327', 11, false)
|
||||||
|
|
||||||
|
// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||||
|
// self.drawTxtOne(ctx, '86.00', 82, 350, 100,
|
||||||
|
// '#ED3327', 11, true)
|
||||||
|
|
||||||
|
// 绘制删除文字 图片地址 距离左边 距离上边 行高 颜色 字号 加粗
|
||||||
|
// self.drawTxtDel(ctx, '原价:20', 15, 370, 4,
|
||||||
|
// '#818181', 10, false)
|
||||||
|
|
||||||
|
// 结束绘制
|
||||||
|
ctx.draw()
|
||||||
|
|
||||||
|
// 绘制图片
|
||||||
|
|
||||||
|
self.img_show = false
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.canvasToTempFilePath({
|
||||||
|
canvasId: 'ctx',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: 340,
|
||||||
|
height: this.cliceHeight,
|
||||||
|
destWidth: 340,
|
||||||
|
destHeight: this.cliceHeight,
|
||||||
|
success: res => {
|
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
|
uni.hideLoading()
|
||||||
|
self.tempImage = res.tempFilePath
|
||||||
|
self.show = true
|
||||||
|
//#endif
|
||||||
|
// #ifdef APP-PLUS||MP
|
||||||
|
self.imgfile(res.tempFilePath)
|
||||||
|
//#endif
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
}, this);
|
||||||
|
}, 3000)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
//文件上传
|
||||||
|
imgfile(tempFilePath) {
|
||||||
|
let that = this
|
||||||
|
|
||||||
|
uni.uploadFile({
|
||||||
|
url: HTTP_REQUEST_URL + '/api/upload/image', // 上传地址
|
||||||
|
filePath: tempFilePath, // 要上传的文件路径
|
||||||
|
name: 'file', // 上传文件对应的 key 值
|
||||||
|
header: {
|
||||||
|
'content-type': 'multipart/form-data'
|
||||||
|
},
|
||||||
|
success: function(res) {
|
||||||
|
|
||||||
|
let data = JSON.parse(res.data)
|
||||||
|
// console.log( data.data.uri)
|
||||||
|
if (data.code == 1) {
|
||||||
|
uni.hideLoading()
|
||||||
|
that.tempImage = data.data.uri
|
||||||
|
that.show = true
|
||||||
|
console.log('上传成功', that.tempImage)
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
fail: function(error) {
|
||||||
|
// 上传失败处理逻辑
|
||||||
|
uni.hideLoading()
|
||||||
|
console.log(error, 11);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
down() {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '保存中'
|
||||||
|
})
|
||||||
|
uni.saveImageToPhotosAlbum({
|
||||||
|
filePath: this.tempImage,
|
||||||
|
success: (res) => {
|
||||||
|
console.log('保存')
|
||||||
|
uni.hideLoading()
|
||||||
|
this.close()
|
||||||
|
uni.showModal({
|
||||||
|
title: '保存成功'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 绘制背景 宽度 高度 圆角 颜色
|
||||||
|
drawBg(ctx, w, h, r, color) {
|
||||||
|
let x = 0
|
||||||
|
let y = 0
|
||||||
|
ctx.setFillStyle(color)
|
||||||
|
ctx.save()
|
||||||
|
ctx.beginPath()
|
||||||
|
ctx.moveTo(x + r, y)
|
||||||
|
ctx.arcTo(x + w, y, x + w, y + h, r)
|
||||||
|
ctx.arcTo(x + w, y + h, x, y + h, r)
|
||||||
|
ctx.arcTo(x, y + h, x, y, r)
|
||||||
|
ctx.arcTo(x, y, x + w, y, r)
|
||||||
|
ctx.closePath()
|
||||||
|
ctx.fill()
|
||||||
|
},
|
||||||
|
// 绘制图片 图片地址 距离左边 距离上边 宽度 高度 圆角
|
||||||
|
drawImg(ctx, img, x, y, w, h, r) {
|
||||||
|
let self = this
|
||||||
|
ctx.save()
|
||||||
|
ctx.beginPath()
|
||||||
|
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
|
||||||
|
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
|
||||||
|
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
|
||||||
|
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
|
||||||
|
ctx.clip()
|
||||||
|
ctx.drawImage(img, x, y, w, h)
|
||||||
|
ctx.restore()
|
||||||
|
},
|
||||||
|
// 绘制单行文字 图片地址 距离左边 距离上边 宽度 颜色 字号 加粗
|
||||||
|
drawTxtOne(ctx, text, x, y, maxWidth, color, size, bold) {
|
||||||
|
ctx.save()
|
||||||
|
ctx.beginPath()
|
||||||
|
let chr = text.split("")
|
||||||
|
let temp = ""
|
||||||
|
let row = []
|
||||||
|
ctx.setFontSize(size)
|
||||||
|
ctx.setFillStyle(color)
|
||||||
|
for (let a = 0; a < chr.length; a++) {
|
||||||
|
if (ctx.measureText(temp).width < maxWidth) {
|
||||||
|
temp += chr[a]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
row.push(temp)
|
||||||
|
if (ctx.measureText(temp).width > maxWidth) row[0] = row[0] + '...'
|
||||||
|
|
||||||
|
for (var b = 0; b < row.length; b++) {
|
||||||
|
ctx.fillStyle = color
|
||||||
|
if (bold) {
|
||||||
|
ctx.font = 'normal bold ' + size + 'px sans-serif'
|
||||||
|
} else {
|
||||||
|
ctx.font = 'normal ' + size + 'px sans-serif'
|
||||||
|
}
|
||||||
|
ctx.fillText(row[b], x, y)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 绘制两行文字 图片地址 距离左边 距离上边 宽度 行高 颜色 字号
|
||||||
|
drawTxtTwo(ctx, text, x, y, maxWidth, lineHeight, color, size) {
|
||||||
|
ctx.save()
|
||||||
|
ctx.beginPath()
|
||||||
|
let chr = text.split("")
|
||||||
|
let temp = ""
|
||||||
|
let row = []
|
||||||
|
ctx.setFontSize(size)
|
||||||
|
ctx.setFillStyle(color)
|
||||||
|
for (let a = 0; a < chr.length; a++) {
|
||||||
|
if (ctx.measureText(temp).width < maxWidth) {
|
||||||
|
temp += chr[a];
|
||||||
|
} else {
|
||||||
|
a--
|
||||||
|
row.push(temp)
|
||||||
|
temp = ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
row.push(temp)
|
||||||
|
if (row.length > 2) {
|
||||||
|
let rowCut = row.slice(0, 2)
|
||||||
|
let rowPart = rowCut[1]
|
||||||
|
let test = ""
|
||||||
|
let empty = []
|
||||||
|
for (var a = 0; a < rowPart.length; a++) {
|
||||||
|
if (ctx.measureText(test).width < maxWidth) {
|
||||||
|
test += rowPart[a]
|
||||||
|
} else {
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
empty.push(test)
|
||||||
|
var group = empty[0] + "..."
|
||||||
|
rowCut.splice(1, 1, group)
|
||||||
|
row = rowCut
|
||||||
|
}
|
||||||
|
for (var b = 0; b < row.length; b++) {
|
||||||
|
ctx.fillStyle = color
|
||||||
|
ctx.font = 'normal ' + size + 'px sans-serif'
|
||||||
|
ctx.fillText(row[b], x, y + b * lineHeight, 300)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
drawTxtFour(ctx, text, x, y, maxWidth, lineHeight, color, size) {
|
||||||
|
ctx.save()
|
||||||
|
ctx.beginPath()
|
||||||
|
let chr = text.split("")
|
||||||
|
let temp = ""
|
||||||
|
let row = []
|
||||||
|
ctx.setFontSize(size)
|
||||||
|
ctx.setFillStyle(color)
|
||||||
|
for (let a = 0; a < chr.length; a++) {
|
||||||
|
if (ctx.measureText(temp).width < maxWidth) {
|
||||||
|
temp += chr[a];
|
||||||
|
} else {
|
||||||
|
a--
|
||||||
|
row.push(temp)
|
||||||
|
temp = ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
row.push(temp)
|
||||||
|
console.log(row[0].length)
|
||||||
|
if (row.length > row.length) {
|
||||||
|
let rowCut = row.slice(0, row.length)
|
||||||
|
let rowPart = rowCut[1]
|
||||||
|
let test = ""
|
||||||
|
let empty = []
|
||||||
|
for (var a = 0; a < rowPart.length; a++) {
|
||||||
|
if (ctx.measureText(test).width < maxWidth) {
|
||||||
|
test += rowPart[a]
|
||||||
|
} else {
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
empty.push(test)
|
||||||
|
var group = empty[0] + "..."
|
||||||
|
rowCut.splice(1, 1, group)
|
||||||
|
row = rowCut
|
||||||
|
}
|
||||||
|
for (var b = 0; b < row.length; b++) {
|
||||||
|
ctx.fillStyle = color
|
||||||
|
ctx.font = 'normal ' + size + 'px sans-serif'
|
||||||
|
ctx.fillText(row[b], x, y + b * lineHeight, 300)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
drawTxtFour1(ctx, text, x, y, maxWidth, lineHeight, color, size, type) {
|
||||||
|
ctx.save()
|
||||||
|
ctx.beginPath()
|
||||||
|
let chr = text.split("")
|
||||||
|
let temp = ""
|
||||||
|
let row = []
|
||||||
|
ctx.setFontSize(size)
|
||||||
|
ctx.setFillStyle(color)
|
||||||
|
for (let a = 0; a < chr.length; a++) {
|
||||||
|
if (ctx.measureText(temp).width < maxWidth) {
|
||||||
|
temp += chr[a];
|
||||||
|
} else {
|
||||||
|
a--
|
||||||
|
row.push(temp)
|
||||||
|
temp = ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
row.push(temp)
|
||||||
|
|
||||||
|
|
||||||
|
if (row.length > row.length) {
|
||||||
|
let rowCut = row.slice(0, row.length)
|
||||||
|
let rowPart = rowCut[1]
|
||||||
|
let test = ""
|
||||||
|
let empty = []
|
||||||
|
for (var a = 0; a < rowPart.length; a++) {
|
||||||
|
if (ctx.measureText(test).width < maxWidth) {
|
||||||
|
test += rowPart[a]
|
||||||
|
} else {
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
empty.push(test)
|
||||||
|
var group = empty[0] + "..."
|
||||||
|
rowCut.splice(1, 1, group)
|
||||||
|
row = rowCut
|
||||||
|
}
|
||||||
|
for (var b = 0; b < row.length; b++) {
|
||||||
|
ctx.fillStyle = color
|
||||||
|
ctx.font = 'normal ' + size + 'px sans-serif'
|
||||||
|
ctx.fillText(row[b], x, y + b * lineHeight, 300)
|
||||||
|
// console.log(row[b], x, y + b * lineHeight)
|
||||||
|
if (type == 1) {
|
||||||
|
this.len1 = y + b * lineHeight
|
||||||
|
} else {
|
||||||
|
this.len2 = y + b * lineHeight
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// console.log(this.len1,this.len2,type)
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
// 绘制删除线文字 图片地址 距离左边 距离上边 行高 颜色 字号 加粗
|
||||||
|
drawTxtDel(ctx, txt, x, y, h, color, size) {
|
||||||
|
ctx.fillStyle = color
|
||||||
|
ctx.font = 'normal ' + size + 'px sans-serif'
|
||||||
|
ctx.fillText(txt, x, y)
|
||||||
|
|
||||||
|
ctx.beginPath()
|
||||||
|
let width = ctx.measureText(txt).width;
|
||||||
|
ctx.rect(x, y - h, width, 1)
|
||||||
|
ctx.fillStyle = color
|
||||||
|
ctx.fill()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.qiqb-ctx-img {
|
||||||
|
position: fixed;
|
||||||
|
top: 30rpx;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
transition: all .3s;
|
||||||
|
|
||||||
|
z-index: 9999;
|
||||||
|
width: 600rpx;
|
||||||
|
height: 750rpx;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -300rpx;
|
||||||
|
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 600rpx;
|
||||||
|
height: 750rpx;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.qiqb-ctx {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
display: flex;
|
||||||
|
background: rgba(0, 0, 0, .6);
|
||||||
|
opacity: 0;
|
||||||
|
transition: all .3s;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: flex-end
|
||||||
|
}
|
||||||
|
|
||||||
|
.qiqb-ctx.on {
|
||||||
|
z-index: 2000;
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.qiqb-ctx-box {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
padding: 30upx 0 40upx;
|
||||||
|
width: 750upx;
|
||||||
|
justify-content: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.qiqb-ctx-box text {
|
||||||
|
position: absolute;
|
||||||
|
top: -40upx;
|
||||||
|
right: 145upx;
|
||||||
|
display: inline-flex;
|
||||||
|
width: 47upx;
|
||||||
|
height: 47upx;
|
||||||
|
background: url('img/close.png');
|
||||||
|
background-size: 100% 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.qiqb-ctx-btns {
|
||||||
|
display: flex;
|
||||||
|
width: 750upx;
|
||||||
|
height: 330upx;
|
||||||
|
border-radius: 20upx 20upx 0 0;
|
||||||
|
background: #fff;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.qiqb-ctx-btns view:nth-child(1) {
|
||||||
|
display: flex;
|
||||||
|
padding-top: 10upx;
|
||||||
|
height: 80upx;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 30upx;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.qiqb-ctx-btns view:nth-child(2) {
|
||||||
|
height: 80upx;
|
||||||
|
color: #666;
|
||||||
|
font-size: 24upx
|
||||||
|
}
|
||||||
|
|
||||||
|
.qiqb-ctx-btns view:nth-child(3) {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 30upx;
|
||||||
|
font-size: 26upx;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.qiqb-ctx-btns view:nth-child(3) text {
|
||||||
|
display: flex;
|
||||||
|
width: 250upx;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.qiqb-ctx-btns view:nth-child(3) text:nth-child(1)::before {
|
||||||
|
display: inline-flex;
|
||||||
|
margin-bottom: 20upx;
|
||||||
|
width: 86upx;
|
||||||
|
height: 86upx;
|
||||||
|
background: url('img/3.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
.qiqb-ctx-btns view:nth-child(3) text:nth-child(2)::before {
|
||||||
|
display: inline-flex;
|
||||||
|
margin-bottom: 20upx;
|
||||||
|
width: 86upx;
|
||||||
|
height: 86upx;
|
||||||
|
background: url('img/1.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
.qiqb-ctx-btns view:nth-child(3) text:nth-child(3)::before {
|
||||||
|
display: inline-flex;
|
||||||
|
margin-bottom: 20upx;
|
||||||
|
width: 86upx;
|
||||||
|
height: 86upx;
|
||||||
|
background: url('img/2.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
.qiqb-ctx-close {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 50upx;
|
||||||
|
width: 100%;
|
||||||
|
height: 150upx;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 32upx;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,44 @@
|
||||||
|
|
||||||
|
let httpApi
|
||||||
|
|
||||||
|
// 在打包之前请检查当前环境是否正确
|
||||||
|
const env = 'dev'; // 开发
|
||||||
|
// const env = 'prod'; // 生产
|
||||||
|
// const env = 'prew'; // 预上线
|
||||||
|
|
||||||
|
switch (env) {
|
||||||
|
case 'prod':
|
||||||
|
httpApi = 'https://worker-task.lihaink.cn' // 生产
|
||||||
|
|
||||||
|
break;
|
||||||
|
case 'prew':
|
||||||
|
httpApi ='https://preview-worker-task.lihaink.cn' //预发布环境
|
||||||
|
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
httpApi = "https://ceshi-worker-task.lihaink.cn" // 测试
|
||||||
|
httpApione = "https://chat.lihaink.cn" // 测试
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
// 请求域名 格式: https://您的域名
|
||||||
|
|
||||||
|
HTTP_REQUEST_URL: httpApi,
|
||||||
|
HTTP_REQUEST_URL_ONE: httpApione,
|
||||||
|
HEADER: {
|
||||||
|
'content-type': 'application/json',
|
||||||
|
//#ifdef MP
|
||||||
|
'Form-type': 'routine',
|
||||||
|
//#endif
|
||||||
|
//#ifdef APP-PLUS
|
||||||
|
'Form-type': 'app',
|
||||||
|
//#endif
|
||||||
|
},
|
||||||
|
// 回话密钥名称 请勿修改此配置
|
||||||
|
TOKENNAME: 'X-Token',
|
||||||
|
// 缓存时间 0 永久
|
||||||
|
EXPIRE: 0,
|
||||||
|
};
|
|
@ -0,0 +1,79 @@
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
// | CRMEB [ CRMEB赋能开发者,助力企业发展 ]
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
// | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
// | Author: CRMEB Team <admin@crmeb.com>
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
import {
|
||||||
|
HTTP_REQUEST_URL,
|
||||||
|
HEADER,
|
||||||
|
TOKENNAME
|
||||||
|
} from '@/config/app';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 发送请求
|
||||||
|
*/
|
||||||
|
function baseRequest(url, method, data, {
|
||||||
|
noAuth = false,
|
||||||
|
noVerify = false
|
||||||
|
}) {
|
||||||
|
let Url = HTTP_REQUEST_URL,
|
||||||
|
header = HEADER;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// if (store.state.app.token) header[TOKENNAME] = 'Bearer ' + store.state.app.token;
|
||||||
|
|
||||||
|
return new Promise((reslove, reject) => {
|
||||||
|
uni.request({
|
||||||
|
url: Url + '/api/' + url,
|
||||||
|
method: method || 'GET',
|
||||||
|
header: header,
|
||||||
|
data: data || {},
|
||||||
|
success: (res) => {
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
// console.log('app', Url + '/api/' + url, res.data);
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
if (noVerify)
|
||||||
|
reslove(res.data, res);
|
||||||
|
else if (res.data.status == 200)
|
||||||
|
reslove(res.data, res);
|
||||||
|
else if ([410000, 410001, 410002, 40000].indexOf(res.data.status) !== -1) {
|
||||||
|
|
||||||
|
reject(res.data);
|
||||||
|
}else if (res.data.code == 0||1) {
|
||||||
|
|
||||||
|
reslove(res.data, res);
|
||||||
|
} else if (res.data.status == 501) {
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/error/index'
|
||||||
|
})
|
||||||
|
reject(res.data);
|
||||||
|
} else
|
||||||
|
reject(res.data.message || '系统错误');
|
||||||
|
},
|
||||||
|
fail: (message) => {
|
||||||
|
console.log(message,'3333333333');
|
||||||
|
reject('请求失败');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const request = {};
|
||||||
|
|
||||||
|
['options', 'get', 'post', 'put', 'head', 'delete', 'trace', 'connect'].forEach((method) => {
|
||||||
|
request[method] = (api, data, opt) => baseRequest(api, method, data, opt || {})
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default request;
|
|
@ -0,0 +1,80 @@
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
// | CRMEB [ CRMEB赋能开发者,助力企业发展 ]
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
// | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
// | Author: CRMEB Team <admin@crmeb.com>
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
import {
|
||||||
|
HTTP_REQUEST_URL_ONE,
|
||||||
|
HEADER,
|
||||||
|
TOKENNAME
|
||||||
|
} from '@/config/app';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 发送请求
|
||||||
|
*/
|
||||||
|
function baseRequest(url, method, data, {
|
||||||
|
noAuth = false,
|
||||||
|
noVerify = false
|
||||||
|
}) {
|
||||||
|
let Url = HTTP_REQUEST_URL_ONE,
|
||||||
|
header = HEADER;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// if (store.state.app.token) header[TOKENNAME] = 'Bearer ' + store.state.app.token;
|
||||||
|
|
||||||
|
return new Promise((reslove, reject) => {
|
||||||
|
uni.request({
|
||||||
|
url: Url + '/' + url,
|
||||||
|
method: method || 'GET',
|
||||||
|
header: header,
|
||||||
|
data: data || {},
|
||||||
|
success: (res) => {
|
||||||
|
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
// console.log('app', Url + '/api/' + url, res.data);
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
if (noVerify)
|
||||||
|
reslove(res.data, res);
|
||||||
|
else if (res.data.status == 200)
|
||||||
|
reslove(res.data, res);
|
||||||
|
else if ([410000, 410001, 410002, 40000].indexOf(res.data.status) !== -1) {
|
||||||
|
|
||||||
|
reject(res.data);
|
||||||
|
}else if (res.data.code == 0||res.data.code ==1) {
|
||||||
|
|
||||||
|
reslove(res.data, res);
|
||||||
|
} else if (res.data.status == 501) {
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/error/index'
|
||||||
|
})
|
||||||
|
reject(res.data);
|
||||||
|
} else
|
||||||
|
reject(res.data.message || '系统错误');
|
||||||
|
},
|
||||||
|
fail: (message) => {
|
||||||
|
console.log(message,'3333333333');
|
||||||
|
reject('请求失败');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const request = {};
|
||||||
|
|
||||||
|
['options', 'get', 'post', 'put', 'head', 'delete', 'trace', 'connect'].forEach((method) => {
|
||||||
|
request[method] = (api, data, opt) => baseRequest(api, method, data, opt || {})
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default request;
|
|
@ -0,0 +1,196 @@
|
||||||
|
function getLocalFilePath(path) {
|
||||||
|
if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {
|
||||||
|
return path
|
||||||
|
}
|
||||||
|
if (path.indexOf('file://') === 0) {
|
||||||
|
return path
|
||||||
|
}
|
||||||
|
if (path.indexOf('/storage/emulated/0/') === 0) {
|
||||||
|
return path
|
||||||
|
}
|
||||||
|
if (path.indexOf('/') === 0) {
|
||||||
|
var localFilePath = plus.io.convertAbsoluteFileSystem(path)
|
||||||
|
if (localFilePath !== path) {
|
||||||
|
return localFilePath
|
||||||
|
} else {
|
||||||
|
path = path.substr(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return '_www/' + path
|
||||||
|
}
|
||||||
|
|
||||||
|
function dataUrlToBase64(str) {
|
||||||
|
var array = str.split(',')
|
||||||
|
return array[array.length - 1]
|
||||||
|
}
|
||||||
|
|
||||||
|
var index = 0
|
||||||
|
function getNewFileId() {
|
||||||
|
return Date.now() + String(index++)
|
||||||
|
}
|
||||||
|
|
||||||
|
function biggerThan(v1, v2) {
|
||||||
|
var v1Array = v1.split('.')
|
||||||
|
var v2Array = v2.split('.')
|
||||||
|
var update = false
|
||||||
|
for (var index = 0; index < v2Array.length; index++) {
|
||||||
|
var diff = v1Array[index] - v2Array[index]
|
||||||
|
if (diff !== 0) {
|
||||||
|
update = diff > 0
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return update
|
||||||
|
}
|
||||||
|
|
||||||
|
export function pathToBase64(path) {
|
||||||
|
return new Promise(function(resolve, reject) {
|
||||||
|
if (typeof window === 'object' && 'document' in window) {
|
||||||
|
if (typeof FileReader === 'function') {
|
||||||
|
var xhr = new XMLHttpRequest()
|
||||||
|
xhr.open('GET', path, true)
|
||||||
|
xhr.responseType = 'blob'
|
||||||
|
xhr.onload = function() {
|
||||||
|
if (this.status === 200) {
|
||||||
|
let fileReader = new FileReader()
|
||||||
|
fileReader.onload = function(e) {
|
||||||
|
resolve(e.target.result)
|
||||||
|
}
|
||||||
|
fileReader.onerror = reject
|
||||||
|
fileReader.readAsDataURL(this.response)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
xhr.onerror = reject
|
||||||
|
xhr.send()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
var canvas = document.createElement('canvas')
|
||||||
|
var c2x = canvas.getContext('2d')
|
||||||
|
var img = new Image
|
||||||
|
img.onload = function() {
|
||||||
|
canvas.width = img.width
|
||||||
|
canvas.height = img.height
|
||||||
|
c2x.drawImage(img, 0, 0)
|
||||||
|
resolve(canvas.toDataURL())
|
||||||
|
canvas.height = canvas.width = 0
|
||||||
|
}
|
||||||
|
img.onerror = reject
|
||||||
|
img.src = path
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (typeof plus === 'object') {
|
||||||
|
plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
|
||||||
|
entry.file(function(file) {
|
||||||
|
var fileReader = new plus.io.FileReader()
|
||||||
|
fileReader.onload = function(data) {
|
||||||
|
resolve(data.target.result)
|
||||||
|
}
|
||||||
|
fileReader.onerror = function(error) {
|
||||||
|
reject(error)
|
||||||
|
}
|
||||||
|
fileReader.readAsDataURL(file)
|
||||||
|
}, function(error) {
|
||||||
|
reject(error)
|
||||||
|
})
|
||||||
|
}, function(error) {
|
||||||
|
reject(error)
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
|
||||||
|
wx.getFileSystemManager().readFile({
|
||||||
|
filePath: path,
|
||||||
|
encoding: 'base64',
|
||||||
|
success: function(res) {
|
||||||
|
resolve('data:image/png;base64,' + res.data)
|
||||||
|
},
|
||||||
|
fail: function(error) {
|
||||||
|
reject(error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
reject(new Error('not support'))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function base64ToPath(base64) {
|
||||||
|
return new Promise(function(resolve, reject) {
|
||||||
|
if (typeof window === 'object' && 'document' in window) {
|
||||||
|
base64 = base64.split(',')
|
||||||
|
var type = base64[0].match(/:(.*?);/)[1]
|
||||||
|
var str = atob(base64[1])
|
||||||
|
var n = str.length
|
||||||
|
var array = new Uint8Array(n)
|
||||||
|
while (n--) {
|
||||||
|
array[n] = str.charCodeAt(n)
|
||||||
|
}
|
||||||
|
return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
|
||||||
|
}
|
||||||
|
var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/)
|
||||||
|
if (extName) {
|
||||||
|
extName = extName[1]
|
||||||
|
} else {
|
||||||
|
reject(new Error('base64 error'))
|
||||||
|
}
|
||||||
|
var fileName = getNewFileId() + '.' + extName
|
||||||
|
if (typeof plus === 'object') {
|
||||||
|
var basePath = '_doc'
|
||||||
|
var dirPath = 'uniapp_temp'
|
||||||
|
var filePath = basePath + '/' + dirPath + '/' + fileName
|
||||||
|
if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime.innerVersion)) {
|
||||||
|
plus.io.resolveLocalFileSystemURL(basePath, function(entry) {
|
||||||
|
entry.getDirectory(dirPath, {
|
||||||
|
create: true,
|
||||||
|
exclusive: false,
|
||||||
|
}, function(entry) {
|
||||||
|
entry.getFile(fileName, {
|
||||||
|
create: true,
|
||||||
|
exclusive: false,
|
||||||
|
}, function(entry) {
|
||||||
|
entry.createWriter(function(writer) {
|
||||||
|
writer.onwrite = function() {
|
||||||
|
resolve(filePath)
|
||||||
|
}
|
||||||
|
writer.onerror = reject
|
||||||
|
writer.seek(0)
|
||||||
|
writer.writeAsBinary(dataUrlToBase64(base64))
|
||||||
|
}, reject)
|
||||||
|
}, reject)
|
||||||
|
}, reject)
|
||||||
|
}, reject)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
var bitmap = new plus.nativeObj.Bitmap(fileName)
|
||||||
|
bitmap.loadBase64Data(base64, function() {
|
||||||
|
bitmap.save(filePath, {}, function() {
|
||||||
|
bitmap.clear()
|
||||||
|
resolve(filePath)
|
||||||
|
}, function(error) {
|
||||||
|
bitmap.clear()
|
||||||
|
reject(error)
|
||||||
|
})
|
||||||
|
}, function(error) {
|
||||||
|
bitmap.clear()
|
||||||
|
reject(error)
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
|
||||||
|
var filePath = wx.env.USER_DATA_PATH + '/' + fileName
|
||||||
|
wx.getFileSystemManager().writeFile({
|
||||||
|
filePath: filePath,
|
||||||
|
data: dataUrlToBase64(base64),
|
||||||
|
encoding: 'base64',
|
||||||
|
success: function() {
|
||||||
|
resolve(filePath)
|
||||||
|
},
|
||||||
|
fail: function(error) {
|
||||||
|
reject(error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
reject(new Error('not support'))
|
||||||
|
})
|
||||||
|
}
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"id": "mmmm-image-tools",
|
||||||
|
"name": "image-tools",
|
||||||
|
"version": "1.4.0",
|
||||||
|
"description": "图像转换工具,可用于图像和base64的转换",
|
||||||
|
"keywords": [
|
||||||
|
"base64",
|
||||||
|
"保存",
|
||||||
|
"图像"
|
||||||
|
]
|
||||||
|
}
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name" : "xunfeiAi",
|
"name" : "农业咨询",
|
||||||
"appid" : "__UNI__9620511",
|
"appid" : "__UNI__9620511",
|
||||||
"description" : "",
|
"description" : "",
|
||||||
"versionName" : "1.0.0",
|
"versionName" : "1.0.0",
|
||||||
|
@ -38,12 +38,17 @@
|
||||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
]
|
],
|
||||||
|
"abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ]
|
||||||
},
|
},
|
||||||
/* ios打包配置 */
|
/* ios打包配置 */
|
||||||
"ios" : {},
|
"ios" : {
|
||||||
|
"dSYMs" : false
|
||||||
|
},
|
||||||
/* SDK配置 */
|
/* SDK配置 */
|
||||||
"sdkConfigs" : {}
|
"sdkConfigs" : {
|
||||||
|
"ad" : {}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/* 快应用特有相关 */
|
/* 快应用特有相关 */
|
||||||
|
|
13
pages.json
|
@ -3,18 +3,13 @@
|
||||||
{
|
{
|
||||||
"path": "pages/index/index",
|
"path": "pages/index/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "讯飞AI",
|
"navigationBarTitleText": "农业咨询",
|
||||||
"bounce": "none",
|
"navigationStyle": "custom",
|
||||||
"softinputMode": "adjustResize"
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "pages/index/chat",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "讯飞星火",
|
|
||||||
"bounce": "none"
|
"bounce": "none"
|
||||||
|
// "softinputMode": "adjustResize"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"navigationBarTextStyle": "black",
|
"navigationBarTextStyle": "black",
|
||||||
"navigationBarTitleText": "人工智能",
|
"navigationBarTitleText": "人工智能",
|
||||||
|
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 13 KiB |
|
@ -0,0 +1,168 @@
|
||||||
|
.h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
.voice-box {
|
||||||
|
box-sizing : border-box;
|
||||||
|
display : flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin : 50px auto;
|
||||||
|
padding : 50px;
|
||||||
|
width : 60%;
|
||||||
|
|
||||||
|
border-radius : 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-box input {
|
||||||
|
box-sizing : border-box;
|
||||||
|
padding : 10px;
|
||||||
|
width : 70%;
|
||||||
|
height : 50px;
|
||||||
|
font-size : 18px;
|
||||||
|
color : #187cff;
|
||||||
|
border : 1px solid #187cff;
|
||||||
|
border-radius: 3px 0px 0px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-box button {
|
||||||
|
width : 30%;
|
||||||
|
height : 50px;
|
||||||
|
line-height : 50px;
|
||||||
|
font-size : 18px;
|
||||||
|
color : white;
|
||||||
|
background : #187cff;
|
||||||
|
border : none;
|
||||||
|
border-radius: 0px 3px 3px 0px;
|
||||||
|
cursor : pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-box button::before {
|
||||||
|
content : "";
|
||||||
|
display : inline-block;
|
||||||
|
width : 23px;
|
||||||
|
height : 26px;
|
||||||
|
vertical-align : middle;
|
||||||
|
background : url(../img/voice.png) no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-box {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display : none;
|
||||||
|
position : fixed;
|
||||||
|
top : 0px;
|
||||||
|
right : 0px;
|
||||||
|
bottom : 0px;
|
||||||
|
left : 0px;
|
||||||
|
border : .04rem solid #e0e7ff;
|
||||||
|
background: rgba(16, 22, 62, .2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-close {
|
||||||
|
position : absolute;
|
||||||
|
top : 0px;
|
||||||
|
right : 0px;
|
||||||
|
padding : 24px;
|
||||||
|
width : 20px;
|
||||||
|
height : 20px;
|
||||||
|
border : none;
|
||||||
|
background : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABeklEQVRIibXWsWoVQRQA0LObgGCTFFr6env9h/yETSz0tclrBEUJWhjzAqkV/A9/QrC2CtgIYqk2DwvdMExm991ZJrdaZoY53Bnm3u0Wy80BPuI21jjRPjqc4il+4FG3WG4ucS9ZtMaqMfoej5OxLz3uZAuPcXaDKNzt/TuCPFrgYyi87fEK543xKfQFLvoEaYVvQ19DnwxO4euWaA5P4UcBPIzCbmHRcYLleDqfox9wGEG5nnGKRzOvRilnnOIDluPD/BT6HG/GNp+CI/j+HDQCR/BqlPE7LuGlO5+F1sARPIzWwh32Jub3K/YKw1PFYYgV3rWEI2iKh2r7NnhbGZzdWKaeU03tzZ/W8ARH/2TGMq5BZ7XUElzVZebiOTzU3ho0RUqts4in8Kwuk8Uqig/wti4TQSP41XgfQMNlMIBf9fPd/x8t0RTn+h/LEX52i+XmN241RtM4K+Dfe3y7QZTysV/u7D18+RkP8AfPxPpubXzCL9zHVzz5C8ecbD1n3xuUAAAAAElFTkSuQmCC) no-repeat center center;
|
||||||
|
background-size: 20px;
|
||||||
|
transition : all .5s;
|
||||||
|
cursor : pointer;
|
||||||
|
outline : none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-close:hover {
|
||||||
|
transform : rotate(270deg);
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fixed-main {
|
||||||
|
box-sizing : border-box;
|
||||||
|
position : absolute;
|
||||||
|
left : 20%;
|
||||||
|
bottom : 0px;
|
||||||
|
padding : 30px;
|
||||||
|
width : 60%;
|
||||||
|
height : 240px;
|
||||||
|
font-size : 18px;
|
||||||
|
background : white;
|
||||||
|
border : 2px solid #e0e7ff;
|
||||||
|
border-radius: 5px 5px 0px 0px;
|
||||||
|
overflow-y : auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-icon {
|
||||||
|
box-sizing : border-box;
|
||||||
|
display : flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items : center;
|
||||||
|
position : absolute;
|
||||||
|
top : 50%;
|
||||||
|
left : 50%;
|
||||||
|
margin-top : -50px;
|
||||||
|
margin-left : -50px;
|
||||||
|
width : 100px;
|
||||||
|
height : 100px;
|
||||||
|
background : linear-gradient(115deg, #56d8e4 5%, #9f01ea 95%);
|
||||||
|
border : 1px solid #e0e7ff;
|
||||||
|
border-radius : 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-icon::before {
|
||||||
|
content : "";
|
||||||
|
position : absolute;
|
||||||
|
display : inline-block;
|
||||||
|
width : 100px;
|
||||||
|
height : 100px;
|
||||||
|
border : 1px solid #9f01ea;
|
||||||
|
box-shadow : 0px 0px 6px 0px #9f01ea;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation : move 1.5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-icon::after {
|
||||||
|
content : "";
|
||||||
|
position : absolute;
|
||||||
|
display : inline-block;
|
||||||
|
width : 100px;
|
||||||
|
height : 100px;
|
||||||
|
border : 1px solid #56d8e4;
|
||||||
|
box-shadow : 0px 0px 6px 0px #56d8e4;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation : move 1.5s .5s infinite;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-icon img {
|
||||||
|
width : 30px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes move {
|
||||||
|
0% {
|
||||||
|
opacity : 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity : 0;
|
||||||
|
transform: scale(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width : 6px;
|
||||||
|
height : 6px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
border-radius : 6px;
|
||||||
|
background-color: #187cff;
|
||||||
|
}
|
After Width: | Height: | Size: 1.2 MiB |
After Width: | Height: | Size: 85 KiB |
After Width: | Height: | Size: 2.0 KiB |
|
@ -0,0 +1,107 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum=1.0, user-scalable=no shrink-to-fit=no" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
|
<link rel="stylesheet" href="./css/base.css" />
|
||||||
|
<!-- <script async src="https://hm.baidu.com/hm.js?85fad12bb9a6dab448f4eff0a19299a5"></script> -->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="voice-box">
|
||||||
|
<input type="search" name="voice" id="voice-txt" />
|
||||||
|
<button id="start-btn">开始识别</button>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="fixed-box" id="fixed-box">
|
||||||
|
<div class="fixed-main">
|
||||||
|
<button class="fixed-close" id="close-btn"></button>
|
||||||
|
<div id="fixed-txt">Hello! 请说出你想说话。。。!</div>
|
||||||
|
<div class="fixed-icon">
|
||||||
|
<img src="./img/voice.png" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
|
||||||
|
</script>
|
||||||
|
<script src="./js/crypto-js.min.js"></script>
|
||||||
|
<script src="./js/voice.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.onload = function() {
|
||||||
|
const voiceTxt = document.querySelector('#voice-txt');
|
||||||
|
const startBtn = document.querySelector('#start-btn');
|
||||||
|
const fixedBox = document.querySelector('#fixed-box');
|
||||||
|
const fixedTxt = document.querySelector('#fixed-txt');
|
||||||
|
const closeBtn = document.querySelector('#close-btn');
|
||||||
|
let times = null;
|
||||||
|
|
||||||
|
|
||||||
|
// 实例化迅飞语音听写(流式版)WebAPI
|
||||||
|
const voice = new Voice({
|
||||||
|
|
||||||
|
// 服务接口认证信息 注:apiKey 和 apiSecret 的长度都差不多,请要填错哦,!
|
||||||
|
appId: '2eda6c2e',
|
||||||
|
apiSecret: 'MDEyMzE5YTc5YmQ5NjMwOTU1MWY4N2Y2',
|
||||||
|
apiKey: '12ec1f9d113932575fc4b114a2f60ffd',
|
||||||
|
// 注:要获取以上3个参数,请到迅飞开放平台:https://www.xfyun.cn/services/voicedictation 【注:这是我的迅飞语音听写(流式版)每天服务量500(也就是调500次),如果你需求里大请购买服务量:https://www.xfyun.cn/services/voicedictation?target=price】
|
||||||
|
|
||||||
|
onWillStatusChange: function(oldStatus, newStatus) {
|
||||||
|
//可以在这里进行页面中一些交互逻辑处理:注:倒计时(语音听写只有60s),录音的动画,按钮交互等!
|
||||||
|
fixedBox.style.display = 'block';
|
||||||
|
},
|
||||||
|
onTextChange: function(text) {
|
||||||
|
//监听识别结果的变化
|
||||||
|
voiceTxt.value = text;
|
||||||
|
fixedTxt.innerText = text;
|
||||||
|
console.log(text,'11111')
|
||||||
|
// 3秒钟内没有说话,就自动关闭
|
||||||
|
if (text) {
|
||||||
|
setTimeout(() => {
|
||||||
|
voice.stop();
|
||||||
|
uni.postMessage({
|
||||||
|
data: text
|
||||||
|
});
|
||||||
|
fixedBox.style.display = 'none';
|
||||||
|
}, 3000);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
addUniEvenPassthrough()
|
||||||
|
addcloEvenPassthrough()
|
||||||
|
|
||||||
|
function addUniEvenPassthrough() {
|
||||||
|
window.uniEvent = function(info) {
|
||||||
|
console.log('addUniEvenPassthrough')
|
||||||
|
voice.start();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addcloEvenPassthrough() {
|
||||||
|
window.closeEvent = function(info) {
|
||||||
|
console.log('addcloEvenPassthrough')
|
||||||
|
voice.stop();
|
||||||
|
fixedBox.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 开始识别
|
||||||
|
startBtn['onclick'] = function() {
|
||||||
|
voice.start();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 关闭识别
|
||||||
|
closeBtn['onclick'] = function() {
|
||||||
|
voice.stop();
|
||||||
|
fixedBox.style.display = 'none';
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
|
@ -0,0 +1,48 @@
|
||||||
|
;(function () {
|
||||||
|
let self = this
|
||||||
|
self.onmessage = function (e) {
|
||||||
|
transAudioData.transcode(e.data)
|
||||||
|
}
|
||||||
|
|
||||||
|
let transAudioData = {
|
||||||
|
transcode(audioData) {
|
||||||
|
|
||||||
|
let output = transAudioData.to16kHz(audioData)
|
||||||
|
output = transAudioData.to16BitPCM(output)
|
||||||
|
output = Array.from(new Uint8Array(output.buffer))
|
||||||
|
self.postMessage(output)
|
||||||
|
// return output
|
||||||
|
},
|
||||||
|
|
||||||
|
to16kHz(audioData) {
|
||||||
|
var data = new Float32Array(audioData)
|
||||||
|
var fitCount = Math.round(data.length * (16000 / 44100))
|
||||||
|
var newData = new Float32Array(fitCount)
|
||||||
|
var springFactor = (data.length - 1) / (fitCount - 1)
|
||||||
|
newData[0] = data[0]
|
||||||
|
for (let i = 1; i < fitCount - 1; i++) {
|
||||||
|
var tmp = i * springFactor
|
||||||
|
var before = Math.floor(tmp).toFixed()
|
||||||
|
var after = Math.ceil(tmp).toFixed()
|
||||||
|
var atPoint = tmp - before
|
||||||
|
newData[i] = data[before] + (data[after] - data[before]) * atPoint
|
||||||
|
}
|
||||||
|
newData[fitCount - 1] = data[data.length - 1]
|
||||||
|
return newData
|
||||||
|
},
|
||||||
|
|
||||||
|
to16BitPCM(input) {
|
||||||
|
var dataLength = input.length * (16 / 8)
|
||||||
|
var dataBuffer = new ArrayBuffer(dataLength)
|
||||||
|
var dataView = new DataView(dataBuffer)
|
||||||
|
var offset = 0
|
||||||
|
for (var i = 0; i < input.length; i++, offset += 2) {
|
||||||
|
var s = Math.max(-1, Math.min(1, input[i]))
|
||||||
|
dataView.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true)
|
||||||
|
}
|
||||||
|
return dataView
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
})();
|
|
@ -0,0 +1,357 @@
|
||||||
|
; (function (window, voice) {
|
||||||
|
"use strict";
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
define(voice);
|
||||||
|
} else if (typeof exports === 'object') {
|
||||||
|
module.exports = voice();
|
||||||
|
} else {
|
||||||
|
window.Voice = voice();
|
||||||
|
};
|
||||||
|
}(typeof window !== "undefined" ? window : this, () => {
|
||||||
|
"use strict";
|
||||||
|
return class IatRecorder {
|
||||||
|
constructor(opts = {}) {
|
||||||
|
// 服务接口认证信息(语音听写(流式版)WebAPI)
|
||||||
|
this.appId = opts.appId || '';
|
||||||
|
this.apiKey = opts.apiKey || '';
|
||||||
|
this.apiSecret = opts.apiSecret || '';
|
||||||
|
// 识别监听方法
|
||||||
|
this.onTextChange = opts.onTextChange || Function();
|
||||||
|
this.onWillStatusChange = opts.onWillStatusChange || Function();
|
||||||
|
// 方言/语种
|
||||||
|
this.status = 'null'
|
||||||
|
this.language = opts.language || 'zh_cn'
|
||||||
|
this.accent = opts.accent || 'mandarin';
|
||||||
|
// 流媒体
|
||||||
|
this.streamRef = [];
|
||||||
|
// 记录音频数据
|
||||||
|
this.audioData = [];
|
||||||
|
// 记录听写结果
|
||||||
|
this.resultText = '';
|
||||||
|
// wpgs下的听写结果需要中间状态辅助记录
|
||||||
|
this.resultTextTemp = '';
|
||||||
|
// 音频数据多线程
|
||||||
|
this.init();
|
||||||
|
};
|
||||||
|
// WebSocket请求地址鉴权
|
||||||
|
getWebSocketUrl() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// 请求地址根据语种不同变化
|
||||||
|
try {
|
||||||
|
const CryptoJS = require('crypto-js');
|
||||||
|
let url = 'wss://iat-api.xfyun.cn/v2/iat',
|
||||||
|
host = 'iat-api.xfyun.cn',
|
||||||
|
date = new Date().toGMTString(),
|
||||||
|
algorithm = 'hmac-sha256',
|
||||||
|
headers = 'host date request-line',
|
||||||
|
signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1`,
|
||||||
|
signatureSha = CryptoJS.HmacSHA256(signatureOrigin, this.apiSecret),
|
||||||
|
signature = CryptoJS.enc.Base64.stringify(signatureSha),
|
||||||
|
authorizationOrigin = `api_key="${this.apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`,
|
||||||
|
authorization = btoa(authorizationOrigin);
|
||||||
|
resolve(`${url}?authorization=${authorization}&date=${date}&host=${host}`);
|
||||||
|
} catch (error) {
|
||||||
|
let url = 'wss://iat-api.xfyun.cn/v2/iat',
|
||||||
|
host = 'iat-api.xfyun.cn',
|
||||||
|
date = new Date().toGMTString(),
|
||||||
|
algorithm = 'hmac-sha256',
|
||||||
|
headers = 'host date request-line',
|
||||||
|
signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1`,
|
||||||
|
signatureSha = CryptoJS.HmacSHA256(signatureOrigin, this.apiSecret),
|
||||||
|
signature = CryptoJS.enc.Base64.stringify(signatureSha),
|
||||||
|
authorizationOrigin = `api_key="${this.apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`,
|
||||||
|
authorization = btoa(authorizationOrigin);
|
||||||
|
resolve(`${url}?authorization=${authorization}&date=${date}&host=${host}`);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 操作初始化
|
||||||
|
init() {
|
||||||
|
const self = this;
|
||||||
|
try {
|
||||||
|
if (!self.appId || !self.apiKey || !self.apiSecret) {
|
||||||
|
alert('请正确配置【迅飞语音听写(流式版)WebAPI】服务接口认证信息!');
|
||||||
|
} else {
|
||||||
|
self.webWorker = new Worker('./js/transcode.worker.js');
|
||||||
|
self.webWorker.onmessage = function (event) {
|
||||||
|
|
||||||
|
self.audioData.push(...event.data);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
alert('对不起:请在服务器环境下运行!');
|
||||||
|
console.error('请在服务器如:WAMP、XAMPP、Phpstudy、http-server、WebServer等环境中运行!', error);
|
||||||
|
};
|
||||||
|
console.log("%c ❤️使用说明:http://www.muguilin.com/blog/info/609bafc50d572b3fd79b058f", "font-size:32px; color:blue; font-weight: bold;");
|
||||||
|
};
|
||||||
|
// 修改录音听写状态
|
||||||
|
setStatus(status) {
|
||||||
|
this.onWillStatusChange && this.status !== status && this.onWillStatusChange(this.status, status);
|
||||||
|
this.status = status;
|
||||||
|
};
|
||||||
|
// 设置识别结果内容
|
||||||
|
setResultText({ resultText, resultTextTemp } = {}) {
|
||||||
|
this.onTextChange && this.onTextChange(resultTextTemp || resultText || '');
|
||||||
|
resultText !== undefined && (this.resultText = resultText);
|
||||||
|
resultTextTemp !== undefined && (this.resultTextTemp = resultTextTemp);
|
||||||
|
};
|
||||||
|
// 修改听写参数
|
||||||
|
setParams({ language, accent } = {}) {
|
||||||
|
language && (this.language = language)
|
||||||
|
accent && (this.accent = accent)
|
||||||
|
};
|
||||||
|
// 对处理后的音频数据进行base64编码,
|
||||||
|
toBase64(buffer) {
|
||||||
|
let binary = '';
|
||||||
|
let bytes = new Uint8Array(buffer);
|
||||||
|
for (let i = 0; i < bytes.byteLength; i++) {
|
||||||
|
binary += String.fromCharCode(bytes[i]);
|
||||||
|
}
|
||||||
|
return window.btoa(binary);
|
||||||
|
};
|
||||||
|
// 连接WebSocket
|
||||||
|
connectWebSocket() {
|
||||||
|
return this.getWebSocketUrl().then(url => {
|
||||||
|
let iatWS;
|
||||||
|
if ('WebSocket' in window) {
|
||||||
|
iatWS = new WebSocket(url);
|
||||||
|
} else if ('MozWebSocket' in window) {
|
||||||
|
iatWS = new MozWebSocket(url);
|
||||||
|
} else {
|
||||||
|
alert('浏览器不支持WebSocket!');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.webSocket = iatWS;
|
||||||
|
this.setStatus('init');
|
||||||
|
iatWS.onopen = e => {
|
||||||
|
this.setStatus('ing');
|
||||||
|
console.log('连接成功')
|
||||||
|
// 重新开始录音
|
||||||
|
setTimeout(() => {
|
||||||
|
this.webSocketSend();
|
||||||
|
}, 500);
|
||||||
|
};
|
||||||
|
iatWS.onmessage = e => {
|
||||||
|
this.webSocketRes(e.data);
|
||||||
|
};
|
||||||
|
iatWS.onerror = e => {
|
||||||
|
this.recorderStop(e);
|
||||||
|
};
|
||||||
|
iatWS.onclose = e => {
|
||||||
|
this.recorderStop(e);
|
||||||
|
};
|
||||||
|
})
|
||||||
|
};
|
||||||
|
// 初始化浏览器录音
|
||||||
|
recorderInit() {
|
||||||
|
// 创建音频环境
|
||||||
|
try {
|
||||||
|
this.audioContext = this.audioContext ? this.audioContext : new (window.AudioContext || window.webkitAudioContext)();
|
||||||
|
this.audioContext.resume();
|
||||||
|
if (!this.audioContext) {
|
||||||
|
alert('浏览器不支持webAudioApi相关接口');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
if (!this.audioContext) {
|
||||||
|
alert('浏览器不支持webAudioApi相关接口');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 获取浏览器录音权限成功时回调
|
||||||
|
let getMediaSuccess = _ => {
|
||||||
|
// 创建一个用于通过JavaScript直接处理音频
|
||||||
|
this.scriptProcessor = this.audioContext.createScriptProcessor(0, 1, 1);
|
||||||
|
this.scriptProcessor.onaudioprocess = e => {
|
||||||
|
if (this.status === 'ing') {
|
||||||
|
// 多线程音频数据处理
|
||||||
|
try {
|
||||||
|
this.webWorker.postMessage(e.inputBuffer.getChannelData(0));
|
||||||
|
} catch (error) { }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 创建一个新的MediaStreamAudioSourceNode 对象,使来自MediaStream的音频可以被播放和操作
|
||||||
|
this.mediaSource = this.audioContext.createMediaStreamSource(this.streamRef);
|
||||||
|
this.mediaSource.connect(this.scriptProcessor);
|
||||||
|
this.scriptProcessor.connect(this.audioContext.destination);
|
||||||
|
this.connectWebSocket();
|
||||||
|
};
|
||||||
|
// 获取浏览器录音权限失败时回调
|
||||||
|
let getMediaFail = (e) => {
|
||||||
|
alert('对不起:录音权限获取失败!');
|
||||||
|
this.audioContext && this.audioContext.close();
|
||||||
|
this.audioContext = undefined;
|
||||||
|
// 关闭websocket
|
||||||
|
if (this.webSocket && this.webSocket.readyState === 1) {
|
||||||
|
this.webSocket.close();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
||||||
|
// 获取浏览器录音权限
|
||||||
|
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
||||||
|
navigator.mediaDevices.getUserMedia({
|
||||||
|
audio: true
|
||||||
|
}).then(stream => {
|
||||||
|
this.streamRef = stream;
|
||||||
|
getMediaSuccess();
|
||||||
|
}).catch(e => {
|
||||||
|
getMediaFail(e);
|
||||||
|
})
|
||||||
|
} else if (navigator.getUserMedia) {
|
||||||
|
navigator.getUserMedia({
|
||||||
|
audio: true
|
||||||
|
}, (stream) => {
|
||||||
|
this.streamRef = stream;
|
||||||
|
getMediaSuccess();
|
||||||
|
}, function (e) {
|
||||||
|
getMediaFail(e);
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
if (navigator.userAgent.toLowerCase().match(/chrome/) && location.origin.indexOf('https://') < 0) {
|
||||||
|
console.error('获取浏览器录音功能,因安全性问题,需要在localhost 或 127.0.0.1 或 https 下才能获取权限!');
|
||||||
|
} else {
|
||||||
|
alert('对不起:未识别到录音设备!');
|
||||||
|
}
|
||||||
|
this.audioContext && this.audioContext.close();
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
// 向webSocket发送数据(音频二进制数据经过Base64处理)
|
||||||
|
webSocketSend() {
|
||||||
|
if (this.webSocket.readyState !== 1) return false;
|
||||||
|
|
||||||
|
// 音频数据
|
||||||
|
const audioData = this.audioData.splice(0, 1280);
|
||||||
|
const params = {
|
||||||
|
common: {
|
||||||
|
app_id: this.appId,
|
||||||
|
},
|
||||||
|
business: {
|
||||||
|
language: this.language, //小语种可在控制台--语音听写(流式)--方言/语种处添加试用
|
||||||
|
domain: 'iat',
|
||||||
|
accent: this.accent, //中文方言可在控制台--语音听写(流式)--方言/语种处添加试用
|
||||||
|
vad_eos: 5000,
|
||||||
|
dwa: 'wpgs' //为使该功能生效,需到控制台开通动态修正功能(该功能免费)
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
status: 0,
|
||||||
|
format: 'audio/L16;rate=16000',
|
||||||
|
encoding: 'raw',
|
||||||
|
audio: this.toBase64(audioData)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 发送数据
|
||||||
|
this.webSocket.send(JSON.stringify(params));
|
||||||
|
this.handlerInterval = setInterval(() => {
|
||||||
|
// websocket未连接
|
||||||
|
if (this.webSocket.readyState !== 1) {
|
||||||
|
this.audioData = [];
|
||||||
|
clearInterval(this.handlerInterval);
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
if (this.audioData.length === 0) {
|
||||||
|
if (this.status === 'end') {
|
||||||
|
this.webSocket.send(
|
||||||
|
JSON.stringify({
|
||||||
|
data: {
|
||||||
|
status: 2,
|
||||||
|
format: 'audio/L16;rate=16000',
|
||||||
|
encoding: 'raw',
|
||||||
|
audio: ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
this.audioData = [];
|
||||||
|
clearInterval(this.handlerInterval);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 中间帧
|
||||||
|
this.webSocket.send(
|
||||||
|
JSON.stringify({
|
||||||
|
data: {
|
||||||
|
status: 1,
|
||||||
|
format: 'audio/L16;rate=16000',
|
||||||
|
encoding: 'raw',
|
||||||
|
audio: this.toBase64(this.audioData.splice(0, 1280))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}, 40);
|
||||||
|
};
|
||||||
|
// 识别结束 webSocket返回数据
|
||||||
|
webSocketRes(resultData) {
|
||||||
|
|
||||||
|
let jsonData = JSON.parse(resultData);
|
||||||
|
console.log(JSON.stringify( jsonData))
|
||||||
|
if (jsonData.data && jsonData.data.result) {
|
||||||
|
let data = jsonData.data.result;
|
||||||
|
let str = '';
|
||||||
|
let ws = data.ws;
|
||||||
|
for (let i = 0; i < ws.length; i++) {
|
||||||
|
str = str + ws[i].cw[0].w;
|
||||||
|
}
|
||||||
|
// 开启wpgs会有此字段(前提:在控制台开通动态修正功能)
|
||||||
|
// 取值为 "apd"时表示该片结果是追加到前面的最终结果;取值为"rpl" 时表示替换前面的部分结果,替换范围为rg字段
|
||||||
|
if (data.pgs) {
|
||||||
|
if (data.pgs === 'apd') {
|
||||||
|
// 将resultTextTemp同步给resultText
|
||||||
|
this.setResultText({
|
||||||
|
resultText: this.resultTextTemp
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 将结果存储在resultTextTemp中
|
||||||
|
this.setResultText({
|
||||||
|
resultTextTemp: this.resultText + str
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.setResultText({
|
||||||
|
resultText: this.resultText + str
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (jsonData.code === 0 && jsonData.data.status === 2) {
|
||||||
|
this.webSocket.close();
|
||||||
|
|
||||||
|
}
|
||||||
|
if (jsonData.code !== 0) {
|
||||||
|
this.webSocket.close();
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 启动录音
|
||||||
|
recorderStart() {
|
||||||
|
|
||||||
|
if (!this.audioContext) {
|
||||||
|
this.recorderInit();
|
||||||
|
} else {
|
||||||
|
this.audioContext.resume();
|
||||||
|
this.connectWebSocket();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 停止录音
|
||||||
|
recorderStop() {
|
||||||
|
if (!(/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgen))) {
|
||||||
|
// safari下suspend后再次resume录音内容将是空白,设置safari下不做suspend
|
||||||
|
this.audioContext && this.audioContext.suspend();
|
||||||
|
}
|
||||||
|
this.setStatus('end');
|
||||||
|
try {
|
||||||
|
// this.streamRef.getTracks().map(track => track.stop()) || his.streamRef.getAudioTracks()[0].stop();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('暂停失败!');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 开始
|
||||||
|
start() {
|
||||||
|
console.log('startstartstartstartstartstart');
|
||||||
|
this.recorderStart();
|
||||||
|
this.setResultText({ resultText: '', resultTextTemp: '' });
|
||||||
|
};
|
||||||
|
// 停止
|
||||||
|
stop() {
|
||||||
|
this.recorderStop();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}));
|
BIN
static/iat.png
Before Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 5.1 KiB |
After Width: | Height: | Size: 7.9 KiB |
After Width: | Height: | Size: 33 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 8.6 KiB |
After Width: | Height: | Size: 9.9 KiB |
After Width: | Height: | Size: 7.0 KiB |
After Width: | Height: | Size: 3.7 KiB |
After Width: | Height: | Size: 756 B |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 4.1 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 5.0 KiB |
After Width: | Height: | Size: 5.4 KiB |
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 6.9 KiB |
After Width: | Height: | Size: 9.1 KiB |
After Width: | Height: | Size: 5.3 KiB |
After Width: | Height: | Size: 9.7 KiB |
After Width: | Height: | Size: 11 KiB |
|
@ -0,0 +1,6 @@
|
||||||
|
!function(){"use strict";
|
||||||
|
/*!
|
||||||
|
* vtils v2.59.0
|
||||||
|
* (c) Jay Fong <fjc0kb@gmail.com> (https://github.com/fjc0k)
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/var e,t,r,n=function(){this.listeners=Object.create(null)};function s(e){return new Promise((t,r)=>{const n=new FileReader;n.onload=()=>{t(function(e,t,r){let n="";const s=new Uint8Array(e),o=s.byteLength;for(let e=0;e<o;e++)n+=String.fromCharCode(s[e]);return{__APP_AGENT_BASE64_FILE__:!0,base64:btoa(n),name:t,type:r}}(n.result,e.name,e.type))},n.onerror=e=>r(e),n.readAsArrayBuffer(e)})}function o(e,t,r){return new Promise((n,s)=>{const o=new FileReader;o.onload=()=>{n(o.result)},o.onerror=e=>s(e);const a=new Blob([e]);"dataUrl"===t&&o.readAsDataURL(a),"text"===t&&o.readAsText(a,r)})}n.prototype.on=function(e,t){var r=this;this.listeners[e]||(this.listeners[e]=[]);var n=this.listeners[e];return-1===n.indexOf(t)&&n.push(t),function(){return r.off(e,t)}},n.prototype.once=function(e,t){var r=this.on(e,(function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];r(),t.apply(void 0,e)}));return r},n.prototype.off=function(e,t){if(t){var r=this.listeners[e],n=r.indexOf(t);n>-1&&r.splice(n,1)}else delete this.listeners[e]},n.prototype.emit=function(e){for(var t=[],r=arguments.length-1;r-- >0;)t[r]=arguments[r+1];return(this.listeners[e]||[]).map((function(e){return e.apply(void 0,t)}))},function(e){e.open="open",e.closed="closed",e.leftOpenRightClosed="leftOpenRightClosed",e.leftClosedRightOpen="leftClosedRightOpen"}(e||(e={})),function(e){e.css="css",e.js="js",e.img="img",e.video="video",e.audio="audio"}(t||(t={})),function(e){e.desc="desc",e.asc="asc"}(r||(r={}));let a=0;const i=new n;document.addEventListener("__APP_AGENT_HTTP_RESPONSE_LISTENER__",e=>{const t=JSON.parse(JSON.stringify(e.detail||{}));t.response.arrayBuffer=e.detail.response.arrayBuffer,i.emit("response",t)}),document.addEventListener("__APP_AGENT_HTTP_RESPONSE_START_LISTENER__",e=>{const t=JSON.parse(JSON.stringify(e.detail||{}));i.emit("onstart",t)}),document.addEventListener("__APP_AGENT_HTTP_RESPONSE_DATA_LISTENER__",e=>{const t=JSON.parse(JSON.stringify(e.detail||{}));i.emit("ondata",t)});window.foxAgentCrossRequestVersion=function(){return{version:"0.0.1"}},window.foxAgentCrossRequest=async function(e){const t=e.headers["Content-Type"]||e.headers["content-type"]||e.headers["Content-type"]||"text/plain",r=null==e.data?void 0:(e=>"application/x-www-form-urlencoded"===e?"form":e.startsWith("multipart/form-data")?"file":"application/json"===e?"json":"application/x-msgpack"===e?"arraybuffer":"raw")(t);let n;n="arraybuffer"===r?{__ARRAY_BUFFER_KEY__:!0,data:Array.from(e.data)}:"file"!==r?e.data:{__APP_AGENT_FILE_BODY__:!0,...e.data||{},...Object.fromEntries(await Promise.all(Object.entries(e.files||{}).map(async([e,t])=>Array.isArray(t)?[e,await Promise.all(t.map(s))]:[e,t&&await s(t)])))};const d=`${location.href}____${a++}`,u=i.on("onstart",async({id:t,request:r,response:n})=>{var s;t===d&&(null===(s=e.onstart)||void 0===s||s.call(e,{request:r,response:n}),u())}),l=i.on("ondata",async({id:t,data:r})=>{var n;t===d&&(null===(n=e.ondata)||void 0===n||n.call(e,r))}),c=i.on("response",async({id:t,response:r})=>{if(t===d){if(r.error)return e.error("",void 0,new Error(r.error.message)),c(),u(),void l();const t={header:r.headers,status:r.status,statusText:r.statusText,body:r.arrayBuffer,getBodyAsDataUrl:async()=>o(r.arrayBuffer,"dataUrl"),async getBodyAsText(){var e;return o(r.arrayBuffer,"text",(null===(e=(r.headers["content-type"]||"").match(/charset=(.*)\b/i))||void 0===e?void 0:e[1])||"utf-8")}},n={req:e,res:t,runTime:(new Date).getTime()};r.ok?e.success(t.body,t.header,n):e.error(t.statusText,t.header,n),c(),u(),l()}}),{timeout:_=3e5}=e;return document.dispatchEvent(new CustomEvent("__APP_AGENT_HTTP_REQUEST_LISTENER__",{detail:{id:d,options:{url:e.url,method:e.method,headers:{...e.headers,"Content-Type":t},requestBodyType:r,requestBody:n},runtimeOptions:{requestId:d,timeout:_}}})),{version:"0.0.1",requestId:d,abort:()=>{document.dispatchEvent(new CustomEvent("__APP_AGENT_HTTP_REQUEST_ABORT_LISTENER__",{detail:{id:d,runtimeOptions:{requestId:d,timeout:_}}}))}}}}();
|
|
@ -0,0 +1,7 @@
|
||||||
|
!function(){"use strict";function e(e){if(!e||"object"!=typeof e)return!1;var t=Object.getPrototypeOf(e);if(null===t)return!0;var o=t.constructor;return"function"==typeof o&&o instanceof o}var t,o,n;!function(e){e.open="open",e.closed="closed",e.leftOpenRightClosed="leftOpenRightClosed",e.leftClosedRightOpen="leftClosedRightOpen"}(t||(t={})),function(e){e.css="css",e.js="js",e.img="img",e.video="video",e.audio="audio"}(o||(o={})),function(e){e.desc="desc",e.asc="asc"}(n||(n={}));const r={},s=t=>e(t)?!0===t.__APP_AGENT_BASE64_FILE__?function(e){const t=atob(e.base64);let o=t.length;const n=new Uint8Array(o);for(;o--;)n[o]=t.charCodeAt(o);return new File([n],e.name,{type:e.type})}(t):JSON.stringify(t):t;chrome.runtime.onMessage.addListener((t,o,n)=>{
|
||||||
|
/*!
|
||||||
|
* vtils v2.59.0
|
||||||
|
* (c) Jay Fong <fjc0kb@gmail.com> (https://github.com/fjc0k)
|
||||||
|
* Released under the MIT License.
|
||||||
|
*/
|
||||||
|
var a;return(a=async()=>{var a,i,c,d;switch(t.type){case"__APP_AGENT_BACKGROUND_HTTP_REQUEST__":const _=null===(a=o.tab)||void 0===a?void 0:a.id;if(e(t.options.body)&&!0===t.options.body.__APP_AGENT_FILE_BODY__){const{__APP_AGENT_FILE_BODY__:e,...o}=t.options.body,n=new FormData;for(const[e,t]of Object.entries(o))Array.isArray(t)?t.forEach(t=>n.append(e,s(t))):n.append(e,s(t));t.options.body=n;const r=t.options.headers;r&&delete r["Content-Type"]}if(e(t.options.body)&&!0===t.options.body.__ARRAY_BUFFER_KEY__){const{data:e}=t.options.body;t.options.body=new Uint8Array(e).buffer,t.options.headers}const l=new URL(t.options.url).origin;t.options.headers&&(t.options.headers["Referrer-Policy"]="no-referrer, strict-origin-when-cross-origin",t.options.headers.Referer=l,t.options.headers.Origin=l,t.options.mode="cors",delete t.options.headers.cookie);const p=new AbortController,{requestId:u=0,timeout:f=3e4}=null!==(i=t.runtimeOptions)&&void 0!==i?i:{},y=setTimeout(()=>p.abort(),f);r[u]={abortId:y,abortController:p};const h=await fetch(t.options.url,{...t.options,redirect:"follow",signal:p.signal});clearTimeout(y);const A=new Headers(h.headers),b=A.get("x-app-agent-http-headers");if(null!=b){A.delete("x-app-agent-http-headers");for(const[e,t]of Object.entries(JSON.parse(b)))A.set(e,t)}const T=Object.fromEntries(A.entries()),E="file",g=T["content-type"]||"application/octet-stream";let P=new Uint8Array;h.body?(_&&chrome.tabs.sendMessage(_,{type:"__APP_AGENT_HTTP_RESPONSE_START_LISTENER__",id:u,request:{url:t.options.url},response:{headers:T,status:h.status,statusText:h.statusText,url:h.url,ok:h.ok,redirected:h.redirected,type:h.type}}),await async function(e,t,o){const n=(e,t)=>{const o=new Uint8Array(e.length+t.length);return o.set(e,0),o.set(t,e.length),o};let r=new Uint8Array;const s=e.getReader();for(;;){const{done:e,value:a}=await s.read();if(e){o(r);break}r=n(r,a),t(a)}}(h.body,e=>{_&&chrome.tabs.sendMessage(_,{type:"__APP_AGENT_HTTP_RESPONSE_DATA_LISTENER__",id:u,data:[...e]})},e=>{P=e})):P=await h.arrayBuffer(),delete r[u];const m=function(e,t,o){let n="";const r=new Uint8Array(e),s=r.byteLength;for(let e=0;e<s;e++)n+=String.fromCharCode(r[e]);return{__APP_AGENT_BASE64_FILE__:!0,base64:btoa(n),name:t,type:o}}(P,E,g),{ok:R,status:O,statusText:w}=h;n({error:null,data:{ok:R,status:O,statusText:w,headers:T,base64File:m,arrayBuffer:new Uint8Array}});break;case"__APP_AGENT_HTTP_REQUEST_ABORT_LISTENER__":const{requestId:N=0}=null!==(c=t.runtimeOptions)&&void 0!==c?c:{},{abortId:S,abortController:v}=null!==(d=r[N])&&void 0!==d?d:{};S&&clearTimeout(S),v&&v.abort(),delete r[N]}},a()).catch(e=>{n({error:{message:String(e)}})}),!0}),chrome.action.onClicked.addListener((function(e){chrome.tabs.create({url:"https://app.apifox.com"})}))}();
|
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 7.9 KiB |
|
@ -0,0 +1,41 @@
|
||||||
|
{
|
||||||
|
"name": "Apifox Browser Extension",
|
||||||
|
"description": "API 文档、API 调试、API Mock、API 自动化测试",
|
||||||
|
"version": "1.0.6",
|
||||||
|
"manifest_version": 3,
|
||||||
|
"icons": {
|
||||||
|
"96": "logo-96.png",
|
||||||
|
"128": "logo-128.png"
|
||||||
|
},
|
||||||
|
"permissions": [],
|
||||||
|
"host_permissions": [
|
||||||
|
"*://*/"
|
||||||
|
],
|
||||||
|
"background": {
|
||||||
|
"service_worker": "background.js"
|
||||||
|
},
|
||||||
|
"action": {
|
||||||
|
"default_title": "Apifox",
|
||||||
|
"default_icon": "logo-96.png"
|
||||||
|
},
|
||||||
|
"web_accessible_resources": [
|
||||||
|
{
|
||||||
|
"matches": [
|
||||||
|
"*://*/*"
|
||||||
|
],
|
||||||
|
"resources": [
|
||||||
|
"adapter.js"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"content_scripts": [
|
||||||
|
{
|
||||||
|
"matches": [
|
||||||
|
"*://*/*"
|
||||||
|
],
|
||||||
|
"js": [
|
||||||
|
"runtime.js"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -0,0 +1 @@
|
||||||
|
!function(){"use strict";function e(e,t,n){return new Promise((r,a)=>{const o=new FileReader;o.onload=()=>{r(o.result)},o.onerror=e=>a(e);const s=function(e){const t=atob(e.base64);let n=t.length;const r=new Uint8Array(n);for(;n--;)r[n]=t.charCodeAt(n);return new File([r],e.name,{type:e.type})}(e);"dataUrl"===t?o.readAsDataURL(s):"arrayBuffer"===t?o.readAsArrayBuffer(s):o.readAsText(s,n)})}!function(e){const t=document.createElement("script");t.src=chrome.runtime.getURL(e),t.onload=()=>t.remove(),(document.head||document.documentElement).appendChild(t)}("adapter.js"),chrome.runtime.onMessage.addListener(e=>{e&&"object"==typeof e&&"string"==typeof e.type&&["__APP_AGENT_HTTP_RESPONSE_START_LISTENER__","__APP_AGENT_HTTP_RESPONSE_DATA_LISTENER__"].includes(e.type)&&document.dispatchEvent(new CustomEvent(e.type,{detail:e}))}),document.addEventListener("__APP_AGENT_HTTP_REQUEST_LISTENER__",async t=>{var n;const r=t.detail||{};let a;try{a=await async function(t,n){const r={url:t.url,method:t.method.toUpperCase(),headers:t.headers||{},body:t.requestBody};return await new Promise((t,a)=>{chrome.runtime.sendMessage({type:"__APP_AGENT_BACKGROUND_HTTP_REQUEST__",options:r,runtimeOptions:n},(async function(n){null==n?a(chrome.runtime.lastError):null!=n.error?a(n.error):(n.data.arrayBuffer=await e(n.data.base64File,"arrayBuffer",n.data.base64File.type),t(n.data))}))})}(r.options,r.runtimeOptions)}catch(e){a={error:{message:String(null!==(n=e.message)&&void 0!==n?n:e)}}}document.dispatchEvent(new CustomEvent("__APP_AGENT_HTTP_RESPONSE_LISTENER__",{detail:{id:r.id,response:a}}))}),document.addEventListener("__APP_AGENT_HTTP_REQUEST_ABORT_LISTENER__",async e=>{const{runtimeOptions:t}=JSON.parse(JSON.stringify(e.detail||{}));chrome.runtime.sendMessage({type:"__APP_AGENT_HTTP_REQUEST_ABORT_LISTENER__",runtimeOptions:t})})}();
|
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 6.3 KiB |
After Width: | Height: | Size: 12 KiB |
BIN
static/ise.png
Before Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 11 KiB |
BIN
static/logo.png
Before Width: | Height: | Size: 3.9 KiB |
BIN
static/tts.png
Before Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 5.2 KiB |
|
@ -0,0 +1,37 @@
|
||||||
|
## 1.6.2(2021-08-24)
|
||||||
|
- 新增 支持国际化
|
||||||
|
## 1.6.1(2021-07-30)
|
||||||
|
- 优化 vue3下事件警告的问题
|
||||||
|
## 1.6.0(2021-07-13)
|
||||||
|
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.5.0(2021-06-23)
|
||||||
|
- 新增 mask-click 遮罩层点击事件
|
||||||
|
## 1.4.5(2021-06-22)
|
||||||
|
- 修复 nvue 平台中间弹出后,点击内容,再点击遮罩无法关闭的Bug
|
||||||
|
## 1.4.4(2021-06-18)
|
||||||
|
- 修复 H5平台中间弹出后,点击内容,再点击遮罩无法关闭的Bug
|
||||||
|
## 1.4.3(2021-06-08)
|
||||||
|
- 修复 错误的 watch 字段
|
||||||
|
- 修复 safeArea 属性不生效的问题
|
||||||
|
- 修复 点击内容,再点击遮罩无法关闭的Bug
|
||||||
|
## 1.4.2(2021-05-12)
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.4.1(2021-04-29)
|
||||||
|
- 修复 组件内放置 input 、textarea 组件,无法聚焦的问题
|
||||||
|
## 1.4.0 (2021-04-29)
|
||||||
|
- 新增 type 属性的 left\right 值,支持左右弹出
|
||||||
|
- 新增 open(String:type) 方法参数 ,可以省略 type 属性 ,直接传入类型打开指定弹窗
|
||||||
|
- 新增 backgroundColor 属性,可定义主窗口背景色,默认不显示背景色
|
||||||
|
- 新增 safeArea 属性,是否适配底部安全区
|
||||||
|
- 修复 App\h5\微信小程序底部安全区占位不对的Bug
|
||||||
|
- 修复 App 端弹出等待的Bug
|
||||||
|
- 优化 提升低配设备性能,优化动画卡顿问题
|
||||||
|
- 优化 更简单的组件自定义方式
|
||||||
|
## 1.2.9(2021-02-05)
|
||||||
|
- 优化 组件引用关系,通过uni_modules引用组件
|
||||||
|
## 1.2.8(2021-02-05)
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
## 1.2.7(2021-02-05)
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
- 新增 支持 PC 端
|
||||||
|
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端
|
|
@ -0,0 +1,45 @@
|
||||||
|
// #ifdef H5
|
||||||
|
export default {
|
||||||
|
name: 'Keypress',
|
||||||
|
props: {
|
||||||
|
disable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
const keyNames = {
|
||||||
|
esc: ['Esc', 'Escape'],
|
||||||
|
tab: 'Tab',
|
||||||
|
enter: 'Enter',
|
||||||
|
space: [' ', 'Spacebar'],
|
||||||
|
up: ['Up', 'ArrowUp'],
|
||||||
|
left: ['Left', 'ArrowLeft'],
|
||||||
|
right: ['Right', 'ArrowRight'],
|
||||||
|
down: ['Down', 'ArrowDown'],
|
||||||
|
delete: ['Backspace', 'Delete', 'Del']
|
||||||
|
}
|
||||||
|
const listener = ($event) => {
|
||||||
|
if (this.disable) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const keyName = Object.keys(keyNames).find(key => {
|
||||||
|
const keyName = $event.key
|
||||||
|
const value = keyNames[key]
|
||||||
|
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||||
|
})
|
||||||
|
if (keyName) {
|
||||||
|
// 避免和其他按键事件冲突
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$emit(keyName, {})
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('keyup', listener)
|
||||||
|
this.$once('hook:beforeDestroy', () => {
|
||||||
|
document.removeEventListener('keyup', listener)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
render: () => {}
|
||||||
|
}
|
||||||
|
// #endif
|
|
@ -0,0 +1,263 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-popup-dialog">
|
||||||
|
<view class="uni-dialog-title">
|
||||||
|
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="mode === 'base'" class="uni-dialog-content">
|
||||||
|
<slot>
|
||||||
|
<text class="uni-dialog-content-text">{{content}}</text>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<view v-else class="uni-dialog-content">
|
||||||
|
<slot>
|
||||||
|
<input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholderText" :focus="focus" >
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<view class="uni-dialog-button-group">
|
||||||
|
<view class="uni-dialog-button" @click="closeDialog">
|
||||||
|
<text class="uni-dialog-button-text">{{cancelText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-dialog-button uni-border-left" @click="onOk">
|
||||||
|
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import popup from '../uni-popup/popup.js'
|
||||||
|
import {
|
||||||
|
initVueI18n
|
||||||
|
} from '@dcloudio/uni-i18n'
|
||||||
|
import messages from '../uni-popup/i18n/index.js'
|
||||||
|
const { t } = initVueI18n(messages)
|
||||||
|
/**
|
||||||
|
* PopUp 弹出层-对话框样式
|
||||||
|
* @description 弹出层-对话框样式
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||||
|
* @property {String} value input 模式下的默认值
|
||||||
|
* @property {String} placeholder input 模式下输入提示
|
||||||
|
* @property {String} type = [success|warning|info|error] 主题样式
|
||||||
|
* @value success 成功
|
||||||
|
* @value warning 提示
|
||||||
|
* @value info 消息
|
||||||
|
* @value error 错误
|
||||||
|
* @property {String} mode = [base|input] 模式、
|
||||||
|
* @value base 基础对话框
|
||||||
|
* @value input 可输入对话框
|
||||||
|
* @property {String} content 对话框内容
|
||||||
|
* @property {Boolean} beforeClose 是否拦截取消事件
|
||||||
|
* @event {Function} confirm 点击确认按钮触发
|
||||||
|
* @event {Function} close 点击取消按钮触发
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "uniPopupDialog",
|
||||||
|
mixins: [popup],
|
||||||
|
emits:['confirm','close'],
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'error'
|
||||||
|
},
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: 'base'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
beforeClose: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dialogType: 'error',
|
||||||
|
focus: false,
|
||||||
|
val: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
okText() {
|
||||||
|
return t("uni-popup.ok")
|
||||||
|
},
|
||||||
|
cancelText() {
|
||||||
|
return t("uni-popup.cancel")
|
||||||
|
},
|
||||||
|
placeholderText() {
|
||||||
|
return this.placeholder || t("uni-popup.placeholder")
|
||||||
|
},
|
||||||
|
titleText() {
|
||||||
|
return this.title || t("uni-popup.title")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
type(val) {
|
||||||
|
this.dialogType = val
|
||||||
|
},
|
||||||
|
mode(val) {
|
||||||
|
if (val === 'input') {
|
||||||
|
this.dialogType = 'info'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value(val) {
|
||||||
|
this.val = val
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 对话框遮罩不可点击
|
||||||
|
this.popup.disableMask()
|
||||||
|
// this.popup.closeMask()
|
||||||
|
if (this.mode === 'input') {
|
||||||
|
this.dialogType = 'info'
|
||||||
|
this.val = this.value
|
||||||
|
} else {
|
||||||
|
this.dialogType = this.type
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.focus = true
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 点击确认按钮
|
||||||
|
*/
|
||||||
|
onOk() {
|
||||||
|
if (this.mode === 'input'){
|
||||||
|
this.$emit('confirm', this.val)
|
||||||
|
}else{
|
||||||
|
this.$emit('confirm')
|
||||||
|
}
|
||||||
|
if(this.beforeClose) return
|
||||||
|
this.popup.close()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击取消按钮
|
||||||
|
*/
|
||||||
|
closeDialog() {
|
||||||
|
this.$emit('close')
|
||||||
|
if(this.beforeClose) return
|
||||||
|
this.popup.close()
|
||||||
|
},
|
||||||
|
close(){
|
||||||
|
this.popup.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.uni-popup-dialog {
|
||||||
|
width: 300px;
|
||||||
|
border-radius: 15px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-title {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 15px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-title-text {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-content {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px 15px 15px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-content-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #6e6e6e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-button-group {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
border-top-color: #f5f5f5;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-button {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-border-left {
|
||||||
|
border-left-color: #f0f0f0;
|
||||||
|
border-left-style: solid;
|
||||||
|
border-left-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-button-text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-button-color {
|
||||||
|
color: #007aff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-dialog-input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
border: 1px #eee solid;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__success {
|
||||||
|
color: #4cd964;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__warn {
|
||||||
|
color: #f0ad4e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__error {
|
||||||
|
color: #dd524d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__info {
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,143 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-popup-message">
|
||||||
|
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
|
||||||
|
<slot>
|
||||||
|
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import popup from '../uni-popup/popup.js'
|
||||||
|
/**
|
||||||
|
* PopUp 弹出层-消息提示
|
||||||
|
* @description 弹出层-消息提示
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||||
|
* @property {String} type = [success|warning|info|error] 主题样式
|
||||||
|
* @value success 成功
|
||||||
|
* @value warning 提示
|
||||||
|
* @value info 消息
|
||||||
|
* @value error 错误
|
||||||
|
* @property {String} message 消息提示文字
|
||||||
|
* @property {String} duration 显示时间,设置为 0 则不会自动关闭
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'uniPopupMessage',
|
||||||
|
mixins:[popup],
|
||||||
|
props: {
|
||||||
|
/**
|
||||||
|
* 主题 success/warning/info/error 默认 success
|
||||||
|
*/
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'success'
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 消息文字
|
||||||
|
*/
|
||||||
|
message: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 显示时间,设置为 0 则不会自动关闭
|
||||||
|
*/
|
||||||
|
duration: {
|
||||||
|
type: Number,
|
||||||
|
default: 3000
|
||||||
|
},
|
||||||
|
maskShow:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.popup.maskShow = this.maskShow
|
||||||
|
this.popup.messageChild = this
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
timerClose(){
|
||||||
|
if(this.duration === 0) return
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
this.timer = setTimeout(()=>{
|
||||||
|
this.popup.close()
|
||||||
|
},this.duration)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.uni-popup-message {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup-message__box {
|
||||||
|
background-color: #e1f3d8;
|
||||||
|
padding: 10px 15px;
|
||||||
|
border-color: #eee;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 500px) {
|
||||||
|
.fixforpc-width {
|
||||||
|
margin-top: 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
flex: none;
|
||||||
|
min-width: 380px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
max-width: 50%;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
max-width: 500px;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup-message-text {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__success {
|
||||||
|
background-color: #e1f3d8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__success-text {
|
||||||
|
color: #67C23A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__warn {
|
||||||
|
background-color: #faecd8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__warn-text {
|
||||||
|
color: #E6A23C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__error {
|
||||||
|
background-color: #fde2e2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__error-text {
|
||||||
|
color: #F56C6C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__info {
|
||||||
|
background-color: #F2F6FC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__info-text {
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,185 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-popup-share">
|
||||||
|
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
|
||||||
|
<view class="uni-share-content">
|
||||||
|
<view class="uni-share-content-box">
|
||||||
|
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
|
||||||
|
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
|
||||||
|
<text class="uni-share-text">{{item.text}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="uni-share-button-box">
|
||||||
|
<button class="uni-share-button" @click="close">{{cancelText}}</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import popup from '../uni-popup/popup.js'
|
||||||
|
import {
|
||||||
|
initVueI18n
|
||||||
|
} from '@dcloudio/uni-i18n'
|
||||||
|
import messages from '../uni-popup/i18n/index.js'
|
||||||
|
const { t } = initVueI18n(messages)
|
||||||
|
export default {
|
||||||
|
name: 'UniPopupShare',
|
||||||
|
mixins:[popup],
|
||||||
|
emits:['select'],
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
beforeClose: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
bottomData: [{
|
||||||
|
text: '微信',
|
||||||
|
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
|
||||||
|
name: 'wx'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '支付宝',
|
||||||
|
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
|
||||||
|
name: 'wx'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'QQ',
|
||||||
|
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
|
||||||
|
name: 'qq'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '新浪',
|
||||||
|
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
|
||||||
|
name: 'sina'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '百度',
|
||||||
|
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
|
||||||
|
name: 'copy'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '其他',
|
||||||
|
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
|
||||||
|
name: 'more'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
computed: {
|
||||||
|
cancelText() {
|
||||||
|
return t("uni-popup.cancel")
|
||||||
|
},
|
||||||
|
shareTitleText() {
|
||||||
|
return this.title || t("uni-popup.shareTitle")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 选择内容
|
||||||
|
*/
|
||||||
|
select(item, index) {
|
||||||
|
this.$emit('select', {
|
||||||
|
item,
|
||||||
|
index
|
||||||
|
})
|
||||||
|
this.close()
|
||||||
|
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 关闭窗口
|
||||||
|
*/
|
||||||
|
close() {
|
||||||
|
if(this.beforeClose) return
|
||||||
|
this.popup.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.uni-popup-share {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.uni-share-title {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
.uni-share-title-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.uni-share-content {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-content-box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 360px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-content-item {
|
||||||
|
width: 90px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-content-item:active {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-image {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-text {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #3B4144;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-button-box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 10px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-button {
|
||||||
|
flex: 1;
|
||||||
|
border-radius: 50px;
|
||||||
|
color: #666;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-share-button::after {
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"uni-popup.cancel": "cancel",
|
||||||
|
"uni-popup.ok": "ok",
|
||||||
|
"uni-popup.placeholder": "pleace enter",
|
||||||
|
"uni-popup.title": "Hint",
|
||||||
|
"uni-popup.shareTitle": "Share to"
|
||||||
|
}
|
|
@ -0,0 +1,8 @@
|
||||||
|
import en from './en.json'
|
||||||
|
import zhHans from './zh-Hans.json'
|
||||||
|
import zhHant from './zh-Hant.json'
|
||||||
|
export default {
|
||||||
|
en,
|
||||||
|
'zh-Hans': zhHans,
|
||||||
|
'zh-Hant': zhHant
|
||||||
|
}
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"uni-popup.cancel": "取消",
|
||||||
|
"uni-popup.ok": "确定",
|
||||||
|
"uni-popup.placeholder": "请输入",
|
||||||
|
"uni-popup.title": "提示",
|
||||||
|
"uni-popup.shareTitle": "分享到"
|
||||||
|
}
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"uni-popup.cancel": "取消",
|
||||||
|
"uni-popup.ok": "確定",
|
||||||
|
"uni-popup.placeholder": "請輸入",
|
||||||
|
"uni-popup.title": "提示",
|
||||||
|
"uni-popup.shareTitle": "分享到"
|
||||||
|
}
|
|
@ -0,0 +1,45 @@
|
||||||
|
// #ifdef H5
|
||||||
|
export default {
|
||||||
|
name: 'Keypress',
|
||||||
|
props: {
|
||||||
|
disable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
const keyNames = {
|
||||||
|
esc: ['Esc', 'Escape'],
|
||||||
|
tab: 'Tab',
|
||||||
|
enter: 'Enter',
|
||||||
|
space: [' ', 'Spacebar'],
|
||||||
|
up: ['Up', 'ArrowUp'],
|
||||||
|
left: ['Left', 'ArrowLeft'],
|
||||||
|
right: ['Right', 'ArrowRight'],
|
||||||
|
down: ['Down', 'ArrowDown'],
|
||||||
|
delete: ['Backspace', 'Delete', 'Del']
|
||||||
|
}
|
||||||
|
const listener = ($event) => {
|
||||||
|
if (this.disable) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const keyName = Object.keys(keyNames).find(key => {
|
||||||
|
const keyName = $event.key
|
||||||
|
const value = keyNames[key]
|
||||||
|
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||||
|
})
|
||||||
|
if (keyName) {
|
||||||
|
// 避免和其他按键事件冲突
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$emit(keyName, {})
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('keyup', listener)
|
||||||
|
// this.$once('hook:beforeDestroy', () => {
|
||||||
|
// document.removeEventListener('keyup', listener)
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
render: () => {}
|
||||||
|
}
|
||||||
|
// #endif
|
|
@ -0,0 +1,26 @@
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
this.popup = this.getParent()
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
/**
|
||||||
|
* 获取父元素实例
|
||||||
|
*/
|
||||||
|
getParent(name = 'uniPopup') {
|
||||||
|
let parent = this.$parent;
|
||||||
|
let parentName = parent.$options.name;
|
||||||
|
while (parentName !== name) {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (!parent) return false
|
||||||
|
parentName = parent.$options.name;
|
||||||
|
}
|
||||||
|
return parent;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,403 @@
|
||||||
|
<template>
|
||||||
|
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']" @touchmove.stop.prevent="clear">
|
||||||
|
<view @touchstart="touchstart" >
|
||||||
|
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
|
||||||
|
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
|
||||||
|
<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear"><slot /></view>
|
||||||
|
</uni-transition>
|
||||||
|
</view>
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<keypress v-if="maskShow" @esc="onTap" />
|
||||||
|
<!-- #endif -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// #ifdef H5
|
||||||
|
import keypress from './keypress.js'
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
/**
|
||||||
|
* PopUp 弹出层
|
||||||
|
* @description 弹出层组件,为了解决遮罩弹层的问题
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||||
|
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
|
||||||
|
* @value top 顶部弹出
|
||||||
|
* @value center 中间弹出
|
||||||
|
* @value bottom 底部弹出
|
||||||
|
* @value left 左侧弹出
|
||||||
|
* @value right 右侧弹出
|
||||||
|
* @value message 消息提示
|
||||||
|
* @value dialog 对话框
|
||||||
|
* @value share 底部分享示例
|
||||||
|
* @property {Boolean} animation = [ture|false] 是否开启动画
|
||||||
|
* @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
|
||||||
|
* @property {String} backgroundColor 主窗口背景色
|
||||||
|
* @property {Boolean} safeArea 是否适配底部安全区
|
||||||
|
* @event {Function} change 打开关闭弹窗触发,e={show: false}
|
||||||
|
* @event {Function} maskClick 点击遮罩触发
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'uniPopup',
|
||||||
|
components: {
|
||||||
|
// #ifdef H5
|
||||||
|
keypress
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
emits:['change','maskClick'],
|
||||||
|
props: {
|
||||||
|
// 开启动画
|
||||||
|
animation: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层
|
||||||
|
// message: 消息提示 ; dialog : 对话框
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'center'
|
||||||
|
},
|
||||||
|
// maskClick
|
||||||
|
maskClick: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
backgroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: 'none'
|
||||||
|
},
|
||||||
|
safeArea:{
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
/**
|
||||||
|
* 监听type类型
|
||||||
|
*/
|
||||||
|
type: {
|
||||||
|
handler: function(type) {
|
||||||
|
if (!this.config[type]) return
|
||||||
|
this[this.config[type]](true)
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
isDesktop: {
|
||||||
|
handler: function(newVal) {
|
||||||
|
if (!this.config[newVal]) return
|
||||||
|
this[this.config[this.type]](true)
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 监听遮罩是否可点击
|
||||||
|
* @param {Object} val
|
||||||
|
*/
|
||||||
|
maskClick: {
|
||||||
|
handler: function(val) {
|
||||||
|
this.mkclick = val
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
duration: 300,
|
||||||
|
ani: [],
|
||||||
|
showPopup: false,
|
||||||
|
showTrans: false,
|
||||||
|
popupWidth: 0,
|
||||||
|
popupHeight: 0,
|
||||||
|
config: {
|
||||||
|
top: 'top',
|
||||||
|
bottom: 'bottom',
|
||||||
|
center: 'center',
|
||||||
|
left: 'left',
|
||||||
|
right: 'right',
|
||||||
|
message: 'top',
|
||||||
|
dialog: 'center',
|
||||||
|
share: 'bottom'
|
||||||
|
},
|
||||||
|
maskClass: {
|
||||||
|
position: 'fixed',
|
||||||
|
bottom: 0,
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.4)'
|
||||||
|
},
|
||||||
|
transClass: {
|
||||||
|
position: 'fixed',
|
||||||
|
left: 0,
|
||||||
|
right: 0
|
||||||
|
},
|
||||||
|
maskShow: true,
|
||||||
|
mkclick: true,
|
||||||
|
popupstyle: this.isDesktop ? 'fixforpc-top' : 'top'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isDesktop() {
|
||||||
|
return this.popupWidth >= 500 && this.popupHeight >= 500
|
||||||
|
},
|
||||||
|
bg() {
|
||||||
|
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
|
||||||
|
return 'transparent'
|
||||||
|
}
|
||||||
|
return this.backgroundColor
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const fixSize = () => {
|
||||||
|
const { windowWidth, windowHeight, windowTop, safeAreaInsets } = uni.getSystemInfoSync()
|
||||||
|
this.popupWidth = windowWidth
|
||||||
|
this.popupHeight = windowHeight + windowTop
|
||||||
|
// 是否适配底部安全区
|
||||||
|
if(this.safeArea){
|
||||||
|
this.safeAreaInsets = safeAreaInsets
|
||||||
|
}else{
|
||||||
|
this.safeAreaInsets = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
fixSize()
|
||||||
|
// #ifdef H5
|
||||||
|
// window.addEventListener('resize', fixSize)
|
||||||
|
// this.$once('hook:beforeDestroy', () => {
|
||||||
|
// window.removeEventListener('resize', fixSize)
|
||||||
|
// })
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.mkclick = this.maskClick
|
||||||
|
if (this.animation) {
|
||||||
|
this.duration = 300
|
||||||
|
} else {
|
||||||
|
this.duration = 0
|
||||||
|
}
|
||||||
|
// TODO 处理 message 组件生命周期异常的问题
|
||||||
|
this.messageChild = null
|
||||||
|
// TODO 解决头条冒泡的问题
|
||||||
|
this.clearPropagation = false
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 公用方法,不显示遮罩层
|
||||||
|
*/
|
||||||
|
closeMask() {
|
||||||
|
this.maskShow = false
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 公用方法,遮罩层禁止点击
|
||||||
|
*/
|
||||||
|
disableMask() {
|
||||||
|
this.mkclick = false
|
||||||
|
},
|
||||||
|
// TODO nvue 取消冒泡
|
||||||
|
clear(e) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
e.stopPropagation()
|
||||||
|
// #endif
|
||||||
|
this.clearPropagation = true
|
||||||
|
},
|
||||||
|
|
||||||
|
open(direction) {
|
||||||
|
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
|
||||||
|
if (!(direction && innerType.indexOf(direction) !== -1)) {
|
||||||
|
direction = this.type
|
||||||
|
}
|
||||||
|
if (!this.config[direction]) {
|
||||||
|
console.error('缺少类型:', direction)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this[this.config[direction]]()
|
||||||
|
this.$emit('change', {
|
||||||
|
show: true,
|
||||||
|
type: direction
|
||||||
|
})
|
||||||
|
},
|
||||||
|
close(type) {
|
||||||
|
this.showTrans = false
|
||||||
|
this.$emit('change', {
|
||||||
|
show: false,
|
||||||
|
type: this.type
|
||||||
|
})
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
// // 自定义关闭事件
|
||||||
|
// this.customOpen && this.customClose()
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
this.showPopup = false
|
||||||
|
}, 300)
|
||||||
|
},
|
||||||
|
// TODO 处理冒泡事件,头条的冒泡事件有问题 ,先这样兼容
|
||||||
|
touchstart(){
|
||||||
|
this.clearPropagation = false
|
||||||
|
},
|
||||||
|
|
||||||
|
onTap() {
|
||||||
|
if (this.clearPropagation) {
|
||||||
|
// fix by mehaotian 兼容 nvue
|
||||||
|
this.clearPropagation = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$emit('maskClick')
|
||||||
|
if (!this.mkclick) return
|
||||||
|
this.close()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 顶部弹出样式处理
|
||||||
|
*/
|
||||||
|
top(type) {
|
||||||
|
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
|
||||||
|
this.ani = ['slide-top']
|
||||||
|
this.transClass = {
|
||||||
|
position: 'fixed',
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
backgroundColor: this.bg
|
||||||
|
}
|
||||||
|
// TODO 兼容 type 属性 ,后续会废弃
|
||||||
|
if (type) return
|
||||||
|
this.showPopup = true
|
||||||
|
this.showTrans = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.messageChild && this.type === 'message') {
|
||||||
|
this.messageChild.timerClose()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 底部弹出样式处理
|
||||||
|
*/
|
||||||
|
bottom(type) {
|
||||||
|
this.popupstyle = 'bottom'
|
||||||
|
this.ani = ['slide-bottom']
|
||||||
|
|
||||||
|
this.transClass = {
|
||||||
|
position: 'fixed',
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
paddingBottom: (this.safeAreaInsets && this.safeAreaInsets.bottom) || 0,
|
||||||
|
backgroundColor: this.bg
|
||||||
|
}
|
||||||
|
// TODO 兼容 type 属性 ,后续会废弃
|
||||||
|
if (type) return
|
||||||
|
this.showPopup = true
|
||||||
|
this.showTrans = true
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 中间弹出样式处理
|
||||||
|
*/
|
||||||
|
center(type) {
|
||||||
|
this.popupstyle = 'center'
|
||||||
|
this.ani = ['zoom-out', 'fade']
|
||||||
|
this.transClass = {
|
||||||
|
position: 'fixed',
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
/* #endif */
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
top: 0,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center'
|
||||||
|
}
|
||||||
|
// TODO 兼容 type 属性 ,后续会废弃
|
||||||
|
if (type) return
|
||||||
|
this.showPopup = true
|
||||||
|
this.showTrans = true
|
||||||
|
},
|
||||||
|
left(type) {
|
||||||
|
this.popupstyle = 'left'
|
||||||
|
this.ani = ['slide-left']
|
||||||
|
this.transClass = {
|
||||||
|
position: 'fixed',
|
||||||
|
left: 0,
|
||||||
|
bottom: 0,
|
||||||
|
top: 0,
|
||||||
|
backgroundColor: this.bg,
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column'
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
// TODO 兼容 type 属性 ,后续会废弃
|
||||||
|
if (type) return
|
||||||
|
this.showPopup = true
|
||||||
|
this.showTrans = true
|
||||||
|
},
|
||||||
|
right(type) {
|
||||||
|
this.popupstyle = 'right'
|
||||||
|
this.ani = ['slide-right']
|
||||||
|
this.transClass = {
|
||||||
|
position: 'fixed',
|
||||||
|
bottom: 0,
|
||||||
|
right: 0,
|
||||||
|
top: 0,
|
||||||
|
backgroundColor: this.bg,
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column'
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
// TODO 兼容 type 属性 ,后续会废弃
|
||||||
|
if (type) return
|
||||||
|
this.showPopup = true
|
||||||
|
this.showTrans = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.uni-popup {
|
||||||
|
position: fixed;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
z-index: 99;
|
||||||
|
/* #endif */
|
||||||
|
&.top,
|
||||||
|
&.left,
|
||||||
|
&.right {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
top: var(--window-top);
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef H5 */
|
||||||
|
top: 0;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
.uni-popup__wrapper {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: block;
|
||||||
|
/* #endif */
|
||||||
|
position: relative;
|
||||||
|
/* iphonex 等安全区设置,底部安全区适配 */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
// padding-bottom: constant(safe-area-inset-bottom);
|
||||||
|
// padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
/* #endif */
|
||||||
|
&.left,
|
||||||
|
&.right {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
padding-top: var(--window-top);
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef H5 */
|
||||||
|
padding-top: 0;
|
||||||
|
/* #endif */
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixforpc-z-index {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
z-index: 999;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixforpc-top {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,89 @@
|
||||||
|
{
|
||||||
|
"id": "uni-popup",
|
||||||
|
"displayName": "uni-popup 弹出层",
|
||||||
|
"version": "1.6.2",
|
||||||
|
"description": " Popup 组件,提供常用的弹层",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"弹出层",
|
||||||
|
"弹窗",
|
||||||
|
"popup",
|
||||||
|
"弹框"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [
|
||||||
|
"uni-transition"
|
||||||
|
],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"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",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "u"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,296 @@
|
||||||
|
|
||||||
|
|
||||||
|
## Popup 弹出层
|
||||||
|
> **组件名:uni-popup**
|
||||||
|
> 代码块: `uPopup`
|
||||||
|
> 关联组件:`uni-popup-dialog`,`uni-popup-message`,`uni-popup-share`,`uni-transition`
|
||||||
|
|
||||||
|
|
||||||
|
弹出层组件,在应用中弹出一个消息提示窗口、提示框等
|
||||||
|
|
||||||
|
|
||||||
|
> **注意事项**
|
||||||
|
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
|
||||||
|
> - 组件需要依赖 `sass` 插件 ,请自行手动安装
|
||||||
|
> - `uni-popup-message` 、 `uni-popup-dialog` 等扩展ui组件,需要和 `uni-popup` 配套使用,暂不支持单独使用
|
||||||
|
> - `nvue` 中使用 `uni-popup` 时,尽量将组件置于其他元素后面,避免出现层级问题
|
||||||
|
> - `uni-popup` 并不能完全阻止页面滚动,可在打开 `uni-popup` 的时候手动去做一些处理,禁止页面滚动
|
||||||
|
> - 如果想在页面渲染完毕后就打开 `uni-popup` ,请在 `onReady` 或 `mounted` 生命周期内调用,确保组件渲染完毕
|
||||||
|
> - 在微信小程序开发者工具中,启用真机调试,popup 会延时出现,是因为 setTimeout 在真机调试中的延时问题导致的,预览和发布小程序不会出现此问题
|
||||||
|
> - 使用 `npm` 方式引入组件,如果确认引用正确,但是提示未注册组件或显示不正常,请尝试重新编译项目
|
||||||
|
> - `uni-popup` 中尽量不要使用 `scroll-view` 嵌套过多的内容,可能会影响组件的性能,导致组件无法打开或者打开卡顿
|
||||||
|
> - `uni-popup` 不会覆盖原生 tabbar 和原生导航栏
|
||||||
|
> - 组件支持 nvue ,需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
|
||||||
|
> - 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 安装方式
|
||||||
|
|
||||||
|
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`。
|
||||||
|
|
||||||
|
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
|
||||||
|
|
||||||
|
|
||||||
|
### 基本用法
|
||||||
|
|
||||||
|
**示例**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button @click="open">打开弹窗</button>
|
||||||
|
<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
export default {
|
||||||
|
methods:{
|
||||||
|
open(){
|
||||||
|
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ,type 属性将失效 ,仅支持 ['top','left','bottom','right','center']
|
||||||
|
this.$refs.popup.open('top')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 设置主窗口背景色
|
||||||
|
|
||||||
|
在大多数场景下,并不需要设置 `background-color` 属性,因为`uni-popup`的主窗口默认是透明的,在向里面插入内容的时候 ,样式完全交由用户定制,如果设置了背景色 ,例如 `uni-popup-dialog` 中的圆角就很难去实现,不设置背景色,更适合用户去自由发挥。
|
||||||
|
|
||||||
|
而也有特例,需要我们主动去设置背景色,例如 `type = 'bottom'` 的时候 ,在异型屏中遇到了底部安全区问题(如 iphone 11),因为 `uni-popup`的主要内容避开了安全区(设置`safe-area:true`),导致底部的颜色我们无法自定义,这时候使用 `background-color` 就可以解决这个问题。
|
||||||
|
|
||||||
|
**示例**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button @click="open">打开弹窗</button>
|
||||||
|
<uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 禁用打开动画
|
||||||
|
在某些场景 ,可能不希望弹层有动画效果 ,只需要将 `animation` 属性设置为 `false` 即可以关闭动画。
|
||||||
|
|
||||||
|
**示例**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button @click="open">打开弹窗</button>
|
||||||
|
<uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 禁用点击遮罩关闭
|
||||||
|
默认情况下,点击遮罩会自动关闭`uni-popup`,如不想点击关闭,只需将`mask-click`设置为`false`,这时候要关闭`uni-popup`,只能手动调用 `close` 方法。
|
||||||
|
|
||||||
|
**示例**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button @click="open">打开弹窗</button>
|
||||||
|
<uni-popup ref="popup" :mask-click="false">
|
||||||
|
<text>Popup</text>
|
||||||
|
<button @click="close">关闭</button>
|
||||||
|
</uni-popup>
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
onReady() {},
|
||||||
|
methods: {
|
||||||
|
open() {
|
||||||
|
this.$refs.popup.open('top')
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.$refs.popup.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Popup Props
|
||||||
|
|
||||||
|
|属性名|类型|默认值|说明|
|
||||||
|
|:-:|:-:|:-:|:-:|
|
||||||
|
|animation|Boolean|true|是否开启动画|
|
||||||
|
|type|String|'center'|弹出方式|
|
||||||
|
|mask-click|Boolean|true|蒙版点击是否关闭弹窗|
|
||||||
|
|background-color|String|'none'|主窗口背景色|
|
||||||
|
|safe-area|Boolean|true|是否适配底部安全区|
|
||||||
|
|
||||||
|
#### Type Options
|
||||||
|
|
||||||
|
|属性名|说明|
|
||||||
|
|:-:| :-:|
|
||||||
|
|top|顶部弹出 |
|
||||||
|
|center|居中弹出|
|
||||||
|
|bottom|底部弹出|
|
||||||
|
|left|左侧弹出|
|
||||||
|
|right|右侧弹出|
|
||||||
|
|message|预置样式 :消息提示|
|
||||||
|
|dialog|预置样式 :对话框|
|
||||||
|
|share|预置样式 :底部弹出分享示例 |
|
||||||
|
|
||||||
|
|
||||||
|
### Popup Methods
|
||||||
|
|
||||||
|
|方法称名 |说明|参数|
|
||||||
|
|:-:|:-:|:-:|
|
||||||
|
|open|打开弹出层|open(String:type) ,如果参数可代替 type 属性|
|
||||||
|
|close|关闭弹出层 |-|
|
||||||
|
|
||||||
|
|
||||||
|
### Popup Events
|
||||||
|
|
||||||
|
|事件称名|说明|返回值|
|
||||||
|
|:-:|:-:|:-:|
|
||||||
|
|change|组件状态发生变化触发|e={show: true|false,type:当前模式}|
|
||||||
|
|maskClick|点击遮罩层触发|-|
|
||||||
|
|
||||||
|
|
||||||
|
## 扩展组件说明
|
||||||
|
`uni-popup` 其实并没有任何样式,只提供基础的动画效果,给用户一个弹出层解决方案,仅仅是这样并不能满足开发需求,所以我们提供了三种基础扩展样式
|
||||||
|
|
||||||
|
### uni-popup-message 提示信息
|
||||||
|
|
||||||
|
将 `uni-popup` 的`type`属性改为 `message`,并引入对应组件即可使用消息提示 ,*该组件不支持单独使用*
|
||||||
|
|
||||||
|
**示例**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<uni-popup ref="popup" type="message">
|
||||||
|
<uni-popup-message type="success" message="成功消息" :duration="2000"></uni-popup-message>
|
||||||
|
</uni-popup>
|
||||||
|
```
|
||||||
|
|
||||||
|
### PopupMessage Props
|
||||||
|
|
||||||
|
|属性名|类型|默认值|说明|
|
||||||
|
|:-:|:-:|:-:|:-:|
|
||||||
|
|type|String|success|消息提示主题|
|
||||||
|
|message|String|-|消息提示文字|
|
||||||
|
|duration|Number|3000|消息显示时间,超过显示时间组件自动关闭,设置为0 将不会关闭,需手动调用 close 方法关闭|
|
||||||
|
|
||||||
|
#### Type Options
|
||||||
|
|
||||||
|
|属性名|说明|
|
||||||
|
|:-:| :-:|
|
||||||
|
|success|成功 |
|
||||||
|
|warn|警告|
|
||||||
|
|error|失败|
|
||||||
|
|info|消息|
|
||||||
|
|
||||||
|
### PopupMessage Slots
|
||||||
|
|
||||||
|
|名称|说明|
|
||||||
|
|:-:|:-:|
|
||||||
|
|default|消息内容,会覆盖 message 属性|
|
||||||
|
|
||||||
|
### uni-popup-dialog 对话框
|
||||||
|
|
||||||
|
将 `uni-popup` 的`type`属性改为 `dialog`,并引入对应组件即可使用对话框 ,*该组件不支持单独使用*
|
||||||
|
|
||||||
|
**示例**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button @click="open">打开弹窗</button>
|
||||||
|
<uni-popup ref="popup" type="dialog">
|
||||||
|
<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
|
||||||
|
</uni-popup>
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
open() {
|
||||||
|
this.$refs.popup.open()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击取消按钮触发
|
||||||
|
* @param {Object} done
|
||||||
|
*/
|
||||||
|
close() {
|
||||||
|
// TODO 做一些其他的事情,before-close 为true的情况下,手动执行 close 才会关闭对话框
|
||||||
|
// ...
|
||||||
|
this.$refs.popup.close()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击确认按钮触发
|
||||||
|
* @param {Object} done
|
||||||
|
* @param {Object} value
|
||||||
|
*/
|
||||||
|
confirm(value) {
|
||||||
|
// 输入框的值
|
||||||
|
// console.log(value)
|
||||||
|
// TODO 做一些其他的事情,手动执行 close 才会关闭对话框
|
||||||
|
// ...
|
||||||
|
this.$refs.popup.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### PopupDialog Props
|
||||||
|
|
||||||
|
|属性名|类型|默认值|说明|
|
||||||
|
|:-:|:-:|:-:|:-:|
|
||||||
|
|type|String|success|对话框标题主题,可选值: success/warn/info/error|
|
||||||
|
|mode|String|base| 对话框模式,可选值:base(提示对话框)/input(可输入对话框)|
|
||||||
|
|title|String|-|对话框标题|
|
||||||
|
|content|String|-|对话框内容,base模式下生效|
|
||||||
|
|value| String\Number|-|输入框默认值,input模式下生效|
|
||||||
|
|placeholder|String|-|输入框提示文字,input模式下生效|
|
||||||
|
|before-close|Boolean|false | 是否拦截按钮事件,如为true,则不会关闭对话框,关闭需要手动执行 uni-popup 的 close 方法|
|
||||||
|
|
||||||
|
#### PopupDialog Events
|
||||||
|
|
||||||
|
|事件称名 |说明|返回值|
|
||||||
|
|:-:|:-:|:-:|
|
||||||
|
|close|点击dialog取消按钮触发|-|
|
||||||
|
|confirm|点击dialog确定按钮触发|e={value:input模式下输入框的值}|
|
||||||
|
|
||||||
|
### PopupDialog Slots
|
||||||
|
|
||||||
|
|名称|说明|
|
||||||
|
|:-:|:-:|
|
||||||
|
|default|自定义内容,回覆盖原有的内容显示|
|
||||||
|
|
||||||
|
### uni-popup-share 分享示例
|
||||||
|
|
||||||
|
分享示例,不作为最终可使用的组件,只做为样式组件,供用户自行修改,`后续的开发计划是实现实际的分享逻辑,参数可配置`。
|
||||||
|
|
||||||
|
将 `uni-popup` 的 `type` 属性改为 `share`,并引入对应组件即可使用 ,*该组件不支持单独使用*
|
||||||
|
|
||||||
|
**示例**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<uni-popup ref="popup" type="share">
|
||||||
|
<uni-popup-share title="分享到" @select="select"></uni-popup-share>
|
||||||
|
</uni-popup>
|
||||||
|
```
|
||||||
|
|
||||||
|
### PopupShare Props
|
||||||
|
|
||||||
|
|属性名|类型|默认值|说明|
|
||||||
|
|:-:|:-:|:-:| :-: |
|
||||||
|
|title|String|-|分享弹窗标题|
|
||||||
|
|before-close|Boolean|false | 是否拦截按钮事件,如为true,则不会关闭对话框,关闭需要手动执行 uni-popup 的 close 方法|
|
||||||
|
|
||||||
|
### PopupShare Events
|
||||||
|
|
||||||
|
|事件称名|说明|返回值|
|
||||||
|
|:-:|:-:|:-:|
|
||||||
|
|select|选择触发|e = {item,index}:所选参数|
|
||||||
|
|
||||||
|
**Tips**
|
||||||
|
- share 分享组件,只是作为一个扩展示例,如果需要修改数据源,请到组件内修改
|
||||||
|
|
||||||
|
## 帮助
|
||||||
|
在使用中如遇到无法解决的问题,请提 [Issues](https://github.com/dcloudio/uni-ui/issues) 给我们。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 组件示例
|
||||||
|
|
||||||
|
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/popup/popup](https://hellouniapp.dcloud.net.cn/pages/extUI/popup/popup)
|
|
@ -0,0 +1,8 @@
|
||||||
|
## 1.0.3(2022-01-21)
|
||||||
|
- 优化 组件示例
|
||||||
|
## 1.0.2(2021-11-22)
|
||||||
|
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
|
||||||
|
## 1.0.1(2021-11-22)
|
||||||
|
- 修复 vue3中scss语法兼容问题
|
||||||
|
## 1.0.0(2021-11-18)
|
||||||
|
- init
|
|
@ -0,0 +1 @@
|
||||||
|
@import './styles/index.scss';
|
|
@ -0,0 +1,82 @@
|
||||||
|
{
|
||||||
|
"id": "uni-scss",
|
||||||
|
"displayName": "uni-scss 辅助样式",
|
||||||
|
"version": "1.0.3",
|
||||||
|
"description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。",
|
||||||
|
"keywords": [
|
||||||
|
"uni-scss",
|
||||||
|
"uni-ui",
|
||||||
|
"辅助样式"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"JS SDK",
|
||||||
|
"通用 SDK"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "u"
|
||||||
|
},
|
||||||
|
"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",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "n",
|
||||||
|
"联盟": "n"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,4 @@
|
||||||
|
`uni-sass` 是 `uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
|
||||||
|
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
|
@ -0,0 +1,7 @@
|
||||||
|
@import './setting/_variables.scss';
|
||||||
|
@import './setting/_border.scss';
|
||||||
|
@import './setting/_color.scss';
|
||||||
|
@import './setting/_space.scss';
|
||||||
|
@import './setting/_radius.scss';
|
||||||
|
@import './setting/_text.scss';
|
||||||
|
@import './setting/_styles.scss';
|
|
@ -0,0 +1,3 @@
|
||||||
|
.uni-border {
|
||||||
|
border: 1px $uni-border-1 solid;
|
||||||
|
}
|
|
@ -0,0 +1,66 @@
|
||||||
|
|
||||||
|
// TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐
|
||||||
|
// @mixin get-styles($k,$c) {
|
||||||
|
// @if $k == size or $k == weight{
|
||||||
|
// font-#{$k}:#{$c}
|
||||||
|
// }@else{
|
||||||
|
// #{$k}:#{$c}
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
$uni-ui-color:(
|
||||||
|
// 主色
|
||||||
|
primary: $uni-primary,
|
||||||
|
primary-disable: $uni-primary-disable,
|
||||||
|
primary-light: $uni-primary-light,
|
||||||
|
// 辅助色
|
||||||
|
success: $uni-success,
|
||||||
|
success-disable: $uni-success-disable,
|
||||||
|
success-light: $uni-success-light,
|
||||||
|
warning: $uni-warning,
|
||||||
|
warning-disable: $uni-warning-disable,
|
||||||
|
warning-light: $uni-warning-light,
|
||||||
|
error: $uni-error,
|
||||||
|
error-disable: $uni-error-disable,
|
||||||
|
error-light: $uni-error-light,
|
||||||
|
info: $uni-info,
|
||||||
|
info-disable: $uni-info-disable,
|
||||||
|
info-light: $uni-info-light,
|
||||||
|
// 中性色
|
||||||
|
main-color: $uni-main-color,
|
||||||
|
base-color: $uni-base-color,
|
||||||
|
secondary-color: $uni-secondary-color,
|
||||||
|
extra-color: $uni-extra-color,
|
||||||
|
// 背景色
|
||||||
|
bg-color: $uni-bg-color,
|
||||||
|
// 边框颜色
|
||||||
|
border-1: $uni-border-1,
|
||||||
|
border-2: $uni-border-2,
|
||||||
|
border-3: $uni-border-3,
|
||||||
|
border-4: $uni-border-4,
|
||||||
|
// 黑色
|
||||||
|
black:$uni-black,
|
||||||
|
// 白色
|
||||||
|
white:$uni-white,
|
||||||
|
// 透明
|
||||||
|
transparent:$uni-transparent
|
||||||
|
) !default;
|
||||||
|
@each $key, $child in $uni-ui-color {
|
||||||
|
.uni-#{"" + $key} {
|
||||||
|
color: $child;
|
||||||
|
}
|
||||||
|
.uni-#{"" + $key}-bg {
|
||||||
|
background-color: $child;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.uni-shadow-sm {
|
||||||
|
box-shadow: $uni-shadow-sm;
|
||||||
|
}
|
||||||
|
.uni-shadow-base {
|
||||||
|
box-shadow: $uni-shadow-base;
|
||||||
|
}
|
||||||
|
.uni-shadow-lg {
|
||||||
|
box-shadow: $uni-shadow-lg;
|
||||||
|
}
|
||||||
|
.uni-mask {
|
||||||
|
background-color:$uni-mask;
|
||||||
|
}
|
|
@ -0,0 +1,55 @@
|
||||||
|
@mixin radius($r,$d:null ,$important: false){
|
||||||
|
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
|
||||||
|
// Key exists within the $uni-radius variable
|
||||||
|
@if (map-has-key($uni-radius, $r) and $d){
|
||||||
|
@if $d == t {
|
||||||
|
border-top-left-radius:$radius-value;
|
||||||
|
border-top-right-radius:$radius-value;
|
||||||
|
}@else if $d == r {
|
||||||
|
border-top-right-radius:$radius-value;
|
||||||
|
border-bottom-right-radius:$radius-value;
|
||||||
|
}@else if $d == b {
|
||||||
|
border-bottom-left-radius:$radius-value;
|
||||||
|
border-bottom-right-radius:$radius-value;
|
||||||
|
}@else if $d == l {
|
||||||
|
border-top-left-radius:$radius-value;
|
||||||
|
border-bottom-left-radius:$radius-value;
|
||||||
|
}@else if $d == tl {
|
||||||
|
border-top-left-radius:$radius-value;
|
||||||
|
}@else if $d == tr {
|
||||||
|
border-top-right-radius:$radius-value;
|
||||||
|
}@else if $d == br {
|
||||||
|
border-bottom-right-radius:$radius-value;
|
||||||
|
}@else if $d == bl {
|
||||||
|
border-bottom-left-radius:$radius-value;
|
||||||
|
}
|
||||||
|
}@else{
|
||||||
|
border-radius:$radius-value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $key, $child in $uni-radius {
|
||||||
|
@if($key){
|
||||||
|
.uni-radius-#{"" + $key} {
|
||||||
|
@include radius($key)
|
||||||
|
}
|
||||||
|
}@else{
|
||||||
|
.uni-radius {
|
||||||
|
@include radius($key)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $direction in t, r, b, l,tl, tr, br, bl {
|
||||||
|
@each $key, $child in $uni-radius {
|
||||||
|
@if($key){
|
||||||
|
.uni-radius-#{"" + $direction}-#{"" + $key} {
|
||||||
|
@include radius($key,$direction,false)
|
||||||
|
}
|
||||||
|
}@else{
|
||||||
|
.uni-radius-#{$direction} {
|
||||||
|
@include radius($key,$direction,false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,56 @@
|
||||||
|
|
||||||
|
@mixin fn($space,$direction,$size,$n) {
|
||||||
|
@if $n {
|
||||||
|
#{$space}-#{$direction}: #{$size*$uni-space-root}px
|
||||||
|
} @else {
|
||||||
|
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin get-styles($direction,$i,$space,$n){
|
||||||
|
@if $direction == t {
|
||||||
|
@include fn($space, top,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == r {
|
||||||
|
@include fn($space, right,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == b {
|
||||||
|
@include fn($space, bottom,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == l {
|
||||||
|
@include fn($space, left,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == x {
|
||||||
|
@include fn($space, left,$i,$n);
|
||||||
|
@include fn($space, right,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == y {
|
||||||
|
@include fn($space, top,$i,$n);
|
||||||
|
@include fn($space, bottom,$i,$n);
|
||||||
|
}
|
||||||
|
@if $direction == a {
|
||||||
|
@if $n {
|
||||||
|
#{$space}:#{$i*$uni-space-root}px;
|
||||||
|
} @else {
|
||||||
|
#{$space}:#{-$i*$uni-space-root}px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $orientation in m,p {
|
||||||
|
$space: margin;
|
||||||
|
@if $orientation == m {
|
||||||
|
$space: margin;
|
||||||
|
} @else {
|
||||||
|
$space: padding;
|
||||||
|
}
|
||||||
|
@for $i from 0 through 16 {
|
||||||
|
@each $direction in t, r, b, l, x, y, a {
|
||||||
|
.uni-#{$orientation}#{$direction}-#{$i} {
|
||||||
|
@include get-styles($direction,$i,$space,true);
|
||||||
|
}
|
||||||
|
.uni-#{$orientation}#{$direction}-n#{$i} {
|
||||||
|
@include get-styles($direction,$i,$space,false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,167 @@
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
|
||||||
|
$-color-white:#fff;
|
||||||
|
$-color-black:#000;
|
||||||
|
@mixin base-style($color) {
|
||||||
|
color: #fff;
|
||||||
|
background-color: $color;
|
||||||
|
border-color: mix($-color-black, $color, 8%);
|
||||||
|
&:not([hover-class]):active {
|
||||||
|
background: mix($-color-black, $color, 10%);
|
||||||
|
border-color: mix($-color-black, $color, 20%);
|
||||||
|
color: $-color-white;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin is-color($color) {
|
||||||
|
@include base-style($color);
|
||||||
|
&[loading] {
|
||||||
|
@include base-style($color);
|
||||||
|
&::before {
|
||||||
|
margin-right:5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[disabled] {
|
||||||
|
&,
|
||||||
|
&[loading],
|
||||||
|
&:not([hover-class]):active {
|
||||||
|
color: $-color-white;
|
||||||
|
border-color: mix(darken($color,10%), $-color-white);
|
||||||
|
background-color: mix($color, $-color-white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
@mixin base-plain-style($color) {
|
||||||
|
color:$color;
|
||||||
|
background-color: mix($-color-white, $color, 90%);
|
||||||
|
border-color: mix($-color-white, $color, 70%);
|
||||||
|
&:not([hover-class]):active {
|
||||||
|
background: mix($-color-white, $color, 80%);
|
||||||
|
color: $color;
|
||||||
|
outline: none;
|
||||||
|
border-color: mix($-color-white, $color, 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin is-plain($color){
|
||||||
|
&[plain] {
|
||||||
|
@include base-plain-style($color);
|
||||||
|
&[loading] {
|
||||||
|
@include base-plain-style($color);
|
||||||
|
&::before {
|
||||||
|
margin-right:5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[disabled] {
|
||||||
|
&,
|
||||||
|
&:active {
|
||||||
|
color: mix($-color-white, $color, 40%);
|
||||||
|
background-color: mix($-color-white, $color, 90%);
|
||||||
|
border-color: mix($-color-white, $color, 80%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.uni-btn {
|
||||||
|
margin: 5px;
|
||||||
|
color: #393939;
|
||||||
|
border:1px solid #ccc;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 200;
|
||||||
|
background-color: #F9F9F9;
|
||||||
|
// TODO 暂时处理边框隐藏一边的问题
|
||||||
|
overflow: visible;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not([type]),&[type=default] {
|
||||||
|
color: #999;
|
||||||
|
&[loading] {
|
||||||
|
background: none;
|
||||||
|
&::before {
|
||||||
|
margin-right:5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&[disabled]{
|
||||||
|
color: mix($-color-white, #999, 60%);
|
||||||
|
&,
|
||||||
|
&[loading],
|
||||||
|
&:active {
|
||||||
|
color: mix($-color-white, #999, 60%);
|
||||||
|
background-color: mix($-color-white,$-color-black , 98%);
|
||||||
|
border-color: mix($-color-white, #999, 85%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[plain] {
|
||||||
|
color: #999;
|
||||||
|
background: none;
|
||||||
|
border-color: $uni-border-1;
|
||||||
|
&:not([hover-class]):active {
|
||||||
|
background: none;
|
||||||
|
color: mix($-color-white, $-color-black, 80%);
|
||||||
|
border-color: mix($-color-white, $-color-black, 90%);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
&[disabled]{
|
||||||
|
&,
|
||||||
|
&[loading],
|
||||||
|
&:active {
|
||||||
|
background: none;
|
||||||
|
color: mix($-color-white, #999, 60%);
|
||||||
|
border-color: mix($-color-white, #999, 85%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not([hover-class]):active {
|
||||||
|
color: mix($-color-white, $-color-black, 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[size=mini] {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 200;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&.uni-btn-small {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
&.uni-btn-mini {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.uni-btn-radius {
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
&[type=primary] {
|
||||||
|
@include is-color($uni-primary);
|
||||||
|
@include is-plain($uni-primary)
|
||||||
|
}
|
||||||
|
&[type=success] {
|
||||||
|
@include is-color($uni-success);
|
||||||
|
@include is-plain($uni-success)
|
||||||
|
}
|
||||||
|
&[type=error] {
|
||||||
|
@include is-color($uni-error);
|
||||||
|
@include is-plain($uni-error)
|
||||||
|
}
|
||||||
|
&[type=warning] {
|
||||||
|
@include is-color($uni-warning);
|
||||||
|
@include is-plain($uni-warning)
|
||||||
|
}
|
||||||
|
&[type=info] {
|
||||||
|
@include is-color($uni-info);
|
||||||
|
@include is-plain($uni-info)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* #endif */
|
|
@ -0,0 +1,24 @@
|
||||||
|
@mixin get-styles($k,$c) {
|
||||||
|
@if $k == size or $k == weight{
|
||||||
|
font-#{$k}:#{$c}
|
||||||
|
}@else{
|
||||||
|
#{$k}:#{$c}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $key, $child in $uni-headings {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-#{$key} {
|
||||||
|
@each $k, $c in $child {
|
||||||
|
@include get-styles($k,$c)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
.container .uni-#{$key} {
|
||||||
|
@each $k, $c in $child {
|
||||||
|
@include get-styles($k,$c)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
}
|
|
@ -0,0 +1,146 @@
|
||||||
|
// @use "sass:math";
|
||||||
|
@import '../tools/functions.scss';
|
||||||
|
// 间距基础倍数
|
||||||
|
$uni-space-root: 2 !default;
|
||||||
|
// 边框半径默认值
|
||||||
|
$uni-radius-root:5px !default;
|
||||||
|
$uni-radius: () !default;
|
||||||
|
// 边框半径断点
|
||||||
|
$uni-radius: map-deep-merge(
|
||||||
|
(
|
||||||
|
0: 0,
|
||||||
|
// TODO 当前版本暂时不支持 sm 属性
|
||||||
|
// 'sm': math.div($uni-radius-root, 2),
|
||||||
|
null: $uni-radius-root,
|
||||||
|
'lg': $uni-radius-root * 2,
|
||||||
|
'xl': $uni-radius-root * 6,
|
||||||
|
'pill': 9999px,
|
||||||
|
'circle': 50%
|
||||||
|
),
|
||||||
|
$uni-radius
|
||||||
|
);
|
||||||
|
// 字体家族
|
||||||
|
$body-font-family: 'Roboto', sans-serif !default;
|
||||||
|
// 文本
|
||||||
|
$heading-font-family: $body-font-family !default;
|
||||||
|
$uni-headings: () !default;
|
||||||
|
$letterSpacing: -0.01562em;
|
||||||
|
$uni-headings: map-deep-merge(
|
||||||
|
(
|
||||||
|
'h1': (
|
||||||
|
size: 32px,
|
||||||
|
weight: 300,
|
||||||
|
line-height: 50px,
|
||||||
|
// letter-spacing:-0.01562em
|
||||||
|
),
|
||||||
|
'h2': (
|
||||||
|
size: 28px,
|
||||||
|
weight: 300,
|
||||||
|
line-height: 40px,
|
||||||
|
// letter-spacing: -0.00833em
|
||||||
|
),
|
||||||
|
'h3': (
|
||||||
|
size: 24px,
|
||||||
|
weight: 400,
|
||||||
|
line-height: 32px,
|
||||||
|
// letter-spacing: normal
|
||||||
|
),
|
||||||
|
'h4': (
|
||||||
|
size: 20px,
|
||||||
|
weight: 400,
|
||||||
|
line-height: 30px,
|
||||||
|
// letter-spacing: 0.00735em
|
||||||
|
),
|
||||||
|
'h5': (
|
||||||
|
size: 16px,
|
||||||
|
weight: 400,
|
||||||
|
line-height: 24px,
|
||||||
|
// letter-spacing: normal
|
||||||
|
),
|
||||||
|
'h6': (
|
||||||
|
size: 14px,
|
||||||
|
weight: 500,
|
||||||
|
line-height: 18px,
|
||||||
|
// letter-spacing: 0.0125em
|
||||||
|
),
|
||||||
|
'subtitle': (
|
||||||
|
size: 12px,
|
||||||
|
weight: 400,
|
||||||
|
line-height: 20px,
|
||||||
|
// letter-spacing: 0.00937em
|
||||||
|
),
|
||||||
|
'body': (
|
||||||
|
font-size: 14px,
|
||||||
|
font-weight: 400,
|
||||||
|
line-height: 22px,
|
||||||
|
// letter-spacing: 0.03125em
|
||||||
|
),
|
||||||
|
'caption': (
|
||||||
|
'size': 12px,
|
||||||
|
'weight': 400,
|
||||||
|
'line-height': 20px,
|
||||||
|
// 'letter-spacing': 0.03333em,
|
||||||
|
// 'text-transform': false
|
||||||
|
)
|
||||||
|
),
|
||||||
|
$uni-headings
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 主色
|
||||||
|
$uni-primary: #2979ff !default;
|
||||||
|
$uni-primary-disable:lighten($uni-primary,20%) !default;
|
||||||
|
$uni-primary-light: lighten($uni-primary,25%) !default;
|
||||||
|
|
||||||
|
// 辅助色
|
||||||
|
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
|
||||||
|
$uni-success: #18bc37 !default;
|
||||||
|
$uni-success-disable:lighten($uni-success,20%) !default;
|
||||||
|
$uni-success-light: lighten($uni-success,25%) !default;
|
||||||
|
|
||||||
|
$uni-warning: #f3a73f !default;
|
||||||
|
$uni-warning-disable:lighten($uni-warning,20%) !default;
|
||||||
|
$uni-warning-light: lighten($uni-warning,25%) !default;
|
||||||
|
|
||||||
|
$uni-error: #e43d33 !default;
|
||||||
|
$uni-error-disable:lighten($uni-error,20%) !default;
|
||||||
|
$uni-error-light: lighten($uni-error,25%) !default;
|
||||||
|
|
||||||
|
$uni-info: #8f939c !default;
|
||||||
|
$uni-info-disable:lighten($uni-info,20%) !default;
|
||||||
|
$uni-info-light: lighten($uni-info,25%) !default;
|
||||||
|
|
||||||
|
// 中性色
|
||||||
|
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
|
||||||
|
$uni-main-color: #3a3a3a !default; // 主要文字
|
||||||
|
$uni-base-color: #6a6a6a !default; // 常规文字
|
||||||
|
$uni-secondary-color: #909399 !default; // 次要文字
|
||||||
|
$uni-extra-color: #c7c7c7 !default; // 辅助说明
|
||||||
|
|
||||||
|
// 边框颜色
|
||||||
|
$uni-border-1: #F0F0F0 !default;
|
||||||
|
$uni-border-2: #EDEDED !default;
|
||||||
|
$uni-border-3: #DCDCDC !default;
|
||||||
|
$uni-border-4: #B9B9B9 !default;
|
||||||
|
|
||||||
|
// 常规色
|
||||||
|
$uni-black: #000000 !default;
|
||||||
|
$uni-white: #ffffff !default;
|
||||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
|
||||||
|
|
||||||
|
// 背景色
|
||||||
|
$uni-bg-color: #f7f7f7 !default;
|
||||||
|
|
||||||
|
/* 水平间距 */
|
||||||
|
$uni-spacing-sm: 8px !default;
|
||||||
|
$uni-spacing-base: 15px !default;
|
||||||
|
$uni-spacing-lg: 30px !default;
|
||||||
|
|
||||||
|
// 阴影
|
||||||
|
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
|
||||||
|
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
|
||||||
|
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
|
||||||
|
|
||||||
|
// 蒙版
|
||||||
|
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
|
|
@ -0,0 +1,19 @@
|
||||||
|
// 合并 map
|
||||||
|
@function map-deep-merge($parent-map, $child-map){
|
||||||
|
$result: $parent-map;
|
||||||
|
@each $key, $child in $child-map {
|
||||||
|
$parent-has-key: map-has-key($result, $key);
|
||||||
|
$parent-value: map-get($result, $key);
|
||||||
|
$parent-type: type-of($parent-value);
|
||||||
|
$child-type: type-of($child);
|
||||||
|
$parent-is-map: $parent-type == map;
|
||||||
|
$child-is-map: $child-type == map;
|
||||||
|
|
||||||
|
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
|
||||||
|
$result: map-merge($result, ( $key: $child ));
|
||||||
|
}@else {
|
||||||
|
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@return $result;
|
||||||
|
};
|
|
@ -0,0 +1,31 @@
|
||||||
|
// 间距基础倍数
|
||||||
|
$uni-space-root: 2;
|
||||||
|
// 边框半径默认值
|
||||||
|
$uni-radius-root:5px;
|
||||||
|
// 主色
|
||||||
|
$uni-primary: #2979ff;
|
||||||
|
// 辅助色
|
||||||
|
$uni-success: #4cd964;
|
||||||
|
// 警告色
|
||||||
|
$uni-warning: #f0ad4e;
|
||||||
|
// 错误色
|
||||||
|
$uni-error: #dd524d;
|
||||||
|
// 描述色
|
||||||
|
$uni-info: #909399;
|
||||||
|
// 中性色
|
||||||
|
$uni-main-color: #303133;
|
||||||
|
$uni-base-color: #606266;
|
||||||
|
$uni-secondary-color: #909399;
|
||||||
|
$uni-extra-color: #C0C4CC;
|
||||||
|
// 背景色
|
||||||
|
$uni-bg-color: #f5f5f5;
|
||||||
|
// 边框颜色
|
||||||
|
$uni-border-1: #DCDFE6;
|
||||||
|
$uni-border-2: #E4E7ED;
|
||||||
|
$uni-border-3: #EBEEF5;
|
||||||
|
$uni-border-4: #F2F6FC;
|
||||||
|
|
||||||
|
// 常规色
|
||||||
|
$uni-black: #000000;
|
||||||
|
$uni-white: #ffffff;
|
||||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0);
|
|
@ -0,0 +1,62 @@
|
||||||
|
@import './styles/setting/_variables.scss';
|
||||||
|
// 间距基础倍数
|
||||||
|
$uni-space-root: 2;
|
||||||
|
// 边框半径默认值
|
||||||
|
$uni-radius-root:5px;
|
||||||
|
|
||||||
|
// 主色
|
||||||
|
$uni-primary: #2979ff;
|
||||||
|
$uni-primary-disable:mix(#fff,$uni-primary,50%);
|
||||||
|
$uni-primary-light: mix(#fff,$uni-primary,80%);
|
||||||
|
|
||||||
|
// 辅助色
|
||||||
|
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
|
||||||
|
$uni-success: #18bc37;
|
||||||
|
$uni-success-disable:mix(#fff,$uni-success,50%);
|
||||||
|
$uni-success-light: mix(#fff,$uni-success,80%);
|
||||||
|
|
||||||
|
$uni-warning: #f3a73f;
|
||||||
|
$uni-warning-disable:mix(#fff,$uni-warning,50%);
|
||||||
|
$uni-warning-light: mix(#fff,$uni-warning,80%);
|
||||||
|
|
||||||
|
$uni-error: #e43d33;
|
||||||
|
$uni-error-disable:mix(#fff,$uni-error,50%);
|
||||||
|
$uni-error-light: mix(#fff,$uni-error,80%);
|
||||||
|
|
||||||
|
$uni-info: #8f939c;
|
||||||
|
$uni-info-disable:mix(#fff,$uni-info,50%);
|
||||||
|
$uni-info-light: mix(#fff,$uni-info,80%);
|
||||||
|
|
||||||
|
// 中性色
|
||||||
|
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
|
||||||
|
$uni-main-color: #3a3a3a; // 主要文字
|
||||||
|
$uni-base-color: #6a6a6a; // 常规文字
|
||||||
|
$uni-secondary-color: #909399; // 次要文字
|
||||||
|
$uni-extra-color: #c7c7c7; // 辅助说明
|
||||||
|
|
||||||
|
// 边框颜色
|
||||||
|
$uni-border-1: #F0F0F0;
|
||||||
|
$uni-border-2: #EDEDED;
|
||||||
|
$uni-border-3: #DCDCDC;
|
||||||
|
$uni-border-4: #B9B9B9;
|
||||||
|
|
||||||
|
// 常规色
|
||||||
|
$uni-black: #000000;
|
||||||
|
$uni-white: #ffffff;
|
||||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0);
|
||||||
|
|
||||||
|
// 背景色
|
||||||
|
$uni-bg-color: #f7f7f7;
|
||||||
|
|
||||||
|
/* 水平间距 */
|
||||||
|
$uni-spacing-sm: 8px;
|
||||||
|
$uni-spacing-base: 15px;
|
||||||
|
$uni-spacing-lg: 30px;
|
||||||
|
|
||||||
|
// 阴影
|
||||||
|
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
|
||||||
|
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
|
||||||
|
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
|
||||||
|
|
||||||
|
// 蒙版
|
||||||
|
$uni-mask: rgba($color: #000000, $alpha: 0.4);
|
|
@ -0,0 +1,22 @@
|
||||||
|
## 1.3.2(2023-05-04)
|
||||||
|
- 修复 NVUE 平台报错的问题
|
||||||
|
## 1.3.1(2021-11-23)
|
||||||
|
- 修复 init 方法初始化问题
|
||||||
|
## 1.3.0(2021-11-19)
|
||||||
|
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition)
|
||||||
|
## 1.2.1(2021-09-27)
|
||||||
|
- 修复 init 方法不生效的 Bug
|
||||||
|
## 1.2.0(2021-07-30)
|
||||||
|
- 组件兼容 vue3,如何创建 vue3 项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.1.1(2021-05-12)
|
||||||
|
- 新增 示例地址
|
||||||
|
- 修复 示例项目缺少组件的 Bug
|
||||||
|
## 1.1.0(2021-04-22)
|
||||||
|
- 新增 通过方法自定义动画
|
||||||
|
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
|
||||||
|
- 优化 动画触发逻辑,使动画更流畅
|
||||||
|
- 优化 支持单独的动画类型
|
||||||
|
- 优化 文档示例
|
||||||
|
## 1.0.2(2021-02-05)
|
||||||
|
- 调整为 uni_modules 目录规范
|
|
@ -0,0 +1,131 @@
|
||||||
|
// const defaultOption = {
|
||||||
|
// duration: 300,
|
||||||
|
// timingFunction: 'linear',
|
||||||
|
// delay: 0,
|
||||||
|
// transformOrigin: '50% 50% 0'
|
||||||
|
// }
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const nvueAnimation = uni.requireNativePlugin('animation')
|
||||||
|
// #endif
|
||||||
|
class MPAnimation {
|
||||||
|
constructor(options, _this) {
|
||||||
|
this.options = options
|
||||||
|
// 在iOS10+QQ小程序平台下,传给原生的对象一定是个普通对象而不是Proxy对象,否则会报parameter should be Object instead of ProxyObject的错误
|
||||||
|
this.animation = uni.createAnimation({
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
this.currentStepAnimates = {}
|
||||||
|
this.next = 0
|
||||||
|
this.$ = _this
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
_nvuePushAnimates(type, args) {
|
||||||
|
let aniObj = this.currentStepAnimates[this.next]
|
||||||
|
let styles = {}
|
||||||
|
if (!aniObj) {
|
||||||
|
styles = {
|
||||||
|
styles: {},
|
||||||
|
config: {}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
styles = aniObj
|
||||||
|
}
|
||||||
|
if (animateTypes1.includes(type)) {
|
||||||
|
if (!styles.styles.transform) {
|
||||||
|
styles.styles.transform = ''
|
||||||
|
}
|
||||||
|
let unit = ''
|
||||||
|
if(type === 'rotate'){
|
||||||
|
unit = 'deg'
|
||||||
|
}
|
||||||
|
styles.styles.transform += `${type}(${args+unit}) `
|
||||||
|
} else {
|
||||||
|
styles.styles[type] = `${args}`
|
||||||
|
}
|
||||||
|
this.currentStepAnimates[this.next] = styles
|
||||||
|
}
|
||||||
|
_animateRun(styles = {}, config = {}) {
|
||||||
|
let ref = this.$.$refs['ani'].ref
|
||||||
|
if (!ref) return
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
nvueAnimation.transition(ref, {
|
||||||
|
styles,
|
||||||
|
...config
|
||||||
|
}, res => {
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
_nvueNextAnimate(animates, step = 0, fn) {
|
||||||
|
let obj = animates[step]
|
||||||
|
if (obj) {
|
||||||
|
let {
|
||||||
|
styles,
|
||||||
|
config
|
||||||
|
} = obj
|
||||||
|
this._animateRun(styles, config).then(() => {
|
||||||
|
step += 1
|
||||||
|
this._nvueNextAnimate(animates, step, fn)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.currentStepAnimates = {}
|
||||||
|
typeof fn === 'function' && fn()
|
||||||
|
this.isEnd = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
step(config = {}) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.animation.step(config)
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
|
||||||
|
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
|
||||||
|
this.next++
|
||||||
|
// #endif
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
run(fn) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.$.animationData = this.animation.export()
|
||||||
|
this.$.timer = setTimeout(() => {
|
||||||
|
typeof fn === 'function' && fn()
|
||||||
|
}, this.$.durationTime)
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.isEnd = false
|
||||||
|
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
|
||||||
|
if(!ref) return
|
||||||
|
this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
|
||||||
|
this.next = 0
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
|
||||||
|
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
|
||||||
|
'translateZ'
|
||||||
|
]
|
||||||
|
const animateTypes2 = ['opacity', 'backgroundColor']
|
||||||
|
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
|
||||||
|
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
|
||||||
|
MPAnimation.prototype[type] = function(...args) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.animation[type](...args)
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this._nvuePushAnimates(type, args)
|
||||||
|
// #endif
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export function createAnimation(option, _this) {
|
||||||
|
if(!_this) return
|
||||||
|
clearTimeout(_this.timer)
|
||||||
|
return new MPAnimation(option, _this)
|
||||||
|
}
|
|
@ -0,0 +1,286 @@
|
||||||
|
<template>
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
|
||||||
|
<!-- #endif -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { createAnimation } from './createAnimation'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Transition 过渡动画
|
||||||
|
* @description 简单过渡动画组件
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
|
||||||
|
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
|
||||||
|
* @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
|
||||||
|
* @value fade 渐隐渐出过渡
|
||||||
|
* @value slide-top 由上至下过渡
|
||||||
|
* @value slide-right 由右至左过渡
|
||||||
|
* @value slide-bottom 由下至上过渡
|
||||||
|
* @value slide-left 由左至右过渡
|
||||||
|
* @value zoom-in 由小到大过渡
|
||||||
|
* @value zoom-out 由大到小过渡
|
||||||
|
* @property {Number} duration 过渡动画持续时间
|
||||||
|
* @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red`
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uniTransition',
|
||||||
|
emits:['click','change'],
|
||||||
|
props: {
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
modeClass: {
|
||||||
|
type: [Array, String],
|
||||||
|
default() {
|
||||||
|
return 'fade'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
duration: {
|
||||||
|
type: Number,
|
||||||
|
default: 300
|
||||||
|
},
|
||||||
|
styles: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
customClass:{
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
onceRender:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShow: false,
|
||||||
|
transform: '',
|
||||||
|
opacity: 1,
|
||||||
|
animationData: {},
|
||||||
|
durationTime: 300,
|
||||||
|
config: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
show: {
|
||||||
|
handler(newVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.open()
|
||||||
|
} else {
|
||||||
|
// 避免上来就执行 close,导致动画错乱
|
||||||
|
if (this.isShow) {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 生成样式数据
|
||||||
|
stylesObject() {
|
||||||
|
let styles = {
|
||||||
|
...this.styles,
|
||||||
|
'transition-duration': this.duration / 1000 + 's'
|
||||||
|
}
|
||||||
|
let transform = ''
|
||||||
|
for (let i in styles) {
|
||||||
|
let line = this.toLine(i)
|
||||||
|
transform += line + ':' + styles[i] + ';'
|
||||||
|
}
|
||||||
|
return transform
|
||||||
|
},
|
||||||
|
// 初始化动画条件
|
||||||
|
transformStyles() {
|
||||||
|
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 动画默认配置
|
||||||
|
this.config = {
|
||||||
|
duration: this.duration,
|
||||||
|
timingFunction: 'ease',
|
||||||
|
transformOrigin: '50% 50%',
|
||||||
|
delay: 0
|
||||||
|
}
|
||||||
|
this.durationTime = this.duration
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* ref 触发 初始化动画
|
||||||
|
*/
|
||||||
|
init(obj = {}) {
|
||||||
|
if (obj.duration) {
|
||||||
|
this.durationTime = obj.duration
|
||||||
|
}
|
||||||
|
this.animation = createAnimation(Object.assign(this.config, obj),this)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击组件触发回调
|
||||||
|
*/
|
||||||
|
onClick() {
|
||||||
|
this.$emit('click', {
|
||||||
|
detail: this.isShow
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* ref 触发 动画分组
|
||||||
|
* @param {Object} obj
|
||||||
|
*/
|
||||||
|
step(obj, config = {}) {
|
||||||
|
if (!this.animation) return
|
||||||
|
for (let i in obj) {
|
||||||
|
try {
|
||||||
|
if(typeof obj[i] === 'object'){
|
||||||
|
this.animation[i](...obj[i])
|
||||||
|
}else{
|
||||||
|
this.animation[i](obj[i])
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`方法 ${i} 不存在`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.animation.step(config)
|
||||||
|
return this
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* ref 触发 执行动画
|
||||||
|
*/
|
||||||
|
run(fn) {
|
||||||
|
if (!this.animation) return
|
||||||
|
this.animation.run(fn)
|
||||||
|
},
|
||||||
|
// 开始过度动画
|
||||||
|
open() {
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
this.transform = ''
|
||||||
|
this.isShow = true
|
||||||
|
let { opacity, transform } = this.styleInit(false)
|
||||||
|
if (typeof opacity !== 'undefined') {
|
||||||
|
this.opacity = opacity
|
||||||
|
}
|
||||||
|
this.transform = transform
|
||||||
|
// 确保动态样式已经生效后,执行动画,如果不加 nextTick ,会导致 wx 动画执行异常
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// TODO 定时器保证动画完全执行,目前有些问题,后面会取消定时器
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
this.animation = createAnimation(this.config, this)
|
||||||
|
this.tranfromInit(false).step()
|
||||||
|
this.animation.run()
|
||||||
|
this.$emit('change', {
|
||||||
|
detail: this.isShow
|
||||||
|
})
|
||||||
|
}, 20)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 关闭过度动画
|
||||||
|
close(type) {
|
||||||
|
if (!this.animation) return
|
||||||
|
this.tranfromInit(true)
|
||||||
|
.step()
|
||||||
|
.run(() => {
|
||||||
|
this.isShow = false
|
||||||
|
this.animationData = null
|
||||||
|
this.animation = null
|
||||||
|
let { opacity, transform } = this.styleInit(false)
|
||||||
|
this.opacity = opacity || 1
|
||||||
|
this.transform = transform
|
||||||
|
this.$emit('change', {
|
||||||
|
detail: this.isShow
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 处理动画开始前的默认样式
|
||||||
|
styleInit(type) {
|
||||||
|
let styles = {
|
||||||
|
transform: ''
|
||||||
|
}
|
||||||
|
let buildStyle = (type, mode) => {
|
||||||
|
if (mode === 'fade') {
|
||||||
|
styles.opacity = this.animationType(type)[mode]
|
||||||
|
} else {
|
||||||
|
styles.transform += this.animationType(type)[mode] + ' '
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (typeof this.modeClass === 'string') {
|
||||||
|
buildStyle(type, this.modeClass)
|
||||||
|
} else {
|
||||||
|
this.modeClass.forEach(mode => {
|
||||||
|
buildStyle(type, mode)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return styles
|
||||||
|
},
|
||||||
|
// 处理内置组合动画
|
||||||
|
tranfromInit(type) {
|
||||||
|
let buildTranfrom = (type, mode) => {
|
||||||
|
let aniNum = null
|
||||||
|
if (mode === 'fade') {
|
||||||
|
aniNum = type ? 0 : 1
|
||||||
|
} else {
|
||||||
|
aniNum = type ? '-100%' : '0'
|
||||||
|
if (mode === 'zoom-in') {
|
||||||
|
aniNum = type ? 0.8 : 1
|
||||||
|
}
|
||||||
|
if (mode === 'zoom-out') {
|
||||||
|
aniNum = type ? 1.2 : 1
|
||||||
|
}
|
||||||
|
if (mode === 'slide-right') {
|
||||||
|
aniNum = type ? '100%' : '0'
|
||||||
|
}
|
||||||
|
if (mode === 'slide-bottom') {
|
||||||
|
aniNum = type ? '100%' : '0'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.animation[this.animationMode()[mode]](aniNum)
|
||||||
|
}
|
||||||
|
if (typeof this.modeClass === 'string') {
|
||||||
|
buildTranfrom(type, this.modeClass)
|
||||||
|
} else {
|
||||||
|
this.modeClass.forEach(mode => {
|
||||||
|
buildTranfrom(type, mode)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.animation
|
||||||
|
},
|
||||||
|
animationType(type) {
|
||||||
|
return {
|
||||||
|
fade: type ? 1 : 0,
|
||||||
|
'slide-top': `translateY(${type ? '0' : '-100%'})`,
|
||||||
|
'slide-right': `translateX(${type ? '0' : '100%'})`,
|
||||||
|
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
|
||||||
|
'slide-left': `translateX(${type ? '0' : '-100%'})`,
|
||||||
|
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
|
||||||
|
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 内置动画类型与实际动画对应字典
|
||||||
|
animationMode() {
|
||||||
|
return {
|
||||||
|
fade: 'opacity',
|
||||||
|
'slide-top': 'translateY',
|
||||||
|
'slide-right': 'translateX',
|
||||||
|
'slide-bottom': 'translateY',
|
||||||
|
'slide-left': 'translateX',
|
||||||
|
'zoom-in': 'scale',
|
||||||
|
'zoom-out': 'scale'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 驼峰转中横线
|
||||||
|
toLine(name) {
|
||||||
|
return name.replace(/([A-Z])/g, '-$1').toLowerCase()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
|
@ -0,0 +1,84 @@
|
||||||
|
{
|
||||||
|
"id": "uni-transition",
|
||||||
|
"displayName": "uni-transition 过渡动画",
|
||||||
|
"version": "1.3.2",
|
||||||
|
"description": "元素的简单过渡动画",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"动画",
|
||||||
|
"过渡",
|
||||||
|
"过渡动画"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"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",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,11 @@
|
||||||
|
|
||||||
|
|
||||||
|
## Transition 过渡动画
|
||||||
|
> **组件名:uni-transition**
|
||||||
|
> 代码块: `uTransition`
|
||||||
|
|
||||||
|
|
||||||
|
元素过渡动画
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition)
|
||||||
|
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
Before Width: | Height: | Size: 5.7 KiB |