6.30 版本提交
This commit is contained in:
尚政杰
1
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/ecStat.min.js
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/ecStat.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
61
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/echarts.min.js
vendored
Normal file
61
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
129
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/index.html
vendored
Normal file
129
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/index.html
vendored
Normal file
@@ -0,0 +1,129 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
html,
|
||||
body,
|
||||
.canvas {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="canvas" id="limeChart"></div>
|
||||
<script type="text/javascript" src="./uni.webview.1.5.3.js"></script>
|
||||
<script type="text/javascript" src="./echarts.min.js"></script>
|
||||
<script type="text/javascript" src="./ecStat.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@latest/dist/echarts-liquidfill.min.js"></script> -->
|
||||
<script>
|
||||
let chart = null;
|
||||
let cache = [];
|
||||
console.log = function(...agrs) {
|
||||
postMessage(agrs)
|
||||
}
|
||||
function emit(event, data) {
|
||||
let dataStr = JSON.stringify(data, stringify)
|
||||
postMessage({
|
||||
event,
|
||||
data: dataStr
|
||||
})
|
||||
cache = []
|
||||
}
|
||||
function postMessage(data) {
|
||||
uni.postMessage({
|
||||
data
|
||||
});
|
||||
}
|
||||
function stringify(key, value) {
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
if (cache.indexOf(value) !== -1) {
|
||||
return;
|
||||
}
|
||||
cache.push(value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
function parse(name, callback, options) {
|
||||
const optionNameReg = /[\w]+\.setOption\(([\w]+\.)?([\w]+)\)/
|
||||
if (optionNameReg.test(callback)) {
|
||||
const optionNames = callback.match(optionNameReg)
|
||||
if(optionNames[1]) {
|
||||
const _this = optionNames[1].split('.')[0]
|
||||
window[_this] = {}
|
||||
window[_this][optionNames[2]] = options
|
||||
return optionNames[2]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
function init(callback, options, opts = {}, theme = null) {
|
||||
if(!chart) {
|
||||
chart = echarts.init(document.getElementById('limeChart'), theme, opts)
|
||||
if(options) {
|
||||
chart.setOption(options)
|
||||
}
|
||||
// const name = parse('a', callback, options)
|
||||
// console.log('options::', callback)
|
||||
// if(name) this[name] = options
|
||||
// eval(`a = ${callback};`)
|
||||
// if(a) {a(chart)}
|
||||
}
|
||||
}
|
||||
|
||||
function setChart(callback, options) {
|
||||
if(!callback) return
|
||||
if(chart && callback && options) {
|
||||
var r = null
|
||||
const name = parse('r', callback, options)
|
||||
if(name) this[name] = options
|
||||
eval(`r = ${callback};`)
|
||||
if(r) {r(chart)}
|
||||
}
|
||||
}
|
||||
function setOption(data) {
|
||||
if (chart) chart.setOption(data[0], data[1])
|
||||
}
|
||||
function showLoading(data) {
|
||||
if (chart) chart.showLoading(data[0], data[1])
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
if (chart) chart.hideLoading()
|
||||
}
|
||||
|
||||
function clear() {
|
||||
if (chart) chart.clear()
|
||||
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
if (chart) chart.dispose()
|
||||
}
|
||||
function resize(size) {
|
||||
if (chart) chart.resize(size)
|
||||
}
|
||||
|
||||
function canvasToTempFilePath(opt = {}) {
|
||||
if (chart) {
|
||||
const src = chart.getDataURL(opt)
|
||||
postMessage({
|
||||
file: true,
|
||||
data: src
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
177
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/nvue.html
vendored
Normal file
177
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/nvue.html
vendored
Normal file
@@ -0,0 +1,177 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
html,
|
||||
body,
|
||||
.canvas {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="canvas" id="limeChart"></div>
|
||||
<script type="text/javascript" src="./uni.webview.1.5.3.js"></script>
|
||||
<script type="text/javascript" src="./echarts.min.js"></script>
|
||||
<script type="text/javascript" src="./ecStat.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@latest/dist/echarts-liquidfill.min.js"></script> -->
|
||||
<script>
|
||||
let chart = null;
|
||||
let cache = [];
|
||||
console.log = function(...agrs) {
|
||||
postMessage(agrs)
|
||||
}
|
||||
|
||||
function emit(event, data) {
|
||||
let dataStr = JSON.stringify(data, stringify)
|
||||
postMessage({
|
||||
event,
|
||||
data: dataStr
|
||||
})
|
||||
cache = []
|
||||
}
|
||||
|
||||
function postMessage(data) {
|
||||
uni.postMessage({
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
function stringify(key, value) {
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
if (cache.indexOf(value) !== -1) {
|
||||
return;
|
||||
}
|
||||
cache.push(value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function parse(name, callback, options) {
|
||||
const optionNameReg = /[\w]+\.setOption\(([\w]+\.)?([\w]+)\)/
|
||||
if (optionNameReg.test(callback)) {
|
||||
const optionNames = callback.match(optionNameReg)
|
||||
if (optionNames[1]) {
|
||||
const _this = optionNames[1].split('.')[0]
|
||||
window[_this] = {}
|
||||
window[_this][optionNames[2]] = options
|
||||
return optionNames[2]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function init(callback, options, opts = {}, theme = null) {
|
||||
if (!chart) {
|
||||
chart = echarts.init(document.getElementById('limeChart'), theme, opts)
|
||||
if (options) {
|
||||
chart.setOption(options)
|
||||
}
|
||||
// const name = parse('a', callback, options)
|
||||
// console.log('options::', callback)
|
||||
// if(name) this[name] = options
|
||||
// eval(`a = ${callback};`)
|
||||
// if(a) {a(chart)}
|
||||
}
|
||||
}
|
||||
|
||||
function setChart(callback, options) {
|
||||
if (!callback) return
|
||||
if (chart && callback && options) {
|
||||
var r = null
|
||||
const name = parse('r', callback, options)
|
||||
if (name) this[name] = options
|
||||
eval(`r = ${callback};`)
|
||||
if (r) {
|
||||
r(chart)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setOption(data) {
|
||||
if (chart) chart.setOption(data[0], data[1])
|
||||
}
|
||||
|
||||
function showLoading(data) {
|
||||
if (chart) chart.showLoading(data[0], data[1])
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
if (chart) chart.hideLoading()
|
||||
}
|
||||
|
||||
function clear() {
|
||||
if (chart) chart.clear()
|
||||
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
if (chart) chart.dispose()
|
||||
}
|
||||
|
||||
function resize(size) {
|
||||
if (chart) chart.resize(size)
|
||||
}
|
||||
|
||||
function canvasToTempFilePath(opt = {}) {
|
||||
if (chart) {
|
||||
const src = chart.getDataURL(opt)
|
||||
postMessage({
|
||||
file: true,
|
||||
data: src
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function on(data) {
|
||||
if (chart && data.length > 0) {
|
||||
const [type, query] = data
|
||||
const useQuery = query && typeof query != 'function'
|
||||
const key = `${type}${useQuery ? JSON.stringify(query): '' }`
|
||||
if (query) {
|
||||
chart.on(type, query, (options) => {
|
||||
const obj = {}
|
||||
Object.keys(options).forEach(key => {
|
||||
if (key != 'event') {
|
||||
obj[key] = options[key]
|
||||
}
|
||||
})
|
||||
emit(`@${key}`, {
|
||||
event: key,
|
||||
options: obj
|
||||
})
|
||||
})
|
||||
} else {
|
||||
chart.on(type, (options) => {
|
||||
|
||||
const obj = {}
|
||||
Object.keys(options).forEach(key => {
|
||||
if (key != 'event') {
|
||||
obj[key] = options[key]
|
||||
}
|
||||
|
||||
})
|
||||
emit(`@${key}`, {
|
||||
event: key,
|
||||
options: obj
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/uni.webview.1.5.3.js
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/uni.webview.1.5.3.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/uni.webview.1.5.5.js
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/uni.webview.1.5.5.js
vendored
Normal file
File diff suppressed because one or more lines are too long
184
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/uvue.html
vendored
Normal file
184
unpackage/dist/dev/mp-weixin/uni_modules/lime-echart/static/uvue.html
vendored
Normal file
@@ -0,0 +1,184 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
html,
|
||||
body {
|
||||
overflow: hidden;
|
||||
/* 隐藏滚动条 */
|
||||
overscroll-behavior: none;
|
||||
/* 禁止橡皮筋效果 */
|
||||
}
|
||||
html,
|
||||
body,
|
||||
.canvas {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="canvas" id="limeChart"></div>
|
||||
<script type="text/javascript" src="./uni.webview.1.5.5.js"></script>
|
||||
<script type="text/javascript" src="./echarts.min.js"></script>
|
||||
<script type="text/javascript" src="./ecStat.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@latest/dist/echarts-liquidfill.min.js"></script> -->
|
||||
<script>
|
||||
let chart = null;
|
||||
let cache = [];
|
||||
console.log = function() {
|
||||
emit('log', {
|
||||
log: arguments,
|
||||
})
|
||||
}
|
||||
|
||||
function emit(event, data) {
|
||||
postMessage({
|
||||
event,
|
||||
data
|
||||
})
|
||||
cache = []
|
||||
}
|
||||
|
||||
function postMessage(data) {
|
||||
uni.webView.postMessage({
|
||||
data
|
||||
})
|
||||
// window.__uniapp_x_.postMessage(JSON.stringify(data))
|
||||
};
|
||||
|
||||
function stringify(key, value) {
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
if (cache.indexOf(value) !== -1) {
|
||||
return;
|
||||
}
|
||||
cache.push(value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function parse(name, callback, options) {
|
||||
const optionNameReg = /[\w]+\.setOption\(([\w]+\.)?([\w]+)\)/
|
||||
if (optionNameReg.test(callback)) {
|
||||
const optionNames = callback.match(optionNameReg)
|
||||
if (optionNames[1]) {
|
||||
const _this = optionNames[1].split('.')[0]
|
||||
window[_this] = {}
|
||||
window[_this][optionNames[2]] = options
|
||||
return optionNames[2]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function init(callback, options, opts, theme) {
|
||||
if (!chart) {
|
||||
chart = echarts.init(document.getElementById('limeChart'), theme, opts)
|
||||
|
||||
if (options) {
|
||||
chart.setOption(options)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function on(data) {
|
||||
if (chart && data.length > 0) {
|
||||
const [type, query] = data
|
||||
const key = `${type}${JSON.stringify(query||'')}`
|
||||
if (query) {
|
||||
chart.on(type, query, function(options) {
|
||||
var obj = {};
|
||||
Object.keys(options).forEach(function(key) {
|
||||
if (key != 'event') {
|
||||
obj[key] = options[key];
|
||||
}
|
||||
});
|
||||
emit(key, {
|
||||
event: key,
|
||||
options: obj,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
chart.on(type, function(options) {
|
||||
var obj = {};
|
||||
Object.keys(options).forEach(function(key) {
|
||||
if (key != 'event') {
|
||||
obj[key] = options[key];
|
||||
}
|
||||
});
|
||||
emit(key, {
|
||||
event: key,
|
||||
options: obj,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function setChart(callback, options) {
|
||||
if (!callback) return
|
||||
if (chart && callback && options) {
|
||||
var r = null
|
||||
const name = parse('r', callback, options)
|
||||
if (name) this[name] = options
|
||||
eval(`r = ${callback};`)
|
||||
if (r) {
|
||||
r(chart)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setOption(data) {
|
||||
if (chart) chart.setOption(data[0], data[1])
|
||||
}
|
||||
|
||||
function showLoading(data) {
|
||||
if (chart) chart.showLoading(data[0], data[1])
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
if (chart) chart.hideLoading()
|
||||
}
|
||||
|
||||
function clear() {
|
||||
if (chart) chart.clear()
|
||||
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
if (chart) chart.dispose()
|
||||
}
|
||||
|
||||
function resize(size) {
|
||||
if (chart) chart.resize(size)
|
||||
}
|
||||
|
||||
function canvasToTempFilePath(opt) {
|
||||
if (chart) {
|
||||
delete opt.success
|
||||
const src = chart.getDataURL(opt)
|
||||
postMessage({
|
||||
// event: 'file',
|
||||
file: src
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('touchmove', () => {
|
||||
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
397
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.js
vendored
Normal file
397
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.js
vendored
Normal file
@@ -0,0 +1,397 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "uniPopup",
|
||||
components: {},
|
||||
emits: ["change", "maskClick"],
|
||||
props: {
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
||||
// message: 消息提示 ; dialog : 对话框
|
||||
type: {
|
||||
type: String,
|
||||
default: "center"
|
||||
},
|
||||
// maskClick
|
||||
isMaskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
// TODO 2 个版本后废弃属性 ，使用 isMaskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: "none"
|
||||
},
|
||||
safeArea: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskBackgroundColor: {
|
||||
type: String,
|
||||
default: "rgba(0, 0, 0, 0.4)"
|
||||
},
|
||||
borderRadius: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
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
|
||||
},
|
||||
isMaskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val;
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// H5 下禁止底部滚动
|
||||
showPopup(show) {
|
||||
}
|
||||
},
|
||||
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: {
|
||||
backgroundColor: "transparent",
|
||||
borderRadius: this.borderRadius || "0",
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
maskShow: true,
|
||||
mkclick: true,
|
||||
popupstyle: "top"
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getStyles() {
|
||||
let res = { backgroundColor: this.bg };
|
||||
if (this.borderRadius || "0") {
|
||||
res = Object.assign(res, { borderRadius: this.borderRadius });
|
||||
}
|
||||
return res;
|
||||
},
|
||||
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,
|
||||
safeArea,
|
||||
screenHeight,
|
||||
safeAreaInsets
|
||||
} = common_vendor.index.getWindowInfo();
|
||||
this.popupWidth = windowWidth;
|
||||
this.popupHeight = windowHeight + (windowTop || 0);
|
||||
if (safeArea && this.safeArea) {
|
||||
this.safeAreaInsets = screenHeight - safeArea.bottom;
|
||||
} else {
|
||||
this.safeAreaInsets = 0;
|
||||
}
|
||||
};
|
||||
fixSize();
|
||||
},
|
||||
// TODO vue3
|
||||
unmounted() {
|
||||
this.setH5Visible();
|
||||
},
|
||||
activated() {
|
||||
this.setH5Visible(!this.showPopup);
|
||||
},
|
||||
deactivated() {
|
||||
this.setH5Visible(true);
|
||||
},
|
||||
created() {
|
||||
if (this.isMaskClick === null && this.maskClick === null) {
|
||||
this.mkclick = true;
|
||||
} else {
|
||||
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick;
|
||||
}
|
||||
if (this.animation) {
|
||||
this.duration = 300;
|
||||
} else {
|
||||
this.duration = 0;
|
||||
}
|
||||
this.messageChild = null;
|
||||
this.clearPropagation = false;
|
||||
this.maskClass.backgroundColor = this.maskBackgroundColor;
|
||||
},
|
||||
methods: {
|
||||
setH5Visible(visible = true) {
|
||||
},
|
||||
/**
|
||||
* 公用方法，不显示遮罩层
|
||||
*/
|
||||
closeMask() {
|
||||
this.maskShow = false;
|
||||
},
|
||||
/**
|
||||
* 公用方法，遮罩层禁止点击
|
||||
*/
|
||||
disableMask() {
|
||||
this.mkclick = false;
|
||||
},
|
||||
// TODO nvue 取消冒泡
|
||||
clear(e) {
|
||||
e.stopPropagation();
|
||||
this.clearPropagation = true;
|
||||
},
|
||||
open(direction) {
|
||||
if (this.showPopup) {
|
||||
return;
|
||||
}
|
||||
let innerType = ["top", "center", "bottom", "left", "right", "message", "dialog", "share"];
|
||||
if (!(direction && innerType.indexOf(direction) !== -1)) {
|
||||
direction = this.type;
|
||||
}
|
||||
if (!this.config[direction]) {
|
||||
common_vendor.index.__f__("error", "at uni_modules/uni-popup/components/uni-popup/uni-popup.vue:310", "缺少类型：", 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.timer = setTimeout(() => {
|
||||
this.showPopup = false;
|
||||
}, 300);
|
||||
},
|
||||
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
|
||||
touchstart() {
|
||||
this.clearPropagation = false;
|
||||
},
|
||||
onTap() {
|
||||
if (this.clearPropagation) {
|
||||
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,
|
||||
borderRadius: this.borderRadius || "0"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
this.$nextTick(() => {
|
||||
this.showPoptrans();
|
||||
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 + "px",
|
||||
backgroundColor: this.bg,
|
||||
borderRadius: this.borderRadius || "0"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPoptrans();
|
||||
},
|
||||
/**
|
||||
* 中间弹出样式处理
|
||||
*/
|
||||
center(type) {
|
||||
this.popupstyle = "center";
|
||||
this.ani = ["fade"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: this.borderRadius || "0"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPoptrans();
|
||||
},
|
||||
left(type) {
|
||||
this.popupstyle = "left";
|
||||
this.ani = ["slide-left"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius: this.borderRadius || "0",
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPoptrans();
|
||||
},
|
||||
right(type) {
|
||||
this.popupstyle = "right";
|
||||
this.ani = ["slide-right"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius: this.borderRadius || "0",
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPoptrans();
|
||||
},
|
||||
showPoptrans() {
|
||||
this.$nextTick(() => {
|
||||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!Array) {
|
||||
const _easycom_uni_transition2 = common_vendor.resolveComponent("uni-transition");
|
||||
_easycom_uni_transition2();
|
||||
}
|
||||
const _easycom_uni_transition = () => "../../../uni-transition/components/uni-transition/uni-transition.js";
|
||||
if (!Math) {
|
||||
_easycom_uni_transition();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $data.showPopup
|
||||
}, $data.showPopup ? common_vendor.e({
|
||||
b: $data.maskShow
|
||||
}, $data.maskShow ? {
|
||||
c: common_vendor.o($options.onTap),
|
||||
d: common_vendor.p({
|
||||
name: "mask",
|
||||
["mode-class"]: "fade",
|
||||
styles: $data.maskClass,
|
||||
duration: $data.duration,
|
||||
show: $data.showTrans
|
||||
})
|
||||
} : {}, {
|
||||
e: common_vendor.s($options.getStyles),
|
||||
f: common_vendor.n($data.popupstyle),
|
||||
g: common_vendor.o((...args) => $options.clear && $options.clear(...args)),
|
||||
h: common_vendor.o($options.onTap),
|
||||
i: common_vendor.p({
|
||||
["mode-class"]: $data.ani,
|
||||
name: "content",
|
||||
styles: $data.transClass,
|
||||
duration: $data.duration,
|
||||
show: $data.showTrans
|
||||
}),
|
||||
j: common_vendor.o((...args) => $options.touchstart && $options.touchstart(...args)),
|
||||
k: common_vendor.n($data.popupstyle),
|
||||
l: common_vendor.n($options.isDesktop ? "fixforpc-z-index" : "")
|
||||
}) : {});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.js.map
|
||||
6
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.json
vendored
Normal file
6
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.json
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"uni-transition": "../../../uni-transition/components/uni-transition/uni-transition"
|
||||
}
|
||||
}
|
||||
1
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.wxml
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.wxml
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<view wx:if="{{a}}" class="{{['uni-popup', k, l]}}"><view bindtouchstart="{{j}}"><uni-transition wx:if="{{b}}" key="1" bindclick="{{c}}" u-i="10ea031a-0" bind:__l="__l" u-p="{{d}}"/><uni-transition wx:if="{{i}}" u-s="{{['d']}}" key="2" bindclick="{{h}}" u-i="10ea031a-1" bind:__l="__l" u-p="{{i}}"><view style="{{e}}" class="{{['uni-popup__wrapper', f]}}" bindtap="{{g}}"><slot/></view></uni-transition></view></view>
|
||||
47
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.wxss
vendored
Normal file
47
unpackage/dist/dev/mp-weixin/uni_modules/uni-popup/components/uni-popup/uni-popup.wxss
vendored
Normal file
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
}
|
||||
.uni-popup.top, .uni-popup.left, .uni-popup.right {
|
||||
top: 0;
|
||||
}
|
||||
.uni-popup .uni-popup__wrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
/* iphonex 等安全区设置，底部安全区适配 */
|
||||
}
|
||||
.uni-popup .uni-popup__wrapper.left, .uni-popup .uni-popup__wrapper.right {
|
||||
padding-top: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.fixforpc-z-index {
|
||||
z-index: 999;
|
||||
}
|
||||
.fixforpc-top {
|
||||
top: 0;
|
||||
}
|
||||
116
unpackage/dist/dev/mp-weixin/uni_modules/uni-transition/components/uni-transition/createAnimation.js
vendored
Normal file
116
unpackage/dist/dev/mp-weixin/uni_modules/uni-transition/components/uni-transition/createAnimation.js
vendored
Normal file
@@ -0,0 +1,116 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
class MPAnimation {
|
||||
constructor(options, _this) {
|
||||
this.options = options;
|
||||
this.animation = common_vendor.index.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 = {}) {
|
||||
this.animation.step(config);
|
||||
return this;
|
||||
}
|
||||
run(fn) {
|
||||
this.$.animationData = this.animation.export();
|
||||
this.$.timer = setTimeout(() => {
|
||||
typeof fn === "function" && fn();
|
||||
}, this.$.durationTime);
|
||||
}
|
||||
}
|
||||
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) {
|
||||
this.animation[type](...args);
|
||||
return this;
|
||||
};
|
||||
});
|
||||
function createAnimation(option, _this) {
|
||||
if (!_this)
|
||||
return;
|
||||
clearTimeout(_this.timer);
|
||||
return new MPAnimation(option, _this);
|
||||
}
|
||||
exports.createAnimation = createAnimation;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uni-transition/components/uni-transition/createAnimation.js.map
|
||||
257
unpackage/dist/dev/mp-weixin/uni_modules/uni-transition/components/uni-transition/uni-transition.js
vendored
Normal file
257
unpackage/dist/dev/mp-weixin/uni_modules/uni-transition/components/uni-transition/uni-transition.js
vendored
Normal file
@@ -0,0 +1,257 @@
|
||||
"use strict";
|
||||
const uni_modules_uniTransition_components_uniTransition_createAnimation = require("./createAnimation.js");
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
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: 0,
|
||||
animationData: {},
|
||||
durationTime: 300,
|
||||
config: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.open();
|
||||
} else {
|
||||
if (this.isShow) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 生成样式数据
|
||||
stylesObject() {
|
||||
let styles = {
|
||||
...this.styles,
|
||||
"transition-duration": this.duration / 1e3 + "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 = uni_modules_uniTransition_components_uniTransition_createAnimation.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 this;
|
||||
Object.keys(obj).forEach((key) => {
|
||||
const value = obj[key];
|
||||
if (typeof this.animation[key] === "function") {
|
||||
Array.isArray(value) ? this.animation[key](...value) : this.animation[key](value);
|
||||
}
|
||||
});
|
||||
this.animation.step(config);
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* ref 触发 执行动画
|
||||
*/
|
||||
run(fn) {
|
||||
if (!this.animation)
|
||||
return;
|
||||
this.animation.run(fn);
|
||||
},
|
||||
// 开始过度动画
|
||||
open() {
|
||||
clearTimeout(this.timer);
|
||||
this.isShow = true;
|
||||
this.transform = this.styleInit(false).transform || "";
|
||||
this.opacity = this.styleInit(false).opacity || 0;
|
||||
this.$nextTick(() => {
|
||||
this.timer = setTimeout(() => {
|
||||
this.animation = uni_modules_uniTransition_components_uniTransition_createAnimation.createAnimation(this.config, this);
|
||||
this.tranfromInit(false).step();
|
||||
this.animation.run(() => {
|
||||
this.transform = "";
|
||||
this.opacity = this.styleInit(false).opacity || 1;
|
||||
this.$emit("change", {
|
||||
detail: this.isShow
|
||||
});
|
||||
});
|
||||
}, 80);
|
||||
});
|
||||
},
|
||||
// 关闭过度动画
|
||||
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: "", opacity: 1 };
|
||||
const buildStyle = (type2, mode) => {
|
||||
const value = this.animationType(type2)[mode];
|
||||
if (mode.startsWith("fade")) {
|
||||
styles.opacity = value;
|
||||
} else {
|
||||
styles.transform += value + " ";
|
||||
}
|
||||
};
|
||||
if (typeof this.modeClass === "string") {
|
||||
buildStyle(type, this.modeClass);
|
||||
} else {
|
||||
this.modeClass.forEach((mode) => buildStyle(type, mode));
|
||||
}
|
||||
return styles;
|
||||
},
|
||||
// 处理内置组合动画
|
||||
tranfromInit(type) {
|
||||
let buildTranfrom = (type2, mode) => {
|
||||
let aniNum = null;
|
||||
if (mode === "fade") {
|
||||
aniNum = type2 ? 0 : 1;
|
||||
} else {
|
||||
aniNum = type2 ? "-100%" : "0";
|
||||
if (mode === "zoom-in") {
|
||||
aniNum = type2 ? 0.8 : 1;
|
||||
}
|
||||
if (mode === "zoom-out") {
|
||||
aniNum = type2 ? 1.2 : 1;
|
||||
}
|
||||
if (mode === "slide-right") {
|
||||
aniNum = type2 ? "100%" : "0";
|
||||
}
|
||||
if (mode === "slide-bottom") {
|
||||
aniNum = type2 ? "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();
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {
|
||||
a: $data.isShow,
|
||||
b: $data.animationData,
|
||||
c: common_vendor.n($props.customClass),
|
||||
d: common_vendor.s($options.transformStyles),
|
||||
e: common_vendor.o((...args) => $options.onClick && $options.onClick(...args))
|
||||
};
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uni-transition/components/uni-transition/uni-transition.js.map
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view hidden="{{!a}}" ref="ani" animation="{{b}}" class="{{c}}" style="{{d}}" bindtap="{{e}}"><slot></slot></view>
|
||||
@@ -0,0 +1,316 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const DIR_CCW = "counterclockwise";
|
||||
const DIR_CW = "clockwise";
|
||||
const generateId = () => {
|
||||
const base = 999999 * Math.random();
|
||||
return Math.round(base) + 1e5;
|
||||
};
|
||||
const _sfc_main = {
|
||||
name: "zui-progress-circle",
|
||||
components: {},
|
||||
props: {
|
||||
size: {
|
||||
type: Number,
|
||||
default: 180
|
||||
},
|
||||
/**
|
||||
* 当前位置
|
||||
*
|
||||
* [0, 1]
|
||||
*/
|
||||
position: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
/**
|
||||
* 环形起止位置
|
||||
*/
|
||||
range: {
|
||||
type: [Array],
|
||||
default: () => [0, 360]
|
||||
},
|
||||
/**
|
||||
* 方向
|
||||
*/
|
||||
direction: {
|
||||
type: String,
|
||||
default: DIR_CW,
|
||||
validator(val) {
|
||||
return [DIR_CCW, DIR_CW].includes(val);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 环形宽度
|
||||
*/
|
||||
ringWidth: {
|
||||
type: Number,
|
||||
default: 8
|
||||
},
|
||||
/**
|
||||
* 端点效果
|
||||
*
|
||||
* round | butt | square
|
||||
*/
|
||||
linecap: {
|
||||
type: String,
|
||||
default: "round"
|
||||
},
|
||||
/**
|
||||
* 纹理贴图，组件支持配置前景和背景2个贴图
|
||||
*
|
||||
* 贴图可以是一个颜色，一个渐变填充，一个 base64 编码的图片。3种贴图可以搭配使用
|
||||
*
|
||||
*/
|
||||
texture: {
|
||||
type: [String, Array],
|
||||
default: () => ["#1BB507", "#E2D8D8"]
|
||||
},
|
||||
pointer: String,
|
||||
pointerOffset: Number,
|
||||
/**
|
||||
* 修复遮盖问题
|
||||
*/
|
||||
fixOverlay: Boolean,
|
||||
debug: Boolean
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
preset() {
|
||||
const preset = {};
|
||||
preset.start = this.range[0];
|
||||
preset.end = this.range[0] > this.range[1] ? this.range[1] + 360 : this.range[1];
|
||||
preset.ringRadius = (this.size - this.ringWidth) / 2;
|
||||
preset.ringCenter = this.size / 2;
|
||||
preset.ringPerimeter = 2 * Math.PI * preset.ringRadius;
|
||||
preset.ringLength = (preset.end - preset.start) * Math.PI * preset.ringRadius / 180;
|
||||
preset.ringStart = preset.start * Math.PI * preset.ringRadius / 180;
|
||||
preset.ringEnd = preset.end * Math.PI * preset.ringRadius / 180;
|
||||
if (/^(ccw|counterclockwise)$/i.test(this.direction))
|
||||
preset.direction = DIR_CCW;
|
||||
else
|
||||
preset.direction = DIR_CW;
|
||||
return preset;
|
||||
},
|
||||
textureFG() {
|
||||
const textureSize = this.size;
|
||||
if (typeof this.texture === "string") {
|
||||
return this.parseTexture(this.texture, textureSize);
|
||||
} else if (Object.prototype.toString.call(this.texture) === "[object Array]") {
|
||||
if (typeof this.texture[0] === "number") {
|
||||
return this.parseTexture(this.texture, textureSize);
|
||||
} else {
|
||||
return this.parseTexture(this.texture[0], textureSize);
|
||||
}
|
||||
} else {
|
||||
return this.parseTexture("#1BB507", textureSize);
|
||||
}
|
||||
},
|
||||
textureBG() {
|
||||
const textureSize = this.size;
|
||||
if (typeof this.texture === "string") {
|
||||
return this.parseTexture(void 0, textureSize);
|
||||
} else if (Object.prototype.toString.call(this.texture) === "[object Array]") {
|
||||
if (typeof this.texture[0] === "number") {
|
||||
return this.parseTexture(void 0, textureSize);
|
||||
} else {
|
||||
return this.parseTexture(this.texture[1], textureSize);
|
||||
}
|
||||
} else {
|
||||
return this.parseTexture("#E2D8D8", textureSize);
|
||||
}
|
||||
},
|
||||
hasBackground() {
|
||||
return !!this.textureBG;
|
||||
},
|
||||
svgDataUrl() {
|
||||
let svg = this.createSVG();
|
||||
svg = `data:image/svg+xml,${encodeURIComponent(svg.replace(/ +/g, " "))}`;
|
||||
return svg;
|
||||
},
|
||||
style() {
|
||||
const style = {
|
||||
width: `${this.size}px`,
|
||||
height: `${this.size}px`,
|
||||
"--zui-progress-circle-ring-size": `${this.size}px`,
|
||||
"--zui-progress-circle-ring-width": `${this.ringWidth}px`
|
||||
};
|
||||
return Object.keys(style).map((key) => `${key}:${style[key]}`).join(";");
|
||||
},
|
||||
pointerStyle() {
|
||||
const style = {};
|
||||
const { start, end, ringRadius } = this.preset;
|
||||
let rotate = (end - start) * this.position + start;
|
||||
if (this.linecap === "round" || this.linecap === "butt") {
|
||||
rotate += this.ringWidth / 3 * 180 / (Math.PI * ringRadius);
|
||||
}
|
||||
const offset = this.pointerOffset || 0;
|
||||
style["--zui-progress-circle-pointer-rotate"] = `translate(-${offset}px, -50%) rotate(${rotate}deg)`;
|
||||
style["--zui-progress-circle-pointer-center"] = `${offset}px 50%`;
|
||||
return Object.keys(style).map((key) => `${key}:${style[key]}`).join(";");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
parseTexture(texture, textureSize) {
|
||||
if (!texture)
|
||||
return void 0;
|
||||
if (/^#[0-9a-f]+/i.test(texture)) {
|
||||
return {
|
||||
type: "color",
|
||||
value: texture
|
||||
};
|
||||
}
|
||||
const defId = generateId();
|
||||
if (/Gradient>/i.test(texture)) {
|
||||
if (/id="[^"]+"/.test(texture)) {
|
||||
texture = texture.replace(/id="[^"]+"/, `id="def_${defId}"`);
|
||||
} else {
|
||||
texture = texture.replace(
|
||||
/<(\w+Gradient) /,
|
||||
`<$1 id="def_${defId}" `
|
||||
);
|
||||
}
|
||||
return {
|
||||
type: "gradient",
|
||||
value: `url(#def_${defId})`,
|
||||
def: texture
|
||||
};
|
||||
}
|
||||
if (Object.prototype.toString.call(texture) === "[object Array]") {
|
||||
texture = this.createGradient(defId, texture.slice(1), texture[0]);
|
||||
return {
|
||||
type: "gradient",
|
||||
value: `url(#def_${defId})`,
|
||||
def: texture
|
||||
};
|
||||
}
|
||||
if (/<pattern /.test(texture)) {
|
||||
if (/id="[^"]+"/.test(texture)) {
|
||||
texture = texture.replace(/id="[^"]+"/, `id="def_${defId}"`);
|
||||
} else {
|
||||
texture = texture.replace(/<pattern /, `<$1 id="def_${defId}" `);
|
||||
}
|
||||
} else {
|
||||
texture = this.createPattern(`def_${defId}`, texture, textureSize);
|
||||
}
|
||||
return {
|
||||
type: "pattern",
|
||||
value: `url(#def_${defId})`,
|
||||
def: texture
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 创建渐变填充
|
||||
*
|
||||
* @param {color[]} stops 渐变颜色
|
||||
* @param {number} angle 渐变填充角度
|
||||
*/
|
||||
createGradient(id, stops, angle) {
|
||||
const step = 100 / (stops.length - 1);
|
||||
const stopNodes = new Array(stops.length).fill(null).map((_, idx) => {
|
||||
return `<stop offset="${step * idx * 100}%" stop-color="${stops[idx]}" />`;
|
||||
});
|
||||
return `<linearGradient id="def_${id}" x1="0%" y1="0%" x2="100%" y2="64.9%" gradientTransform="rotate(${angle})">
|
||||
${stopNodes.join("")}
|
||||
</linearGradient>`;
|
||||
},
|
||||
/**
|
||||
* 创建文理填充
|
||||
*
|
||||
* @param {string} img base64 image. URI not surpported.
|
||||
*/
|
||||
createPattern(id, img, size) {
|
||||
return `<pattern id="${id}" patternUnits="userSpaceOnUse" width="100%" height="100%">
|
||||
<image xlink:href="${img}" x="0" y="0" width="100%" height="100%"/>
|
||||
</pattern>`;
|
||||
},
|
||||
/**
|
||||
* 创建圆环
|
||||
*
|
||||
* @param {string} fill 纹理ID
|
||||
* @param {number[]} dasharray 弧形数据
|
||||
*/
|
||||
createCircle(fill, dasharray, type) {
|
||||
const { ringCenter, ringRadius, fixOverlay } = this.preset;
|
||||
const circle = {
|
||||
cx: ringCenter,
|
||||
cy: ringCenter,
|
||||
r: ringRadius,
|
||||
// 前景环稍大点, 用于遮盖底部环纹理
|
||||
"stroke-width": this.ringWidth,
|
||||
stroke: fill && fill.value,
|
||||
"stroke-linecap": this.linecap,
|
||||
"stroke-dasharray": dasharray.join(",")
|
||||
};
|
||||
if (fixOverlay) {
|
||||
const fw = type === "fg" ? this.ringWidth : this.ringWidth - 1;
|
||||
circle["stroke-width"] = fw > 8 ? fw : 8;
|
||||
}
|
||||
const props = Object.keys(circle).map((key) => circle[key] ? `${key}="${circle[key]}"` : "").join(" ");
|
||||
return `<circle fill="none" stroke-dashoffset="1" ${props}></circle>`;
|
||||
},
|
||||
generateDashArray(pos) {
|
||||
const {
|
||||
direction,
|
||||
ringStart,
|
||||
ringPerimeter,
|
||||
ringLength
|
||||
} = this.preset;
|
||||
let ringStartPos = direction === DIR_CCW ? ringStart + (1 - pos) * ringLength : ringStart;
|
||||
let dash1 = 0;
|
||||
let dash2 = 0;
|
||||
let dash3 = 0;
|
||||
dash2 = 1 + ringStartPos;
|
||||
dash3 = pos * ringLength;
|
||||
const npos = ringStartPos + pos * ringLength;
|
||||
if (npos > ringPerimeter) {
|
||||
dash1 = npos - ringPerimeter;
|
||||
dash2 = ringStartPos - dash1;
|
||||
} else {
|
||||
dash1 = 0;
|
||||
}
|
||||
return [dash1, dash2, dash3, ringPerimeter];
|
||||
},
|
||||
/**
|
||||
* 创建 SVG 图形
|
||||
*/
|
||||
createSVG() {
|
||||
const cirleBG = this.hasBackground ? this.createCircle(this.textureBG, this.generateDashArray(1)) : "";
|
||||
const cirleFG = this.createCircle(
|
||||
this.textureFG,
|
||||
this.generateDashArray(this.position),
|
||||
"fg"
|
||||
);
|
||||
const defs = [this.textureFG.def || "", this.textureBG && this.textureBG.def || ""];
|
||||
const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${this.size}" height="${this.size}">
|
||||
<defs>
|
||||
${defs.join("\n")}
|
||||
</defs>
|
||||
<g>
|
||||
${cirleBG}
|
||||
${cirleFG}
|
||||
</g>
|
||||
</svg>`;
|
||||
return svg;
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $props.pointer
|
||||
}, $props.pointer ? {
|
||||
b: $props.pointer,
|
||||
c: common_vendor.s($options.pointerStyle)
|
||||
} : {}, {
|
||||
d: $options.svgDataUrl,
|
||||
e: $props.debug
|
||||
}, $props.debug ? {} : {}, {
|
||||
f: common_vendor.n($props.debug ? "debug" : ""),
|
||||
g: common_vendor.s($options.style)
|
||||
});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-dbeba832"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/zui-progress-circle/components/zui-progress-circle/zui-progress-circle.js.map
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view ref="eleMeter" class="{{['data-v-dbeba832', 'zui-progress-circle', f]}}" style="{{g}}"><view class="zui-progress-circle-wrapper data-v-dbeba832"><image wx:if="{{a}}" class="zui-progress-circle-pointer data-v-dbeba832" mode="aspectFit" src="{{b}}" style="{{c}}"/><image class="zui-progress-circle-ring data-v-dbeba832" mode="aspectFit" src="{{d}}"/></view><view class="zui-progress-circle-slot data-v-dbeba832"><slot/></view><view wx:if="{{e}}" class="debug-frame data-v-dbeba832"><view class="cross-v data-v-dbeba832"></view><view class="cross-h data-v-dbeba832"></view><view class="half-size data-v-dbeba832"></view></view></view>
|
||||
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.zui-progress-circle.data-v-dbeba832 {
|
||||
--zui-progress-circle-debug-color: #f00;
|
||||
position: relative;
|
||||
}
|
||||
.zui-progress-circle-wrapper.data-v-dbeba832 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.zui-progress-circle-ring.data-v-dbeba832 {
|
||||
width: var(--zui-progress-circle-ring-size);
|
||||
height: var(--zui-progress-circle-ring-size);
|
||||
}
|
||||
.zui-progress-circle-slot.data-v-dbeba832 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: var(--zui-progress-circle-ring-width);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.zui-progress-circle-pointer.data-v-dbeba832 {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: var(--zui-progress-circle-pointer-rotate);
|
||||
transform-origin: var(--zui-progress-circle-pointer-center);
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
transition: transform 0.1s linear;
|
||||
}
|
||||
.debug-frame.data-v-dbeba832,
|
||||
.cross-v.data-v-dbeba832,
|
||||
.cross-h.data-v-dbeba832,
|
||||
.half-size.data-v-dbeba832 {
|
||||
position: absolute;
|
||||
}
|
||||
.debug-frame.data-v-dbeba832 {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid var(--zui-progress-circle-debug-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.cross-h.data-v-dbeba832, .cross-v.data-v-dbeba832,
|
||||
.half-size.data-v-dbeba832 {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: var(--zui-progress-circle-debug-color);
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.cross-v.data-v-dbeba832 {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
.cross-h.data-v-dbeba832 {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
.half-size.data-v-dbeba832 {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
border: 1px solid var(--zui-progress-circle-debug-color);
|
||||
background-color: transparent;
|
||||
border-radius: 50%;
|
||||
}
|
||||
Reference in New Issue
Block a user